...

View Full Version : Layout Problem in Firefox



buggslife
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.

http://www.buggslife.com/development/gal_index7Jul.html

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

SB65
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 {
background-color:#66FF66;
clear:both;
margin:2.4em auto 0;
padding:0;
text-align:right;
top:0;
width:700px;
}

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


width=145

should be


width="145"

and with your doctype


<br>

should be


<br/>

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

buggslife
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.

Thanks.

SB65
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/>

buggslife
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...

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

SB65
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.

buggslife
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/

SB65
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum