Extra width in firefox

Discussion in 'Scripts, 3rd Party Apps, and Programming' started by Teensweb, Feb 25, 2010.

  1. Teensweb

    Teensweb New Member

    Messages:
    352
    Likes Received:
    1
    Trophy Points:
    0
    Can somebody tell me what causes my page to have extra width in firefox but not in IE?
     
  2. garikr

    garikr New Member

    Messages:
    46
    Likes Received:
    0
    Trophy Points:
    0
    What do u mean extra width?
     
  3. marasm

    marasm New Member

    Messages:
    34
    Likes Received:
    0
    Trophy Points:
    0
    I've checked your site in FF 3.5, IE6 and IE8 and it looks pretty much the same in all those browsers. I don't see any 'extra width'. Screenshot would be helpful.

    The only bug I found was missing png transparency fix for IE6 but who cares about IE6 nowadays?
     
  4. Teensweb

    Teensweb New Member

    Messages:
    352
    Likes Received:
    1
    Trophy Points:
    0
    Sorry I forgot abt the screenshot.I'm attaching it here.
    What I meant is that the horizontal scrollbar shows extra space than the orginal content. But it doesnt happen with IE.
     

    Attached Files:

  5. Teensweb

    Teensweb New Member

    Messages:
    352
    Likes Received:
    1
    Trophy Points:
    0
    You are right no one does!
     
  6. marshian

    marshian New Member

    Messages:
    526
    Likes Received:
    9
    Trophy Points:
    0
    Which version of FF do you have? It shows up without any bugs when I open it. (with FF 3.5.8)
     
  7. Teensweb

    Teensweb New Member

    Messages:
    352
    Likes Received:
    1
    Trophy Points:
    0
    I have the same version too! Dont you see the horizontal scrollbar in your system? Weird!
     
  8. marshian

    marshian New Member

    Messages:
    526
    Likes Received:
    9
    Trophy Points:
    0
    Nope, I don't have a problem with that...
    Screenshot

    I don't see anything that would obviously cause this, so I'd suggest you take Firebug (a Firefox plugin) and try to find out which element causes this bug. Usually I'd do it for you, but it's quite hard to do when I can't reproduce the bug ;)
     
  9. Teensweb

    Teensweb New Member

    Messages:
    352
    Likes Received:
    1
    Trophy Points:
    0
    It's there in your screnshot too. I have highlighted it and attached it here:
    BTW, I'll try Firebug.
     

    Attached Files:

  10. marshian

    marshian New Member

    Messages:
    526
    Likes Received:
    9
    Trophy Points:
    0
    No, that's normal, your content is wider than the viewport, that's why I (deliberately) made the screen smaller (to make a scrollbar appear). It doesn't show much empty space, like in your screenshot. Maybe the scrollbar style confuses you, but it's scrolled all way to the right. There's nothing more to the right of it, and just the content to the left of it. Whereas in your screenshot, there's an awful lot of blue on the right of the content, and you've not even scrolled all way to the right yet.
     
  11. Teensweb

    Teensweb New Member

    Messages:
    352
    Likes Received:
    1
    Trophy Points:
    0
    Oh, you're right. It's 'coz it happens only with logged in users. I guess it has got something to do with the quick reply box.
    Fortunately, I succeeded in hiding it by addin 'overflow-x: hidden;' into the body's style, though I still don't know what is "overflowing". Does it matter anyway....?
     
  12. marshian

    marshian New Member

    Messages:
    526
    Likes Received:
    9
    Trophy Points:
    0
    I'll make a test account later tonight to see it then ;) (I'm a bit short on time atm.)
    Overflow is what happens when the contents of an element are bigger than the size of that element (like a bucket in which you poor too much water). Overflow-x is overflow on the x axis (horizontal), value 'hidden' means that you just don't show whatever is too big for the element.
    Overflow-x should only work when the width of an object given though, so I suggest you add "width: 100%;" to the body's style as well, to avoid future problems.
     
  13. Teensweb

    Teensweb New Member

    Messages:
    352
    Likes Received:
    1
    Trophy Points:
    0
    I can see that you have created a test account. Please check and tell the error when you get time.
     
  14. Teensweb

    Teensweb New Member

    Messages:
    352
    Likes Received:
    1
    Trophy Points:
    0
    Can somebody please go view this in IE 7 and/or IE 8 and send attach the screenshot?
     
    Last edited: Mar 3, 2010
  15. Teensweb

    Teensweb New Member

    Messages:
    352
    Likes Received:
    1
    Trophy Points:
    0
    (I never bothered to install both sice I hate IE!)
     
  16. marshian

    marshian New Member

    Messages:
    526
    Likes Received:
    9
    Trophy Points:
    0
    You're right, I have set up a test account ;)
    The bug doesn't occur though, probably because I don't have a quick reply box... Am I missing an option somewhere to turn it on?
     
  17. Teensweb

    Teensweb New Member

    Messages:
    352
    Likes Received:
    1
    Trophy Points:
    0
    See it now, I have changed the settings for quick reply.
     
  18. vishal

    vishal -::-X10 Guru-::- Community Support

    Messages:
    5,255
    Likes Received:
    192
    Trophy Points:
    63
    Do you have any demo account,so that i can also check
     
  19. Teensweb

    Teensweb New Member

    Messages:
    352
    Likes Received:
    1
    Trophy Points:
    0
    yeah, username: test
    pwd:test
     
  20. marshian

    marshian New Member

    Messages:
    526
    Likes Received:
    9
    Trophy Points:
    0
    OK the quick reply box is there :)
    Part 1: bug confirmed.
    Part 2: confirmed the bug lies with the quick reply box.
    Now for fixing it.
    You've got an (unnamed) div that contains the quick reply box (the one below <a name="quickreply"></a>). Its width is set to 200%. That's what causes the overflow. When I set it to 100% the overflow is gone, but the quick reply box only fills half of the place. However, the first child of this div (this is a div of class "tborder") has its width set to 50%. Change that to 100% and the quick reply box has its normal size, while the overflow is still gone.

    Edit: and just to specify, you can now get rid of the overflow-x. The bug doesn't occur as long as the overflow is set as well.
     
    Last edited: Mar 4, 2010
    • Like Like x 1

Share This Page