IE 6&7 left padding fix?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
Rem
Forum Newbie
Posts: 3
Joined: Mon Jul 12, 2010 8:49 am

IE 6&7 left padding fix?

Post by Rem »

I have a basic two column website. The website looks perfect in everything but IE 6 and 7. The center column is pushed over to the amount the left padding is set to.

Here is the left and center css:

Code: Select all

#leftcol { 
	position:relative;
	top:-10px;
	left:-10px;
	float:left;
	width:180px;
	margin:0 0 -10px 0;
	padding:10px; 
}

#centercol {
	padding-left: 200px;
	height: 100%;
}
If I remove the padding-left from the css it looks perfect in IE, but in firefox it overlaps the left column.

Any help would be great. Let me know if you need more information.

-edit
Changing padding-left to margin-left fixed it. Not sure why though...
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

Re: IE 6&7 left padding fix?

Post by aravona »

try:

[text]#leftcol {
position:relative;
top:-10px;
left:-10px;
float:left;
width:180px;
margin:0 0 -10px 0;
padding:10px;
}
#centercol {
padding-left: 0px;
height: 100%;
}
html>body #centercol {
padding-left: 200px;
height: 100%;
}[/text]

should work, its a hack which IE cannot understand. so use the normal #centercol for how you want it to look in IE and the html>body for the other broswers.
Post Reply