<ul><li> nav link </li> </ul>

differneces in IE and FF

[OddDog]

Hi all,

to start off I have searched for this in the forum, but to no avail, even though I was sure I had seen it some time back.

I have a vertical nav list. Without the <ul> tag it does not validate as Xhtml 1.0 transitional strict.

All the other code and CSS validates just fine.

I place the <ul> tags and my menu list jumps to the right. Ugly. Will require retouching the design (would rather avoid that).

This jump occurs in both FF and IE.

But with the <ul> I get in FF the menu right against the left had edge, whilest in IE I get a padding effect (without coding for it).

here is the code

.help{
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight: normal;
color: #333333;
padding-top:10px;
padding-bottom:15px;
padding-left:15px;
}

.menu-list {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;;
font-size:13px;
list-style-type: none;
color: #333333;
}

.blocktitles-lhc {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 25px;
color: #FFFFFF;
background-color: #000066;
font-weight: bold;
text-align:left;
}

/* Layout Stylesheet */

body {
text-align:center;
padding:0;
}

#outer {
text-align:left;
border:1px solid #000000;
width:750px;
margin:auto;
}

#hdr {
height:100px;
background-image: url(../img/logo.gif);
background-repeat: no-repeat;
background-position: left;
border:solid #ACACAC;
border-width:0 0 1px 0;
}

#bodyblock {
position:relative;
width:750px;
padding:0;
background-image: url(../img/col-dashed.jpg);
}

#l-col {
position:absolute;
width:170px;
top:0px;
left:0px;
}

#help {
position:absolute;
top:5px;
text-align:right;
}

I have cut the none relevant stuff (h1 ects..)

This all occurs in the lhc (left hand column)

Any ideas suggestions greatly appreciated ...

[quiet_man]

Try specifying margin and padding values for both the <ul> and <li> elements:

#menu-list ul {list-style: none;margin: 0;padding: 0;}
li.menu-list-item* {margin: 0;padding: 0;}

(* not sure whether you need to define a new class for the li item. I do, but I'm sure it could be tightened up).

[quiet_man]

even though I was sure I had seen it some time back

Me too! Maybe it was this thread:

unordered list display problems in IE 5 & 6 [webmasterworld.com]

One of the replies in that thread refers to this one:

DIV with border renders diffrently in IE and FF [webmasterworld.com]

which may also help.