ul, css, browsers, margins/padding

http://www.reservoir5.com/aww/UL-margin.jpg

Above is a screen shot of Opera, MSIE and Mozilla displaying the same
page. The guy I am doing this for would like the menu to be about in the
same place for each of these browsers...

The page as this HTML for the layout:
-------------------------------------
<table id="placement">
<tr>
<td rowspan="2" width="65"><!-- stupid grid background --></td>
<td valign="top" id="navMenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About Us</a></li>
</ul>
</td>
<td id="pageContent">
...
</td>
</tr>
</table>


....and the related positioning CSS:
-----------------------------------
#placement{
position: absolute;
top: 0px;
left: 0px;
}
#navMenu{
padding: 0px 15px 0px 0px;
width: 125px;
margin: 0px;
}
#navMenu ul{
margin: 10px 15px 0px;
}
#navMenu ul li ul{
padding-left: 1em;
margin: 0px;
}

I don't think it can be done easily, but I thought I'd pop this out to
the experts and see what feedback I get back.

TIA!
--
Justin Koivisto - spam@koivi.com
http://www.koivi.com

On Thu, 18 Nov 2004 1812 GMT, Justin Koivisto <spam@koivi.com> wrote:

> http://www.reservoir5.com/aww/UL-margin.jpg

[snip]

> #navMenu ul{
> margin: 10px 15px 0px;
> }

[snip]

> I don't think it can be done easily, but I thought I'd pop this out to
> the experts and see what feedback I get back.

While Opera and IE use the margin on <ul>'s to cause an indent, Mozilla
uses padding, just set padding:0px; in #navMenu ul (above) and all shall
be well.

Grey

--
The technical axiom that nothing is impossible sinisterly implies the
pitfall corollory that nothing is ridiculous.
- http://www.greywyvern.com - Orca Knowledgebase: Completely CSS styleable
Knowledgebase/FAQ system

GreyWyvern wrote:

> On Thu, 18 Nov 2004 1812 GMT, Justin Koivisto <spam@koivi.com> wrote:
>
>> http://www.reservoir5.com/aww/UL-margin.jpg
>
> [snip]
>
>> #navMenu ul{
>> margin: 10px 15px 0px;
>> }
>
> [snip]
>
>> I don't think it can be done easily, but I thought I'd pop this out
>> to the experts and see what feedback I get back.
>
> While Opera and IE use the margin on <ul>'s to cause an indent, Mozilla
> uses padding, just set padding:0px; in #navMenu ul (above) and all
> shall be well.

DOH! I knew that... Just another one of those days... Thanks for
reminding me.

--
Justin Koivisto - spam@koivi.com
http://www.koivi.com