The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Layout problems with IE6 - Firefox is fine
James
post Sep 29 2006, 03:55 AM
Post #1


Advanced Member
****

Group: Members
Posts: 103
Joined: 29-September 06
From: Western Australia
Member No.: 269



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
James
post Sep 29 2006, 03:57 AM
Post #2


Advanced Member
****

Group: Members
Posts: 103
Joined: 29-September 06
From: Western Australia
Member No.: 269



I forgot to mention that my screen resolution is:
1280 x 1024
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
James
post Sep 29 2006, 04:19 AM
Post #3


Advanced Member
****

Group: Members
Posts: 103
Joined: 29-September 06
From: Western Australia
Member No.: 269



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 29 2006, 05:20 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 29 2006, 05:25 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Sparkyg
post Sep 29 2006, 05:54 AM
Post #6


Member
***

Group: Members
Posts: 46
Joined: 29-September 06
From: Suffolk UK
Member No.: 270



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...0989953B6F20B41

cheers

Sparky
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
James
post Sep 29 2006, 06:05 AM
Post #7


Advanced Member
****

Group: Members
Posts: 103
Joined: 29-September 06
From: Western Australia
Member No.: 269



Thanks to all of you for your informative remarks and for pointingme in the right direction.
James
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:11 AM