Menu
I have a problem with this one... because it gives me the scrollbar but the height remains the same so the text is covered by the scroll bar...
<td class='messages'><div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF;height:' class='messages'>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</td>
Thanks in advance!
374
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML. CSS.
To show the scrollbars always on the webpage, use overflow: scroll Property. It will add both horizontal and vertical scrollbars to the webpage. To add only horizontal scrollbar use overflow-x: scroll property and for vertical scrollbar use overflow-y: scroll property.
To find out which elements cause a horizontal scrollbar, you can use the devtools to delete elements one by one until the scrollbar disappears. When that happens, press ctrl/cmd Z to undo the delete, and drill down into the element to figure out which of the child elements cause the horizontal scrollbar.
Move your css to an external style sheet and use a conditional comment to target just the browsers you are having a problem with (I have used lower than or equal to IE7 as I cannot replicate in IE8). I have added padding to the bottom.
Live example: http://jsfiddle.net/tw16/Vx9HZ/
Put the conditional comment in the <head> like this:
<head>
<!--[if lte IE 7]>
<style>div.messages {padding:0 0 22px;}</style>
<![endif]-->
</head>
CSS: Moved to external style sheet.
div.messages {
border:0px;
padding:0 0 0;
width:100%;
overflow-x:auto;
background-color:#66C2FF;
}
HTML: Stripped out styling.
<td class='messages'>
<div class='messages'>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</td>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
