sNews Forum

sNews 1.6 (previous version) => Miscellaneous Webdesign => Topic started by: Sven on September 21, 2007, 12:40:43 pm

Title: [SOLVED] Floating Div doesn't wrap the text around it in IE7
Post by: Sven 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 :
(http://pix.nofrag.com/6/d/1/d764660456589795026da0f6b62fct.jpg) (http://pix.nofrag.com/6/d/1/d764660456589795026da0f6b62fc.html)
Opera et Firefox are displaying as it should:
(http://pix.nofrag.com/9/5/b/3719dfdcc9a29189912a1daf2cdddt.jpg) (http://pix.nofrag.com/9/5/b/3719dfdcc9a29189912a1daf2cddd.html)
What's the way to fix that?
Thanks for any answer :)
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Patric Ahlqvist 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...
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Rui Mendes 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.
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Patric Ahlqvist on September 21, 2007, 01:05:03 pm
So wrapping works in IE7, then...
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Sven 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
(http://pix.nofrag.com/f/5/d/8977a1df9eb7ab70ff32e6fcf8168t.jpg) (http://pix.nofrag.com/f/5/d/8977a1df9eb7ab70ff32e6fcf8168.html)
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Sven on September 21, 2007, 01:08:28 pm
Sven can we have link for your site.
Cross-posting, Rui  ;)
Website in not yet online.
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: pwendel 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.

Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Sven on September 21, 2007, 01:26:47 pm
Thanks for the links, Per.
Denmark:1 point.  ;D
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Sven 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');}
}}}

}

Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: philmoz 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
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Joost 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.
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: philmoz 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...
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Rui Mendes 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.
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Sven 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.
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: philmoz 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.
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: philmoz on September 24, 2007, 10:23:57 am
maybe this will help...
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Sven on September 24, 2007, 10:24:29 am
That issue is pretty tough. :-\
Both solutions you suggest have been tested too... and no way.
Article's text in IE still not wrapping. Getting mad with it.(http://nomasis.com/depot/bang2.gif)
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Sven on September 24, 2007, 10:38:36 am
I've read most of those articles and despite several IE CSS tweakings, it still doesn't work...
 I'm gonna upload the whole enchilada online.
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Sven on September 24, 2007, 11:31:29 am
This is the link to long article test (http://www.hiseo.fr/home/test-long-article/).
Maybe the solution is under my eyes but I don't see it.

EDIT: URL now corrected
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Patric Ahlqvist on September 24, 2007, 12:05:22 pm
Hehe. localhost in that url, Philippe... your home server isn't online... Wrong ?
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Sven on September 24, 2007, 12:08:27 pm
Hehe. localhost in that url, Philippe... your home server isn't online... Wrong ?
Another Sven's exploit. ;)
Now good URL... ugh!
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Patric Ahlqvist on September 24, 2007, 12:14:47 pm
This is also off in IE7 ?

http://p-ahlqvist.com/snews_16/impolin/home/chocklad-dryck/

Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Sven on September 24, 2007, 12:26:05 pm
It works.
Wrapping around the image works and around the text box as well.
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Patric Ahlqvist on September 24, 2007, 12:32:43 pm
Now what on earth was the problem ?
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Sven on September 24, 2007, 12:34:12 pm
no... no...
I was saying it works with IE on YOUR website, not on mine (with same CSS code). :(
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Patric Ahlqvist on September 24, 2007, 12:53:32 pm
Aha... then there most likely is some sort of non-compatible crap going on, I think... Mind you, i didn't use only a <p> tag for that... In the article I put my img right floating, and then <p> tags, and in order to float the "textbox" I put that inside a div with the <p> tags in it... you noticed that, I'm sure.
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Sven on September 24, 2007, 01:02:44 pm
(...) I put that inside a div with the <p> tags in it... you noticed that, I'm sure.
Yeap Pat...
Even if I replace the links into the floating with text in a paragraph, I have same results.
Title: Re: Floating Div doesn't wrap the text around it in IE7
Post by: Sven on September 25, 2007, 07:57:01 am
 >:( IE6 behaves like Firefox, Opera and Safari!
I thought IE6 was a piece of crap until MS have decided to launch IE7 which is worst.
Is this progress?
Title: Re: [SOLVED] Floating Div doesn't wrap the text around it in IE7
Post by: Sven on September 25, 2007, 12:17:22 pm
 :D
Found it!
That was a hack for IE6 which was causing the problem.
I've just splitted my CSS for IE in two.
What was causing the problem in IE7?
Quote
* {min-height:1px;}
Ouf!
Thanks for having answered.
Have a nice day pals.
Title: Re: [SOLVED] Floating Div doesn't wrap the text around it in IE7
Post by: Patric Ahlqvist on September 25, 2007, 12:33:50 pm
Hehe... thought it was something not compatible... It's always one of those shitty little things. Glad you've found it, Philippe.
Title: Re: [SOLVED] Floating Div doesn't wrap the text around it in IE7
Post by: Sven on September 25, 2007, 12:39:47 pm
Thanks Pat.
It's really a pain in the /*CENSORED*\ to manage both IEs.
Title: Re: [SOLVED] Floating Div doesn't wrap the text around it in IE7
Post by: pwendel on September 25, 2007, 01:20:46 pm
Great that you found it :)

I dont even have IE7 installed but I suppose it would be nice to check forsuch anomalies :)