Problem with CSS in IE

  • Hi –

    I’m having some trouble with the right sidebar of my website displaying correctly. The website is https://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!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter altexasgirl

    (@altexasgirl)

    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!

    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.

    Thread Starter altexasgirl

    (@altexasgirl)

    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?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problem with CSS in IE’ is closed to new replies.