CSS li problem at IE! please advice

Hi guys please check out my new site www.internetcafesoftware.org check it at IE and Firefox.. In firefox you will notice at the rightside under features when you point your mouse in any features there. There will be a image hover..

But if you look onto IE.. the theres no hover there and theres an unwanted spacing at li code which i wanted to remove..

please advice how to fix these things...

Kojak

 

Try changing list-style-type:square; to list-style-type:none; in this selector:

#sidecontent1 li {
background-image:url(images/topbg.gif);
background-position:left top;
background-repeat:no-repeat;
display:block;
list-style-position:outside;
list-style-type:square;
margin:0px;
padding:8px;
}

Code (markup):

change to:

#sidecontent1 li {
background-image:url(images/topbg.gif);
background-position:left top;
background-repeat:no-repeat;
display:block;
list-style-position:outside;
list-style-type:none;
margin:0px;
padding:8px;
}

Code (markup):

 

Hi i just did it but i didnt upload it yet. and still having the same problem.. it doesnt help..

KOjak

 

Well first off, I'd probably toss a ID on the UL and assign the UL "list-style:none;" - that will get rid of the excess characters.

as to the hover states, they work in IE7 - IE6 and earlier have no :hover method.

The easiest fix would be to add this to your CSS
* html body {
behavior:url('csshover2.htc');
}

and toss this file alongside your page:
http://www.xs4all.nl/~peterned/htc/csshover2.htc

The site itself:
http://www.xs4all.nl/~peterned/csshover.html

is chock full of explanations.

You might also want to fix the 'buy now' name/id into a valid single 'token' since that's tossing as validation error, ease up on all those unneccessary and unneeded wrappers, and actually use header tags for your headers instead of <div id="header"> or worse <b>Features:</b><br /> and <p><strong>Testimonials:</strong></p><p>&nbsp;</p>

Usually if you end up resorting to a empty <p></p>, &nbps, or put two <br /> in a row you are probably wasting code on presentational html instead of putting presentation where it belongs - in your CSS.

You might also want to consider that one really should only have a single h1 on the page, all headers below that marking subsections of the page itself. Remember grade school grammar - headers mark blocks as if they were in a tree.

Of course, being it has that STUPID javascript image swap method in place, I suspect Dreamweaver or some other Macromedia product is involved? Again, flush that crap down the toilet and save yourself some headaches.

 

Try setting the margin to 0 on #sidecontent1 UL. It's working on my end. Here's all the CSS, in case I'm forgetting to tell you something:

#sidecontent1 LI {
background-image:url(images/topbg.gif);
background-position:left top;
background-repeat:no-repeat;
display:block;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:8px;
}

#sidecontent1 LI:hover {
background-image:url(images/topbghover.gif);
color:#333;
}

#sidecontent1 UL {
list-style-position:inside;
list-style-type:none;
margin:0;
padding:2px;
}

Code (markup):

 

My reply helps the extra spacing, but not the hover. Sorry, I missed that part of your question.

Deathshadow, that's a cool little hack.

Also, one last thing I forgot. You need to change your #content padding because it's not taking into account the padding you applied to the UL and the LI in the #sidecontent1. It totals 20, so I changed your right margin in #content from 180px to 200px.

#content {
	BORDER-RIGHT: #efefef 0px solid;
	PADDING-RIGHT: 9px;
	BACKGROUND-POSITION: 50% top;
	PADDING-LEFT: 9px;
	BACKGROUND-IMAGE: url(images/topbg.gif);
	PADDING-BOTTOM: 9px;
	MARGIN: 0px 200px 0px 0px;
	PADDING-TOP: 9px;
	BACKGROUND-REPEAT: no-repeat
}

Code (markup):