Forums

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


#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;
					}

   <div id=\"content\">
		<h2>
			<ul class=\"service\">
            	<li><img src=\"images/services_cool.jpg\" alt=\"Cool and Freezer Rooms\" border\"0\" width=\"793\" height=\"154\" /></li>
                <li><img src=\"images/services_ice.jpg\"alt=\"Ice Machines\" border\"0\" width=\"793\" height=\"154\" /></li>
                <li><img src=\"images/services_pump.jpg\"alt=\"Heat Pumps\" border\"0\" width=\"793\" height=\"154 /></li>
                         </ul>
               </h2>

I hope there is enough information in here, my first post.

Thanks for any help offered

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

treehouse : what would you like to learn today?

Forums

IE padding issue