IE padding issue

[Mr Dobalino]

Hi,

Covered a million times probably but I have been looking hard and can’t seem to solve my problem. I am fairly new to the CSS game but there is something I am clearly over looking.

Basically, I want to show 3 images vertically on a page. I am using an unordered list to do it. In Safari and Firefox the images line up underneath the H1 header like I want it to, but in IE 6 (which I am testing via Parallels from my MAC) there is clearly some kind of padding which I can’t seem to get rid of. Maybe there is something I am not trying, or I haven’t understood the ‘IE box model issue’ properly. Any input would be great. Even if it is advice on doing it in a better way.

Its not online yet so can’t provide links

I have included the * {margin:0px padding:0px} in the style sheet amongst other resets

Code:

#page-wrap {
position: relative;
margin:0px auto;
width: 932px;
z-index: 100;
height: 800px;
padding:0px;

h1{
position:absolute;
top:220px;
left:40px;
font-size:20px;
color:#8aab46;
border-bottom-color: #a0a98f;
border-bottom-style: solid;
border-bottom-width: 2px;
margin:0px 15px 0px 15px;
padding:0px 0px 3px 0px;
z-index:600;
}

#content {
position:absolute;
top:240px;
left:40px;
z-index: 300;
padding:0px;
border:0px;
margin:0px;
}

h2{
color: #696969;
text-decoration: none;
margin-left:10px;
overflow:hidden;
}

h2 ul.service{
border:0px;
display:block;
}

h2 ul.service li{
padding:0px;
}

Code:

• 
• 
• 
  #56931

apostrophe

Participant

Why do you have your list inside a h2 tag? The h2 tag is for sub-headings not a substite for a div. If you really need to wrap your list in a div then use a div.
Though, to be honest <ul class="service"> should be a good enough hook 9 times out of 10.

Try dumping the h2’s from your markup and see where you are then.

#56991

Mr Dobalino

Member

Thanks for the reply,

Took the ul.service out of the H2 tag, hasn’t had any effect but will take it on board for future.

I have actually just sorted it by specifying the the ‘left’ attribute to be 10px less in a conditional stylesheet set up for IE6. Seems like the way to go. I hope this is good practice

cheers

[apostrophe]

Why do you have your list inside a h2 tag? The h2 tag is for sub-headings not a substite for a div. If you really need to wrap your list in a div then use a div.
Though, to be honest <ul class="service"> should be a good enough hook 9 times out of 10.

Try dumping the h2’s from your markup and see where you are then.

[Mr Dobalino]

Thanks for the reply,

Took the ul.service out of the H2 tag, hasn’t had any effect but will take it on board for future.

I have actually just sorted it by specifying the the ‘left’ attribute to be 10px less in a conditional stylesheet set up for IE6. Seems like the way to go. I hope this is good practice

cheers

[Author]

Posts