Welcome to WebmasterWorld Guest from 54.162.239.134

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Positioning Layout IE 5.5 Display Problems

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

10+ Year Member



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)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

10+ Year Member



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>
</div>
</div>
<!--END header-->

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

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

10+ Year Member



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)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

10+ Year Member



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

-- MJWinkel

 

Featured Threads

Hot Threads This Week

Hot Threads This Month