|
| |
|
|
BeTheBall
Posts: 6502
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
 |
Unwanted Horizontal Scrollbar and a FF problem - 11/14/2008 17:53:50
See the following:
http://duanethomas.net/itla/template-test.htm
I am wondering why I am getting a horizontal scrollbar. It is there in all of the following browsers (FF, IE7, IE6 and Opera).
Also, you will see my horizontal menu appears a bit higher on the page in FF.
Here is the code for the stylesheet:
body {
background: #000 url('../images/bg-green3.jpg') repeat-x;
color: #000;
font-size:0.7em;
font-family:Arial, sans-serif;
margin:0px;
padding:0px;
}
table {border:1px solid #000000;border-collapse:collapse;}
th {color:#000000;background-color:#66CC66;padding:5px;border:1px solid #000000;white-space:nowrap;}
td {padding:5px;border:1px solid #000000;}
.fixedWidth {width:700px;}
a { color:#339900; background: inherit; text-decoration:none }
a:hover { color: #647B6D; background: inherit; text-decoration:none}
.underlinedLink a { color:#339900; background: inherit; text-decoration:underline;}
.underlinedLink a:hover { color: #647B6D; text-decoration:underline;}
.bold {font-weight:bold;}
h1 { font: bold 2em Arial, Sans-Serif; }
h2 { font: normal 1.6em Arial, Sans-Serif; letter-spacing: -1px; }
h1 a { color: #46574D; background: inherit; }
h1 a, h2 a { text-decoration: none; }
h1 a:hover, h2 a:hover { color: #BFE1ED; background: inherit; }
h3 { font: 110% Arial, Sans-Serif; color: #46574D; font-weight:bold; }
p { margin: 0 0 0px 0; line-height: 1.5em; }
form { margin: 0; }
.content { margin: 0; padding: 0px; color: #000; }
.header { color: #000; width: 100%; margin: 0px 0px 0px 20px;}
.header .leftside { width: 500px; float: left;}
.header h1 {
color: #FFF;
font: bold 18pt Arial, sans-serif;
margin-bottom:0px;
}
.header h2 {
margin-top:0px;
margin-bottom:0px;
color:#66CC66;
font: bold 16pt Arial, sans-serif;
}
.header .searchf {
float: right;
margin-right: 15px;
clear: both;
margin-top: 35px;
}
.searchpad { padding-top: 15px; }
#navDiv {text-align:center;clear:both;}
ul#nav
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#nav li
{
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 10px; }
#nav a, #nav a:visited {
padding:4px 16px;
color:#66CC66;
text-decoration:none;
font-size:12pt;
font-weight:bold;
}
#nav a:hover {
color:#fff;
}
.center {text-align:center;}
.borderedImg {border:solid 1px #000;}
.imgd {
border: 1px solid #ccc;
padding: 5px;
}
.main_content {
margin: 0 ;
width: 100%;
float:left;
}
.sd_left {
float:left;
color: #000;
margin: 0;
padding: 10px 0px 0px 10px;
font: 11pt arial, helvetica, verdana, sans-serif;
}
.sd_right {
background: #fff url('../images/back_white.jpg');
color: #000;
font-size:1.2em;
font-family:arial, helvetica, verdana, sans-serif;
margin-left:192px;
}
.sd_right p {margin-bottom:10px;}
.rightContent {
padding: 0px 20px 10px 10px;
min-height: 500px;
height: auto;
_height: 500px;
}
.sd_left h2 {font-size:14pt;text-align:center;color: #66CC66;}
.sd_right h1 {font-size:1.5em;padding: 10px 0px 10px 0px}
.sd_right h2 {font-size:1.45em;padding: 10px 0px 10px 0px}
.sd_right h3 {font-size:1.4em;padding: 10px 0px 10px 0px}
.sd_right h4 {font-size:1.35em;padding: 10px 0px 10px 0px}
.sd_right h5 {font-size:1.3em;padding: 10px 0px 10px 0px}
.text_padding {
padding: 15px 0 0 0;
}
.main_content h2 {
padding: 5px 0 5px 0;
font: bold 1.6em Arial, sans-serif;
}
.footer {
background: #000 url('../images/footer-green.jpg') repeat-x top;
width: 100%;
color:#eee;
text-align:center;
clear:both;
font-style:normal; font-variant:normal; font-weight:normal; font-size:1.3em; font-family:arial, helvetica, verdana, sans-serif
}
.footer .padding { padding: 25px 70px 25px 70px; }
.footer a { color:#66CC66; text-decoration: none;}
.footer a:hover { color:#66CC66; text-decoration: underline; }
#divStayTopLeft {position:absolute;width:170px;}
#divStayTopLeft a{color:#FFFFFF;text-decoration:none}
#divStayTopLeft a:hover{color:#009900;text-decoration:none}
#divStayTopLeft h2 {text-align:center;color: #66CC66;}
#divStayTopLeft {margin: 0;padding: 0px 0px 0px 0px;font: 1.2em arial, helvetica, verdana, sans-serif;}
.highlight {background-color:#FFFF00;}
Any suggestions on how to fix these two issues?
< Message edited by BeTheBall -- 11/14/2008 21:57:53 >
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
|
|
|
|
treetopsranch
Posts: 1648
From: Cottage Grove, OR, USA
Status: offline
|
RE: Unwanted Horizontal Scrollbar and a FF problem - 11/14/2008 20:37:18
No horizontal scroll fo me using FF but a little scroll using IE 6. Could it be that one of you graphics is too wide. But that really doesn't sense either as I think you are using small graphics and repeating them, right?
_____________________________
Don from TreeTops Ranch, Oregon
"I've got a taste for quality and luxury"
| |
|
|
|
treetopsranch
Posts: 1648
From: Cottage Grove, OR, USA
Status: offline
|
RE: Unwanted Horizontal Scrollbar and a FF problem - 11/14/2008 20:43:58
I also get these 3 errors. Not sure if any of them cause the horizontal scroll but you might want to try to fix them and check it out again.
116 .sd_right Value Error : clear attempt to find a semi-colon before the property name. add it
116 .sd_right Parse Error
124 .rightContent Property _height doesn't exist : 500px
_____________________________
Don from TreeTops Ranch, Oregon
"I've got a taste for quality and luxury"
| |
|
|
|
Tailslide
Posts: 6755
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Unwanted Horizontal Scrollbar and a FF problem - 11/15/2008 2:39:10
Hi Duane - did you fix it? No scrollbar in any browser for me.
As far as differences in positioning - I always start stylesheets off with a set of reset rules - this removes all the standard margins and paddings and introduces a few to standardise across browsers. Mine currently looks like this:
/**************** Style Resets **********************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,dl,address {margin:1em 0;}
li, dd, blockquote {margin-left:1em;}
html, body, fieldset {font:100.1%/120% Arial, Helvetica, sans-serif;}
input, select, textarea {font-size:100.1%;}
h1, h2, h3, h4, h5, h6 {font-size:100%;}
form label{cursor:pointer;}
fieldset, img{border:none;}
table{border-collapse:collapse; border-spacing:0;}
ul li {list-style-type:square;}
hr {height: 1px; background-color: #E5E5E5; color: #E5E5E5; border: none; padding: 0; margin: 1em 1em;}
Now the problem with the main content area looking lower down in Firefox is to do with the top margin default for headings in Firefox as opposed to IE - so with the above resets, you would at least get the same top-margin across all of them (which obviously you can overrule later on if required).
_____________________________
Little Blue Plane Web Design | Land Rover project
| |
|
|
|
BeTheBall
Posts: 6502
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
|
RE: Unwanted Horizontal Scrollbar and a FF problem - 11/15/2008 8:45:54
Thanks Don, Helena. The only way I was able to get rid of the scrollbars was to insert the following:
html {overflow:hidden;}
Should I have to do that?
The style resets will be an absolute lifesaver. I made the discovery that it was the lack of a padding: 0 that was causing a problem just 2 minutes before I logged in and read your post. These resets will make my life a lot easier.
Thanks as always.
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
| |
|
|
|
BeTheBall
Posts: 6502
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
|
RE: Unwanted Horizontal Scrollbar and a FF problem - 11/15/2008 9:04:50
Scratch that. After resetting my margins and padding I was able to delete the overflow property and voila, no scrollbar.
Thanks again.
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 