PDA

View Full Version : What causes the scroll bar to appear on the side of my page


WotNow
04-20-2009, 12:39 PM
Hi hope someone can help me with this one. Is there some code I can use to stop the scroll bar from appearing on the side of my page in Firefox and Opera but not in I.E or safari. Does anyone know what causes it. Page is:

http://www.kimberleywebdesign.com.au/Promotions/PlumberTemplate.html

I have tried googling the problem and not sure whether this is a fix.
html {
min-height: 101%;
}

Thanks for anyone's input

Corrosive
04-20-2009, 01:07 PM
Hi hope someone can help me with this one. Is there some code I can use to stop the scroll bar from appearing on the side of my page in Firefox and Opera but not in I.E or safari. Does anyone know what causes it. Page is:

http://www.kimberleywebdesign.com.au/Promotions/PlumberTemplate.html

I have tried googling the problem and not sure whether this is a fix.
html {
min-height: 101%;
}

Thanks for anyone's input

The main content div has overflow: auto; defined meaning that, if the content is longer than the page you will get a scroll bar automatically. I'm not sure I understand your question though. Are you saying that you want scrollbars in two browsers and not in the others? Do you mind if I ask why??

WotNow
04-20-2009, 02:45 PM
Sorry for not explaining correctly. Took overflow auto out of main content and still get two vertical scrollbars. One where it obviously should be and one running along the side of my page. Thx

Corrosive
04-20-2009, 03:00 PM
Sorry for not explaining correctly. Took overflow auto out of main content and still get two vertical scrollbars. One where it obviously should be and one running along the side of my page. Thx

OK, so you have your scroll bar which is inside the site and the one on the right hand side of the browser. Which one don't you want? If it is the one on the outside of the browser you will struggle as it depends on size of screen and screen res whether or not you fit your whole page on the screen (thus removing the browser scroll bars). If it is the inside one then you need to get rid of any height set on your div. This means it will expand with content rather than creating scroll bars.

Am I on the right track?

WotNow
04-20-2009, 04:32 PM
Hi yes I was talking about the vertical scroll bar on the side of my page not the browser scroll bar but I have taken the overflow auto off both the sidebar and main content divs and it seems to have worked but am waiting for results from browsershots.org but while I have your experienced selfs attention I have another problem.

I have placed an image in the upper left corner of the html tag on my promotions page
http://www.kimberleywebdesign.com.au/Promotions/Promotions.html

and have given it a margin top of 30 px to line it up with the header image on the body tag. Displays perfectly in firefox, I.E but safari doesnt honor the 30px margin top and so it displays out of alignment. I love web designing but all these glitches drive me crazy, lol. Hopefully with more years under my belt it will be less frustrating. Anyway thanks for your time!

Corrosive
04-20-2009, 05:17 PM
Hi yes I was talking about the vertical scroll bar on the side of my page not the browser scroll bar but I have taken the overflow auto off both the sidebar and main content divs and it seems to have worked but am waiting for results from browsershots.org but while I have your experienced selfs attention I have another problem.

I have placed an image in the upper left corner of the html tag on my promotions page
http://www.kimberleywebdesign.com.au/Promotions/Promotions.html

and have given it a margin top of 30 px to line it up with the header image on the body tag. Displays perfectly in firefox, I.E but safari doesnt honor the 30px margin top and so it displays out of alignment. I love web designing but all these glitches drive me crazy, lol. Hopefully with more years under my belt it will be less frustrating. Anyway thanks for your time!

I'm not sure about your methodology here mate. You have added the image to the html tag which I would leave well alone if I were you. Any reason that whole bit can't just be a banner? One image??

WotNow
04-20-2009, 05:27 PM
Well the reason I did it this way, was because I didnt know how wide to make the banner. I am using a mac with a really big screen but have made my body tags 780px wide and wanted the image to be wider than the body tag for asthetic reasons.

Corrosive
04-20-2009, 05:32 PM
Well the reason I did it this way, was because I didnt know how wide to make the banner. I am using a mac with a really big screen but have made my body tags 780px wide and wanted the image to be wider than the body tag for asthetic reasons.

You have specified a width to your body tags!! Why?? Body tags should have little more than maybe a background colour or image and possibly margin and padding 0s if you want to take the default out.

If you want your website to be a certain width then use the wrapper method (there is a tutorial on this site) and give that the width you want.

You need to review some of your building processes IMO.

WotNow
04-20-2009, 05:43 PM
Whats the difference?

WotNow
04-20-2009, 05:57 PM
I have been learning all this stuff from lynda.com and it seem to me I have been picking up a lot of mistakes. by the way wot is IMO - immediately?

domedia
04-20-2009, 06:37 PM
There is no logic to having a width to the body tag. Think of the body tag as the whole viewport area plus the things you can't see yet because you have to scroll.

imo= In my opinion
imho = In my honest opinion

..just a little internet jargon. 8)

Corrosive
04-20-2009, 06:41 PM
imo= In my opinion
imho = In my honest opinion

..just a little internet jargon. 8)

Yes, sorry, got that off 'the kids' :wink:

Use the wrapper method as in <div id="wrapper">Your entire site here</div>

and then style the wrapper. It makes a lot more sense that trying to style a pre-defined tag as Dom says. Pre-defined tags have pre-defined styles which you will battle against. divs have no pre-defined styles...you make your own rules...much easier :)

WotNow
04-21-2009, 01:23 AM
Thanks so much! I had always understood that the page was the body and the html the area around it.

WotNow
04-21-2009, 01:25 AM
Sorry forgot to ask how u know how wide to make the banner for the page if you want it wider than the rest of the document

Corrosive
04-21-2009, 08:57 AM
Sorry forgot to ask how u know how wide to make the banner for the page if you want it wider than the rest of the document

Hi

Try something like this...

CSS

#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
background-color: #CC3333;
height: 800px;
}
#banner {
background-color: #00CCFF;
width: 100%;
height: 180px;
}
body {margin: 0; padding: 0;}

HTML

<body>
<div id="banner">Your banner goes here</div>
<div id="wrapper">The body or main content of your site goes here</div>
</body>
</html>

Try that. I have added height to the divs just to demonstrate the concept but you can take these out or adjust to suit your design. Hope this helps.