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," (http://www.billyjoeconor.com/biography_with_charley_pride.php) displays a horizontal scrollbar.

The same web page without the tags on those same words, (http://www.billyjoeconor.com/biography_with_charley_pride_no_itags.php) 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 (http://www.billyjoeconor.com/biography_with_charley_pride.php)," displays a horizontal scrollbar.

The same web page without the tags on those same words (http://www.billyjoeconor.com/biography_with_charley_pride_no_itags.php), 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

[KennyP]

Thanks Minos. I tried the text-align:justify option but unfortunately it didn't make any difference.

Crazykld: If you have the IE JavaScript hack I'll try it. Thanks

I sure would like to understand why either the italic or em tag used on the words "Thanks For Wakin' Me Up This Morning" and "Night Games" cause the srollbar to appear. I also used these tags elsewhere within the same paragraph, and yet they do not cause a scrollbar. Isn't this weird?

[Deadweight]

I think the reason is that there is a size issue making it "push" invisible space to the side expanding it making it appear. Also that depends on the web browser and how it reads the code. For the IE JavaScript hack i do have to look for thru my comp to find it and i will. I just have to finish my stat HW and program my calculator so i get to do nothing on my tests xD
Auto computes the answer with the work. Lovely <3
anyways ill post it either tomorrow (night) or some time Friday.

[Minos]

Again, I don't have a solution, but I see what is happening. IE is adding a few pixels of padding to the paragraph containing the phrases in question. It seems to me that this is occurring because the last letter on the line is italicized. No where else in your content does this happen besides those two lines.

[KennyP]

Thanks very much for your kind input guys. I look forward to trying out the IE Java hack.

[Minos]

Out of curiousity, try excluding the space in the phrases from the tags. So you would have:



<i>Thanks for Wakin' Me Up This</i> <i>Morning</i>
...
<i>Night</i> <i>Games</i>


See if that helps. Your only other option would be to widen the container by about 2 or 3 pixels...would should look identical aesthetically, but provide the needed space for IE's rendering.

[KennyP]

Minos:

Your idea works! The scrollbar disappeared. However, it disappeared only after every word was tagged separately as per your example, as follows:

<i>Thanks</i> <i>for</i> <i>Wakin'</i> <i>Me</i> <i>Up</i> <i>This</i> <i>Morning</i>, and...

<i>Night</i> <i>Games</i>

This seems to indicate that in IE the spaces between words are italicized as well as the letters, and they cause added pixels? But then, previous italicized words in the same paragraph did not cause the scrollbar to appear.

Can an accurate explanation be formulated of what is taking place?

Regardless, your idea solved the problem and I'm very grateful for your help.

Thanks very much,

Kenny