Forum Moderators: not2easy

Message Too Old, No Replies

IE6 is knocking the left margin off my div

         

GGR_Web

1:06 pm on Apr 24, 2009 (gmt 0)

10+ Year Member



Only in Internet Explorer 6 I am seeing the left hand margin being knocked off one of my divs, so that I lose the first letters of my content.

The div in question is between two sidebar divs, a header and a footer.

I've reverted all position to static, and I've been messing with margin and padding all day. Very irrating.


*{
font-family: Helvetica, Verdana, Arial, sans-serif;
}
* a{
font-size:12px;
color:#000066;
font-weight:bold;
text-decoration:none;
}
* a:hover{
text-decoration:underline;
}
body {
margin-left:5px;
width:995px;
}
a img {
border:none;
}
.wrapper {
margin: 0 auto 0 auto;
/*background-image:url('http://www.example.com/ekm/blob.jpg');*/
}
.frame {
position:relative;
}
.adleft {
width:105px;
min-height:700px;
margin:-10px 105px auto 0px;
}
.adright {
background-image:url('http://www.example.com/ekm/coil.jpg');
width:105px;
min-height:1000px;
margin:-170px 110px 0 890px;
}
#topnav {
background-color:#FF0000;
width:785px;
min-height:50px;
margin:-1060px 0px 100px 105px;
padding:20px 0 0 10px;
font-size:12px;
}
#topnav p {
font-family:Arial, Helvetica, sans-serif;
}
#topnav a {
font-weight:bold;
color:white;
}
.banner {
width:785px;
min-height:50px;
margin:-945px 0px 200px 105px;
padding-top:5px;
}
.shop {
z-index:20;
position:absolute;
background-color:#FFFF00;
width:205px;
min-height:207px;
margin: -365px 215px auto 685px;
padding:30px 50px -10px 50px;
text-align:center;
}
.currencyshop {
margin-left:55px;
}
.content {
margin-top:-8px;
width:785px;
z-index:-1;
}
#leftnav {
position:absolute;
z-index:-300000000000;
}
/*discountinued
.special {
background-color:#0000FF;
width:205px;
min-height:500px;
margin: -200px 215px auto 685px;
}
.frspecial {
position:absolute;
background-color:#0000FF;
width:205px;
min-height:100%;
margin: -100% 215px auto 685px;
}*/
/*classes for various page center templates*/
.highlight {
background-color:#000000;
width:420px;
min-height:200px;
margin:-500px 425px auto 265px;
}
.news {
background-color:#00FF00;
width:420px;
min-height:300px;
margin:-300px 425px auto 265px;
}
.centerblock {
font-size:13px;
width:500px;
min-height:900px;
margin:-200px 375px auto 120px;
padding-left:10px;
text-align:left;
}
.centerblock a {/*button text, .navigation for background*/
font-size:14px;
font-weight:bold;
color:#00CCFF;
}
.centerblock a:hover {
color:#990066;
}
.centerblock > table > tbody > tr > td > font > a {/*breadcrumb trail*/
color:#FF6600;
font-size:16px;
font-weight:bold;
}
.centerblock > table > tbody > tr > td > font > b > a {/*back trail*/
color:#FF6600;
font-size:16px;
font-weight:bold;
}
.contact {
margin-top:0px;
margin-left:-25px;
margin-bottom:-30px;
width:135%;
height:auto;
padding:5px 5px 5px 5px;
background-color:#000000;
color:#FFFFFF;
}
.info {
margin-top:-180px;
margin-left:109px;
min-height:950px;
}
.info h1{
color:#009999;
}
.info h2, h3 {
color:#3399CC;
}
#footer, #footer a{
background-color:#000066;
color:#FFFFFF;
width:995px;
min-height:20px;
margin:0px 0px 0 0;
padding-top:5px;
padding-left:3px;
}
#footer a {
font-weight:bold;
}
.navigation a {
display:block;
background:url('http://www.example.com/ekm/blueshort.gif') 0px -5px no-repeat;
width:90px;
height:30px;
padding:11px 5px 5px 0px;
text-align:center;
}
.navigation a:hover {
background-position:0px -67px;
}
.navcat { /*for product results*/
width:240px;
}
.navcat > font > a {
color:#FF0000;
}
.navcat > font > a:hover {
color:#990000;
}
.jump { /*for jumplist*/
width:900px;
text-align:left;
font-weight:bold;
margin-left:-15px;
}
.search { /*in case the search function needs more formatting*/
}
.productsingle {
margin-left:10px;
width:720px;
}
.productsingle img {
float:right;
}
.productsingle h1 {
font-size:1000%;
color:#FF0000;
}
.contentlanding {
background-image:url('http://www.example.com/ekm/blob.jpg');
font-size:13px;
width:710px;
min-height:900px;
margin:5px 375px auto 0px;
padding-left:10px;
text-align:left;
}
.contentlanding img {
float:right;
border:none;
}
IE6 Overrides
/* actinic ggr ie overrides */
* {
position:static;
}
.adleft {
margin-bottom:-1100px;
margin-right:1000px;
}
.adright {
height:860px;
margin-top:-140px;
margin-bottom:-773px;
}
#topnav {
margin-top:30px;
padding-bottom:5px;
}
.banner {
background-color:#000000;
float:left;
width:786px;
margin:-50px 0 0 52px;
padding:0px 0 0 0;
min-height:0;
}
.shop {
margin-left:-205px;
margin-top:-87px;
}
.centerblock {
padding:-20 -20 -20 -500;
margin-top:0px;
margin-left:120px;
height:1250px;
width:500px;
text-align:left;
}
.info {
margin-top:0px;
height:950px;
}
.content {
margin-top:0px;
margin-left:7px;
}
.currencyshop {
margin-left:0px;
}
.contact {
margin-top:50px;
margin-left:-25px;
}
.search {
position:relative;
}

[edited by: swa66 at 1:43 pm (utc) on April 24, 2009]
[edit reason] speifics, code cleanup, please use example.com, no URLs -> see ToS and forum charter [/edit]

CSS_Kidd

1:09 pm on Apr 24, 2009 (gmt 0)

10+ Year Member



Yeah it does that. I always try to find a way to use padding instead of margin. Padding is more precise in all browsers.

swa66

1:47 pm on Apr 24, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try validating your code, there are errors in it like negative padding:

padding:-20 -20 -20 -500;

- you need to specify a unit on anything but "0"
- you cannot give negative padding

If you give something position absolute: there's no need to move it with margins, you have top, right, bottom and left to put it where you want it to be.