Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    May 2010
    Location
    www.buggslife.com
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Layout Problem in Firefox

    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?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It's the floated items in #main. IE7 is clearing these because #main hasLayout 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:

    Code:
    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:

    Code:
    width=145
    should be

    Code:
    width="145"
    and with your doctype

    Code:
    <br>
    should be

    Code:
    <br/>
    Check your markup with the w3c validator.
    Last edited by SB65; 07-07-2010 at 03:20 PM.

  • #3
    New Coder
    Join Date
    May 2010
    Location
    www.buggslife.com
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile

    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.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Looks OK in FF now. Your comment box is centred within #main. You can also use browsershots to check your site.

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

  • Users who have thanked SB65 for this post:

    buggslife (07-07-2010)

  • #5
    New Coder
    Join Date
    May 2010
    Location
    www.buggslife.com
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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...

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It's due to the huge value of left property applied for div#button_wrapper_botrow
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Quote Originally Posted by buggslife View Post
    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.
    Last edited by SB65; 07-07-2010 at 04:29 PM.

  • #8
    New Coder
    Join Date
    May 2010
    Location
    www.buggslife.com
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

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

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •