using css to position ul LI elements...list-style-image IE prob

[deschnell]

Hi,
see Kinetic Healing - Home

Simple UL for the nav menu on the tabs on the page. I'm using poistion:relative with top:--- and left:--- to get the words to show up properly (still needs some fine tuning).

I tested with IE7 (vista) - the list-style images are off the the left, and in IE6 (win2k), they're off to the left, but break the flow of the page.

Desired effect is proper in FF3 (Fedora), Safari 3 (Tiger), FF3 (Tiger)

#nav {
  margin:0px;
  padding:0px;
  height:0px;
  display:inline;
  z-index:900;
}

#navHome {
    visibility: visible;
    width:10px;
    left: 348px;
    top: -48px;
    position: relative;
}

#navServ {
    visibility: visible;
    width:10px;
    left: 485px;
    position: relative;
    top: -94px;
}

#navtarot {
    text-align: center;
    visibility: visible;
    width:10px;
    left: 626px;
    position: relative;
    top: -149px;
}

#navCon {
    position:relative;
    visibility: visible;
    width:10px;
    left: 755px;
    top: -198px;
}

#nav ul li.navactive,#nav ul li.navactive a {
    text-align: center;
    background-repeat: no-repeat;
    background-position: center center;
    font-weight:bold;
    color: #337733;
}
#nav ul li.navactive{
    margin:0px;
    padding:0px;
    list-style-image: url(../img/li-lily.png);
    list-style-position: outside;
    
}
#nav ul li.navin, #nav ul li.navin a {
    list-style-type: none;
    text-align: center;
    color: #555;
}

#nav ul {
    width:895px;
    list-style-type: none;
    margin:0px;
    padding:0px;
    height:0px;
}

<div id="nav">
  <ul>
        <li class="navactive" id="navHome"> <a href="index.html">Home</a></li>
        <li class="navin" id="navServ"> <a href="services.html">Services</a></li>
        <li class="navin" id="navtarot"> <a href="tarot.html">Tarot Readings</a></li>
        <li class="navin" id="navCon"> <a href="contact.html">Contact</a></li>
    </ul>

Ideas? Also, the text for "Tarot Readings" isn't centering the way I assume it would.

[solution in later post at bottom]

[jeffross]

I'm not familiar with all the IE glitches and bugs, but I wonder if your results have anything to do with the box model hack?

[deschnell]

I had thought of that, but I'm not sure how that would directly be applied to the list image - as the element itself is positioned properly. It's as if the list-style-image location is not affected by the relative positioning scheme. How would I apply the box model hack in a case like this - and which elements would need it?

[PR Design]

Everything's out in IE, the whole page. It's too awkward to deconstruct at the moment, but are you using a reset at all?

[deschnell]

reset?
here's the full css file:

body {

    padding: 0px;

    margin: auto;
  width:895px;
    background-position: center;
  font-family:verdana, helvetica, arial, sans-serif;
  font-size:.9em;
}
.access {
display:none;
}
#header {

    margin-top: 2em;
    
    margin-left: 0px;
    
    margin-bottom: 0px;
    
    margin-right: 0px;
    
    padding-left: 0px;
    
    padding-bottom: 0px;
    
    padding-right: 0px;
    
    padding-top: 0em;
    
    border-width: 0px;
    
    height: 325px;
    width:895px;
    float: none;
    
    visibility: visible;
    
    position: static;
    
    display: block;
    
    background-position: center top;
    
    background-repeat: no-repeat;
    
    background-image: url(../img/pageHead.jpg);
    
}

h1 { 
    margin-left:2em;

}

#content {

    padding-left: 0;

    padding-bottom: 0;

    padding-right: 0;

    padding-top: 25px;

    display: block;
    border-width: 0px;
    border-style: none; ;
    margin: 0;
    clear: both;
    position: relative;
    visibility: visible;
    background-position: center;
    background-repeat: repeat-y;
    background-image: url(../img/pageBack.gif);
    width:895px;
}
#deb_pic {
    margin-left:8em;
}
#title1 {
    margin-top:3px;
    margin-left:8em;
}
#services {
width:800px;
margin:0 auto;
}
#links {
width:800px;
margin:0 auto;
}
#about {
width:800px;
margin:0 auto;
}
dl {
  padding-top: 1em;
  padding-bottom:3em;
  margin-top: 1em;
  color:#336633;
  font-weight:bold;
  font-size:1.8em;

}
dt {
padding-top: 8px;
font-size:.7em;
color:#444;
line-height: 1.2em;
font-weight:normal;
}

dd {
color:#575;
line-height:1.3em;
font-weight:normal;
font-size:.55em;
}
p {
  
    padding: 0px;

    margin: 1em 2em;

}
dt img {
    margin:0 1em;
}
a {

}
a:active {

}

a:visited {

}

a:hover {

}
#nav {
  margin:0px;
  padding:0px;
  height:0px;
  display:inline;
  z-index:900;
}

#navHome {
    visibility: visible;
  width:10px;
    left: 348px;
    top: -48px;
    position: relative;
}

#navServ {
    visibility: visible;
  width:10px;
    left: 485px;
    position: relative;
  top: -94px;
}

#navtarot {
    text-align: center;
    visibility: visible;
  width:10px;
    left: 626px;
    position: relative;
  top: -149px;
}

#navCon {
  position:relative;
    visibility: visible;
  width:10px;
    left: 755px;
    top: -198px;
}

#nav ul li.navactive,#nav ul li.navactive a {
    text-align: center;
    background-repeat: no-repeat;

    
    background-position: center center;
  font-weight:bold;
    color: #337733;
}
#nav ul li.navactive{
    margin:0px;
    padding:0px;
    list-style-image: url(../img/li-lily.png);
    list-style-position: outside;
    
}
#nav ul li.navin, #nav ul li.navin a {
  list-style-type: none;
  text-align: center;
    color: #555;
}

#nav ul {
  width:895px;
    list-style-type: none;
    margin:0px;
    padding:0px;
    height:0px;
}
p.quote {
    width:70%;
    font-style:italic;
    text-align:center;
    margin:0 auto;
}

#footer p {
    text-align: center;
    background-position: center;
    position: relative;
    clear: both;
    color: #999999;
    padding: 0px;
}

#footer {

    height: 27px;
    padding: 0px;
    margin: 0px;
    margin-bottom:1em;
  border-style: none;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/pageBottom.gif);
}

[PR Design]

Ah, right. By putting this at the top of every new project's CSS file you should be able to make this more cross browser compatible much more easily:

/*YAHOO! RESET*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  
	margin:0; 
	padding:0; 
} 
table { 
	border-collapse:collapse; 
	border-spacing:0; 
} 
fieldset,img {  
	border:0; 
} 
address,caption,cite,code,em,strong,dfn,th,var { 
	font-style:normal; 
	font-weight:normal; 
} 
ol,ul { 
	list-style:none; 
} 
caption,th { 
	text-align:left; 
} 
h1,h2,h3,h4,h5,h6 { 
	font-size:100%; 
	font-weight:normal; 
} 
q:before,q:after { 
	content:''; 
} 
abbr,acronym {
	border:0; 
}
/*---------- END RESET ----------*/

[deschnell]

ok, reset added to CSS. No changes.
what do you mean by the whole page being out in IE? I don't see any problems other than the one with the list-image? I haven't even started working on the footer...it's just there in limbo for now.

[bartoszdesign]

no that's really strange. when you open the link in ie7 it looks like this



then refreshing it it will jump back in position.

i would recommend to put everything in a centred wrapper to get this fixed and start from there on.

[deschnell]

Well if anyone wants to check this and confirm, but I think I've got all problems solved. The main problem was that I had a width specified for each LI #, rather than for the UL # - when I moved this property, the list image snaps to where it should be.

There was still a large gap in IE6 where the list normally would have resided - so I used a conditional comment for IE6 to bring up the main content...more of a workaround than understanding the problem...time is always an issue.

Thanks for any helpers along the way.

[likethegoddess]

I'm still getting the behavior that bartoszdesign got in IE7.