homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS Positioning Layout IE 5.5 Display Problems

 4:39 pm on Nov 12, 2002 (gmt 0)

I am working on a 3 column layout with a header and footer similar to the new design of [wired.com...]

The design works well in IE 6 and NN 6.

However, there are serious display problems with the header in IE 5.5. There is also a bug with first line of text "Location: Library Home" in the middle column.

Please suggest a solution.

Here is the beta site: <sorry, no personal URLs>
Here is the relevant CSS: <sorry -- too much code>

[edited by: tedster at 7:57 am (utc) on Nov. 13, 2002]



 8:10 am on Nov 13, 2002 (gmt 0)

Although my extensive edit to your most might seem to say otherwise, I really do welcome you to WebmasterWorld.

To better understand what my edit is all about, please read this thread: Posting Code [webmasterworld.com]

Also, we do not allow links to sites where the member has any affiliation, even to beta pages. Sorry that it must be this way, but when it is any other way the amount of self promotion on the boards starts to drown out the useful discusion.


All this leaves us where, in terms of your issue?

I notice that you validated both your XHTML and your CSS through the W3C. That's the most important first step to a debug.

So now we need you to help us out. If you zero in on the exact parts of your code that are being mangled by IE 5.5, you are welcome to post short snippets to illustrate the problem. By focusing on the specific area, you will make it possible and easy for the members here to suggest possible solutions.


 3:58 pm on Nov 13, 2002 (gmt 0)

Problem restated:
I am working on a 3 column layout with a header and footer. The design works in IE 6 and NN 6.

However, there are serious display problems with the header in IE 5.5. The text in .hdrlogo displays as a white box.

I am not sure if the problem relates to the css for the three columns. The right and left column are postion: absolute with a % for width. The middle column has no position. All three columns are contained within a
<div> with a position: relative.

Here is the header CSS:
.hdr { background-image: url(../media/bk.gif); border-bottom: 2px solid #000; }
.hdr .content {font-size: 100%;line-height: 135%;color: #fff; margin: 0; padding: 0; position:relative;}
.hdr .hdrlogo {text-align: left; float: left;}
.hdr .hdrlinks {text-align: right; float: right;}
.wrap {position: relative; width: 98%;}

Here is the header xhtml code:
<!-- BEGIN header -->
<div class="hdr">
<div class="content">
<div class="clear"></div>
<div class="hdrlogo"><span class="logo">&nbsp;Roscoe L. West Library</span> <span class="tag">at The College of New Jersey</span></div>
<div class="hdrlinks"><a title="Library Catalog" href="http://libcat.tcnj.edu/">Library Catalog</a> ¦ <a title="Site Map" href="http://www.tcnj.edu/%7elibrary/sitemap.html">Site Map</a> ¦ <a title="Ask A Librarian" href="http://www.tcnj.edu/%7elibrary/ask.html">Ask A Librarian</a>&nbsp;&nbsp;</div>
<div class="clear"></div>
<!--END header-->

<!-- BEGIN wrap -->
<div class="wrap">

Longhaired Genius

 5:19 pm on Nov 13, 2002 (gmt 0)

If you give .hdr a height, that might help.

But in general, your approach looks to me to be just too complex. You're giving yourself a very difficult row to hoe.

Convoluted and complicated css is bad css. To start with you should get your content onto the page in the simplest way you can.


 5:42 pm on Nov 13, 2002 (gmt 0)

The text in .hdrlogo displays as a white box.

This particular text is pretty far into a chain of inheritance from multiply nested divs.

The div with class="hdr" contains a nested div with class="content". Then nested inside that div there is another with class="hdr.logo". Then inside that div you have two span tags around the text, each with a different class.

I agree with Longhaired_Genius on this one. The browser code that renders CSS is a fragile thing, and the earlier the browser version, the more fragile it gets.

To avoid confusing the rendering engine, try to simplify the div structure to include as little multiple nesting as possible. This also makes your code much easier to work on in the future.


 12:05 am on Nov 14, 2002 (gmt 0)

Thanks Longhaired Genius!
Adding a height to the header fixed the display problem.

-- MJWinkel

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved