View Full Version : Layout Problem in Firefox

07-07-2010, 02:39 PM
Hey, I have an issue with positioning / layout where the bottom text box is out of control in Firefox but fine in IE.


It's clearly as problem with the CSS - can any help fix it?

07-07-2010, 04:16 PM
It's the floated items in #main. IE7 is clearing these because #main hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) which is an IE7 and under "feature". Your page isn't right in IE8 which doesn't use hasLayout.

If it's OK in IE and not in FF then chances there's something wrong with your code.

Here it's straightforward: try amending your css to:

div#comment_test {
margin:2.4em auto 0;

Incidentally, you have a few errors in your markup - mostly because, for example:


should be


and with your doctype


should be


Check your markup with the w3c validator (http://validator.w3.org/check?uri=http://www.buggslife.com/development/gal_index7Jul.html).

07-07-2010, 05:02 PM
Thanks for your help: I have just changed it to clear: both now but I had originally removed it as I struggled to centre the comment box.

How does it view in your browser now?

Can you help?

Thanks for the "145" tip too - I missed that but now changed it. However, I don't understand your comment on </br>...please explain.


07-07-2010, 05:10 PM
Looks OK in FF now. Your comment box is centred within #main. You can also use browsershots (http://browsershots.org/) to check your site.

Because you are using xhtml, your <br> tag needs to be closed to validate: <br/>

07-07-2010, 05:19 PM
Wow, that browsershots looks fantastic, thanks.

Any idea why I seem to have redundant space on the right hand side? I need to look into it properly but any clues are welcome...

07-07-2010, 05:24 PM
It's due to the huge value of left property applied for div#button_wrapper_botrow

07-07-2010, 05:25 PM
Any idea why I seem to have redundant space on the right hand side? I need to look into it properly but any clues are welcome...

Take the width off #top and just let it sit within #col_mid and you lose that space on the right.

EDIT: Hang on, that hasn't done the trick...

EDIT AGAIN: ..because #colleft is not wide enough for its contents, hence #col_mid is pushed over to the right and the page is wider than it should be.

07-07-2010, 05:43 PM
Ok - thanks for looking into it. You are correct - the extra space was down to the left property in div#button_wrapper_botrow.

I had done that to align the buttons centrally but, of course, this is a terrible approach. Any suggestions on how to do it properly?

I have put the site up again at the same link. (http://www.buggslife.com/development/gal_index7Jul.html)

I will also look into your suggestion that Col_left is too small for its contents/

07-07-2010, 06:10 PM
An alternate approach to centre your images might be to set .photo_l_big, .photo_p_big to display:inline and remove float:left, and also set the size of your images explicitly in the markup and remove the height and width settings applied via your css to .photo_p_big img and .photo_l_big img.

Using display:inline for the images will mean they will centre via text-align:center, which you already have applied to your image row divs.