I'm attempting a layout that's giving me a bit of a headache. I am trying to position sliding doors tabs above a centred, static, fixed width box (called #container as it contains #content). I have placed the sliding doors tabs (#tabnav) in a centred, static, fixed width container (#tabContainer) too, as they are floated left and I needed them centred. A couple of things: 1) the #tabnav div has a background which forms an bottom border. I need to position this so it lines up with the border on the #container div... so I need to bring it down on top of the #container div approx 2px. is this possible? 2) while tearing my hair out trying everything I could think of, I put a -2px bottom margin on #tabContainer. this didn't achieve what I wanted - Safari, IE5.2 and Opera 5 showed no change at all but I saw this odd result in NS7.01 (Mac). It actually brought #tabContainer down into the #container by about 1em - definitely not 2px! Screenshot of odd NS7 behaviour with -2px bottom margin on the #tabContainer: http://www.distinctive.net.au/screenshots/NS701_negmargin.gif Screenshot with 0px bottom margin on the #tabContainer (also shows the unwanted gap I mentioned in 1) above: http://www.distinctive.net.au/screenshots/NS701_0margin.gif (Both screenshots show that the right side of the "current" tab is cut off - this doesn't happen in my other browsers, just NS7, so if anyone has come across this and has an idea how to fix it please let me know! But it's probably a glitch in my copying of the sliding doors CSS and I'll work on that later.) I can upload a sample page if necessary but at the moment I am just working on a template and also I haven't had a chance to see what nastiness WinIE (or indeed WinAnything) will deal me. (From experience I know that when I have it working properly on the Mac, Windows spits the dummy. :-\) And I can't get the sliding doors tabs to behave correctly in Opera either... each tab is given what appears to be a fixed width and the menu goes way past the right edge of the viewport... thus my reluctance to upload at this point. But back to the problem at hand - below is some of the CSS I think might be relevant. CSS (and the xhtml of the page) validates. Any assistance would be greatly appreciated. Vicki. :-) ~~~~~~~~~~~~~~~~~~~~~~~~ body { color: #666; background-color: #FFF; text-align: center; margin: 0px; padding: 0px; background: url(../images/body_bg.gif) left top; font: 100% Georgia, "Times New Roman", Times, serif; position: relative; } #tabContainer { margin: 5px auto 0px; padding: 0px; width: 740px; } #tabnav { float: left; width: 740px; font-size: .9em; line-height: normal; background: url(../images/tabs/tab_bg.gif) repeat-x left bottom; } #container { background-color: #FFF; margin: 0px auto; width: 740px; padding: 0em; clear: left; border-right: 2px double #0078A1; border-bottom: 2px double #0078A1; border-left: 2px double #0078A1; } ______________________________________________________________________ css-discuss [EMAIL-REMOVED]] http://www.css-discuss.org/mailman/listinfo/css-d Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
