 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / October 2007float left with block to right leaves gap in IE6
Hey all, I've got a little problem... I imagine it should be pretty common though I could not find an answer via google. What I'm after is a static left nav with a fluid main content to the right that expands to fill the remaining browser window. Take a look at this page in both FF and IE6: http://www.roagie.com/layout.php in FF: sections 3 and 4 are butted right up against each other In IE: there is a noticeable gap between sections 3 and 4 If I assign float:left to section 4, it butts up nicely, but then it doesn't auto-expand to the take the remaining browser width. Any help GREATLY appreciated... I've been beating my head against the desk for a day on this. P.S. There is also another variation of this problem on that page... the sections butt up, but the image & text is not flush against the left side as it is with FF. > Hey all, I've got a little problem... <http://www.positioniseverything.net/explorer/threepxtest.html>  SignatureGus >> Hey all, I've got a little problem... > > <http://www.positioniseverything.net/explorer/threepxtest.html> It doesnt' seem to be the 3px issue because the two divs have heights assigned to them. > >> Hey all, I've got a little problem... > > > > <http://www.positioniseverything.net/explorer/threepxtest.html> > > It doesnt' seem to be the 3px issue because the two divs have heights > assigned to them. I don't think this is a good reason to doubt it. You are perhaps confusing it with another issue. It is a pesky business assigning heights anyway in a real webpage that has a left floating nav and right content. You will lose flexibility. There are a number of ways of tackling your problem. The simplest and best is to stop worrying about the content butting up so exactly. Give the left nav a width and the right (non-floated) content div at least a left-margin as wide as the float. If you design so it still looks nice with a bit more margin, then it will not look so different in IE which does add the 3px gap. But if you really insist on butting up, then one way to do it is to tell IE that the the left margin to the static content is 3px less than the width assigned to the float. And you can do this in a number of ways, via a * hack in your css sheet, or a conditional construction in your html that only IE notes. In the case of the latter you can refer IE to a different stylesheet. If you use a float, float construction (which is not for you really because you want to let the content expand), there is a way to cope with the gap in IE by giving the right float a neg margin (for IE eyes only via css hacks or conditionals). Signaturedorayme > There are a number of ways of tackling your problem. The simplest > and best is to stop worrying about the content butting up so > exactly. It's a sliced up graphics kinda layout, so the images that serve as the div background-images must butt up. > Give the left nav a width and the right (non-floated) <helpful suggestions snipped> Thanks for all your suggestions, but in the interest of cross-browser compatibility and time I just created a skeleton using a table, and am using css inside each table cell. To me it just didn't make sense to try all these css hacks to get the browsers to agree... if you have to hack css so much for complex layouts, then it's simply not ready for complex layouts (some layouts may be ok, but for complex stuff like I'm trying to do... no dice). I understand it's not css' fault, it's the browsers'. But it is what it is. I solved my problem with a simple table layout in 1 minute, compared to the 3 hours I had already wasted trying to get it to work with divs, and probably much more time had I attempted to slug it out with css hacks. > > There are a number of ways of tackling your problem. The simplest > > and best is to stop worrying about the content butting up so [quoted text clipped - 16 lines] > 3 hours I had already wasted trying to get it to work with divs, and > probably much more time had I attempted to slug it out with css hacks. I understand and sympathise. Good luck. Signaturedorayme |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.