Results 1 to 6 of 6

Thread: Background image element falls outside of margins in Firefox 3

  1. #1
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Background image element falls outside of margins in Firefox 3

    The navigation bar on the RHS of www.insidedesi.com is slightly skewed in Firefox 3 (the contents are displayed outside of the grey box... this also pushed the left hand side in slightly).

    I have the img set using a div tag with the following css:

    sideimg{

    background-image: url('images/side_img.png');
    background-repeat: no-repeat;
    background-position: 530px 0px;
    margin: 0pt 0 0px;
    padding: 0px 0 0;
    float: right;
    }


    removing the float variable seems to reposition the left hand side, but side_img.png disappears.

    Any suggestions on how I may solve this is much appreciated.

    stats

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    I don't see what your seeing, because I'm using Firefox 3, and I don't see anything wrong, can send a screen shot, and circle the out of space spot please?
    Jeremy | jfein.net

  3. #3
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Nile,


    Many thanks for your response.

    I've uploaded the image here (I'm darkened it to make the edges more clear):



    On the LHS is how it should look (and how it looks in firefox 2 and IE7), on the RHS is how it looks in Firefox 3 and Opera.

    The red ellipses show how the grey box is shifted to the right, along with the left hand div element.

    stats

  4. #4
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    margin: 0pt 0 0px;
    padding: 0px 0 0;
    this seems peculiar to me. Either assign all 4 sides separately or assign them as one. You are like in the middle, and you also miss-matched the type.

    Code:
    margin: 0;
    padding: 0
    or

    Code:
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    with px being optional in all styles.

    now I know that's not the root cause of your situation, and I am seeing the same "shift" so to speak.
    If you have the web-developer extension try doing an Outline > Outline Block Level Elements to see the dimensions of those columns...

    removing the float variable seems to reposition the left hand side, but side_img.png disappears.
    depending on how you have written the elements, the float may apply to the elements surrounding it. Hence... if I float something left, the next element after that will want to start at the top right corner (taking margins/padding) into account of that element / image. So I am going to assume that since taking the float out of the equation corrects the problem, that it has to do with the styling of the left / right columns and the interaction between them.

    Now as for the background image not displaying if you remove the float: property, that is something you might want to report to Mozilla for debugging ???
    they feedback form is located at http://hendrix.mozilla.org/

  5. #5
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by boogyman View Post
    this seems peculiar to me. Either assign all 4 sides separately or assign them as one. You are like in the middle, and you also miss-matched the type.

    Code:
    margin: 0;
    padding: 0
    or

    Code:
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    with px being optional in all styles.

    The original wordpress template which I modified was very badly coded.

    Quote Originally Posted by boogyman View Post

    now I know that's not the root cause of your situation, and I am seeing the same "shift" so to speak.
    If you have the web-developer extension try doing an Outline > Outline Block Level Elements to see the dimensions of those columns...


    depending on how you have written the elements, the float may apply to the elements surrounding it. Hence... if I float something left, the next element after that will want to start at the top right corner (taking margins/padding) into account of that element / image. So I am going to assume that since taking the float out of the equation corrects the problem, that it has to do with the styling of the left / right columns and the interaction between them.

    Now as for the background image not displaying if you remove the float: property, that is something you might want to report to Mozilla for debugging ???
    they feedback form is located at http://hendrix.mozilla.org/
    I don't think it's a bug as opera is exhibiting the same behavior. Is there anoither means I can use to position the background image?

  6. #6
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It's no longer an issue.

    Was pointed this method: http://www.positioniseverything.net/easyclearing.html by a friend. Seems to have resolved it.

    Many thanks for the help.

Bookmarks

Posting Permissions

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