Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: IE Margins

  1. #1
    New Coder
    Join Date
    Sep 2008
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts

    IE Margins

    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?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You need to consider the box model issue of IE. 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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Sep 2008
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    So would my CSS need to look something like this?

    Code:
    .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...

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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=ht...Inline&group=0 and http://jigsaw.w3.org/css-validator/v...ning=1&lang=en
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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;
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #6
    New Coder
    Join Date
    Sep 2008
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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)...

    Code:
    .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.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    .twoColFixRtHdr #mainContent { 
    	margin: 30px 300px 0 0; 
    	padding: 0 0 0 10px; 
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    Sep 2008
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •