Subject: I need help figuring out some HTML/CSS problems.
Author:
Posted on: 2012-06-09 08:55:00 UTC
So I've been building a website. It looks quite nice, aside from a few tweaks on the graphics, but that's just fine tuning.
The real problem, however, is that the Style Sheet doesn't really seem to work.
Click me.
You see the huge black space at the bottom? No, that's not supposed to be there, but nevertheless it is.
Is anyone here HTML/CSS savvy enough to help me?
I used float-left and some other stuff. Just look at the CSS if you want to see the details.
But I'm a n00b at CSS myself. I think the HTML looks okay, so almost certainly something is up with the style sheet, but I can't tell you what. There are a couple of things that specifically confuse me, though; maybe that will help?
First, you've got some "top" properties set to what look to me like really big negative values, "top: -605px;" in #content and "top: -595px;" in #footer. I understand that the "top" property normally sets an element to a distance below a containing element, so a negative value for "top" would set the same element a distance above a containing element; could those large values be creating extra space for #content and #footer to be above?
Second, I'm just plain unfamiliar with your "-moz-border" properties and can't find anything like that in my CSS guide. What's the "-moz" for, and why is there a hyphen in front of it?
Disclaimer: Total n00b shooting in pretty dim light here. I have a friend who knows better and has been teaching me, so if it's okay with you, if I see her before you figure it out, I'll ask if she can help. It would be helping me learn, too. {= )
~Neshomeh
Considering that most of the page is actually CSS-formatted...
Top values: Relative positioning does weird things. The thing in #content actually sets the content part to the same height as the navbar part. The #footer thing, in turn, pushes up the line below all the boxes.
-moz: I picked that up somewhere, and it's supposed to fix the round borders for Firefox. Official CSS ignores it, so other browsers don't really do anything with that. And no, I have no clue what that hyphen is for.
And yes, please, ask that friend. My CSS wells are dry.
Conclusion so far: The negative offsets could be the problem, but I don't know how to fix them without having the layout look weird.
I think I see it. The summative heights of header + navbar + main + footer come (according to maths + Chrome) 1307 pixels, with an additional 20 pixels of padding floating around, giving 1327. Your root area comes to 1331 pixels, again by Chrome, and those are very similar.
Is the issue here actually that you're giving it negative start values, but your root 'auto' height is generated from adding them all together as if they simply stacked? If so, that'd be the place to look - but what to do with it, I don't know.
(And since I'm duty-bound to point out trivial things - this thread might well have worked merged with AnnaBee's, since they're both HTML/CSS related. But then, given how appalingly slow the Board is moving, I don't think it matters)
hS
It might have something to do with how I align the areas, but I don't know how to fix that up.
Overflow
On second thoughts it looks like it's designed for 'too much text for the box', but it might still help... at the least you can try 'overflow:hidden;' and see what happens. :P
hS
Display
I note that all your elements are set to 'block', which doesn't allow HTML elements next to it, and might be contributing. Since the overflow is, according to my theory, mostly from the Content element, try setting... actually, set the navbar to 'display:inline;' and see if it helps. If I'm reading this right, that'll make the navbar invisible to placing everything else. Might mean you need to lose the negative placing, but I think it could work.
hS will shut up now