Sent by Alan Gresley on 8 October 2007 14:02
Blake wrote:
> Hi List,
>
> I have a number of problems in IE7, I can't imagine what it's like in
> IE6 but I do need it to play nice in IE6 too.
>
> So at the moment the #branding DIV is not showing up on IE7, the
> vertical spacing on the nav is out-of-whack, and the links in the
> #site-info DIV are not lining up properly.
>
> In Firefox it looks perfect.
>
> http://blakehaswell.com/others/pts/
>
> Thanks in advance,
> Blake
Hi Blake
The branding div is hidden under the floated #nav div and unfloating that reveals the branding div.
The vertical spacing is out of whack because you have given a height in pixels for the #nav div.
There just isn't enough room for the menu to fit so it slightly creeps under the banner image. Your
page in IE6 is a classic test for the IE bug files and demonstrate what happens when you used
relative positioning on a div without layout. Please see the screenshot [1]. This is simply fixed
by
* html #container { height:1% } /* IE6 hasLayout trigger */
Also seen in the screenshot is your use of mouse type. This is what I see on my 1280x800 laptop.
Seeing that your page is designed for IE which allows text size freezing, all chaos breaks loose in
other browsers when I either set a minimum font size or resize the text. Who indeed are you
expecting to read that text? Hopefully not the mice.
I have prepared a rework [2] which now show consistently in IE6, IE7, FF and Opera. I have even made
it work in IE5.5 by removing the overflow property on the #container div, since that just simply had
vanished in that browser. Also gone is most of the absolute positioning and the #nav div is now
floated right. Now the elements themselves create the backbone of the page layout.
Even with my rework, I see that the elements in the #content-container div are very boxed in and
doesn't allow for any text resizing before breakout happens. A rethink of the layout in the
#content-container div is needed. I do recommend that use have multiple instores of IE for testing
[3] as this will make it much easier for you (Thank you DL for prodding me). The CSS is now embedded
in the header of the source. Please note what I have remarked *********** out. Good Luck.
[1] <http://css-class.com/x/pts/pts/ie6ss.png>
[2] <http://css-class.com/x/pts/pts3.htm>
[3] <http://tredosoft.com/Multiple_IE>
Kind Regards, Alan
<http://css-class.com/>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
