Email conversation
| From | Philippe Faure |
|---|
| To | Me |
|---|
| Subject | Understanding CSS and IE and the differences in your examples. |
|---|
| Date | 30 January 2009 04:05 |
|---|
Hello Tarquin,
I have been looking at your "Pure CSS menus" web page:
http://www.howtocreate.co.uk/tutorials/testMenu.html.
I am trying to understand the differences between your two example. The left
justified example (<ul class=makeMenu>) has the last item on the list
(Noses) adding a second line in IE, but not in Firefox. But what really
confuses me is why in IE does that last line not appear on your first
example (right Justified, using <ul class=makeMenu2>).
In your example, this "mysterious" line appears only on the last entry, or
not at all. While on my web page, that I am writing to mimic yours, so that
I can understand what is going one, I get this line that appears for every
entry.
[URL]
thank you for your examples. They are by far the most clear to understand
that I ahve found.
Philippe
| From | Me |
|---|
| To | Philippe Faure |
|---|
| Subject | Re: Understanding CSS and IE and the differences in your examples. |
|---|
| Date | 31 January 2009 09:51 |
|---|
Philippe,
> left justified example (<ul class=makeMenu>) has the last item on the
> list (Noses) adding a second line in IE, but not in Firefox.
What versions of these browsers?
Please follow these instructions here, and check what other browsers do:
http://www.howtocreate.co.uk/sendEmail.php#testbrowsers
Do Opera or Safari show the same as IE or as Firefox?
I see absolutely no difference between IE 7 and 8, and Firefox 3.1 on
the second demo, or on your page. Are you using an older, buggy version
of Firefox?
It's hard to tell what problem you are referring to from your wording.
Do you mean the text is underlined? Do you mean the border is
duplicated? Did you mean the text is split onto multiple lines? Did you
mean that a large blank gap appears under the text (this happens in IE 6
due to a bug, but I assume you are not using such an old version of IE for
testing)?
I assume (though I may be wrong) that you are referring to all browsers
correctly adding an underline under the text. This would be because the
text (like all items in your menu) is a link. Default styling for a link
is to have an underline. Whether or not it appears in the menu is
controlled by the text-decoration style (search for it in the CSS that
you are using), with either the value underline or none.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Philippe Faure |
|---|
| To | Me |
|---|
| Subject | Re: Understanding CSS and IE and the differences in your examples. |
|---|
| Date | 2 February 2009 02:53 |
|---|
Thank you for your reply.
I am comparing IE6, IE7 and Firefox 3.0.
IE 7 and FireFox have the same response. It seems to be a limitation of IE6,
which I don't understand why.
The issue that I am seeing, from your words:
"Did you mean that a large blank gap appears under the text (this happens in
IE 6 due to a bug, but I assume you are not using such an old version of IE
for testing)?"
Yes, I have this old version, but also test with IE7 and Firefox.
My curiosity is why does it occur with one example, but not the other?
You get it only on the last item in your list, while I get it with every
item in the primary list.
thanks.
Philippe
| From | Me |
|---|
| To | Philippe Faure |
|---|
| Subject | Re: Understanding CSS and IE and the differences in your examples. |
|---|
| Date | 7 February 2009 09:02 |
|---|
Philippe,
> IE 7 and FireFox have the same response. It seems to be a limitation of
> IE6, which I don't understand why.
Because IE 6 is a steaming pile of manure that has plagued Web developers
for long enough already. It should be forced into retirement. IE 8 is due to
be released very soon. Stop supporting IE 6. Let it die.
> My curiosity is why does it occur with one example, but not the other?
I suppose you want something more useful than "because IE 6 is an
unpredictable, bug-ridden piece of junk"...
http://www.howtocreate.co.uk/wrongWithIE/?chapter=Empty+Elements
The last main paragraph of that. It's because the LI contains a block level
link, and IE 6 therefore insists on rendering the whitespace after the list
as if it were a blank line of text.
> also test with IE7 and Firefox
As my site already said, please also test in the other standards compliant
browsers; Opera and Safari. Especially since you are trying to use something
that is so fragile when changes are made (pure CSS menus are not exactly the
most reliable things on the Web).