Discussion in 'Scripts, 3rd Party Apps, and Programming' started by Teensweb, Feb 25, 2010.
Can somebody tell me what causes my page to have extra width in firefox but not in IE?
What do u mean extra width?
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?
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.
You are right no one does!
Which version of FF do you have? It shows up without any bugs when I open it. (with FF 3.5.8)
I have the same version too! Dont you see the horizontal scrollbar in your system? Weird!
Nope, I don't have a problem with that...
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
It's there in your screnshot too. I have highlighted it and attached it here:
BTW, I'll try Firebug.
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.
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....?
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.
I can see that you have created a test account. Please check and tell the error when you get time.
Can somebody please go view this in IE 7 and/or IE 8 and send attach the screenshot?
(I never bothered to install both sice I hate IE!)
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?
See it now, I have changed the settings for quick reply.
Do you have any demo account,so that i can also check
yeah, username: test
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.
Separate names with a comma.