<ul> IE problem

[Mber]

Hey everyone. I have a slight problem that has been puzzling me for the past couple days concerning an ul and viewing the website in IE. The way I have it set up is having a horizontal ul navigation, with the background image in a div. Everything works fine in Firefox, it's the exact width that I want it to be as it aligns with the "content" div below it, but in IE it stretches the text out and pushes the width a good 50-100 pixels further to the right. Is there anyway to get this to work properly in IE? I will also be totally open to suggestions at how to go about a better way of doing the nav if there is one.

Here's the link to the site:

http://envisionism.com/Sitee/en/index.html

Here's my code:

HTML
http://envisionism.com/Sitee/en/index.html

CSS
http://envisionism.com/Sitee/en/css/style.css

[WebJoel]

The way to do this thing is to make the 'li dividers' be actual CSS, not 'background-images'. I'd use "border-right:1px dotted black;" and using 'padding' on the "<a>", you'd achieve a more 'fluid' cell, because the vertical dotted line would be based upon the content of "<a>", and not merely 'written over-top of' by same...

Advantage here: if you changed the link's text (or added more link, etc), the vertical dotted divider line changes exactly to match.

more:

on your CSS file, I do not recognize or understand this:

.thumb3{
filter:alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
z-index:3;
position:absolute;
left: 271px;
width: 105px;
top: 248px;
height: 67px;
background-image:url(file:///Heart/Users/andrewrobbins/Desktop/en/images/test12/3.jpg);
border: thin solid #FFFFFF;
} (several instances of this). Is this working? Is this correct? I have never seen "file://~" this way before... :confused:

A word of note: I have seen problems with some FTP clients refusing to 'upload' / some hosts refusing to properly display image/s that begin with a numeral ("3.jpg").

[Mber]

Thanks for the reply joel, i'll try those suggestions out tomorrow (=

And about that weird url image location...thanks for pointing that one out to me..I'll have to change that. Basically I was just calling the image right from my desktop. I'm sure that would of caused me some headaches in the future haha.

[Centauri]

Also, when specifying a font whose name comprises more than one word, surround the name with quote marks :#nav li a{
color:#FFFFFF;
text-decoration:none;
list-style:none;
font-family: "Arial Narrow", Helvetica, sans-serif;
font-size: 12px;
}

[WebJoel]

I outlined your "<li>"s in red, so that you can see the futility of trying to 'position' a link over a 'background-image' of vertical hash-marks... you'll never get it right unless the 'vertical hash-marks' are a "border-right" or a "border-left" of "<li>"s...

Screenshot image.

If you are still stumped, bump this post for help. I could write this up for you.

[Mber]

UPDATE:

So I applied the advice you guys gave me and all I can say is thank you. It really helped a lot, although I now have a couple more questions I'd like to ask.

The first would be, how would I eliminate the border applied to the <li> JUST after "CONTACT" ... I was thinking about this for awhile and seriously cannot think of a way it could be done, is there any?

The second question I have is, is there anyway to make the rollover on the buttons be extended outwards to incorporated a larger area then just the text itself?

Here's the updated versions.

HTML
http://www.envisionism.com/Sitee/en/index.html


CSS
http://www.envisionism.com/Sitee/en/css/style.css

[Centauri]

You can eliminate the last border by applying a class to the last <li> to remove the border. The rollover can be expanded by increasing the hover area of the <a> by converting the <a>s to block display by floating them as well, and then doing all the padding and sizing on the <a>s instead of the <li>s. A background can then be specified on the :hover. There is also no need to float the <ul> either, and the inline displays are not needed when floating. <ul id="nav">
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">BROWSE RELEASES</a></li>
<li><a href="">FORUMS</a></li>
<li><a href="">ARTISTS</a></li>
<li><a href="">DOWNLOADS</a></li>
<li><a href="">JOIN</a></li>
<li class="last"><a href="">CONTACT</a></li>
</ul>
#nav {
margin-left: 0px;
margin-top: 98px;
height: 32px;
padding-left: 4px;
padding-right: -1px;
font-weight: 600;
}
#nav li {
list-style:none;
float:left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCC;
}
#nav li.last {
border: none;
}
#nav li a{
color: #FFFFFF;
text-decoration: none;
font-family: "Arial Narrow", Helvetica, sans-serif;
font-size: 12px;
float: left;
padding: 0 13px;
height: 28px;
line-height: 28px;
}
#nav li a:hover {
color: #00CCFF;
background: #000022;
}

[Mber]

Thanks Cent!! Works perfect.