Please Help...IE6 Issue..Tried everything

[deita]

Hi guys...Please help me. Everything displays as it should in every browser except for IE 6. I tried changing positioning, changing margins, getting rid of padding, adding padding, tried every possible combination...Nothing works. Look at the following two pictures, The first one is good...the second one is on IE6 and as you can see the menu box shrinks in width.
http://img.photobucket.com/albums/v60/deita/normal.jpg
http://img.photobucket.com/albums/v60/deita/messedup.jpg
Here is my css:

Please Please HELP!!!


@charset "UTF-8";
/* CSS Document */


body {
background-color:#996633
}

img {
border: none;
width: 80px;
height: 80px;
}

#main {
background-color: #6B6042;
height: 580px;
width: 680px;
position: relative;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
border: 1px solid #999999;
}

ul#mymenu{
background-color: #A1966C;
margin-top: 0px;
list-style-type: none;
padding-top: 60px;
margin-bottom: 0px;
padding-bottom: 0px;
margin-left: 120px;
height: 520px;
width: 70px;
}

ul#mymenu li {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 20px;
padding-bottom: 10px;
}

ul#mymenu li a{
text-decoration:none;
color: #FFFFFF;
}

ul#thumbs{
width:242px;
margin-top:73px;
margin-left:300px;
list-style-type:none;
margin-bottom: 0px;
height: 420px;
top: 0px;
position: absolute;
margin-right: auto;
}

ul#thumbs li {
padding-top: 0px;
float: right;
clear: right;
padding-bottom: 0px;
}
ul#thumbs li.lft{
float:left;
clear:none;
padding-top: 0px;
padding-right: 1px;
}

h1{
font-size: 44px;
font-weight: bold;
font-variant: normal;
color: #5D5339;
letter-spacing: 7px;
font-family: Verdana, Arial, Helvetica, sans-serif;
position: absolute;
top: 420px;
width: 680px;
text-align: center;
white-space: nowrap;
margin: 0px;
padding: 0px;
float: none;
clear: none;
}
h1.shadow{
font-size:44px;
font-weight:bold;
color:#A1966C;
top: 418px;
left: -1px;
}

p{
position: absolute;
top: 70px;
left: 250px;
color: #A1966C;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
width: 370px;
}

a {
color: #FFFFFF;
text-decoration: none;
}

#mail{
position:absolute;
width:370px;
left: 250px;
top: 200px;
background-image: url(images/mail.png);
height: 30px;
background-repeat: no-repeat;
}

[simonpeterong]

kindly post the link to a live site for this one so that we can see the actual site, giving us only the css won't really help us

[deita]

kindly post the link to a live site for this one so that we can see the actual site, giving us only the css won't really help us

of course, i am sorry for not doing so in the beginning
the url is www.laraberchdesigns.com

[nenpetko]

Hi, put in your css ul#mymenu property this line:
padding-left: 40px;
That's it. Btw. your site was in IE7.0 displayed exact the same way as it was in IE6. You get this 40px from somewhere but I had no luck to find from where. Good practice is that you put this line at beginning of every css file:

* { padding: 0px; margin: 0px; }

with these line you set all paddings and margins to 0.

[deita]

Hi, put in your css ul#mymenu property this line:
padding-left: 40px;
That's it. Btw. your site was in IE7.0 displayed exact the same way as it was in IE6. You get this 40px from somewhere but I had no luck to find from where. Good practice is that you put this line at beginning of every css file:

* { padding: 0px; margin: 0px; }

with these line you set all paddings and margins to 0.

thank you for answering, but wouldn't this solution add the padding in firefox and safari as well? It looks good in firefox and safari, so padding will make the menu look bigger in firefox and safari and opera...what do you think?

[nenpetko]

thank you for answering, but wouldn't this solution add the padding in firefox and safari as well? It looks good in firefox and safari, so padding will make the menu look bigger in firefox and safari and opera...what do you think?

Sorry for late answering. If you put * { padding: 0px; margin: 0px; } as your first line you will reset paddings and margins on global level, then you can do what I told you and everything will look just fine in every browser.

[deita]

Sorry for late answering. If you put * { padding: 0px; margin: 0px; } as your first line you will reset paddings and margins on global level, then you can do what I told you and everything will look just fine in every browser.
Thanks a lot. It worked..Thank you :-)