Tags Causing Horizontal Scroll-bar to Display

[KennyP]

Hi Guys:

On a client's website, if I add either italic tags or em tags to the words shown below, they make a horizontal scrollbar appear, and I can't make it go away.

Would you please help find a solution?

The web page with tags on the words "Thanks For Wakin' Me Up This Morning" and "Night Games," displays a horizontal scrollbar.

The same web page without the tags on those same words, does not display a horizontal scrollbar.

I tried getting rid of the horizontal scrollbar using overflow-x:hidden within the body tag and also in the div tag but it has no effect.

Thanks,

Kenny

[alienbdit]

body {
margin-top:30px;
background-color:#000000;
margin-left:auto;
margin-right:auto;
overflow:-moz-scrollbars-vertical;
overflow-x:hidden;
overflow-y:scroll; >> change to Hidden
}

i think it will help you.

[KennyP]

alienbdit:

Thanks for your reply. Unfortunately changing overflow-y:scroll; to overflow-y:hidden only gets rid of the browser's vertical scrollbar. It is the inner horizontal scrollbar I need to get rid of.

I don't understand why the scollbar should appear only when those particular words are italicized. Other words in the same paragraph are also itlicized, but they don't cause any problems.

Is this a weird one or what?

[KennyP]

FOUND A TEMPORARY SOLUTION FOR NOW:

Since this website uses custom flexcroll scrollbars, I changed the scrollbar horizontal dimension to zero...

.hscrollerbar {
height:0px;
width:0px !important;
background-color: #000000;
}

[Deadweight]

I think it might be because it is not reading the code correctly or something is actually larger then usual so it will not get rid of the scroll bar...
... some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’ ....

[KennyP]

Thanks Crazykld69. Could you please suggest an actual fix based on your comment?

In order to get help with a permanent fix, I removed the temporary fix on the test pages. They are...


The web page with tags on the words "Thanks For Wakin' Me Up This Morning" and "Night Games," displays a horizontal scrollbar.

The same web page without the tags on those same words, does not display a horizontal scrollbar.

[Minos]

I don't have a fix, but an observation: IE is the only browser that is rendering the page with the scrollbar. Firefox and Chrome do not display it.

[KennyP]

Thank you for the observation Minos. So, can I assume the problem narrows down to IE ignoring overflow:hidden? If so, I hope there's a fix for it.

[Minos]

I'll keep looking through the code, though I don't believe the glitch is with hiding the overflow...the question in my mind is why would it need the scroll at all? If the table width is set, it shouldn't alter because of its contents...

EDIT -

I'm almost wondering if the usage of align=justify is causing an issue...it is a deprecated method, after all. The better option would be to use CSS (text-align:justify).

Also, I know IE doesn't handle align=justify the same way as other browsers.

[Deadweight]

Umm can you add JavaScript to your code?
If so you can do an IE hack to hide the scrollbar