HTML - <ul> formatting problem Mozilla

02-25-2004, 09:22 PM

Mozilla 1.4 pushes the nav list over with a large false left padding of
some sort:
http://www.edgehill.net/html/css/nav.htm

Any idea what's going on? It works fine in IE6. I've simplified this to
try and track the problem. I boxed the nav menu so you can see how it's
out of whack.

source:

<html>
<head>
<style>
.left {
float: left;
padding-right: 1em;
}
ul.menu-left {
border: 1px solid #444;
list-style: none;
width: 1em;
}
li.menu-left {
margin-top: 1em;

}
li.menu-first-left {
}
li.menu-last-left {
margin-top: 1em;
}
</style>
</head>
<body>
<center>
<table class=".constrained">
<tr>
<td class=".constrained">
<div class="left">
<ul class="menu-left">
<li class="menu-first-left"><a href="index.php" >home</a></li>

<li class="menu-left"><a href="ecards.php" >ecards</a></li>
<li class="menu-last-left"><a href="class-links.php">class
links</a></li>
</ul>
</div>
Photo Galleries:
<p>
pictures<br>
travel<br>
nature<br>

</center>
</td>
</tr>
</table>
</body>
</html>

Paul Furman

02-25-2004, 09:39 PM

Paul Furman wrote:

> Mozilla 1.4 pushes the nav list over with a large false left padding of
> some sort:
> http://www.edgehill.net/html/css/nav.htm
>
> Any idea what's going on? It works fine in IE6. I've simplified this to
> try and track the problem. I boxed the nav menu so you can see how it's
> out of whack.
>
> source:
>
> <html>
> <head>
> <style>
> .left {
> float: left;
> padding-right: 1em;
> }
> ul.menu-left {
> border: 1px solid #444;
> list-style: none;
> width: 1em;

width: 1em?
haven't copy-pasted it, but could that have to do with it?

[snip rest of code]

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

02-25-2004, 10:02 PM

Els wrote:
>>
>> source:
>>
>> <html>
>> <head>
>> <style>
>> .left {
>> float: left;
>> padding-right: 1em;
>> }
>> ul.menu-left {
>> border: 1px solid #444;
>> list-style: none;
>> width: 1em;
>
>
> width: 1em?
> haven't copy-pasted it, but could that have to do with it?

I just did that to emphasize the problem. If I set it to 4 ems or
whatever then it fits inside but still has this crazy left margin
problem. The box resizes somewhat to hold the menu text. In fact, I can
set the width to "0" and it still gives about 3-4 ems with the contents
outside that.

02-25-2004, 10:09 PM

Paul Furman wrote:

> Els wrote:

>>
>> width: 1em?
>> haven't copy-pasted it, but could that have to do with it?
>
>
> I just did that to emphasize the problem. If I set it to 4 ems or
> whatever then it fits inside but still has this crazy left margin
> problem. The box resizes somewhat to hold the menu text. In fact, I can
> set the width to "0" and it still gives about 3-4 ems with the contents
> outside that.

IE also moves the list in from the left edge of the page about 4em

02-25-2004, 10:09 PM

Paul Furman wrote:

> Mozilla 1.4 pushes the nav list over with a large false left padding of
> some sort:
> http://www.edgehill.net/html/css/nav.htm

Both ul and li elements have either a default left margin and/or
padding, depending on the browser.

If you don't want the default values applied, set both margin-left and
padding-left to 0. Adjust to taste.

--
Reply address is a bottomless spam bucket.
Please reply to the group so everyone can share.

02-25-2004, 10:17 PM

kchayka wrote:

> Paul Furman wrote:
>
>
>>Mozilla 1.4 pushes the nav list over with a large false left padding of
>>some sort:
>>http://www.edgehill.net/html/css/nav.htm
>
>
> Both ul and li elements have either a default left margin and/or
> padding, depending on the browser.
>
> If you don't want the default values applied, set both margin-left and
> padding-left to 0. Adjust to taste.

I tried

margin-left 0;
padding-left 0;

on everything.

The url above now shows a paragraph of text wrapping around the menu (if
the window is small) which does not have this big left margin.

02-25-2004, 10:19 PM

Paul Furman wrote:
> Mozilla 1.4 pushes the nav list over with a large false left padding
> of some sort:
> http://www.edgehill.net/html/css/nav.htm
>

Its not that mad. Unordered lists are supposed to be indented and Mozilla
renders them properly. You can set margins so they don't indent though.

--
Sue

02-25-2004, 10:20 PM

Paul Furman wrote:

> I tried
> margin-left 0;
> padding-left 0;
> on everything.

Did you try it with colons?

Aside: Instructions for fueling a coal fire...

if d B mt put :
if d B .

Translation:

If the grate be empty, put coal on.
If the grate be full, stop.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

02-25-2004, 10:25 PM

kchayka wrote:

> Paul Furman wrote:
>
>
>>Mozilla 1.4 pushes the nav list over with a large false left padding of
>>some sort:
>>http://www.edgehill.net/html/css/nav.htm
>
>
> Both ul and li elements have either a default left margin and/or
> padding, depending on the browser.
>
> If you don't want the default values applied, set both margin-left and
> padding-left to 0. Adjust to taste.

Thanks, I must have done something wrong, looks like it's only needed
for the <ul>

ul.menu-left {
border: 1px solid #444;
list-style: none;
width: 9em;
margin-left: 0;
padding-left: 0;
}

02-25-2004, 10:28 PM

Paul Furman wrote:

> kchayka wrote:
>
>> Paul Furman wrote:
>>
>>> Mozilla 1.4 pushes the nav list over with a large false left padding
>>> of some sort:
>>> http://www.edgehill.net/html/css/nav.htm
>>
>> Both ul and li elements have either a default left margin and/or
>> padding, depending on the browser.
>>
>> If you don't want the default values applied, set both margin-left and
>> padding-left to 0. Adjust to taste.
>
> Thanks, I must have done something wrong, looks like it's only needed
> for the <ul>
>
> ul.menu-left {
> border: 1px solid #444;
> list-style: none;
> width: 9em;
> margin-left: 0;
> padding-left: 0;
> }

Just a hint:
When you need to know where spaces come from, write at the
top of the stylesheet
*{border:1px solid red; margin:0; padding:0;}

See what it looks like then, and see what difference it
makes when you take padding:0 away, and then check what
happens when you take margin:0 away.

Usually works for me

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

02-25-2004, 09:39 PM	#2
Els Posts: n/a	Re: <ul> formatting problem Mozilla Paul Furman wrote: > Mozilla 1.4 pushes the nav list over with a large false left padding of > some sort: > http://www.edgehill.net/html/css/nav.htm > > Any idea what's going on? It works fine in IE6. I've simplified this to > try and track the problem. I boxed the nav menu so you can see how it's > out of whack. > > source: > > <html> > <head> > <style> > .left { > float: left; > padding-right: 1em; > } > ul.menu-left { > border: 1px solid #444; > list-style: none; > width: 1em; width: 1em? haven't copy-pasted it, but could that have to do with it? [snip rest of code] -- Els Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo -

02-25-2004, 10:02 PM	#3
Paul Furman Posts: n/a	Re: <ul> formatting problem Mozilla Els wrote: >> >> source: >> >> <html> >> <head> >> <style> >> .left { >> float: left; >> padding-right: 1em; >> } >> ul.menu-left { >> border: 1px solid #444; >> list-style: none; >> width: 1em; > > > width: 1em? > haven't copy-pasted it, but could that have to do with it? I just did that to emphasize the problem. If I set it to 4 ems or whatever then it fits inside but still has this crazy left margin problem. The box resizes somewhat to hold the menu text. In fact, I can set the width to "0" and it still gives about 3-4 ems with the contents outside that.

02-25-2004, 10:09 PM	#5
kchayka Posts: n/a	Re: <ul> formatting problem Mozilla Paul Furman wrote: > Mozilla 1.4 pushes the nav list over with a large false left padding of > some sort: > http://www.edgehill.net/html/css/nav.htm Both ul and li elements have either a default left margin and/or padding, depending on the browser. If you don't want the default values applied, set both margin-left and padding-left to 0. Adjust to taste. -- Reply address is a bottomless spam bucket. Please reply to the group so everyone can share.

02-25-2004, 10:17 PM	#6
Paul Furman Posts: n/a	Re: <ul> formatting problem Mozilla kchayka wrote: > Paul Furman wrote: > > >>Mozilla 1.4 pushes the nav list over with a large false left padding of >>some sort: >>http://www.edgehill.net/html/css/nav.htm > > > Both ul and li elements have either a default left margin and/or > padding, depending on the browser. > > If you don't want the default values applied, set both margin-left and > padding-left to 0. Adjust to taste. I tried margin-left 0; padding-left 0; on everything. The url above now shows a paragraph of text wrapping around the menu (if the window is small) which does not have this big left margin.

02-25-2004, 10:19 PM	#7
Sieue Posts: n/a	Re: <ul> formatting problem Mozilla Paul Furman wrote: > Mozilla 1.4 pushes the nav list over with a large false left padding > of some sort: > http://www.edgehill.net/html/css/nav.htm > Its not that mad. Unordered lists are supposed to be indented and Mozilla renders them properly. You can set margins so they don't indent though. -- Sue

02-25-2004, 09:22 PM	#1
	<ul> formatting problem Mozilla Mozilla 1.4 pushes the nav list over with a large false left padding of some sort: http://www.edgehill.net/html/css/nav.htm Any idea what's going on? It works fine in IE6. I've simplified this to try and track the problem. I boxed the nav menu so you can see how it's out of whack. source: <html> <head> <style> .left { float: left; padding-right: 1em; } ul.menu-left { border: 1px solid #444; list-style: none; width: 1em; } li.menu-left { margin-top: 1em; } li.menu-first-left { } li.menu-last-left { margin-top: 1em; } </style> </head> <body> <center> <table class=".constrained"> <tr> <td class=".constrained"> <div class="left"> <ul class="menu-left"> <li class="menu-first-left"><a href="index.php" >home</a></li> <li class="menu-left"><a href="ecards.php" >ecards</a></li> <li class="menu-last-left"><a href="class-links.php">class links</a></li> </ul> </div> Photo Galleries: <p> pictures<br> travel<br> nature<br> </center> </td> </tr> </table> </body> </html> Paul Furman

02-25-2004, 10:20 PM	#8
Toby A Inkster Posts: n/a	Re: <ul> formatting problem Mozilla Paul Furman wrote: > I tried > margin-left 0; > padding-left 0; > on everything. Did you try it with colons? Aside: Instructions for fueling a coal fire... if d B mt put : if d B . Translation: If the grate be empty, put coal on. If the grate be full, stop. -- Toby A Inkster BSc (Hons) ARCS Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

02-25-2004, 10:25 PM	#9
Paul Furman Posts: n/a	Re: <ul> formatting problem Mozilla kchayka wrote: > Paul Furman wrote: > > >>Mozilla 1.4 pushes the nav list over with a large false left padding of >>some sort: >>http://www.edgehill.net/html/css/nav.htm > > > Both ul and li elements have either a default left margin and/or > padding, depending on the browser. > > If you don't want the default values applied, set both margin-left and > padding-left to 0. Adjust to taste. Thanks, I must have done something wrong, looks like it's only needed for the <ul> ul.menu-left { border: 1px solid #444; list-style: none; width: 9em; margin-left: 0; padding-left: 0; }

02-25-2004, 10:28 PM	#10
Els Posts: n/a	Re: <ul> formatting problem Mozilla Paul Furman wrote: > kchayka wrote: > >> Paul Furman wrote: >> >>> Mozilla 1.4 pushes the nav list over with a large false left padding >>> of some sort: >>> http://www.edgehill.net/html/css/nav.htm >> >> Both ul and li elements have either a default left margin and/or >> padding, depending on the browser. >> >> If you don't want the default values applied, set both margin-left and >> padding-left to 0. Adjust to taste. > > Thanks, I must have done something wrong, looks like it's only needed > for the <ul> > > ul.menu-left { > border: 1px solid #444; > list-style: none; > width: 9em; > margin-left: 0; > padding-left: 0; > } Just a hint: When you need to know where spaces come from, write at the top of the stylesheet *{border:1px solid red; margin:0; padding:0;} See what it looks like then, and see what difference it makes when you take padding:0 away, and then check what happens when you take margin:0 away. Usually works for me -- Els Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo -

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search