Got this http://freeipodsetc.co.uk/ Now look in IE6 and Firefox. You can see that in IE6 the right hand navigation bar is down the bottom of the page... not where I want it. I'm looking for a quick fix so wrong IE6 layout = working Firefox layout. Cheers guys
I don't have IE6 right now so I can't see it, but it looks like you've got float drop. You have a content floated left with a width of 65% and the sidebar is floated right with a width of 35%. Just search for those percentages in your CSS. Anyway, it's a good possibility that either: -IE6 is adding 65% and 35% and getting something larger than 100% (those Microsoft guys aren't real great at math : ) The most common solution is to try to reduce those widths (pick one side to work with) until the float drop stops. If it keeps getting smaller and not getting better, then go back to the original sizes and try something else. See where you can get away with reducing margin or padding on the OUTER floated things (and check the width of the floats inside-- IE6 will let them be bigger than their floating containers too sometimes cause it's stupid). -You have floats next to floats, and some of them have margins and padding. Sometimes when there are mutliple floats, the margins get doubled in IE6. It's called (guess) the double-margin float bug. The most common solution is to set display: inline on the floated elements. All the smart browsers will ignore it cause floats are magically display: block anyway, but IE6 removes the margins anyway. Weird. -You can't really increase the width of your wrapper cause it's 100%, and someone floated it left, I think to get rid of a lot of float problems (you aren't getting the 3-pixel jog as your floats are in floats), so that option's out, but in the future if there's a set width on the biggest container, making it a little bigger often gives enough room for the floats for IE6. Read this: http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15 It's a good read.
I'm using a wordpress template. Only changes I've made to the template was increasing the pixel size of the left box (place where posts go). Oh and the header I guess I should have done more than just increase one number.
Depends where and what you increased pixel width. Was it just the width of one of the boxes inside the float? I think I saw most of your boxes have padding around them, and some have margins. Whatever you add in actual box width, take away that amount in either the padding or the margin. Be aware that the margins are holding the boxes apart from each other and the padding is usually pushing text and stuff away from the edges, so you'll have to play with it to get it how you want... just make sure that your TOTALS don't go over a certain amount. You can only stuff so many teenagers in a telephone book, dontcha know.
I'm one of the world's worst website makers so here is the code for the site so someone may be able to see the precise problem as I'm rather lost /* Theme Name: Softly Theme URI: http://www.makequick.com Version: 1.0 Description: 2 Column theme Author: Make Quick Author URI: http://www.makequick.com */ /* Links */ a:link { text-decoration: none; color: #9CBDD6; } a:visited { text-decoration: none; color: #9CBDD6; } a:hover, a:active { color: #CC8AC8; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 20px 0 10px; } h1 { font-size: 24px; margin-bottom: 0px; margin-top: 10px;} h2 { font-size: 18px; } h3 { font-size: 24px; } h4, h5, h6 { font-size: 20px; } /* Other Html Elements */ .titles { font-weight: normal; border-bottom-width: 0; font-size: 24px; text-decoration: none; underline: none;} .titles a:link, .titles a:visited, .titles a:active { text-decoration: none; underline: none; font-size: 24px; font-weight: normal; border-bottom-width: 0; } pre, blockquote { overflow: auto; padding: 0 10px; margin: 20px 30px; line-height: 1.8em; background-color: #f5f5f5; border: 1px solid #e0e0e0; } pre:hover, blockquote:hover { background-color: #f0f0f0; border: 1px solid #d0d0d0; } pre { padding-top: 10px; padding-bottom: 10px; } code { color: #779900; font-family: Consolas, Verdana, "Courier New", Sans-Serif; } ul, ol { line-height: 2.0em; } ul { list-style-image: url(images/bullet.gif); } abbr, acronym { font-style: normal; border-bottom: 1px dotted #333333; cursor: help; } del { text-decoration: line-through; color: #999999; } ins { text-decoration: none; color: #009977; } /* Structure */ body { margin: 0; padding: 0; color: #222222; background-image: url(images/bg1.gif); background-repeat: repeat-x; background-color: #000000; font: normal 76% "Trebuchet MS", "Lucida Grande", Verdana, Georgia, Sans-Serif; } #wrapper2 { width: 900px; margin-left: auto; margin-right: auto; } #header { float: left; width: 900px; background: #FFFFFF; clear: right; background-image: url(images/header.gif); background-repeat: no-repeat; padding-left: 0px; height: 84px; margin-top: 25px; } #navigation { clear: both; float: left; width: 100%; background-image: url(images/nav-bg.gif); height: 65px; margin-top: 0px; padding: 0px; } #wrapper { clear: both; float: left; width: 100%; color: #555555; background: #FFFFFF; } #content-wrapper { width: 65%; float: left; } #content { float: left; padding: 0 0px 10px 30px; } #sidebar-wrapper { width: 35%; float: right; } #sidebar { float: right; padding: 0px 15px 10px 10px; width: 210px; margin-right: 15px; margin-top: 0px; } #footer { clear: both; float: left; width: 880px; text-align: left; padding-left: 20px; background: #FFFFFF; color: #9CBDD6; font-size: 3px; } #footer a { color: #9CBDD6; font-size: 3px; } #footer a: visited { color: #9CBDD6; } #footer a:hover { color: #D39CD6; border-bottom: 1px dashed #D39CD6; } #extras { float: left; width: 780px; color: #444444; text-align: left; padding: 0 10px 10px; margin: 10px 12px 20px; background-color: #f5f5f5; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } /* Header */ #header h1 { padding-left: 30px; } #header h1 a {font-size: 25px;} /* Navigation */ #navigation ul { list-style-type: none; list-style-image: none; float: left; padding: 0px 0px 0px 0px; margin: 0px; } #navigation li { float: left; margin: 0px; padding: 0px; } #navigation li a:link, #navigation li a:visited { float: left; color: #5A869E; display: block; padding-right: 10px; padding-left: 10px; padding-top: 10px; height: 55px; font-size: 14px; margin-top: 0px; } #navigation li a:hover, #navigation li a:active { color: #FFFFFF; background: #B9D3E4; background-repeat: repeat-x; font-size: 14px; margin-top: 0px; background-image: url(images/nav-bg2.gif); } #navigation li.active a { color: #555555; background-color: #ffffff; } /* Wrapper */ #wrapper a:link { font-weight: bold; } #wrapper a:visited { font-weight: bold; } #wrapper a:hover, #wrapper a:active { } /* Content */ #content .post-title a { border-bottom-width: 0; } #content .post p.img { float: left; margin: 0 15px 0 0; } #content .post p.img img { padding: 8px; border: 1px solid #d0d0d0; background-color: #eeeeee; } #content .post-footer { font-size: 90%; color: #888888; margin-bottom: 5px; padding:5px 5px 5px 15px; background-repeat: none; background-color: #F8F8F8; border: 1px solid #EBEBEB; } /* Sidebar */ .sideblock { padding: 5px 10px; margin-bottom: 20px; background-image: url(images/sidebar-bg.gif); background-repeat: no-repeat; background-position: top; } .sideblock ul { } .sideblock h3 { margin-top: 5px; font-size: 14px; color: #CC8AC8; font-weight: bold; } #sidebar dt { margin: 0; padding-top: 5px; font-weight: bold; color: #666666; } #sidebar dd { margin: 0 0 5px; padding-bottom: 5px; line-height: 1.8em; } #sidebar dd a:link { border-bottom-width: 0; font-weight: normal; border-bottom: none; text-decoration: none;} #sidebar dd a:visited { border-bottom-width: 0; font-weight: normal; border-bottom: none; text-decoration: none; } #sidebar dd a:hover, #sidebar dd a:active { border-bottom: none; text-decoration: none;} /* Extras */ #extras h6 { font-size: 14px; text-transform: uppercase; color: #555555; } #friends { float: left; width: 150px; margin-left: 20px; margin-right: 10px; } #links { float: left; width: 275px; margin-right: 50px; } #about { float: left; width: 250px; margin-right: 20px; } #friends ul { padding-left: 20px; } #links dl, #links dt, #links dd { margin: 0; padding: 0; } #links dt { font-weight: bold; padding-top: 5px; } #links dd { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dotted #999999; } /* Comments Styling */ #commentlist li { margin-bottom: 1.5em; padding-bottom: 1em; border-bottom: 1px solid #700000; } #commentform { margin: 1em 0; background: #FFFFFF; width: 280px; } #commentform textarea { background: #f8f7f6; border: 1px solid #d6d3d3; width: 280px; } #commentform textarea:hover { background: #FFFFFF; border: 1px solid #d6d3d3; } #commentform textarea:focus { background: #ffffff; border: 1px solid #939793; } #commentform #email, #commentform #author, #commentform #url { font-size: 1.1em; background: #f8f7f6; border: 1px solid #d6d3d3; width: 280px; } #commentform #email:hover, #commentform #author:hover, #commentform #url:hover { font-size: 1.1em; background: #ffffff; border: 1px solid #d6d3d3; width: 280px; } #commentform #email:focus, #commentform #author:focus, #commentform #url:focus { font-size: 1.1em; background: #ffffff; border: 1px solid #939793; width: 280px; } #commentform input{ margin-bottom: 3px; } .date { background: url(images/date.gif) no-repeat; height: 54px; margin-bottom: 0px; width: 54px; text-align: center; float: left; margin-top: 15px; } .date .month { display: block; color: #88A4BA; padding: 2px 0px; text-align: center; text-transform: uppercase; font-size: 10px; margin-top: 2px; font-weight: bold; margin-bottom: 3px; } .date .day { display: block; color: #607D93; font: 2.3em Georgia; padding-top: 0px; text-align: center; margin-top: -8px; } #left { width: 60px; float: left; } .slogan { font-size: 13px; color: #6F6F6F; margin-left: 30px; margin-bottom: 2px; } Code (markup):
#content-wrapper { width: 65%; ...etc... #sidebar-wrapper { width: 35%; ...etc... Just make one of those a little smaller, until IE6 behaves. If this makes the stuff inside act weird, then they must also be made a little smaller too. Like I said (though I could be wrong of course), I think IE6 is adding 65% and 35% and getting something a bit bigger than 100% (the width of the #wrapper) and thus thinks it needs to drop one down beneath the other. Also add in the display: inline just in case. I don't see any margins which IE6 can double, but if any are added later to space the boxes correctly, it will stop any doubling.