Untracable CSS issue??

Today, moneymakingguru was so kind to post an issue with my website on this thread.

The website i'm talking about is awesomegadget.com.

The problem is clearly visible on the screenshot:


Now, i cannot reproduce this on my PC. I'm running FireFox 2 and IExplorer 6. I have no idea what moneymakingguru runs... I also tested the site on IExplorer 7 on another PC, and I don't remember seeing anything like this.

Can you reproduce it? If so, On which system? Any solutions for this problem?

Thanks a lot!!

 

Note: i'm aware of the
.categories ul {style.css (line 434)
list-style-type:none;
margin-bottom:-5px;
margin-left:-30px;
margin-top:0px;
position:relative;
}
with margin-left: -30px.

I must use <ul> because this theme is using Wordpress and the category list is displayed like that To make the layout OK in FF and IE6, i've added the margin-left: -30px...

 

i am able to reproduce it in ie7. ie6 and ff look ok.

i'd suggest adding an IE7 stylesheet

<!--[if gt ie 6]>
<link rel="stylesheet" type="text/css" href="/theme/stylesheet_ie7.css" /><![endif]-->

Code (markup):

and put:

.categories ul {
margin-left: 0 !important;
}

Code (markup):

in it.

be sure this style sheet is loaded AFTER the general style sheet in the header template

 

Firefox/Gecko family, and Konqueror/Safari use a 40px left padding to indent a list. IE and Opera use a 40px left margin.

Your -30px left margin all but balances the padding in Gecko and KHTML browsers, but overdoes for IE and Opera.

For best results, simply zero one and use the other for the desired indention, or zero both. Eg.,

ul {
  padding: 0;
  margin: 0;
  }

Code (markup):

cheers,

gary

 

Thank you briansol and Gary!

The problem has been solved. I opted for the solution of briansol, because I might have need of such a different stylesheet for IE7 anyway... Good to know though the behavior of padding and margin in all these browsers...