xmfClick Posted April 20, 2006 Share Posted April 20, 2006 I am fairly new to CSS, though a developer for many years. A client asked me to update his website, and we discussed changing the layout from table-based to "CSS-based", i.e. box model. Great; I read as much as I could, snaffled stuff from AListApart, BlueRobot, OSWD and so on. Got the content generation working (it's a sort of CMS thing in back), but the problem I have is that (in IE6) the main content div expands a few pixels leftwards once it reaches below the bottom of the left nav. Works fine in Ffox 1.5. Is this a known problem? I can't find any reference to it. If it's known, does anybody know a workaround? Basic structure is shown below. If you want the code I'll post it, but I don't want to waste people's time ploughing through my sorry code if this is a known problem with a workaround. (Bizarrely, when I changed the left nav + main content to use a simple two-cell table, as an experiment, IE6 displayed it perfectly while Ffox didn't display it at all.)Thanks in anticipation,Click <body><div id="container"> <div id="header"> logo etc </div> <div id="topnav"> <ul><li>sliding doors</li></ul> </div> <div id="leftnav" float:left width:150px> menu </div> <div id="content" margin-left:165px> main content </div> <div id="footer"> copyright etc </div></div></body> Link to comment Share on other sites More sharing options...
Brendon Branigin Posted April 21, 2006 Share Posted April 21, 2006 instead of giving #content a margin to push it to the left why not just float it left, then it will never try to go left past the #leftnavfloat the footer left aswellapply a clear right on the contentfloat left the header with a clear right aswellthis should keep all the divs properly placed without using static margins and what have you. It should also solve your problem Link to comment Share on other sites More sharing options...
kurtsfar Posted April 21, 2006 Share Posted April 21, 2006 Try something like this. I have not put in a top navigation, but that won't be too hard, just put it within the header div or just after. The code below use an internal style sheet. For more easy website maintenance you should put in an external style sheet instead. I used an internal style sheet to make it easy to copy and try. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">div#container {width:100%;line-height:130%;border:1px solid #003366;}div#header, div#footer {padding:0.5em;color:#fff;background-color:#003366;clear:left;}#header h1, #footer p {padding:0;margin:0;}div#left-col {float:left;border-right:1px solid #003366;background:#fff;color:#000;width:30%;margin:0;padding:7px;}#left-col ul {margin-left:16px;}div#right-col{margin:0 3% 0 35%;padding:7px;}</style></head><body><div id="container"><div id="header"><h1>WebPelican.com</h1></div><div id="left-col"><p>This is the first column which could contain navigational links, like this:</p><ul><li><a href="http://www.webpelican.com/">Internet Programming</a></li><li><a href="http://www.howstuffworks.com/">Howstuffworks</a></li><li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li><li><a href="#">Link 5</a></li></ul></div><div id="right-col"><h2>Internet Programming</h2><p>This is the second column which could contain the main content.</p><p>This is still the second column which could contain the main content.</p><p>This is still the second column which could contain the main content.</p><p>This is still the second column which could contain the main content.</p></div><div id="footer"><p>No Copyright.</p></<div></div> Good Luck Link to comment Share on other sites More sharing options...
xmfClick Posted April 21, 2006 Author Share Posted April 21, 2006 Thanks for the thoughts, guys. I probably should have mentioned that I'm trying to achieve a centred fixed-width design, rather than one that fills the whole page (if that makes any difference) instead of giving #content a margin to push it to the left why not just float it left, then it will never try to go left past the #leftnavThanks Brendon, but when I floated the #content div it just flowed round the bottom of the left nav. After some more rummaging round cyberspace I found an article on Position Is Everything talking about the float model and the various browser bugs. It looks like I hit the (surprise surprise) IE 3-pixel bug described in ref#1 (don't know why you haven't hit it, kurtsfar -- maybe it doesn't show up with percentage widths). I have got round the problem (although hitting more IE weirdness on the way <sigh>) by using the "rigid float" method described in ref#2. It's hanging together at the moment, so I'll call it a night!Thanks again guys.1. http://www.positioniseverything.net/floatmodel.html2. http://www.positioniseverything.net/ordered-floats.html3. http://www.communitymx.com/content/article...age=1&cid=C37E0 Link to comment Share on other sites More sharing options...
kurtsfar Posted April 22, 2006 Share Posted April 22, 2006 Thanks for the thoughts, guys. I probably should have mentioned that I'm trying to achieve a centred fixed-width design, rather than one that fills the whole pageTry this to make the page centered with a fixed width:div#container {width:800px;/*fixed to 800 pixels*/margin: 0 auto; /*centers the page*/line-height:130%;border:1px solid #003366;} Good luck Link to comment Share on other sites More sharing options...
xmfClick Posted April 22, 2006 Author Share Posted April 22, 2006 Thanks kurtsfar -- done that already, it works fine (though you need to set the width a bit less than 800px to avoid a horizontal scroll bar). But you also need to set body{text-align:center} to counter an IE bug and then div#container{text-align:left} to undo the centering. Dammit Microsoft, why can't you write decent software??? (that 3-pixel but has had me tearing my hair out for two weeks). Link to comment Share on other sites More sharing options...
yoshida Posted April 26, 2006 Share Posted April 26, 2006 I'd like to jump on the MS CRAP bandwagon for a minute.ms C-R-A-P!Really, Firefox (1.5) is far more css friendly than IE6. I had my share of bad luck when it came to DIVs (and I've only been using them for a week or two). Everything I fiddle around with in CSS almost instantly works for FF but IE has more quirks than a 40 year old Russian submarine. Link to comment Share on other sites More sharing options...
DenisK Posted April 28, 2006 Share Posted April 28, 2006 Try this to make the page centered with a fixed width:div#container {width:800px;/*fixed to 800 pixels*/margin: 0 auto; /*centers the page*/line-height:130%;border:1px solid #003366;} Good luck <{POST_SNAPBACK}> 800px is not good 750px is good users with a 800 by 600 px screen dysplay will still see a scroll bar at the bottom of the page. Link to comment Share on other sites More sharing options...
kurtsfar Posted May 21, 2006 Share Posted May 21, 2006 An alternative to fixed and fluid designs is elastic. Just use the maxwidth property instead of width. However, since IE doesn't understand the very useful maxwidth property you need a workaround. This workaround can be an expression or a JavaScript. This is how it can be done with an expression: #container { width: expression(document.body.clientWidth > 800? "770px" : "auto"); height:1px;} Since this code is not valid CSS it's best to put it in a separate css file, say ie.css, and include it conditional like this: <!--[if lt IE 7]> <link href="/css/ie.css" type=text/css rel=stylesheet /><![endif]--> You can read more on Conditional Comments here:Browser detection with Conditional CommmetsGood Luck Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now