I have a simple webpage that works fine in 1024X768, but in 800X600 IE places vertical and horizontal scrollbars, when they arent even necessary (the scrollbar on the main div is intended). How do I remove them, or have I muched up my CSS code somehow?
I have a set of text links that sit at the bottom off the page, but I want them within view, and immediately below the main content div.
If anyone can help, it would be much appreciated.
The website is located here:
<!-- m --><a class="postlink" href="http://www.gsr-evo-club.net/uploads/gilly/">http://www.gsr-evo-club.net/uploads/gilly/</a><!-- m -->
The CSS is embedded.How can you truthfully say they are not unnecessary have you considered the accessibility aspect, though if you must:
<style type="text/css">
<!--
body
{
overflow: hidden;
}
-->
</style>Just use overflow:auto; instead and see if that does what you like, because that will not disable them completly. There are factors that can stretch your site, like the text size on someone elses computer being different. This turnes into an accessability issue as robert said and its really not good. Worrie about functionality first and looks second. The site needs to work first and foremost.thanks for that guys, the overflow:hidden line worked.
Now to defend myself, the websites only a uni assignment which the content is being marked higher than the site. And it wont be a public document on the web, it will be maked by my uni tutorer, using the uni's computers. Therefore these computers are all the same, so I know exactly how it will look when it is marked.
But thanks for the advice anyway, I often get lazy when designing websites and forget that there are many things to consider rather than just screen size.I tried the overflow: auto; Works in IE, but Netscape will not load the page. What else can be done?The problem is that you have your #footer width set to 100%, yet you have padding set to 5px, that's why it overflows. You can do padding:5px 0; which will give you 5px of padding veritcally. But if you want it horizontally (not sure why, since the footer text is center aligned), you'll have to reduce the width of #footer.
(I think that's the problem
)Originally posted by Paul Jr
But if you want it horizontally (not sure why, since the footer text is center aligned), you'll have to reduce the width of #footer.Actually, a rather nifty workaround for that would be to set a left and right margin of -5px. Makes it easier than trying to guess the width.
Originally posted by pyro
Actually, a rather nifty workaround for that would be to set a left and right margin of -5px. Makes it easier than trying to guess the width.
Yes, that is an excellent idea. But won't that defeat the purpose of having the 5px padding in the first place?In that situation, perhaps so. If that is the case, a container div is probably the way to go.The text in the footer is center aligned, so I'm not really sure why the 5px padding is needed -- at least the horizontal padding. In simon_gill's case, he could either add the -5px margin right and left, or remove the horizontal padding.
I believe either of those changes will work peachy. If not, uhm... crap.Thanks.
I actually figured out another solution. My style sheet is external. Netscape likes this particular css tag to be embedded. I tested and it works. Sorry for the late input that I figured out a solution to my previous post. I will keep note of the help that was given for future situations.
-cmotorMy last post about the code below working in Netscape was wrong, sorry. The situation is this:
The code below works well with IE. But it is not needed for Netscape since Netscape does not automatically put scroll bars on the page unless they are needed.
The question is:
How do I get Netscape to ignore the code below so that it will only be read by IE
btw: I tried the margin settings that were reccomended, but that got confusing and did not seem to help.
<style type="text/css">
<!--
body
{
overflow: auto;
}
-->
</style>
Thanks,
-cmotorI'm a bit too lazy to Download your code and images to test it myself, but changing the 5px to 0 in the red line of the following code should solve your problem.
#footer {
width: 100%;
position: absolute;
bottom: 5px;
height: 15px;
bottom: 0px;
font-size: 10;
padding: 5px;
z-index: 2;
}
I'll have to take a closer look when I'm not so lazy.
(It's 12:30 A.M. here)Thanks, but I am not the original poster of this thread. I think you have me confused with him. I beleive my problem is a different situation than his/hers. I just want the scroll bars to be invisible in IE, except when they are needed. Netscape does this automatically, so no special code is needed. But when I have the code below in my header tags, it throws Netscape off and the page does not load. Please let me know if you need me to put up a sample page.
Here is a link to a test page I put up:
<!-- m --><a class="postlink" href="http://www.screamingleather.com/test_scroll.html">http://www.screamingleather.com/test_scroll.html</a><!-- m -->
My question is:
How do I get Netscape to ignore the code below so that it will only be read by IE
btw: I tried the margin settings that were reccomended, but that got confusing and did not seem to help.
<style type="text/css">
<!--
body
{
overflow: auto;
}
-->
</style>
Thanks,
-cmotorAha! I knew I had to stop staying up late like this.
Sorry about the confusion.
Thanks Paul. Let me know what you come up with.
-cmotor
I have a set of text links that sit at the bottom off the page, but I want them within view, and immediately below the main content div.
If anyone can help, it would be much appreciated.
The website is located here:
<!-- m --><a class="postlink" href="http://www.gsr-evo-club.net/uploads/gilly/">http://www.gsr-evo-club.net/uploads/gilly/</a><!-- m -->
The CSS is embedded.How can you truthfully say they are not unnecessary have you considered the accessibility aspect, though if you must:
<style type="text/css">
<!--
body
{
overflow: hidden;
}
-->
</style>Just use overflow:auto; instead and see if that does what you like, because that will not disable them completly. There are factors that can stretch your site, like the text size on someone elses computer being different. This turnes into an accessability issue as robert said and its really not good. Worrie about functionality first and looks second. The site needs to work first and foremost.thanks for that guys, the overflow:hidden line worked.
Now to defend myself, the websites only a uni assignment which the content is being marked higher than the site. And it wont be a public document on the web, it will be maked by my uni tutorer, using the uni's computers. Therefore these computers are all the same, so I know exactly how it will look when it is marked.
But thanks for the advice anyway, I often get lazy when designing websites and forget that there are many things to consider rather than just screen size.I tried the overflow: auto; Works in IE, but Netscape will not load the page. What else can be done?The problem is that you have your #footer width set to 100%, yet you have padding set to 5px, that's why it overflows. You can do padding:5px 0; which will give you 5px of padding veritcally. But if you want it horizontally (not sure why, since the footer text is center aligned), you'll have to reduce the width of #footer.
(I think that's the problem
)Originally posted by Paul Jr But if you want it horizontally (not sure why, since the footer text is center aligned), you'll have to reduce the width of #footer.Actually, a rather nifty workaround for that would be to set a left and right margin of -5px. Makes it easier than trying to guess the width.
Originally posted by pyro Actually, a rather nifty workaround for that would be to set a left and right margin of -5px. Makes it easier than trying to guess the width.
Yes, that is an excellent idea. But won't that defeat the purpose of having the 5px padding in the first place?In that situation, perhaps so. If that is the case, a container div is probably the way to go.The text in the footer is center aligned, so I'm not really sure why the 5px padding is needed -- at least the horizontal padding. In simon_gill's case, he could either add the -5px margin right and left, or remove the horizontal padding.
I believe either of those changes will work peachy.
If not, uhm... crap.Thanks.I actually figured out another solution. My style sheet is external. Netscape likes this particular css tag to be embedded. I tested and it works. Sorry for the late input that I figured out a solution to my previous post. I will keep note of the help that was given for future situations.
-cmotorMy last post about the code below working in Netscape was wrong, sorry. The situation is this:
The code below works well with IE. But it is not needed for Netscape since Netscape does not automatically put scroll bars on the page unless they are needed.
The question is:
How do I get Netscape to ignore the code below so that it will only be read by IE
btw: I tried the margin settings that were reccomended, but that got confusing and did not seem to help.
<style type="text/css">
<!--
body
{
overflow: auto;
}
-->
</style>
Thanks,
-cmotorI'm a bit too lazy to Download your code and images to test it myself, but changing the 5px to 0 in the red line of the following code should solve your problem.
#footer {
width: 100%;
position: absolute;
bottom: 5px;
height: 15px;
bottom: 0px;
font-size: 10;
padding: 5px;
z-index: 2;
}
I'll have to take a closer look when I'm not so lazy.
(It's 12:30 A.M. here)Thanks, but I am not the original poster of this thread. I think you have me confused with him. I beleive my problem is a different situation than his/hers. I just want the scroll bars to be invisible in IE, except when they are needed. Netscape does this automatically, so no special code is needed. But when I have the code below in my header tags, it throws Netscape off and the page does not load. Please let me know if you need me to put up a sample page.Here is a link to a test page I put up:
<!-- m --><a class="postlink" href="http://www.screamingleather.com/test_scroll.html">http://www.screamingleather.com/test_scroll.html</a><!-- m -->
My question is:
How do I get Netscape to ignore the code below so that it will only be read by IE
btw: I tried the margin settings that were reccomended, but that got confusing and did not seem to help.
<style type="text/css">
<!--
body
{
overflow: auto;
}
-->
</style>
Thanks,
-cmotorAha! I knew I had to stop staying up late like this.
Sorry about the confusion.
Thanks Paul. Let me know what you come up with.-cmotor