Top Margin added in IE6

Hi everybody…

I officially did ‘unfriend’ IE6 :smiley: IE6 is the only browser shows this…
I noticed that IE6 is adding a top margin to my pictures and link on the page…

Here is a link… http://www.rajeevthomas.com/viewgallery.php?cid=1&pid=285

How do I keep the pictures on the top itself…?

Thank you in advance for any help…

Hi,

You haven’t accounted for the list element which is taking up space in the flow.

Add this:


#menu li{display:inline}


Hi Paul…

I wish I know half of what you know now! …
Please look at this page…

1)IE8 and 9 adds to the page so much… like the page height is 2000px! But my page height is only 890px…


.limagePage {
       
	
    width:860px;
    min-height:890px;
    height:auto !important;
    height:890px;

    }

2)My left and right .png arrows are pushed out by IE6 … absolute positioning is not keeping it in place…

my code is

.prev{

  margin:0px;
  color:#FF0000;
  padding: 0px;
  position:absolute;
  left:-170px;
  top:295px;
  
}

http://www.rajeevthomas.com/viewgallery.php?cid=3&pid=290

Thank you Paul…

Rajeev

I didn’t notice that IE8 was any taller than other browsers.

2)My left and right .png arrows are pushed out by IE6 … absolute positioning is not keeping it in place…

Your image is 900px wide but the container it sits in is only 860px wide.

Either change the container to 900px (and alter the arrow positions accordingly):


.main {
    width:900px;
    margin:auto;
    position:relative;
    left:0px;
}

Or reduce the image to 860px width.

Once you start telling the browser to do things that are impossible then you will find that they may error handle in different ways :slight_smile:

Ie6 will always stretch a container to contain its content but other browsers will let said content spill out and basically ignore it. That’s why the arrows are different in IE6 because they are being placed from the bigger element.

Thank you Paul for all the help…it all makes sense when you siplify it like that…thank you…