Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Layout problems with IE6 - Firefox is fine

Posted by: James Sep 29 2006, 03:55 AM

I have come back to Web design after a considerable break and I am quite rusty, and would appreciate some help.

If any of you have time to look at the following URL on both IE6 and Mozilla Firefox, I would be very much obliged if you could explain to me the quite different appearances:

http://www.lilachilldorpers.com.au/index.html

In particular, in the menu of choices on the left hand side, "Contact us" all comes out on the same line in Firefox, but splits or wraps over two lines in IE6. I can make the font smaller for IE6, but then it would be too small for Firefox. Perhaps I should adjust the width of the menu list container? How would you deal with this?

I am using cascading style sheets;
Windows XP SP2

Many thanks, James

Posted by: James Sep 29 2006, 03:57 AM

I forgot to mention that my screen resolution is:
1280 x 1024

Posted by: James Sep 29 2006, 04:19 AM

I think I might have answered my own question. In IE6 I just went to VIEW > TEXT SIZE > Medium
and changed Medium to Smaller (and also tried "Smallest")
and that fixed the problem.

However, that raises another question - we have no idea what individual user's IE6 browsers are set to. How can I either:
1. organise a pop-up advising them to change to
View>Text Size>Smaller, or
2. do it for them with some clever HTML or programming?

Kind regards, James.

Posted by: Frederiek Sep 29 2006, 05:20 AM

I have to set the text size in Safari smaller as well for the text not to wrap.

A solution might be to increase the width of "#navbar ul li".

Posted by: Christian J Sep 29 2006, 05:25 AM

QUOTE(James @ Sep 29 2006, 10:55 AM) *

I have come back to Web design after a considerable break and I am quite rusty, and would appreciate some help.

If any of you have time to look at the following URL on both IE6 and Mozilla Firefox, I would be very much obliged if you could explain to me the quite different appearances:

http://www.lilachilldorpers.com.au/index.html


The default margin/padding on some elements (e.g. DIV) may differ between browsers. This should explain the extra space below the H1.

QUOTE
In particular, in the menu of choices on the left hand side, "Contact us" all comes out on the same line in Firefox, but splits or wraps over two lines in IE6. I can make the font smaller for IE6, but then it would be too small for Firefox. Perhaps I should adjust the width of the menu list container? How would you deal with this?


It doesn't wrap in my IE6 (in medium size).

I'd specify the menu width using the em unit, then it will adjust when user text size is changed. Of course then it may no longer fit the logo width.

QUOTE
I forgot to mention that my screen resolution is:
1280 x 1024


See http://htmlhelp.com/faq/html/design.html#screen-size

QUOTE
I think I might have answered my own question. In IE6 I just went to VIEW > TEXT SIZE > Medium
and changed Medium to Smaller (and also tried "Smallest")
and that fixed the problem.

However, that raises another question - we have no idea what individual user's IE6 browsers are set to.


True. What one should do is take that into account in your design.

QUOTE
How can I either:
1. organise a pop-up advising them to change to
View>Text Size>Smaller, or
2. do it for them with some clever HTML or programming?


Such things will only annoy users. Avoid! ohmy.gif

BTW the site layout looks very nice, but the text explaining how the menu works seems a bit redundant: the menu is (and should be) self-explaining.

Posted by: Sparkyg Sep 29 2006, 05:54 AM

Hi There

I would say that the root of your problems lies with the "box model", the way different browsers handle widths of divs regarding padding and borders etc.


take a look at this article for an explanation

http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41

cheers

Sparky

Posted by: James Sep 29 2006, 06:05 AM

Thanks to all of you for your informative remarks and for pointingme in the right direction.
James

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)