Disappearing Box in IE - why?

[johnnyb]

Hi,
I'm working on a layout and have an absolutely positioned box that is disappearing when I view it in IE - both 6 & 7.

Here's the layout, (I have several elements with visibility:hidden because I was wondering if my disappearing boxes were behind them. They're not): http://beta.4roadservice.com/searchresults.php

If you take a look in IE then in opera or firefox you'll see what's missing.

The stylesheet is at http://beta.4roadservice.com/style/screen.css

The box is classname .graphic and the listings are ".results #main ol li" There's a classname of .results on the body tag.

Both the .graphic box and the li it's in have layout, and the rest of the normal fixes aren't working.

Any ideas would be appreciated.

John

[_Aerospace_Eng_]

Don't use XHTML 1.1 because its likely you probably have no idea how to use it correctly. Do you know how to pass the application/xhtml+xml headers? If not then use XHTML 1.0 Strict instead. As for your issue, why are you using position:absolute? Why not just float the boxes?

Ugh just looked at the rest of your CSS. You really shouldn't be using as much absolute positioning as you are. Almost all layouts require little or NO absolute positioning.

[koyama]

I'd agree with Aero. But just to explain things, this is a known IE bug:

IE/Win: floats and disappearing absolutely positioned divs (http://www.brunildo.org/test/IE_raf3.html)

It has only partially been fixed in IE7. It may occur when you have an absolutely positioned element next to a float. The fix is to avoid that the elements are adjacent to each other in the source code.

Possible solution:

<div class="graphic">Hi!</div>
<div></div>
<div class="details">
<p class="adr">
<span class="locality">Montréal</span>, <span class="region">Québec</span>
</p>
<p class="tel"><abbr class="type" title="work, voice">Phone</abbr><span class="value">1-800-636-1234</span></p>
</div>

[johnnyb]

For the XHTML 1.0 Strict vs. 1.1 issue - I've tried using 1.0 strict several times but found it more difficult to get everything to work and validate properly. However, it's something I'd like to know more about. Do you know a good resource other than the cryptic & hard to find what you want W3C site?

The reason I'm using position:absolute is because I am trying to maintain as meaningful and order as possible in the source. Theoretically then each item in the search results would have a source like this:


business name
logo
contact info
other info, and a link to a more detailed page


The use of position:absolute in #branding is for a different reason. Shrink the layout really narrow and you'll see the logo & road graphic lay over each other. This allows for narrow screens, (of course, I'll put some sort of min-width eventually). I can't remember right now why I made the whole #branding position:absolute. It will probably change in the future, this is still a work in progress.

[johnnyb]

@koyama: I started typing my last reply before your post came up. You can see my reasoning for the position:absolute above.

Your possible fix does work, although I will read through the link you provided and see if I can find a way that doesn't involving extra random markup. Thanks a lot.

[johnnyb]

I've decided to switch the positions of the graphic box and the business name, therefore making this layout possible without absolute positioning.

With the IE bug and having to add an extra, empty, div it's not worth the slight big of extra semantic meaning I get from the HTML. Especially since a good argument can be made for having the logo before the business name anyway, (for example, cingular).

John