PDA

View Full Version : IE6 adding padding that isn't there

Damicovu
21-07-2009, 10:54 AM
The pages on my site render OK in all browsers—except IE6. On most of my pages, it adds extra padding on the right, pushing content left and putting text and images out of line. The attached GIFs show the difference between IE6 and IE7.

I know that IE6 has many issues and fixes for them (http://www.positioniseverything.net/explorer.html), but I'm not clear what's wrong here or how I can fix it. Any suggestions?

A link to the site is: http://www.damianvuleta.com.au/bio.html. Here's the CSS:

body {
font-size: 100%;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
background-color: #903;
text-align: center;
margin: 0;
padding: 0;
}

#mainwrapper {
font-size: 1em;
background-image: url(../Graphics/StripeBkgrndFlat.jpg);
background-repeat: repeat;
text-align: left;
width: 650px;
height: 1%;
margin-right: auto;
margin-bottom: 12px;
margin-left: auto;
padding-top: 10px;
padding-right: 35px;
padding-left: 35px;
}

#CopyrightBox {
color: white;
font-size: 0.81em;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
font-weight: bold;
background-color: #903;
text-align: center;
vertical-align: middle;
width: 720px;
height: 45px;
clear: both;
margin-top: 3px;
margin-right: auto;
margin-left: auto;
}

.Covertext {
font-size: 1.5em;
font-weight: bold;
text-align: left;
}
#CopyrightBox a {
color: #fff;
text-decoration: none;
}

#CopyrightBox a:hover {
color: #ff0;
}

p { }

td {
font-size: 0.81em;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
text-align: left;
height: auto;
margin-bottom: 10px;
padding-top: 0.3em;
}

.categories {
padding-top: 8px;
}

.close {
color: #903;
font-size: 0.8em;
text-decoration: none;
}

.close a {
color: #903;
text-decoration: none;
}

.Italics {
font-style: italic;
}

.Smalls {
font-size: 0.85em;
}

a:link { }

a:visited { }

a:hover { }

a:active { }

#upperline {
vertical-align: top;
top: 0;
width: auto;
height: 20px;
margin-bottom: 3px;
}

.topnavs {
vertical-align: top;
float: right;
clear: none;
display: block;
}

.sidelink {
font-size: 0.8em;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
text-align: right;
width: 250px;
float: right;
clear: none;
margin-top: 15px;
display: block;
}

.sidelink a {
color: #903;
font-weight: bold;
text-decoration: none;
}

.sidelink a:hover {
color: #ff3500;
}

#LeftPicBox {
font-size: 2em;
float: left;
margin-top: 15px;
margin-right: 25px;
}

.HSthumb {
text-align: center;
width: 182px;
height: 215px;
float: left;
margin-right: 18px;
margin-bottom: 20px;
padding-left: 11px;
display: inline;
}

.Prodthumb {
width: 100px;
height: 100px;
float: left;
margin-right: 26px;
margin-bottom: 20px;
padding-left: 30px;
display: inline;
}

.ContactBox {
text-align: left;
width: 173px;
height: 113px;
float: left;
margin-left: 11px;
}

.bodytext {
font-size: 0.9em;
line-height: 1.3em;
}
tuna
21-07-2009, 11:18 AM
I would suggest you do a CSS reset first, then move forward that way I have found you remove issues like this
patricktt
21-07-2009, 12:20 PM
doees it have anything to do with your mainwrapper being 650px wide? 650 from the left looks like its about the width ie6 is displaying, maybe it isnt taking the padding into account.. try adding an ie6 specific style that sets the width to 750 and see if it makes any difference
hollywood
21-07-2009, 02:11 PM
IE6 doesn't play nicely with floats and margins on the same element.

Add display: inline; and it should fix it up.
Damicovu
21-07-2009, 05:02 PM
I would suggest you do a CSS reset first, then move forward that way I have found you remove issues like this

I'll try that and see what happens.
Damicovu
21-07-2009, 05:03 PM
doees it have anything to do with your mainwrapper being 650px wide? 650 from the left looks like its about the width ie6 is displaying, maybe it isnt taking the padding into account.. try adding an ie6 specific style that sets the width to 750 and see if it makes any difference

What sort of code would be specific to IE6?
patricktt
22-07-2009, 07:13 AM
What sort of code would be specific to IE6?

<!--[if IE 6]>
<style type="text/css">...ie6 specific styles here...</style>
<![endif]-->


Place that in the head section of the page, with any ie specific styles in it. Another way would be to have a specific stylesheet for ie6, then use:

<!--if IE 6]>
<link rel="stylesheet" type="text/css" title="ie6" href="ie6.css" /><![endif]-->
Vee
22-07-2009, 07:48 AM
A better way would be to have a specific stylesheet for ie6, then use:

<!--if IE 6]>
<link rel="stylesheet" type="text/css" title="ie6" href="ie6.css" /><![endif]-->

Fixed for you ;)
Damicovu
22-07-2009, 08:15 AM
Thanks for the ideas. I'll play around with padding on a separate stylesheet for IE6 and see what happens.
jexley
22-07-2009, 08:47 AM
Shit as it is, seems the only way to fix a lot of IE's buggerups is to add an additional SS or additional lines of code.

If *I* were IE, I'd be fixin' that.
Damicovu
22-07-2009, 08:53 AM
Given that IE6's market share is now about 14% and falling, I'll take my time about it...
patricktt
22-07-2009, 09:35 AM
Fixed for you ;)

Haha i don't even know what I had wrong in there :D

Ahh i see, A better way... yes it is a better way :D much better :)
scross
22-07-2009, 09:53 AM
If *I* were IE, I'd be fixin' that.

If only *you* were IE, then all our browser compatibilities would be fixed :)
jexley
23-07-2009, 09:19 AM
If only *you* were IE, then all our browser compatibilities would be fixed :)

YEAH. I just checked too, and shit man... I'm totally not.

Workin' on it.
aprillove20
20-04-2010, 10:20 PM
<!--[if IE 6]>
<style type="text/css">...ie6 specific styles here...</style>
<![endif]-->