derouge 0 Report post Posted December 26, 2005 (edited) Okay, I just jumped onto the CSS bandwagon. Almost immediately I saw the powerful potential that CSS has to design a site much more cleanly. I was an old fashioned tables sort of guy, and I have to say that the layering feature using the div tags is brilliant. It allows for so much more, and so much easier. I designed a little "test" page, so to speak, so that I could fool around with layerings and various tags. The thing is, the page displays "bad". There is a horizontal scroll bar and for the life of me I can't figure out why. I'd host the site if I could, but my account is curiously suspended (another issue in itself). Below is the .css file and the .html file.mystyles.css body {font-family: Verdana, sans-serif; color: black; font-size: 90%; background-color:white }p {font-family: Verdana, sans-serif; color: black; font-size: 90%; }h1 {font-family: Verdana, sans-serif; color: black; font-size: 150%; text-decoration: underline; }span {position: relative; top: .1%; left:2%; }.innerheader {position: relative; top: .1%; left: 50% }.mainbox {border: 1px coral dashed; position: absolute; left: 15%; top: 10%; height: 80%; width: 70%; padding: 0%; background-color: ffffff; }.leftmenu {border: 0px navy solid; position: absolute; left: 1%; top: 12.5%; height: 75%; width: 15%; padding: 0%; background-color: coral; } test.html<html><head><link rel="stylesheet" type="text/css" href="mystyles.css"><title>Testpage!</title></head><body><div class="mainbox"> <span class="innerheader"> <h1>some words</h1> </span> <span> some more words </span></div><div class="leftmenu"> <span>Textbox</span></div> </body></html> Save these and load it up and see for yourself. If anyone is able to direct me in getting rid of that ugly scrollbar, which I can't see the reason for being there, I'd appreciate it. If there are any other tips I'd also take them. Thanks in advance! Edited December 26, 2005 by miCRoSCoPiC^eaRthLinG (see edit history) Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted December 26, 2005 i do not see any scroll bars i tried ie and ff and its displays like it should. Share this post Link to post Share on other sites
derouge 0 Report post Posted December 26, 2005 Uhmm, weird. Out of curiousity, is there a bottom dashed line on the "some more words" box? Thats also missing for me, not sure if it should be. I'm still getting the scroll bar, too. I'll download Opera and test with that, I guess. In the mean time, anyone else getting a scroll bar? :S This bugs me. -.- Share this post Link to post Share on other sites
chocolatxbliss 0 Report post Posted December 28, 2005 lol i don't get it...is that the entire code?? i'm confuzzledddd >< i think i'm too new for this hahahahha maybe i'll figure it out laterbut go to http://lissaexplains.com/css.shtml and she'll give you a full tutorial on how to make css style sheets =] Share this post Link to post Share on other sites
SunBlind 0 Report post Posted December 29, 2005 Before I go spewing out suggestions and poking my nose into this matter any further, may I ask your screen resolution and browser? Share this post Link to post Share on other sites
SunBlind 0 Report post Posted December 29, 2005 I couldn't help it, I had to mess with it Okay, I'm not quite sure how this will help you... but that horizontal scrollbar was bugging the hell out of me and I just had to do something about it Lol.First of all, here is the final code revision for the css: body {font-family: Verdana, sans-serif;color: #000000;font-size: 90%;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding: 0%;}p {font-family: Verdana, sans-serif;color: #000000;font-size: 90%;}h1 {font-family: Verdana, sans-serif;color: #000000;font-size: 150%;text-decoration: underline;}span {position: relative;top: .1%;left: 2%;}.innerheader {position: relative;top: .1%;left: 50%;width: 50%;}.mainbox {border: 1px coral dashed;position: absolute;left: 15%;top: 10%;height: 80%;width: 70%;padding: 0%;background-color: white;}.leftmenu {border: 0px navy solid;position: absolute;left: 1%;top: 12.5%;height: 75%;width: 15%;padding: 0%;background-color: coral;} And the HTML:<html><head><link rel="stylesheet" type="text/css" href="mystyle.css"><title>Testpage!</title></head><body><div class="mainbox"><div class="innerheader"><h1>some words</h1></div><span> some more words</span></div><div class="leftmenu"><span>Textbox</span></div></body></html> Sorry I made it so big... I have to have things spaced out since I have horrible eyes. If you see any colors or borders that weren't in your original code, it was so I could distinguish the layers and pinpoint the troublemaker. In this case, I found 2.The "innerheader" and "h1" tags seemed to be was what causing the problems, although I don't know exactly why. If I set the positioning of the innerheader span to absolute, the scrollbar went away, but your "some more words" text got realigned. And the H1... that was just weird. The H1 seemed to have taken on the width properties of your mainbox div, and since it was positioned to 50%, it overlapped half of the box, leaving the other 50% hanging on the left side. THAT was what caused the horizontal scrollbar, I just don't know why.All I can tell you is that I hate relative positioning, and always use absolute (but that's because I have the patience to adjust the coordinates pixel by pixel until I get it right) and that I changed the "some words" text to be contained in a DIV instead of a span. Don't know what it did exactly, but it looks the same as your original page, but without the scrollbar.Good luck figuring out the exact cause of this little mishap, because my brain is way too fried to research it any longer Lol Share this post Link to post Share on other sites
SunBlind 0 Report post Posted December 29, 2005 Whoops, there should be a closing div tag after the closer for the mainbox layer (so that's 2 </div>'s before <div class="leftmenu">I'm tired :/ Share this post Link to post Share on other sites
