Fri, 2004-01-02 04:57
If you look at My Webpage with Internet Explorer, you can see that I have an unnecessary horizontal scroll bar. This scroll bar doesn't show up with Firebird or Netscape, and I wan't to get rid of it.
I did some reading about the overflow property. Certain people appear to have been able to fix this problem using the following:
overflow-x: hidden;
I have that property plugged into every place I possibly can, and still no effect. check it out:
body {
margin:0px 0px 0px 0px;
background:#B3B3B3;
overflow-x: hidden;
overflow-y: auto;
}
A { color:#AAC1E4; text-decoration:none; }
A:link { color:#AAC1E4; text-decoration:none; }
A:visited { color:#AAC1E4; text-decoration:none; }
A:active { color:#AAC1E4; }
A:hover { color:#D9E3F2; }
h1, h2, h3 {
margin: 0px;
padding: 0px;
overflow-x: hidden;
overflow-y: auto;
}
#content {
position:absolute;
left:125px;
right:125px;
top:24px;
background:#999999;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
margin-right:1px;
padding-bottom:1px;
overflow-x: hidden;
overflow-y: auto;
}
.blog {
padding-left:30px;
padding-top:5px;
padding-right:0px;
overflow:auto;
overflow-x:hidden;
overflow-x: hidden;
overflow-y: auto;
}
.blogbody {
font-family:verdana, arial, sans-serif;
color:#000000;
font-size:xx-small;
font-weight:normal;
background:#999999;
line-height:120%;
padding-left:1px;
padding-right:1px;
padding-top:1px;
overflow-x: hidden;
overflow-y: auto;
}
.date {
font-family:verdana, arial, sans-serif;
font-size:xx-small;
color:#CCC;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
padding:1px;
margin-bottom:0px;
font-weight:normal;
overflow-x: hidden;
overflow-y: auto;
}
.powered {
font-family:verdana, arial, sans-serif;
color:#CCC;
font-size:xx-small;
font-weight:bold;
border-top:1px dashed #CCC;
border-bottom:1px dashed #CCC;
width:80%;
line-height:100%;
text-transform:uppercase;
padding:1px;
margin-top:1px;
margin-bottom:1px;
margin-left:auto;
margin-right:auto;
text-align:center;
letter-spacing:.1em;
overflow-x: hidden;
overflow-y: auto;
}
Thanks to anyone who can help.
-Dustin
Fri, 2004-01-02 14:53
#1
"overflow-x: hidden" doesn't work
UPDATE:
Deleting the DOCTYPE tag in my HTML got rid of the horizontal bar. An odd thing, however, is that it has the side effect of allowing IE to ignore some (but not all) of my CSS formatting. Everything still works perfectly in Firebird though.
Something else worth mentioning is that in my case, deleting the DOCTYPE tag alone was able to get rid of the horizontal scroll bar. In other words, I have deleted all overflow properties from my CSS and as long as that DOCTYPE isn't there, I still dont have a horizontal scroll bar.
If I can just recover my CSS formatting for IE, I'll be set!
Any insignt is appreciated
-Dustin
Fri, 2004-01-02 21:32
#2
"overflow-x: hidden" doesn't work
By deleting the doc type alll browsers revert to quirky mode. Overflow-y and -x are now part of CSS3, and am not sure if they were supported by IE. As your browser is in quirky mode, it does not mean that the overflow-y and x are now working. I do know the box model will now be incorrect for IE.
The only thing I can think of, some part of the content in .content is pushing the boundaries which you have defined by left and right margin. The most obvious thing based on the results so far is padding and borders.
Anyway try this -
Put back in the doc type, get rid of all the overflows, but have overflow:hidden; in classes .blog .blogbody, and .powered
If that does not work try removing borders and padding from classes .blog .blogbody, and .powered
Regards
Day