Hey, does anyone know how I can fix my menu bar on my blog, so it looks like it does in Firefox

http://www.danielmousdell.com/blog

This is how it looks in IE and as you can see there is a gap between the links and the bottom image:



I have looked and I don't know what code I need to add to get it to show correct in IE

Thanks alot

Hi,

Do following changes in the CSS file, It will work.

In style.css at line 500...
modify following class and put following two extra property in it.

div.hr{
clear:both;
height:0px;
}

remove height:1em; from same class.

- Add another class in the same css.

#navcontainer{height:14px;}


Have a nice day...

Do one more thing in the same class instead of putting height:0px; make height:8px;


this will solve your problem.

Thanks Jay, worked brilliant Appreciate it mate

There's another problem aswell, on the sidebar, where the links are, they are all in <li>'s and they should have an image next to them befoer they start like a bullet point.

But it doesn't seem to work in IE, it only shows on the first link and then doesn't on the rest But it works fine again in Firefox

So does anyone know how i would fix that

Thanks

Are you using a bullet, or a background image for the <li> ? My suggestion would be to use a bg image on the <li> and use padding to push the links over away from the bg image.

Originally Posted by LadynRed

Are you using a bullet, or a background image for the <li> ? My suggestion would be to use a bg image on the <li> and use padding to push the links over away from the bg image.

This is the code I am currently using:

ul li {background-repeat:no-repeat;
line-height:2em;
list-style-image:url(images/icons/li.png);
margin:0;
padding:0;
}

I removed list-style-type and added the image to background-image, but I just couldn't get it right I added repeat-x and then it was just showing at the top of the links

Does anyone know a way in which I could do this

Thanks alot

ul li {background-repeat:no-repeat;
line-height:2em;
list-style-image:url(images/icons/li.png);
margin:0;
padding:0;
}

That won't work, syntax is all wrong. It needs to be:

ul li {
background: url(images/icons/li.png) no-repeat;
line-height:2em;
margin:0;
padding:0;
}

To position the image you may need to add a few pixels of positioning on the background image, like this:

background: url(images/icons/li.png) no-repeat xxpx xxpx;

Originally Posted by LadynRed

That won't work, syntax is all wrong. It needs to be:


To position the image you may need to add a few pixels of positioning on the background image, like this:

Hi, I did what you said (changed the code) and now the little image shows at the very top of my link.

So I tried changing the pixels on the background line like you said and whatever number I typed in, the image disappeared.

Hi,

Replace following code with your current class.

ul li {
background-image:url(images/icons/li.png);
background-position:left center;
background-repeat:no-repeat;
height:25px;
margin:0;
padding:0 0 0 10px;
}

This will work...

Have a great day...

Originally Posted by jay_wonders

Hi,

Replace following code with your current class.

ul li {
background-image:url(images/icons/li.png);
background-position:left center;
background-repeat:no-repeat;
height:25px;
margin:0;
padding:0 0 0 10px;
}

This will work...

Have a great day...

Hey, I did what you said and this was the outcome:



As you can see, it kind of worked, but not fully.

background-image:url(images/icons/li.png);
background-position:left center;
background-repeat:no-repeat;

All that can be combined on 1 line:

background: url(images/icons/li.png) no-repeat left center;

Looks to me like your line-height isn't enough, and you shouldn't be using PX for line-height anyway, use em at least.

Originally Posted by LadynRed

All that can be combined on 1 line:

background: url(images/icons/li.png) no-repeat left center;

Looks to me like your line-height isn't enough, and you shouldn't be using PX for line-height anyway, use em at least.

Thanks, that line kind of helped me get on track.

But do you see how this website has got that list-style-type: circle thing before the links in their sidebar: http://illroots.com/

Thats kinda of what I want. Does anyone on here know how they have done that?

I used firebug and I really couldn't find how they did it

Don't worry, I have fixed it and got everything sorted

Thanks alot you two for the magnificent help and I will give you both talkupation now

Hey Danldinho,
thats a real pain. I cannot stand that dirty disease ridden IE explorer, oh how the mighty fall. Had the same problem myself, if you have heard of the box model in CSS then Mozilla deducts borders margins etc and IE explorer adds. Try using the "small" keyword for font and dont use points use EMS. This strategy will also have useability benefits.

regards

Monker
link drop removed

I see you're using xhtml strict. As a novice I suggest using validate. http://validator.w3.org/