I'm having a problem with CSS widths on Firefox. My website, http://www.freefootball.org looks good in IE7 but when I look at it in Firefox, the main div on the left gets pushed down. I'm using a conditional CSS statement to get it working in IE which works well so its the #maincontentdiv that is the problem. My code for the divs in question is below. Any ideas on how to fix this? }#ffsquaread { display: block; width: 270px; text-align: center; float: right; margin-top: 10px; } #ffmaincontent { float: left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.3em; color: #000000; display: block; } html>body #ffmaincontent { float: left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.3em; color: #000000; display: block; width: 80%; } Code (markup):
well, first off, if you 'have' to use html>body, you are probably doing something wrong... second you've got bigger 'problems' like an invalid doctype, over 200 validation errors, and nonsensical markup, content blowing out of container boxes, etc, etc. Of course, 99% of the problem is probably right here: /Templates/ffnew.dwt Dreamweaver - do yourself a favor: chuck that steaming pile of WYSIWYG crap in the trash, and grab a normal plain-jane text editor. THEN, chuck your current code and start over with clean semantic markup. This is another example of my seeing four different appearances in four different rendering engines - not too surprising with all the completely invalid markup.
the thing is I hardcoded the template myself manually so I wouldn't blame dreamweaver. putting aside the homepage have a look at this... here is the problem in its most basic form... the right hand side div in Firefox won't display inline. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #fftheleftdiv { display: block; float: left; } #fftherightdiv { float: right; width: 270px; display:block; } --> </style> </head> <body> <div id="fftheleftdiv"> <p>dffs ldfdslk fldskfjdslk flsdk fdsf ds fdsfds dsf dsk ksdskf dksfld fldsfj ls fdlsj lsdjf lsdfj ldsj fldsfj ldsjfldsj flkdsj flkdsjdlks jdflsj flsj flsj flsj lsjf lskfj lkfjsdlkfjl sfjsdlj flds ldfsjlf jdsl jdsljf ldksjfldsj dsjfldsfdksfdsfldskjfdlsjflsjfsljlfj.</p> <p>dsfdsfkds;kf;slkf;lsfks fds dfs s fs fs ds dfs ds ds</p> <p> </p> <p> dsfsfdsfd</p> </div><div id="fftherightdiv">dfsd</div> </body> </html> Code (markup):
that above code looks fine in ie7 and firefox to me? the only difference on your site in firefox and is the todays football headlines is that the problem?
I changed the maincontent div width to 60%, so it makes it look ok in Firefox,,, but if you change the resolution to a lower one, ie 800 x 600, this div gets pushed down. Any ideas?
When the content is one line like that, of COURSE 'theRightDiv' is going to get pushed down - because the left float is being forced to 100% width - there's no ROOM for it. There are three solutions: 1) make it fixed width so that there's always room for the right column - sucks if you want a fluid layout. 2) margin the right side of the left column, and rely on the rightDIV 'riding up' properly. 3) adding an extra container, and using the negative margin effect to float it up the SAME DIRECTION. I prefer method three, because it makes switching what side the column is on from the CSS easier, and opens up the possibility of three columns while keeping the largest column first. It also means if the column content is too narrow, you can still style the full width as the inner DIV is not floating, just the outer wrapper. Of course, nulling all margins and padding could also help. Method 3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"><!-- * { margin:0; padding:0; } #contentWrapper { float:left; width:100%; } #content { margin-right:270px; } #sideBar { float:left; width:270px; margin-left:-270px; } --></style> </head><body> <div id="contentWrapper"><div id="content"> <p> dffs ldfdslk fldskfjdslk flsdk fdsf ds fdsfds dsf dsk ksdskf dksfld fldsfj ls fdlsj lsdjf lsdfj ldsj fldsfj ldsjfldsj flkdsj flkdsjdlks jdflsj flsj flsj flsj lsjf lskfj lkfjsdlkfjl sfjsdlj flds ldfsjlf jdsl jdsljf ldksjfldsj dsjfldsfdksfdsfldskjfdlsjflsjfsljlfj. </p><p> dsfdsfkds;kf;slkf;lsfks fds dfs s fs fs ds dfs ds ds </p><p> </p><p> dsfsfdsfd </p> <!-- #content, #contentWrapper --></div></div> <div id="sideBar"> dfsd <!-- #sideBar --></div> </body></html> Code (markup): There is a fourth technique, involving "stupid BODY tricks", but I tend not to use that one very often, even though it means one less DIV... here's how it works, I'll add a header and footer to illustrate the 'problem'. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"><!-- * { margin:0; padding:0; } body { padding-right:270px; } h1, #footer { padding:8px; margin-right:-270px; text-align:center; } h1 { background:#EEE; } p { padding:0.5em; } #footer { clear:both; background:#DEF; } #content { float:left; width:100%; background:#EFD; } #sideBar { float:left; width:270px; margin-right:-270px; background:#FED; } --></style> </head><body> <h1> Page Header </h1> <div id="content"> <p> dffs ldfdslk fldskfjdslk flsdk fdsf ds fdsfds dsf dsk ksdskf dksfld fldsfj ls fdlsj lsdjf lsdfj ldsj fldsfj ldsjfldsj flkdsj flkdsjdlks jdflsj flsj flsj flsj lsjf lskfj lkfjsdlkfjl sfjsdlj flds ldfsjlf jdsl jdsljf ldksjfldsj dsjfldsfdksfdsfldskjfdlsjflsjfsljlfj. </p><p> dsfdsfkds;kf;slkf;lsfks fds dfs s fs fs ds dfs ds ds </p><p> </p><p> dsfsfdsfd </p> <!-- #content --></div> <div id="sideBar"> <p> Sidebar Content </p> <!-- #sideBar --></div> <div id="footer"> Page Footer <!-- #footer --></div> </body></html> Code (markup): The 'big' issue is that you cannot convert this to a fixed or semi-fluid layout (at least, not if you want to retain IE 5.x compatability, if that means ****, go ahead and put a width and centering on BODY), and that you have to put negative margins on anything outside the columns to take up the padding on the body. Unlike certain folks, I don't consider the one extra DIV 'the end of the world', so I use the other method. You still end up with the negative margin on the header, but it's not needed on the footer in a 100% height layout.... which looks a little something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"><!-- * { margin:0; padding:0; } html, body { height:100%; } #container { position:relative; overflow:hidden; /* wrap floats */ min-height:100%; padding-right:270px; background:#CCC; } * html #container { /* older IE treats height as min-height, but that screws our use of overflow:hidden to wrap floats... but height trips haslayout, which ALSO wraps floats, so we can just set overflow back to visible. */ height:100%; overflow:visible; } h1 { padding:8px; margin-right:-270px; text-align:center; background:#EEE; } p { padding:0.5em; } #content { float:left; position:relative; width:100%; padding-bottom:32px; /* make room for footer */ background:#EFD; } #sideBar { float:left; width:270px; padding-bottom:32px; /* make room for footer */ margin-right:-270px; background:#FED; } #footer { clear:both; /* ride it up over #container so the whole thing remains 100% min-height position:relative makes RoW depth sort it on top, haslayout makes IE depth sort it on top, and of course the actual negative margin to ride it up. */ position:relative; height:32px; margin-top:-32px; font:normal 14px/32px serif; text-align:center; background:#DEF; } --></style> </head><body> <div id="container"> <h1> Page Header </h1> <div id="content"> <p> dffs ldfdslk fldskfjdslk flsdk fdsf ds fdsfds dsf dsk ksdskf dksfld fldsfj ls fdlsj lsdjf lsdfj ldsj fldsfj ldsjfldsj flkdsj flkdsjdlks jdflsj flsj flsj flsj lsjf lskfj lkfjsdlkfjl sfjsdlj flds ldfsjlf jdsl jdsljf ldksjfldsj dsjfldsfdksfdsfldskjfdlsjflsjfsljlfj. </p><p> dsfdsfkds;kf;slkf;lsfks fds dfs s fs fs ds dfs ds ds </p><p> </p><p> dsfsfdsfd </p> <!-- #content --></div> <div id="sideBar"> <p> Sidebar Content </p> <!-- #sideBar --></div> <!-- #container --></div> <div id="footer"> Page Footer <!-- #footer --></div> </body></html> Code (markup): Which is fairly close to my standard page template... and works in IE 5.5, 6 & 7, Opera, Safari and FF.