WordPress.org

Ready to get started?Download WordPress

Forums

Problem with CSS in IE (4 posts)

  1. ALTexasGirl
    Member
    Posted 5 years ago #

    Hi -

    I'm having some trouble with the right sidebar of my website displaying correctly. The website is http://www.onthebaseline.com.

    In Firefox and Safari, the 300pixel wide sidebar displays correctly, but in Internet Explorer, it falls to the bottom of the page. I've tried editing my CSS, but can't seem to find the correct code to change.

    This is what I correctly am using:

    body {
    	font-size: 9pt;
    	font-family: arial,verdana,geneva,sans-serif;
    	background: #ddd url(images/bgdiag.gif);
    	color: #333;
    	text-align: left;
    	margin: 0;
    	padding: 15px 0;
    	line-height: 140%;
    	}
    
    #wrap {
            padding: 10px;
            clear: both;
    	width: 970px;
    	margin: 0 auto;
            background: #fff;
            border: double #c5c5c5;
            }
    
    #nav {
            height:26px;
            line-height:26px;
            margin: 0 auto;
            padding:0;
            }
    
    #header {
            clear: both;
            padding: 25px 0;
    	margin: 0 auto;
            background: #0066cc;
    	}
    
    #page {
            clear: both;
    	margin: 0 auto;
    	padding: 0;
    	}  
    
    #contentleft {
            width: 660px;
            float:left;
            padding: 10px 0;
            margin: 0;
            } 
    
    #content {
            width: 490px;
            float: left;
            margin: 0;
            padding: 0;
    	}
    
    #midcontent {
    	font-size: 8pt;
            width: 160px;
            float: right;
            margin: 0;
    	padding: 0 0 5px;
            border-bottom: 1px dotted #ccc;
            }
    
    #contentright {
            width: 300px;
            float:right;
            padding: 5px 0;
            margin: 0;
            } 
    
    #sidebar {
            width: 300px;
    	font-size: 8pt;
            float: right;
            margin: 0;
    	padding: 0 0 5px;
            border-bottom: 1px dotted #ccc;
    	}

    I'd really appreciate the help!

    Thanks!

  2. ALTexasGirl
    Member
    Posted 5 years ago #

    Okay, I finally tweaked it to display the sidebar in IE. However, it is now showing too big of a gap in Safari or Firefox. Any hints?

    This is the new code:

    body {
    	font-size: 9pt;
    	font-family: arial,verdana,geneva,sans-serif;
    	background: #ddd url(images/bgdiag.gif);
    	color: #333;
    	text-align: left;
    	margin: 0;
    	padding: 15px 0;
    	line-height: 140%;
    	}
    
    #wrap {
            padding: 10px;
            clear: both;
    	width: 995px;
    	margin: 0 auto;
            background: #fff;
            border: double #c5c5c5;
            }
    
    #nav {
            height:26px;
            line-height:26px;
            margin: 0 auto;
            padding:0;
            }
    
    #header {
            clear: both;
            padding: 25px 0;
    	margin: 0 auto;
            background: #0066cc;
    	}
    
    #page {
            clear: both;
    	margin: 0 auto;
    	padding: 0;
    	}  
    
    #contentleft {
            width: 660px;
            float:left;
            padding: 10px 0;
            margin: 0;
            } 
    
    #content {
            width: 490px;
            float: left;
            margin: 0;
            padding: 0;
    	}
    
    #midcontent {
    	font-size: 8pt;
            width: 160px;
            float: right;
            margin: 0;
    	padding: 0 0 5px;
            border-bottom: 1px dotted #ccc;
            }
    
    #contentright {
            width: 300px;
            float:right;
            padding: 5px 0;
            margin: 0 5 0 5;
            } 
    
    #sidebar {
            width: 300px;
    	font-size: 8pt;
            float: right;
            margin: 0;
    	padding: 0 0 5px;
            border-bottom: 1px dotted #ccc;
    	}

    Thanks!

  3. SteveDrum
    Member
    Posted 5 years ago #

    you might have already worked this out, but it was probably dropping in IE due to the italic text in the 'latest comments' box. if italic text spans an entire line then it seems to make the line 3px longer. if you change it to normal text, it will probably work alright. or you can slightly narrow the box which contains the comments, which will work as well.

    maybe if you do it that way it will fix your second problem.

  4. ALTexasGirl
    Member
    Posted 5 years ago #

    Steve,

    Thank you for the help. I eliminated the italic tags in the comment section, but I'm still seeing too much space between the mid content and contentright/sidebar sections in Firefox and Safari. It looks fine now in IE, but not in the other two browsers.

    Anybody have a suggestion?

Topic Closed

This topic has been closed to new replies.

About this Topic