3 replies [Last post]
Virum
Offline
newbie
Last seen: 12 years 17 weeks ago
Joined: 2005-05-07
Posts: 3
Points: 0

Hey guys. Laughing out loud I've been trying to figure out what's wrong with my CSS on this site, but I have no idea. :?

Here is the link: Clicky

The problem is with the bottom white border. In Firefox it's one pixel tall, like it should be, but it rests against the bottom of the browser, ignoring my margin setting for body. Sad

In IE the margin is there, but the border is way too big. It's like 10 pixels tall.

Everything validated so I have no idea what is wrong. :?

General comments on the site layout would be awesome as well. This is my first complete CSS site (I usually use tables), so this was kinda difficult for me. Smile

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 13 years 31 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

Close to being done I know there is at least one mistake

hey mate.

nice looking site and it breakdowns well with styles off...

haven't looked at your problem with margins but will just throw a quick few things down as I am running out the door...

I think design-wise the left hand nav is a bit sparse... it could perhaps be more obvious and take up the rest of that space, otherwise it looks a bit too subtle and 'floaty'. (you could even match it too the bottom left navs as that would look cool.)

also noticed on your sub left hand menus you have a <div> called box-h around the <h4>'s ? I can't tell if this is doing anything, but you could perhaps ditch it and just use the <h4>'s on their own as headers are block elements as well.

that's it for now! nice work though.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Close to being done I know there is at least one mistake

Firstly, I don't see where you applied the margin to the body (or page-container), but I'll assume you just removed it in testing.

You have many more divisions than necessary. So many in fact, that it almost seems as convoluted as a table based layout. As gleddy pointed out, elements can be targeted in CSS without wrapping everything in divs.

I first thought the problem was because the main areas of the page are floats and thought that the page-container was not encompassing them (floats are allowed to hang below their container). I applied overflow: hidden; to the page-wrapper (a method of clearing floats) and a margin and it worked. I later pondered where the 1px white border on the bottom was coming from and discovered the bottom-border div. This is another example of an extraneous div. It's not considered good practice to do this sort of thing. Anyway, that div proved my theory wrong because the page container had to contain that floated div. And it's only 1px high, so it wouldn't 'hang' below the container. So, I'm not sure why my method worked...

Overall, a nice looking page though.

Virum
Offline
newbie
Last seen: 12 years 17 weeks ago
Joined: 2005-05-07
Posts: 3
Points: 0

Close to being done I know there is at least one mistake

Ok, thanks for the tips.

I based my CSS stuff off some other nice looking stuff I had seen; so I figured that would be the right way to go about it. Looks like I have lots of recoding to do. :roll:

So how would I create the bottom border the right way. :?

Edit, sorry it took so long to respond, I had a HDD failure. Sad