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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Can't align my sidebar in IE 6

    I just finished coding up my site, boonkill.com and everything seemed to be just right, but the whole time I was testing with Firefox and IE 7, and wanted to make sure i had all the browsers covered, so I submitted my site to browsershots.org/ and from this screen shot I noticed that in IE 6 (and older) my sidebar is not lining up. I have tried everything, and i can get it to line up in one or the other (IE 6 or Firefox), but not both.

    Here's the code for the sidebar:

    Code:
    <div class="sidebar">
    <h2>Latest Posts</h2>
    <ul class="list1">
    <?
    mysql_connect($dbserver,$username,$password);
    @mysql_select_db($database) or die( "Unable to select database");
    $count = 15;
    $query="SELECT post_title, ID FROM bk_posts ORDER BY ID DESC LIMIT 0, $count";
    $result=mysql_query($query);
    mysql_close();
    
    for ($i = 0; $i < $count; $i++) {
        $title=mysql_result($result,$i,"post_title");
        $id=mysql_result($result,$i,"ID");
        echo "<li><a href=\"?p=post&amp;id=$id\">$title</a></li>";
    }
    ?>
    </ul>
    </div>
    and here's the css for the sidebar:

    Code:
    .sidebar {
    	padding:0 0 20px 0;
    	width:212px;
    	margin-left:544px;
    }
    
    .sidebar p {
    	margin:20px 0 0 0;
    	text-align: center;
    }
    
    .sidebar h2 {
    	color:white;
    	font-size:1em;
    	margin:20px 0 0 0;
    	padding:2px;
    	background-color:black;
    }
    
    .sidebar ul.list1 {
    	list-style:none;
    	margin:0;
    	padding:0;
    	border-bottom:1px solid black;
    	background-color:#9AD4F6;
    }
    
    .sidebar ul li {
    	display:block;
    	padding:0;
    	margin:0;
    	border-bottom:1px solid white;
    }
    
    .sidebar ul li a, .sidebar ul li a:link, .sidebar ul li a:visited {
    	display:block;
    	color:black;
    	text-decoration:none;
    	padding:2px;
    }
    
    .sidebar ul.list1 li a:hover {
    	background-color:#CBE7F8;
    	margin:0;
    	padding:2px;
    }
    Any help would be much appreciated. Thank you in advance.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Notice that your left column is shifted to the right in IE6. It could be that it is pushing your right contents. I think the problem is this:

    The IE Doubled Float-Margin Bug

    Try use left padding instead of left margin.

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    alright, I'm gonna try those suggestions right now. I'll tell you how it goes.

    EDIT: That inline fix didn't seem to help. I am messing with the padding and margins right now, but like i have already said, when i line one up the other falls out.
    Last edited by JimmyNavio; 01-24-2007 at 05:44 AM.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    You're right. While it did fix that your left column are in the same position in both IE6 and FF it didn't correct your right side. Here the problem is this:

    The IE Three Pixel Text-Jog

    Your right column is not floated. I recommend that you float your right column to the left like you did with your left column. Something like this:
    Code:
    .sidebar {
            float: left;
    	padding: 0 0 20px 0;
    	width:212px;
    	margin: 0;
    }

  • #5
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wow, that hack worked perfectly. I had to tweek it a little bit, but its all fixed. Here's the code I added for anyone with the same problem:

    Code:
    /* Hide from IE5-mac \*/
    
    * html .maincolumn {
    margin-right: 5px;
    }
    
    * html .sidebar {
    height: 1%;
    margin-left: 0;
    }
    
    /* End IE5/mac hide */
    basically, its a hack just for IE 6 to get rid of those 3 extra pixels and using the main column right margin to align it separately. Thanks again guys. This is my first time here, and I signed up just because of this one damn problem, and I am impressed with your knowledge.


  •  

    Posting Permissions

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