WordPress.org

Ready to get started?Download WordPress

Forums

Sidebar Drops Down in Internet Explorer 6 and lower (3 posts)

  1. wildhalf
    Member
    Posted 6 years ago #

    Hi,

    I'm having a little problem with my blog. The sidebar drops down to the end of my content on every page in IE 6 and lower.

    It works perfect in all other browsers, firefox, I.E 7, etc

    http://www.p90x.ws

    I followed the following steps

    Step 1. Validated sit at W3C’s Validator! Site had errors but i fixed them and all is ok now.

    Step 2. Checked Images Width - images are Ok but it happens on all pages even witout images.

    Step 3. Reduced the size of the ‘Content Area’ & ‘Sidebar’

    has anybody got and ideas on how i can fix this. I will supply code if needed.

  2. wildhalf
    Member
    Posted 6 years ago #

    I managed to fix the probelm... My Theme had a CSS file for IE7, so i copied this and kept adding things to it till i got IE6 working.

    I found the following code to the Header.php file

    <!--[if ie 7]>
    <link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_directory'); ?>/ie-win.css" />
    <![endif]-->

    This code displays a different CSS file if you are using IE7. So i added the code below under this which displays a different CSS file again for any version of IE less than 7 (i.e lt = less than)

    <!--[if lt ie 7]>
    <link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_directory'); ?>/ie_style.css" />
    <![endif]-->

    I then changed the following code adding 'overflow: hidden;' to #content-wrapper and adding in #content, #sidebar-wrapper and #sidebar from my main style.css also. And last but not leaast i had to change the width on #content-wrapper to 73% and the width on #sidebar-wrapper to 25%

    #content-wrapper { width: 73%; overflow: hidden; }
    
    #content pre { width: 360px; overflow: hidden; }
    
    #content
    {
    	float: left;
            overflow: hidden;
    }
    
    #sidebar-wrapper
    {
    	width: 25%;
    	float: right;
    	margin-top: 20px;
           overflow:hidden;
    }
    
    #sidebar
    {
            float: right;
    	padding: 0px 15px 10px 10px;
    	width: 200px;
    	margin-right: 15px;
    	margin-top: 0px;
            overflow:hidden;
    }
  3. sleektest
    Member
    Posted 5 years ago #

    You are God sent wildhalf.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags