Should li inherit margin style of ul?

[Eric Lindsay]

I have a web page at http://www.architectqueensland.com/index.html
styled with http://www.architectqueensland.com/architect.css The site
is valid HTML 4.01 Strict. The CSS is valid 2.1 except for use of the
CSS3 text-shadow property.

The side navigation on the pages displays basically as expected in
Firefox, Opera and Safari. According to Browsershots, IE7 is also OK for
navigation. The desired appearance is as Safari does it (same
browsershots page)
http://browsershots.org/website/http...land.com/index.
html

However IE6 seems to put additional space between all li items.

I suspect this line in my CSS-
#side ul { list-style: none; margin: 170px 0 50px 0; padding: 0 0 0 1em;
}
which puts a space at the end of the ul to improve appearance.

http://www.w3.org/TR/REC-CSS1#inheritance seems to me to indicate that
li should not inherit this bottom margin.

Can anyone comment on what is happening with the navigation?

Also, for bonus points, in both IE6 and IE7, the text styled with
address { } shows up as a column of words, which was not what I intended
(I wanted a single line). I suspect I shouldn't have used float: left;
but I am not sure why the effect happens.

--
http://www.ericlindsay.com

[dorayme]

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

I have a web page at http://www.architectqueensland.com/index.html
styled with http://www.architectqueensland.com/architect.css The site
is valid HTML 4.01 Strict. The CSS is valid 2.1 except for use of the
CSS3 text-shadow property.

The side navigation on the pages displays basically as expected in
Firefox, Opera and Safari. According to Browsershots, IE7 is also OK for
navigation. The desired appearance is as Safari does it (same
browsershots page)
http://browsershots.org/website/http...land.com/index.
html

However IE6 seems to put additional space between all li items.

You have a very nervous css sheet Eric!

Why the useless

#side li { }

in your css, it may be causing trouble in IE6 but more likely
than not, the browser has different defaults. Look, why not first
try expressly setting the css for li (experiment to match how you
like it in anything, Safari will do). If it is then fine in IE,
good, if not, add a line to talk to just IE Win and alter the
figures for that browser.

--
dorayme

[Bergamot]

Eric Lindsay wrote:

>
http://www.architectqueensland.com/index.html
IE6 seems to put additional space between all li items.

It's a long-standing problem with IE. It gets confused with list items
containing <aelements that are display:block. There are various ways
around it, one of which is to add

zoom:1;

to the containing <liproperty list.

Also, for bonus points, in both IE6 and IE7, the text styled with
address { } shows up as a column of words, which was not what I intended
(I wanted a single line). I suspect I shouldn't have used float: left;
but I am not sure why the effect happens.

I haven't looked at your code very closely but IE6 isn't floating any of
the columns like you probably want, maybe because of:
#side ul { list-style: none; margin: 170px 0 50px 0; padding: 0 0 0 1em; }

Margins in px units don't play well with widths set in %. Besides, IE's
overflow behavior is broken, so it's probably expanding the container
whether you want it to or not.

--
Berg

[Daniel =?ISO-8859-15?Q?D=E9chelotte?=]

Eric Lindsay a écrit :

[... http://www.architectqueensland.com/index.html ...]
The side navigation on the pages displays basically as expected in
Firefox, Opera and Safari. [...]
However IE6 seems to put additional space between all li items.

I suspect this line in my CSS-
#side ul { list-style: none; margin: 170px 0 50px 0; padding: 0 0 0
1em;
}
which puts a space at the end of the ul to improve appearance.

Ah, I think I remember that one. Excerpt from one of my stylesheets:

/* Workaround time: when faced with <li><span>...</span></li>, with
display:block for SPAN, IE doubles LI's line-height, unless a
border-bottom is set. */
* HTML .navbar UL LI {
border-bottom: 1px #eee solid;
}

I see you have made your A's (inside your LI's) displayed as blocks, so
it could be that. Since you use a solid background, adding a bottom
border (in #666) shouldn't be too visible a hack.

Also, for bonus points, in both IE6 and IE7, the text styled with
address { } shows up as a column of words, which was not what I
intended (I wanted a single line). I suspect I shouldn't have used
float: left; but I am not sure why the effect happens.

Possibly because you didn't specify a width for that float? I too see
no need for a float here, BTW ;-)

HTH,
--
Daniel Déchelotte
http://yo.dan.free.fr/

[Bergamot]

Bergamot wrote:

Eric Lindsay wrote:

>>
http://www.architectqueensland.com/index.html

I haven't looked at your code very closely but IE6 isn't floating any of
the columns like you probably want, maybe because of:
#side ul { list-style: none; margin: 170px 0 50px 0; padding: 0 0 0 1em; }

I take that back. It's the double margin float bug.
http://www.positioniseverything.net/...ed-margin.html

--
Berg

[Eric Lindsay]

In article <50*************@mid.individual.net>,
Bergamot <be******@visi.comwrote:

Bergamot wrote:

Eric Lindsay wrote:

>
http://www.architectqueensland.com/index.html

I haven't looked at your code very closely but IE6 isn't floating any of
the columns like you probably want, maybe because of:
#side ul { list-style: none; margin: 170px 0 50px 0; padding: 0 0 0 1em; }

I take that back. It's the double margin float bug.
http://www.positioniseverything.net/...ed-margin.html

Thanks Bergamot, but I don't know about the double margin float bug.
Positioniseverything says "This bug only occurs when the float margin
goes in the same direction as the float and is trapped directly between
the float and the inside edge of the container box. "

That doesn't seem to me to be what is happening. Unless of course you
are seeing something that I am not.

I used the zoom: 1; trick to close up the li spacing, which I imagine
makes IE use HasLayout. That works in IE 5.5 and 6 (7 was already OK).
It does not work in IE 5.01, but I think if I can establish the problem
is in IE, then real minority IE users will just have to put up with bugs
(the architect uses Macintosh, and isn't real tolerant of IE anyhow).

--
http://www.ericlindsay.com

[Eric Lindsay]

In article
<20**********************************@fr.club-internet.invalid>,
Daniel Déchelotte <ma**********@fr.club-internet.invalidwrote:

Eric Lindsay a écrit :

[... http://www.architectqueensland.com/index.html ...]
The side navigation on the pages displays basically as expected in
Firefox, Opera and Safari. [...]
However IE6 seems to put additional space between all li items.

I suspect this line in my CSS-
#side ul { list-style: none; margin: 170px 0 50px 0; padding: 0 0 0
1em;
}
which puts a space at the end of the ul to improve appearance.

Ah, I think I remember that one. Excerpt from one of my stylesheets:

/* Workaround time: when faced with <li><span>...</span></li>, with
display:block for SPAN, IE doubles LI's line-height, unless a
border-bottom is set. */
* HTML .navbar UL LI {
border-bottom: 1px #eee solid;
}

I see you have made your A's (inside your LI's) displayed as blocks, so
it could be that. Since you use a solid background, adding a bottom
border (in #666) shouldn't be too visible a hack.

Making the A's inside the LI's display as blocks gives anyone mousing a
larger (and more consistent) target, the whole size of the LI. I think
it is a reasonable use of display: block;

I didn't realise it might cause IE to double the LI line-height. I'm
going to have to write test cases to see whether the problem is
line-height doubling, or inheriting UL margins.

However I really don't like using a border bottom as a solution, even if
it is invisible. I used the zoom: 1; trick suggested by another poster,
which I imagine made IE use HasLayout. That worked on IE 5.5 and 6 (but
not 5.01). It is a lot clearer that this is a kluge for IE only, not
part of the layout.

Also, for bonus points, in both IE6 and IE7, the text styled with
address { } shows up as a column of words, which was not what I
intended (I wanted a single line). I suspect I shouldn't have used
float: left; but I am not sure why the effect happens.

Possibly because you didn't specify a width for that float? I too see
no need for a float here, BTW ;-)

Not sure why I would need to add a width. Wouldn't address default to
100% of viewpoint, if it didn't inherit a width from elsewhere?

I have realised the float got in there when I added float to the footer,
which seemed to be needed to get around another rendering problem. I
need to go back over footer and try to find out why I needed it in the
first place.

--
http://www.ericlindsay.com

[Eric Lindsay]

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

I have a web page at http://www.architectqueensland.com/index.html
styled with http://www.architectqueensland.com/architect.css The site
is valid HTML 4.01 Strict. The CSS is valid 2.1 except for use of the
CSS3 text-shadow property.

The side navigation on the pages displays basically as expected in
Firefox, Opera and Safari. According to Browsershots, IE7 is also OK for
navigation. The desired appearance is as Safari does it (same
browsershots page)
http://browsershots.org/website/http...land.com/index.
html

However IE6 seems to put additional space between all li items.

You have a very nervous css sheet Eric!

Why the useless

#side li { }

in your css, it may be causing trouble in IE6 but more likely
than not, the browser has different defaults. Look, why not first
try expressly setting the css for li (experiment to match how you
like it in anything, Safari will do). If it is then fine in IE,
good, if not, add a line to talk to just IE Win and alter the
figures for that browser.

But LI is already fine in Safari (and is also fine in every Linux
browser in Broswershots). It is only IE below 7 that has problems.

The CSS started out as an entirely different site I did earlier (which
started as something even earlier on my site, etc., etc.) I was planning
to leave redoing the CSS until I got all the text and photos into clean
HTML. I was actually hoping to get all the text and photos before I
applied any CSS at all, to avoid distracting the people supplying the
photos with appearance. But life got in the way of timely changes.

If you look at stuff commented out in the CSS, you will see lots of
stuff that doesn't exist in the HTML. I will clean it all out, I promise.

What I should do is a whole bunch of standard CSS templates, ready for
next time. With a separate file for IE patches.

--
http://www.ericlindsay.com

[Bergamot]

Eric Lindsay wrote:

In article <50*************@mid.individual.net>,
Bergamot <be******@visi.comwrote:

Eric Lindsay wrote:

http://www.architectqueensland.com/index.html

It's the double margin float bug.

you are seeing something that I am not.

IE6: http://www.bergamotus.ws/screenshots...queensland.png

--
Berg

[dorayme]

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

#side li { }

in your css, it may be causing trouble in IE6 but more likely
than not, the browser has different defaults. Look, why not first
try expressly setting the css for li (experiment to match how you
like it in anything, Safari will do). If it is then fine in IE,
good, if not, add a line to talk to just IE Win and alter the
figures for that browser.

But LI is already fine in Safari (and is also fine in every Linux
browser in Broswershots). It is only IE below 7 that has problems.

Well, this is what I had in mind when saying you might talk to IE
Win separately for the li css margins and paddings. Remember to
put this talk subsequent in the order of the css that all
browsers see. This way, all will be fine for non iE, and IE will
simply follow the latest css for li which it sees. Do you need
help re talking to IE only?

--
dorayme

[Eric Lindsay]

In article <50*************@mid.individual.net>,
Bergamot <be******@visi.comwrote:

Eric Lindsay wrote:

In article <50*************@mid.individual.net>,
Bergamot <be******@visi.comwrote:

Eric Lindsay wrote:

http://www.architectqueensland.com/index.html

It's the double margin float bug.

you are seeing something that I am not.

IE6: http://www.bergamotus.ws/screenshots...queensland.png

Well that is certainly an interesting result. IE6 deciding there isn't
space for the float.

The images from browsershots didn't show that.

Thanks very much. Maybe if I remove my margins and use pad instead - or
since the LI are single line, maybe text-indent. Guess I will experiment.

--
http://www.ericlindsay.com

[Eric Lindsay]

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

#side li { }
>
in your css, it may be causing trouble in IE6 but more likely
than not, the browser has different defaults. Look, why not first
try expressly setting the css for li (experiment to match how you
like it in anything, Safari will do). If it is then fine in IE,
good, if not, add a line to talk to just IE Win and alter the
figures for that browser.

But LI is already fine in Safari (and is also fine in every Linux
browser in Broswershots). It is only IE below 7 that has problems.

Well, this is what I had in mind when saying you might talk to IE
Win separately for the li css margins and paddings. Remember to
put this talk subsequent in the order of the css that all
browsers see. This way, all will be fine for non iE, and IE will
simply follow the latest css for li which it sees. Do you need
help re talking to IE only?

The major problem I see is that I am really sick and tired of working
around IE problems. I don't want to use conditional comments on my web
pages, if I can possibly avoid it. I'll just see how close to what I
want I can go without real kluges. Thanks.

--
http://www.ericlindsay.com

[dorayme]

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

But LI is already fine in Safari (and is also fine in every Linux
browser in Broswershots). It is only IE below 7 that has problems.

Well, this is what I had in mind when saying you might talk to IE
Win separately for the li css margins and paddings. Remember to
put this talk subsequent in the order of the css that all
browsers see. This way, all will be fine for non iE, and IE will
simply follow the latest css for li which it sees. Do you need
help re talking to IE only?

The major problem I see is that I am really sick and tired of working
around IE problems. I don't want to use conditional comments on my web
pages, if I can possibly avoid it. I'll just see how close to what I
want I can go without real kluges. Thanks.

I know the feeling Eric! But really, don't hamstring yourself, it
is simple enough to do and IE 6 will not be around for ever.
There is nothing morally wrong with it. <g>

--
dorayme