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


test.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!

This post has been edited by miCRoSCoPiC^eaRthLinG: Dec 26 2005, 03:24 AM

i do not see any scroll bars i tried ie and ff and its displays like it should.

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. -.-

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 later

but go to http://lissaexplains.com/css.shtml and she'll give you a full tutorial on how to make css style sheets =]

Before I go spewing out suggestions and poking my nose into this matter any further, may I ask your screen resolution and browser?

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:

And the 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

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 :/