Hi there folks,
Got another problem with the website i'm developing and it's been driving me crazy all morning, just had to restore the backup i made because the css file got so muddled up after me trying for hours to try and get this sorted.
IE (How its suppost to appear)
Firefox (The two div's overlapping each other
Basically two div's are overlapping each other in Firefox, when there loading fine in IE. I've been mucking about with position: relative, top: 0 and putting the height in for one of the divs (the other can't be given a height because it needs to flow down the page with content) but it just isn't budging ... using top: 0 (or top: 20px) pushes the content/lower div underneath the footer at the bottom of the page so i can't use that ... and even if i try to put <br /> tags (which i know isn't ideal) it just spoils it in IE.
I haven't tried using z-indexes yet because i figured this would only change the layering of the div's, rather than define each div as seperate content areas that shouldn't be overlapped in the first place...although i guess if the top div has a z-index of -1 then that would what could be telling the browser to overlap the other div? The annoying thing is both div's, well...certainly the lower div needs to be positioned relative to the rest of the content so the content can flow down the page properly.
I'm just wondering it theres a way to properly define a div so that all browsers will know it is actually a div with content in it and should correctly be positioned onto the page rather than it just randomly floating there with other content being allowed to appear over it.
Would really appreciate any advice/help given, thanks
Got another problem with the website i'm developing and it's been driving me crazy all morning, just had to restore the backup i made because the css file got so muddled up after me trying for hours to try and get this sorted.
IE (How its suppost to appear)
Firefox (The two div's overlapping each other
Basically two div's are overlapping each other in Firefox, when there loading fine in IE. I've been mucking about with position: relative, top: 0 and putting the height in for one of the divs (the other can't be given a height because it needs to flow down the page with content) but it just isn't budging ... using top: 0 (or top: 20px) pushes the content/lower div underneath the footer at the bottom of the page so i can't use that ... and even if i try to put <br /> tags (which i know isn't ideal) it just spoils it in IE.
I haven't tried using z-indexes yet because i figured this would only change the layering of the div's, rather than define each div as seperate content areas that shouldn't be overlapped in the first place...although i guess if the top div has a z-index of -1 then that would what could be telling the browser to overlap the other div? The annoying thing is both div's, well...certainly the lower div needs to be positioned relative to the rest of the content so the content can flow down the page properly.
I'm just wondering it theres a way to properly define a div so that all browsers will know it is actually a div with content in it and should correctly be positioned onto the page rather than it just randomly floating there with other content being allowed to appear over it.
Would really appreciate any advice/help given, thanks
