Please login or register.

Login with username, password and session length
Advanced search  
Pages: [1] 2 3

Author Topic: [SOLVED] Floating Div doesn't wrap the text around it in IE7  (Read 9706 times)

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
[SOLVED] Floating Div doesn't wrap the text around it in IE7
« on: September 21, 2007, 12:40:43 pm »

Hello dudettes,
Hello dudes,

do you have such an issue with IE7?
A Div float right does not seem to be enough for IE :

Opera et Firefox are displaying as it should:

What's the way to fix that?
Thanks for any answer :)
« Last Edit: September 25, 2007, 12:13:39 pm by Sven »
Logged

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • “I'm a self-made man and worships my creator.”
    • p-ahlqvist.com
Re: Floating Div doesn't wrap the text around it in IE7
« Reply #1 on: September 21, 2007, 12:45:02 pm »

Sven, I don't have IE7, so I really can't tell ya... is the same problem appearing here: http://p-ahlqvist.com/snews_16/impolin/home/chocklad-dryck/ ?

If not, have a lookis at the code, and if it does, provide us with your code, if possible...
Logged
"It's only dead fish that goes with the flow... "
Updated

Rui Mendes

  • Development,Testing, Support
  • Hero Member
  • *****
  • Karma: 195
  • Posts: 1009
  • sNews1.7
    • Comunidade Portuguesa
Re: Floating Div doesn't wrap the text around it in IE7
« Reply #2 on: September 21, 2007, 01:03:43 pm »

Sven can we have link for your site.

My computer has IE6 and FF, and I can try with another has IE7

Patric, I see your website, but no different with (IE6, IE7 and FF) show perfect.
Logged
Need a Job on Europe. Linkdin - Facebook / Group

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • “I'm a self-made man and worships my creator.”
    • p-ahlqvist.com
Re: Floating Div doesn't wrap the text around it in IE7
« Reply #3 on: September 21, 2007, 01:05:03 pm »

So wrapping works in IE7, then...
Logged
"It's only dead fish that goes with the flow... "
Updated

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Floating Div doesn't wrap the text around it in IE7
« Reply #4 on: September 21, 2007, 01:06:50 pm »

 :)
Hello Pat,
nice...
well same code with an image inside works, but it seems the text content in this floating Div is the cause of this issue.
This is the Output code:
Code: [Select]
<div class="article">
                <h2><span>Test long article</span></h2>
<div class="sub-menu">
<h4>Pages:</h4><span class="current-sub-menu">1. Test long article</span><br><a href="home/test-long-article/test-subpage2">2. Test subpage2</a><br></div><p>PAGE 1<br>Sed ut perspi
Now, the CSS:
Code: [Select]
.sub-menu {
float: right;
margin-right: 10px;
padding: 10px;
border: thin inset #333333;
margin-top: 40px;
background-color: #000000;
background-image: url(../design/sum-bg.gif);
background-repeat: repeat-x;
background-position: top;
margin-bottom: 10px;
margin-left: 10px;
}
.sub-menu a {
font-weight: 700;
text-decoration: none;
}
.sub-menu a:hover {
font-weight: 700;
text-decoration: none;
color: #666;
}
.sub-menu h4 {
font-size: 1.2em;
font-weight: 700;
color: #CCC;
margin-top: 0px;
}
And a screenshot with Webdev ON

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Floating Div doesn't wrap the text around it in IE7
« Reply #5 on: September 21, 2007, 01:08:28 pm »

Sven can we have link for your site.
Cross-posting, Rui  ;)
Website in not yet online.

pwendel

  • Full Member
  • ***
  • Karma: 8
  • Posts: 106
    • sNews 1.6 in Danish
Re: Floating Div doesn't wrap the text around it in IE7
« Reply #6 on: September 21, 2007, 01:13:48 pm »

Pretty sure this is just part of the normal IE7 float bugs: http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/  (#10 and 11)

I remember several ways to fix this (for other versions), like adding a 1% height placeholder and so on, but I havent really used IE7 myself yet, so unsure if the old fixes are still valid.

In any case, here are some links for inspiration:

Position is everythings buglist w/fixes: http://www.positioniseverything.net/explorer.html

Article on hasLayout fix (unsure of its current validity): http://www.satzansatz.de/cssd/onhavinglayout.html

Per.

Logged
"Opportunity is missed by alot of people because it comes dressed in blue overalls and looks like hard work" -- Thomas Edison (1847-1931)

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Floating Div doesn't wrap the text around it in IE7
« Reply #7 on: September 21, 2007, 01:26:47 pm »

Thanks for the links, Per.
Denmark:1 point.  ;D

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Floating Div doesn't wrap the text around it in IE7
« Reply #8 on: September 23, 2007, 01:50:46 pm »

Having an awakened glance to the output code I found out the source of this issue but didn't succeed to correct it.

The fact is that this floating Div is not at the right place.
That is outputed:
Quote
<div id="content">
<h2></h2>
<div class="submenu"></div>
<p></p>
</div>
If the Div Submenu is displayed inside the paragrah, IE feels as good as FF and Opera; just like this:
Quote
<div id="content">
<h2></h2>
<p><div class="submenu"></div></p>
</div>
The problem is that I don't how to move the submenu Div inside the paragraph.
Every try leads to a syntax error (which should my pseudo since I'm very stupid when having to move PHP code  ::)).
Can someone have a look at the above code (coming from skidoo's snews-split Mod):

It would be great if you can give a hand.
Thanks,
Sven

Code: [Select]
// CENTER
function center() {
switch(true) {
case isset($_GET['category']): $id = $action = get_id('category'); break;
case isset($_GET['action']): $action = clean(cleanXSS($_GET['action'])); break;
case isset($_GET['articleid']): $articleid = get_id('articleid'); break;
}
switch(true) {
case isset($_POST['search_query']): search(); return; break;
case isset($_POST['comment']): comment('comment_posted'); return; break;
case isset($_POST['contactform']): contact(); return; break;
case isset($_POST['Loginform']): administration(); return; break;
case isset($_POST['submit_text']):
if ($_SESSION[db('website').'Logged_In'] == token()) {processing(); return;}
else {echo notification(1,l('error_not_logged_in'),'home');} break;
}
if ($_SESSION[db('website').'Logged_In'] == token()) {
switch ($action) {
case 'administration': administration(); return; break;
case 'settings': settings(); return; break;
case 'categories': admin_categories(); return; break;
case 'admin_category': form_categories(); return; break;
case 'articles': admin_articles('article_view'); return; break;
case 'extra_contents': admin_articles('extra_view'); return; break;
case 'pages': admin_articles('page_view'); return; break;
case 'sub_admin_article': form_subarticles(''); return; break;
case 'sub_article_new': form_subarticles('sub_article_new');  return; break;
case 'admin_article': form_articles(''); return; break;
case 'article_new': form_articles('article_new'); return; break;
case 'extra_new': form_articles('extra_new'); return; break;
case 'page_new': form_articles('page_new'); return; break;
case 'editcomment': edit_comment(); return; break;
case 'files': files(); return; break;
case 'process': processing(); return; break;
case 'logout': session_destroy();
echo '<meta http-equiv="refresh" content="1; url='.db('website').'">';
echo '<h2>'.l('log_out').'</h2>'; return; break;
}
}
switch ($action) {
case 'archive': archive(); break;
case 'sitemap': sitemap(); break;
case 'contact': contact(); break;
case 'login': login(); break;
case '404': error404(); break;
default:
$article = get_id('article');
$subpage = get_id('subtitle');
$title_not_found = '<h2>'.l('not_found').'</h2>';
$currentPage = strpos($article, l('paginator')) === 0 ? str_replace(l('paginator'), '', $article) : '';
$home = l('home_sef'); $categorySEF = get_id('category');
$categorySEF = empty($categorySEF) ? $home : $categorySEF;
$use_cat_id = $categorySEF == $home ? 0 : retrieve('id', 'categories', 'seftitle', $categorySEF);
$query_articles = "SELECT * FROM ".db('prefix')."articles WHERE published = 1 AND SUBSTRING(position, 1, 1) != '2'";
if (!empty($subpage) && !empty($article)) { $query_sub_articles= "SELECT * FROM ".db('prefix')."subarticles where seftitle='$subpage'"; }
  if (!empty($article) && empty($currentPage)) {$query_articles .= " AND seftitle = '$article'";}
else if ($categorySEF == $home && s('display_page') <> 0) {$id_page = s('display_page'); $query_articles .= " AND id = '$id_page'";}
  else {
if (s('display_new_on_home') == 'on') {$query_articles .= $use_cat_id != 0 ? " AND category = $use_cat_id" : '';}
else {$query_articles .= " AND category = $use_cat_id";}
$query_articles .= " AND position <> 3 ORDER BY date DESC";

$result_articles = mysql_query($query_articles);
$numrows_articles = mysql_num_rows($result_articles);
if (!$result_articles || !$numrows_articles) {echo $title_not_found; return;}
else {
$articleCount = s('article_limit');
$article_limit = (empty($articleCount) || $articleCount < 1) ? 100 : $articleCount;
$totalPages = ceil($numrows_articles/$article_limit);
if (!isset($currentPage) || !is_numeric($currentPage) || $currentPage < 1) {$currentPage = 1;}
else if ($currentPage > $totalPages) {$currentPage = $totalPages;}
$query_articles .= " LIMIT ".($currentPage - 1) * $article_limit.", ".$article_limit;
}
}
$result = mysql_query($query_articles);
$numrows = mysql_num_rows($result);
if (!$result || !$numrows) {echo $title_not_found;}
else {
$link = '<a href="'.db('website');
while ($r = mysql_fetch_array($result)) {
$infoline = $r['displayinfo'] == 'YES' ? true : false;
$text = stripslashes($r['text']);
if (!empty($currentPage)) {$short_display = strpos($text, '[break]'); $shorten = $short_display == 0 ? 9999000 : $short_display;}
else {$shorten = 9999000;}
$comments_query = "SELECT * FROM ".db('prefix')."comments WHERE articleid = $r[id] AND approved = 'True'";
$comments_result = mysql_query($comments_query);
$comments_num = mysql_num_rows($comments_result);
$a_date_format = date(s('date_format'), strtotime($r['date']));
      $position = $r['position'];
$category = $r['category'] == 0 ? $home : retrieve('seftitle', 'categories', 'id', $r['category']);
if (!empty($subpage) && $r['subarticle'] == true) {
$title_sub=mysql_fetch_array(mysql_query("select title from ". db('prefix'). "subarticles where seftitle='$subpage' and article_id='$r[id]';"));
$title=$title_sub['title'];
} else {
$title = $r['title'];
}
if ($r['displaytitle'] == 'YES') { if (($r['subarticle'] == true and empty($article)) or (preg_match("/p_[0-9]+/",$article)))
# hiseo design question /* { echo '<h2>'. $link.$category.'/'.$r['seftitle'].'/" title="'.$title.'">'.$title.'</a></h2>';} */
{echo '<h2><span>'.(!$article ? $link.$category.'/'.$r['seftitle'].'/" title="'.$title.'">'.$title.'</a>' : $title).'</span></h2>';}
else {
echo '<h2><span>'.(strlen($text) > $shorten ? $link.$category.'/'.$r['seftitle'].'/" title="'.$title.'">'.$title.'</a>' : $title).'</span></h2>';}
}
if ($r['subarticle'] == true && !empty($article) && !preg_match("/p_[0-9]+/",$article)) { $query_sub_articles="SELECT * from ". db('prefix'). "subarticles where article_id='$r[id]' order by page_number;";   
$sub_result = mysql_query($query_sub_articles);
$numrows = mysql_num_rows($sub_result);
echo "<div class=\"sub-menu\">\n<h4>". l('menu_sub_pages') ."</h4>";
$point= (empty($subpage)) ? "<span class=\"current-sub-menu\">1. $r[title]</span><br />": "<a href=\"$categorySEF/$r[seftitle]/\">1. $r[title]</a><br />";
echo $point;

while ($sub_r = mysql_fetch_array($sub_result)) {
$point= ($sub_r['seftitle'] == $subpage)?"<span class=\"current-sub-menu\">" . ($sub_r[page_number]).". " . $sub_r[title]. "</span><br />": "<a href=\"$categorySEF/$r[seftitle]/$sub_r[seftitle]\">" .  ($sub_r[page_number]) . ". $sub_r[title]</a><br />";
echo $point;

}
echo "</div>";
}
if (!empty($subpage)) {
$query_sub_articles="SELECT * from ". db('prefix'). "subarticles where seftitle='$subpage' and article_id=$r[id];";   
$sub_result = mysql_query($query_sub_articles);
$numrows = mysql_num_rows($sub_result);
while ($sub_r = mysql_fetch_array($sub_result)) {
$id_sub=$sub_r['id'];

file_include(str_replace('[break]', '', $sub_r['text']), $shorten);
}

} else {
file_include(str_replace('[break]', '', $text), $shorten);
}
$commentable = $r['commentable'];
$edit_link = $link.'index.php?action=admin_article&amp;id='.$r['id'].'" title="'.l('edit').' '.$title.'">'.l('edit').'</a>';
if (!empty($subpage) && $r['subarticle'] == true) {
$edit_link = $link.'index.php?action=sub_admin_article&amp;id='.$id_sub.'" title="'.l('edit').' '.$title.'">'.l('edit').'</a>';
}
if (!empty($currentPage)) {
if ($infoline == true) {
$tag = explode(',', tags('infoline'));
foreach ($tag as $tag) {
switch (true) {
case ($tag == 'date'): echo $a_date_format; break;
case ($tag == 'readmore' && strlen($r['text']) > $shorten):

echo $link.$category.'/'.$r['seftitle'].'/" title="'.l('read_more').'">'.l('read_more').'</a> '; break;
case ($tag == 'readmore' && $r['subarticle'] == true):
echo $link.$category.'/'.$r['seftitle'].'/" title="'.l('read_more').'">'.l('read_more').'</a> '; break;
case ($tag == 'comments' && ($commentable == 'YES' || $commentable == 'FREEZ')):
echo $link.$category.'/'.$r['seftitle'].'/#'.l('comment').'1" title="'.l('comments').'">'.l('comments').' ('.$comments_num.')</a> '; break;
case ($tag == 'edit' && $_SESSION[db('website').'Logged_In'] == token()): echo ' '.$edit_link; break;
case ($tag != 'readmore' && $tag != 'comments' && $tag != 'edit'): echo $tag; break;
}
}
}
else if ($_SESSION[db('website').'Logged_In'] == token()) {echo '<p>'.$edit_link.'</p>';}
}
else if (substr($position, 0, 1) != '2' && empty($currentPage)) {
if ($r['subarticle'] == true && !empty($article) && !preg_match("/p_[0-9]+/",$article)) { $query_sub_articles="SELECT * from ". db('prefix'). "subarticles where article_id='$r[id]' order by page_number;";   
$sub_result = mysql_query($query_sub_articles);
$numrows = mysql_num_rows($sub_result);
echo "<p class=\"sub-number\">";

$point = (empty($subpage))? l(sub_pages) ."<span class=\"current-sub-number\">1</span>&nbsp;&nbsp;&nbsp;":l(sub_pages) . "<a href=\"$categorySEF/$r[seftitle]\" title=\"$r[title]\">1</a>&nbsp;&nbsp;&nbsp;";
echo $point;
while ($sub_r = mysql_fetch_array($sub_result)) {
$point=($sub_r['seftitle'] == $subpage )? "<span class=\"current-sub-number\">" . ($sub_r[page_number]) ."</span>&nbsp;&nbsp;&nbsp;" :"<a  href=\"$categorySEF/$r[seftitle]/$sub_r[seftitle]\" title=\"$sub_r[title]\">". ($sub_r['page_number']) . "</a>&nbsp;&nbsp;&nbsp;";
echo $point;

}
echo "</p>";
}

if ($infoline == true) {
$tag = explode(',', tags('infoline'));
foreach ($tag as $tag ) {
switch ($tag) {
case 'date': echo $a_date_format; break;
case 'readmore': ; break;
case 'comments': ; break;
case 'edit': if ($_SESSION[db('website').'Logged_In'] == token()) {echo ' '.$edit_link;} break;
default: echo $tag;
}
}
}
else if ($_SESSION[db('website').'Logged_In'] == token()) {echo '<p>'.$edit_link.'</p>';}
}

}
if (!empty($currentPage) && ($numrows_articles > $article_limit) && s('display_pagination') == 'on') {
paginator($categorySEF, $currentPage, $totalPages, '', l('paginator'));
}
if (!empty($article) && empty($currentPage) && $infoline == true) {
if ($commentable == 'YES') {comment('unfreezed');}
else if ($commentable == 'FREEZ') {comment('freezed');}
}}}

}

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
Re: Floating Div doesn't wrap the text around it in IE7
« Reply #9 on: September 24, 2007, 01:10:59 am »

ok, so you are trying to do something like
http://www.fiddlenfolk.com/fiddle/first-fiddle/
which shows fine in my IE7

the more_articles item is using
#insert {background-color:#dfe; padding:.3em; margin:0em .5em .5em .5em; height: auto; width: 10em; float: right; }
what is more, it is placed before the center() function in index.php.

How does it view to you??

also, a div shouldn't be (as I understand it) inside a paragraph.
Oh, and is there something in the center styling that is preventing IE from displaying as wanted?

maybe this 1.5 mod (works with 1.6) will help out.
http://snewscms.com/forum/index.php?topic=2121.0
« Last Edit: September 24, 2007, 01:18:12 am by philmoz »
Logged
Of all the things I have lost, it is my mind that I miss the most.

Joost

  • Guest
Re: Floating Div doesn't wrap the text around it in IE7
« Reply #10 on: September 24, 2007, 01:41:31 am »

<p> is coming from the database, so there is no way to put the menu in there (no challenge here).
What does the styling of <p> look like?  I missed that one.
Logged

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
Re: Floating Div doesn't wrap the text around it in IE7
« Reply #11 on: September 24, 2007, 01:54:52 am »

hmmm... in your sbmenu styling, (straw clutching cos I'm a klutz when it comes to css) try putting in
height and width...
or display:inline
or similar...
Logged
Of all the things I have lost, it is my mind that I miss the most.

Rui Mendes

  • Development,Testing, Support
  • Hero Member
  • *****
  • Karma: 195
  • Posts: 1009
  • sNews1.7
    • Comunidade Portuguesa
Re: Floating Div doesn't wrap the text around it in IE7
« Reply #12 on: September 24, 2007, 01:56:42 am »

Hello Philmoz.

In IE6 and FF2 everything is fine (same as picture)
Quote
also, a div shouldn't be (as I understand it) inside a paragraph.
Agree with you Phil.
Logged
Need a Job on Europe. Linkdin - Facebook / Group

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Floating Div doesn't wrap the text around it in IE7
« Reply #13 on: September 24, 2007, 08:43:57 am »

Hello all,
thanks for having answered...
<p> is coming from the database, so there is no way to put the menu in there (no challenge here).
What does the styling of <p> look like?  I missed that one.
there's not <p> style.
Just those:
Code: [Select]
/* Content */
#content {float:left; width:530px; margin:0; padding:0 0 0 20px;}

/* Content - article */
#content .article {clear:both;margin:0;padding:20px;background:url("../design/content_article_bg.jpg") 0 0 no-repeat;
}
Quote
also, a div shouldn't be (as I understand it) inside a paragraph.
Agree with you Phil.
:-[
hmmm... in your sbmenu styling, (straw clutching cos I'm a klutz when it comes to css) try putting in
height and width...
or display:inline
or similar...
I tried too but was unsuccessful.

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
Re: Floating Div doesn't wrap the text around it in IE7
« Reply #14 on: September 24, 2007, 10:08:59 am »

Quote
<span class="current-sub-menu">1. Test long article</span><br><a href="home/test-long-article/test-subpage2">2. Test subpage2</a><br>
Um, ok, try looking for the straw amonst the needles, and put in <p>tags around your span
Quote
<p><span class="current-sub-menu">1. Test long article</span><br><a href="home/test-long-article/test-subpage2">2. Test subpage2</a><br></p>

also, how about a clear:none; in main class.
Logged
Of all the things I have lost, it is my mind that I miss the most.
Pages: [1] 2 3