Re: [css-d] Vertical Menu problem
Alan Gresley wrote: The most notable difference occurs with lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left while Internet Exploder uses margin-left to indent, All modern browser have padding-start for list, not padding-left since this default (padding-start) is applied regardless of if the text flows from left to right or right to left. Pedantically, you are correct. but as you are discovering Exploder also has a default top padding. Is this a IE6 whitespace bug you referring to for li? Heh, no. It seems I was a little too cute for my own good. I meant IE has a top padding of zero (the OP already knew Firefox had a top padding), hence the difference. That's why a padding of 0 on the UL seemed to fix the problem, at least at my end. Further reading: [1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ Using the Meyer reset or any other reset is the same a knocking down a bridge and then building it back up and can add many extra styles to ones CSS Reset sheets have their limitations, but it seems more of a personal preference than right or wrong to me. To be fair, IE8 can not be referred to as 'exploder' since it now is the best in implementing CSS2.1 correctly. Agreed, and FWIW I consider IE8 to be an excellent browser. adieu Mark __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Vertical Menu problem
Mark Henderson wrote:
Is this a IE6 whitespace bug you referring to for li?
Heh, no. It seems I was a little too cute for my own good. I meant IE
has a top padding of zero (the OP already knew Firefox had a top
padding), hence the difference. That's why a padding of 0 on the UL
seemed to fix the problem, at least at my end.
[...]
adieu
Mark
There is no padding top Mark. All browsers (apart from Safari) have the
default margin-top (1em) of the list showing. IE7- makes default
vertical margins disappear [1] since the list is within a hasLayout
container (the orange box is a float). So when you gave the style,
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
you zeroed out the margin-top of the list. Safari I think is mangling
the HTML causing the margin space to disappear and IE8 shows an unusual
drop of the link 'Standard' under it's own bullet.
http://www.donann.co.uk/new_site/vertical_menu.html
Mangled HTML:
lia href=placeholder
class=left_menu_indentbAll-in-ones/b/strong/li
1. http://css-class.com/test/bugs/ie/haslayout-margins.htm
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] Vertical Menu problem
Thanks to everyone for replying.
Especially Yazmin for the styles, which solved the problem, and Mark for the
explanation which has helped me greatly in understanding what was happening
and may help with a few other quirks!
John
On Thursday 04 June 2009 22:58:20 Mark Henderson wrote:
On Behalf Of Yazmin Media
Sent: 5 June 2009 04:38
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Vertical Menu problem
John,
Try these definitions for your CSS:
.verticalMenu {
background-color : #FFD096;
float : left;
margin-left : 6px;
width : 150px;
padding: 0;
}
.left_menu_txt {
padding: 0;
}
ul.left_menu_txt {
list-style: none;
margin: 0;
}
Just to add to this: John, something you will need to understand is that
many styling inconsistencies occur between browsers because these
browsers apply their own styles to HTML elements (hence the now common
use of a reset style sheet[1]). The most notable difference occurs with
lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left
while Internet Exploder uses margin-left to indent, but as you are
discovering Exploder also has a default top padding. As an FYI, for the
sake of efficiency, the last 2 above rules can be merged:
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
HTH
Mark
Further reading:
[1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
__
css-discuss [cs...@lists.css-discuss.org]
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/
--
http://www.donann.co.uk
__
css-discuss [cs...@lists.css-discuss.org]
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/
[css-d] Vertical Menu problem
Hi All, I can't see how to get rid of the padding at the top of the menu in Firefox: http://www.donann.co.uk/new_site/vertical_menu.html Safari displays it as I would like it without the padding showing. Also for the link labeled 'Home' to be in line with the other links in IE I've found I need to add an extra li/li. The menu to the right has the li/li removed to illustrate the problem in IE and that the padding is still there in Firefox. Sorry if it's something simple, it's driving me to distraction! John -- http://www.donann.co.uk __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Vertical Menu problem
John,
Try these definitions for your CSS:
.verticalMenu {
background-color : #FFD096;
float : left;
margin-left : 6px;
width : 150px;
padding: 0;
}
.left_menu_txt {
padding: 0;
}
ul.left_menu_txt {
list-style: none;
margin: 0;
}
It should also allow you to drop the extra li you defined for IE.
On Thu, Jun 4, 2009 at 6:17 AM, John j...@greenbirch.co.uk wrote:
Hi All,
I can't see how to get rid of the padding at the top of the menu in
Firefox:
http://www.donann.co.uk/new_site/vertical_menu.html
Safari displays it as I would like it without the padding showing.
Also for the link labeled 'Home' to be in line with the other links in IE
I've
found I need to add an extra li/li.
The menu to the right has the li/li removed to illustrate the problem
in
IE and that the padding is still there in Firefox.
Sorry if it's something simple, it's driving me to distraction!
John
--
http://www.donann.co.uk
--
Yazmin Wickham
http://www.yazminmedia.com
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] Vertical Menu problem
On Behalf Of Yazmin Media
Sent: 5 June 2009 04:38
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Vertical Menu problem
John,
Try these definitions for your CSS:
.verticalMenu {
background-color : #FFD096;
float : left;
margin-left : 6px;
width : 150px;
padding: 0;
}
.left_menu_txt {
padding: 0;
}
ul.left_menu_txt {
list-style: none;
margin: 0;
}
Just to add to this: John, something you will need to understand is that
many styling inconsistencies occur between browsers because these
browsers apply their own styles to HTML elements (hence the now common
use of a reset style sheet[1]). The most notable difference occurs with
lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left
while Internet Exploder uses margin-left to indent, but as you are
discovering Exploder also has a default top padding. As an FYI, for the
sake of efficiency, the last 2 above rules can be merged:
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
HTH
Mark
Further reading:
[1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] Vertical Menu problem
Thanks for the additional input Mark. I thought I had tried merging those
two rules, but it didn't work. I suppose something else was interfering at
the time.
And thanks for the reset link...hadn't come across that yet. :)
On Thu, Jun 4, 2009 at 5:58 PM, Mark Henderson m...@cwc.co.nz wrote:
As an FYI, for the
sake of efficiency, the last 2 above rules can be merged:
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
HTH
Mark
--
Yazmin Wickham
http://www.yazminmedia.com
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] Vertical Menu problem
Mark Henderson wrote:
[...]
Just to add to this: John, something you will need to understand is that
many styling inconsistencies occur between browsers because these
browsers apply their own styles to HTML elements (hence the now common
use of a reset style sheet[1]).
When IE8 (post beta) was released, the differences between each browsers
default stylesheet became smaller [2].
The most notable difference occurs with
lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left
while Internet Exploder uses margin-left to indent,
All modern browser have padding-start for list, not padding-left since
this default (padding-start) is applied regardless of if the text flows
from left to right or right to left.
but as you are
discovering Exploder also has a default top padding.
Is this a IE6 whitespace bug you referring to for li?
As an FYI, for the
sake of efficiency, the last 2 above rules can be merged:
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
HTH
Mark
Further reading:
[1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
Using the Meyer reset or any other reset is the same a knocking down a
bridge and then building it back up and can add many extra styles to
ones CSS.
To be fair, IE8 can not be referred to as 'exploder' since it now is the
best in implementing CSS2.1 correctly.
2. http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] Vertical Menu problem
John wrote:
Hi All,
I can't see how to get rid of the padding at the top of the menu in Firefox:
http://www.donann.co.uk/new_site/vertical_menu.html
Safari displays it as I would like it without the padding showing.
Also for the link labeled 'Home' to be in line with the other links in IE
I've
found I need to add an extra li/li.
The menu to the right has the li/li removed to illustrate the problem in
IE and that the padding is still there in Firefox.
Sorry if it's something simple, it's driving me to distraction!
John
Maybe a pure CSS solution with valid and clean HTML.
http://css-class.com/x/list-images.htm
Much more friendly for IE6 also.
BTW, not sure why that margin top was missing from Safari. Something in
your code? The default margin-top for list has been removed here.
ul.left_menu_txt {
list-style: none;
padding-left:18px;
color : #070d7d;
margin-top: 0;
}
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] Vertical Menu problem
Alan Gresley wrote: John wrote: Hi All, I can't see how to get rid of the padding at the top of the menu in Firefox: http://www.donann.co.uk/new_site/vertical_menu.html John Maybe a pure CSS solution with valid and clean HTML. http://css-class.com/x/list-images.htm Thanks, Alan. FWIW, some comparisons of browser rendering of total height of the orange-like box on this end... Box height in Mac OS X 10.4.11 Opera/10.00 Beta 194px Camino/1.6.7 194px Safari/3.2.1 217px FF/3.0.10 228px XP IE/8.0 (on Parallels in Mac OS X 10.4.11) 228px ~d __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Vertical Menu problem
David Laakso wrote:
http://css-class.com/x/list-images.htm
Thanks, Alan.
FWIW, some comparisons of browser rendering of total height of the
orange-like box on this end...
Box height in Mac OS X 10.4.11
Opera/10.00 Beta
194px
Camino/1.6.7
194px
Safari/3.2.1
217px
FF/3.0.10
228px
XP IE/8.0 (on Parallels in Mac OS X 10.4.11)
228px
That is kinda expected. The page doesn't specify font-family nor line-
height.
add
html {font: 1em/1.4 'Helvetica Neue', Arial, sans-serif;}
and see the various browsers fall in line (modulo a couple of
pixels,depending on how they round off decimal values).
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
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/
