Problems with float and ie

different behaviour in ie than in moz and opera

[inflagranti]

For our new layout I wanted to do everything using CSS. So I implemented our menu left to the content using float:left. The content floats nicly around the menu on Mozilla and Opera. In IE (of course) there is a problem with content (a table for instance) which is wider than the div holding the content to float around the mneu. IE, instead of enlarging the DIV as Moz and Opera do, wraps that content after the floating menu as if there was no floating defined.

A simpliefied test-case can be found here: <Sorry, no personal URLs. See TOS [webmasterworld.com]>. Resize the window in Mozilla and in IE. Mozilla will show a scrollbar if the table doesn't fit into the viewport anymore, where IE will move the table down to the end of the menu.

I wondered if there is a way to control the behaviour of IE so it is the same as in Mozilla (not wrapping but resizing the div). Maybe there is even a better solution than mine with the float (Keep in minde that I don't want to use tables!). But its really hard to achieve, as I need to have the menu and the content to be the same height.

Hope I could make myself clear, pleae ask if you don't understand the problem.

[edited by: tedster at 6:11 pm (utc) on Mar. 30, 2004]

[Stratus42]

Hi inflagranti!

just a quick note about urls - they'll probably be edited out soon enough - it's usually better to post bits of script

IE dosn't like it when you put a 100% table in a div or in your case - <TABLE border=0 cellpadding=1 cellspacing=0> - which defaults to 100 I beleive. at least that's what I've found.. and it frequently messes it up. I've found better luck with reducing the width of the table to 90% or 95% for IE.

Also.. go through all your code on the right hand side of that nav bar - I've found that - particularly IE - gets VERY confused if you've forgotton to close a quote, or close a tag - and specifically - it does exactly what you say your page is doing in this situation.

I think in this case you'd have better luck with nesting tables, or perhaps going with a hybrid approach to the page using tables for your basic layout and div's inside of them for most of your presentational stuff.

The table dosn't shift down below the nav for me unless I bring my browser size down to less than 1024x768.

Using an XHTML Transitional or Strict doctype at the start - instead of the current html 4.01 transitional - will make your css behave more predictably (particularly if you use strict) across browsers but it means going through all your code and changing stuff like this: <TABLE border=0 cellpadding=1 cellspacing=0> to something more like this: <table border="0" cellpadding="1" cellspacing="0"> and a few more changes.

:-)
Lana

[Stratus42]

oh.. also.. a quick fix solution might be to take the nowraps out of your table.. - this of course will allow your cell contents to wrap around and will effect how the table looks.. but it might prevent the IE problem

<th nowrap>Zusatz</th>
<th nowrap>Postleitzahl</th>
<th nowrap>Ortschaft</th>
</tr>
<tr>
<td nowrap>Frau</td>

will become

<th>Zusatz</th>
<th>Postleitzahl</th>
<th>Ortschaft</th>
</tr>
<tr>
<td>Frau</td>

[inflagranti]

Thanks for your tips. I'll check if there are any unclosed tags in my HTML, but I doubt it (Dremweaver should highlight them I suppose).

Changing the nowrap in the tables or the width to 99% is not a solution as this is dynamically generated code and I don't want put workarounds in there.

Looks like I really will have to fall back to use tables, at least one for the menu/content-part.

PS: Why are links edited out?

[Stratus42]

posting links isn't allowed unless it's for an online resource (like a W3C page) or a tutorial or something. Links to demo pages or test pages are usually removed by the bosses to keep the information here.. imagine if I was reading this thread next month - I couldn't learn from it if you had moved or removed your demo pages ..

I've just been playing around with your test code there - and I may have a solution for you.. I just need to hone it a bit - gimme a few more minutes and I'll post

Lana

[Stratus42]

hey.. ok.. I think I've found a possible solution for you.

I will refer you to [saila.com...] and the general page [saila.com...] - Saila's templates are among the only ones I've seen, that don't break in IE when the page is resized to make a div smaller than it's content.

He does it .. (I think, as I havn't investigated it very closely) - by using <hr>'s to keep it from collapsing in IE 6 - it does look ingenious.

This layout is a 3 col.. but I'm SURE you could easily adapt it to be a 2 col.

Lana

[DrDoc]

You can always give your content div a left margin equal to the width of the navigation div.

[inflagranti]

@stratus

Thanks for the links, I'll try this tomorrow at work, hope it will do the job. I searched google and "a list apart" for any of those, but thats the first solution I found. How did you find it?

Btw, you were right, my external links to the testcase have already been removed :(

@DrDoc

There already is a margin, but that doesn't solve the problem

[inflagranti]

Tried the thing with the hr, was no solution either. Tried it setting to 99% or 101%, didn't help.

The problem is that the #Content-div seems not to expand above the right border, even if you have a spacer-hr of the size of 1000%.

[SuzyUK]

inflagranti

I think I know what you're getting at, and if so yes there is a way to make IE behave.... however it's strict/quirks mode doctype dependant, which one are you using?

Suzy

[inflagranti]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I don't think strict doctype is a possibility as this would mean to ensure all our dynamic content is 100% compilant, wouldn't it?

[SuzyUK]

>>all compliant
not necessarily.. depends on whether you want it to validate as W3 compliant.

I wanted to know your Doctype here, not because it works in one or the other but because IE's Float Model has problems in both Strict and Quirks mode and a fix is required for both but is different depending on which mode you're in :)

I could try to explain, but instead I'll refer you to The IE Float Model Problem [positioniseverything.net] better explained by BigJohn.. though still not funny ;)

example CSS and the fix:

#left {
background: #000;
color: #fff;
width: 200px;
float: left;
}

#right {
background: #f00;
color: #000;
margin-left: 200px;
}

/* hide from mac \*/
* html #right {margin-left: 0; height: 1%;}
* html #left {margin-right: -3px;}
/* end hide */

The bit in the hack explained...

#right - height 1%
could've used width, but in IE that's probably asking for more trouble ;) A 1% or 1px height is all that's required to trigger IE5.5 style "quirky" Float Model which is easier to work with in this case... and IE will incorrectly overflow it's container anyway...

#right - margin-left: 0;
because IE doesn't need it in quirky Float mode and without resetting it back to 0 we can't fix the 3px gap which appears when we use the aforementioned height trigger.

#left - margin-right: -3px;
used in conjunction with the previous fix then fixes the 3px bug gap..

HTH
Suzy

[inflagranti]

Thanks a lot SuzyUK, thats looks promising. Will try it tomorrow at work. I remember having visited the site you linked to, but didn't find the quirks there.

God would my life be easier without ie... ;)