How to remove horizontal scroller?

[Haisook]

I need to remove the horizontal scrollers on my website cause I don't need them at all. I just use the vertical ones.

Here is the code:
<div id="sidebar" style="position:absolute; width:270px; height:315px; z-index:1; left: 133px; top: 250px; overflow: scroll; visibility: visible;" class="dashedborder">
<table width="250px" height="200px" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<td valign="top">

And here is the website:
http://sims2screens.blogspot.com/

As you can see, there is no extra width. So the horiz scrollers (arrows) are just useless.


I'm sorry I'm so noob at CSS. I just need the code to remove that thing. Thanks in adv..

[TheBigT]

Here is a fix for IE but I will search for something that will work in firefox... if anyone knows anything feel free to chime in. I changed the stuff in red.

<div id="sidebar" style="position:absolute; width:270px; height:315px; z-index:1; left: 133px; top: 250px; overflow-x: hidden; overflow-y: scroll; visibility: visible;" class="dashedborder">

[TheBigT]

Alright well I figured it out...

First off you have to edit your header... that thing that has the css stuff in it already. I will give you the revised one with the stuff that was changed in red. Just replace all of it.

<style type="text/css">
<!--
body {
	background-image:  url(http://www5.domaindlx.com/haisook/Blog/sims2logo.jpg);
         background-color:#5B29A7;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-repeat: no-repeat;
	background-position: center top;
	font-family: arial, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #333333;
	letter-spacing: 0px;
         scrollbar-track-color: #BCA8E6;
	scrollbar-base-color: #BCA8E6; 
	scrollbar-arrow-color: #5B29A7;
	scrollbar-DarkShadow-Color: #BCA8E6; 
}
.dashedborder {
	border: 0px dashed #C5C2B3;
}
.sidetitle {
	font-size: 11px;
	text-transform: uppercase;
	color: #B81785;
	font-weight: bold;
}
a:link {
	color: #5B29A7;
	text-decoration:none;
	font-weight: bold;
}
a:visited {
	color: #5B29A7;
	text-decoration: none;
	font-weight: bold;
}
a:active {
	color: #5B29A7;
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	color: #6732BA;
	text-decoration: underline;
}
.blogdateheader {
	font-size: 11px;
	color: #ffffff;
	letter-spacing: 6px;
}
.blogitemtitle {
	font-weight: bold;
	color: #B81785;
	letter-spacing: 1px;
}
.byline {
	font-style: italic;
	font-weight: bold;
	color: #333333;
}
div.dashedborder {overflow: auto;
}
-->
</style>

Put this if you want your sidebar div to be changed to have no horizontal scroll

<div id="sidebar" style="position:absolute; width:270px; height:315px; z-index:1; left: 133px; top: 250px; visibility: visible;" class="dashedborder">

Put this if you want your maincontent div to have no horizontal scroll too if not just leave it. The real ID of it is layer1 though, I called it maincontent because that is what it is on your page.

<div id="Layer1" style="position:absolute; width:430px; height:495px; z-index:2; left: 440px; top: 70px;" class="dashedborder">

[Haisook]

Oh thanks so much!! That was too nice!

[dd2me]

although I have put overflow:hidden, I still can scroll down if I have mouse with scroll button

[jscheuer1]

Originally Posted by dd2me

although I have put overflow:hidden, I still can scroll down if I have mouse with scroll button

Horizontally?