...

View Full Version : IE Margins



jcx1028
10-28-2008, 08:50 PM
Here's a random page from a site I'm working on...

http://fwrhomes.com/prequalify.html

Here's another...

http://fwrhomes.com/contact.html

I'm in the process of taking what had been a table-based site and redoing it as a CSS-based site so that future changes will be painless. The only problem is Internet Explorer (both 7 and 8). It's pushing my right sidebar down further than it should. I know this has something to do with the way IE handles margins... I just don't know how to fix it so that the two columns are aligned at the top. Any suggestions?

abduraooft
10-29-2008, 09:00 AM
You need to consider the box model issue of IE (http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41). You'd get an idea, if you put some borders around the main content and side bar. Have a try by reducing the padding/margin-left of the main column.

jcx1028
10-29-2008, 01:18 PM
So would my CSS need to look something like this?


.twoColFixRtHdr #sidebar1 {
float: right;
width: 250px;
margin:30px 30px 0 0;
text-align:center;
color:#FFFFFF;
font-size:18px;
font-weight:bold;
line-height:22px;
}
* html #sidebar1 {
margin: 10px 30px 0 0;
m\argin: 30px 30px 0 0;
}

It doesn't appear to have made any difference...

abduraooft
10-29-2008, 02:16 PM
Applying padding:0; to #mainContent would definitely make it aligned on top.
This may not be good for the appearance, so try to reduce the margin-right of #sidebar1 to find an optimal value, which work on both IE and FF

PS: Validate your html and CSS and fix all errors, see http://validator.w3.org/check?uri=http%3A%2F%2Ffwrhomes.com%2Fprequalify.html&charset=%28detect+automatically%29&doctype=Inline&group=0 and http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ffwrhomes.com%2Fprequalify.html&profile=css21&usermedium=all&warning=1&lang=en

jerry62704
10-29-2008, 02:59 PM
You can't put the hack on the letter "a".

This:* html #sidebar1 {
margin: 10px 30px 0 0;
m\argin: 30px 30px 0 0;

Should be:* html #sidebar1 {
margin: 10px 30px 0 0;
ma\rgin: 30px 30px 0 0;

jcx1028
10-29-2008, 03:18 PM
Here's one of the pages I'm working on...

http://fwrhomes.com/liquidation.html

...And here's the updated CSS (or at least a portion of it)...


.twoColFixRtHdr #container {
width: 960px;
background: #FFFFFF;
margin: 0 auto;
text-align: left;
}
.twoColFixRtHdr #header {
background-color:#000000;
background-repeat:no-repeat;
height:auto;
text-align:center;
}
.twoColFixRtHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.twoColFixRtHdr #sidebar1 {
float: right;
width: 250px;
margin: 30px 30px 0 0;
text-align:center;
color:#FFFFFF;
font-size:18px;
font-weight:bold;
line-height:22px;
}
* html #sidebar1 {
margin: 10px 30px 0 0;
ma\rgin: 30px 30px 0 0;
}
.twoColFixRtHdr #sidebar1 a:hover {
color: #ffcc00;
}
.twoColFixRtHdr #sidebar1 .box1 {
border:1px #6e0000 solid;
background-color:#000000;
margin-bottom: 30px;
padding-bottom:16px;
height:250px;
}
.twoColFixRtHdr #sidebar1 .box1b {
border:1px #6e0000 solid;
background:#c22b19;
padding-bottom:16px;
margin-bottom:30px;
}
.twoColFixRtHdr #mainContent {
margin: 30px 310px 0 30px;
padding:0;
}
.twoColFixRtHdr #mainContent .box1 {
border:1px #6e0000 solid;
width: 610px;
text-align:center;
}

But I'm still getting the same misalignment at the top in IE.

abduraooft
10-29-2008, 03:29 PM
Try

.twoColFixRtHdr #mainContent {
margin: 30px 300px 0 0;
padding: 0 0 0 10px;
}

jcx1028
10-29-2008, 03:58 PM
I hate to be a pain. Honestly. I defer to your expertise and I appreciate your help more than you probably know. But, yeah, that didn't work. And I'm not entirely sure how or why adjusting the left margin of the main content div would affect the top margin of the sidebar.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum