Okay here's a diferent one for you guys, IE and Opera work right and Firefox stuffs up. I'm going to try and use as much detail as possible here, and go easy on me if my CSS is awful, I'm supposed to be the backend guy : I've been trying to get this layout to work, its quite simple - basicaly a wrapper DIV, then a DIV for the menu and a DIV for the content. The problem I'm having is with what happens at the bottom of the page. One problem that I encountered early on was that Firefox would leave a huge gap at the end of the page (because I used position-relative for the content DIV I assume) unless the bottom border of the wrapper was visible. Displaying the border seems to create its own set of problems though. Everything is fine when there's a lot of content on the page: http://www.shadowfaxpublishing.com/loob/designtest/Craccum/testb.html But when I tried to split the content, I got some problems: http://www.shadowfaxpublishing.com/loob/designtest/Craccum/test.html IE and Opera seem to agree, and display it properly for the most part. Firefox, however, leaves a gap below the wrapper div that I can't explain. What I want to happen is the wrapper div extend right to the bottom of the page no matter how much content is inside (and hopefuly without the black line along the bottom that I get from that bottom border). Its possible, right?
Hmm, validate your code first: http://validator.w3.org/check?verbo...lishing.com/loob/designtest/Craccum/test.html You're missing quite a few things within your <head> area, such as a characterset encoding. Also change all your attribute and element names to lowercase, as in XML, 'ID' and 'id' are two different tags.
okay I've made those changes, and the page now validates here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.shadowfaxpublishing.com%2Floob%2Fdesigntest%2FCraccum%2Ftest.html and already validated here: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.shadowfaxpublishing.com%2Floob%2Fdesigntest%2FCraccum%2Ftest.html&usermedium=all but this hasn't affected the problem
Your layout method is very cumbersome. Using relatives to position an entire document is a hard way to go about it and most will use floats. Your problem is actually caused by the image that is floated to the right. The relative positioning keeps normal document flow (how it is if you just applied divs after each other), but allows an offset value. The float positioning removes it from the 'normal document flow' giving you your results there. Creating a space at the bottom the size of your floated image, by pushing the HTML element down to accomodate this floated positioned object, in firefox. This maybe incorrect behaviour on firefox's part or not. My advice would be to start again with your positioning, using floats.
thanks heaps, I think I've finaly got it. just in case someone else is having a similar problem: I eventualy managed to get it working with floats. At first I found that the wrapper div wouldn't extend down as far as the text, but I realised that it was because of what you were talking about where floating removes it from teh dicument float. So I figured out how to set it up with just the menu being floated, and then I positioned the text with padding. I did encounter a problem with IE - the menu that I'm using overlaps the left edge of the wrapper div, and IE wasn't drawing the part of it that fell outside the div if I floated it. I fixed it by using conditional statements to load a second css file which reverts to my previous system with relative positioning. I've tested it in IE5, IE6, Firefox and Opera, I would appreciate it if someone could tell me if it looks ok in IE7 beta. Are there any other browsers I should be testing in?
Looks fine in Safari and FF for OSX. Doesn't work in IE7B3. The soft background doesn't extend all the way down, so some text appears over the gray background. Resizing causes the menu to have borders around each item. These are likely bugs with IE7, and should be addressed before Q4 when it is expected to be forced down everyone's throats. Oh, and "COLLUMNS" should contain one "L."
thanks for that, especialy the Mac browsers. Yeah I'm not going to worry too much about IE7 until it ships. And "SUMBIT" isn't a word as far as I'm aware
I've had this problem before, instead of having two floats I made one relative and used padding/margins for IE to still work. I hate when the text runs over borders and boxes.