CSS help!

C

cesium666

Supreme [H]ardness
Joined
Mar 19, 2006
Messages
4,518
Hey guys, I'm having trouble fixing one little issue with a website I made. http://www.umurf.org

At the bottom of the page, the background of the main column abruptly stops, so there is a different-colored gap which exists for some inexplicable reason.

wtfmater.jpg


This is a joomla site which is based on a heavily modified template. The original css code was a clusterfuck and contained a lot of tags that weren't used afaik, but I never bothered to clean them up.

Even then, I'm still confused as to what could be causing this issue. I went through the CSS to the best of my ability and I did not see anything glaring wrong.

Both the HTML and the CSS validate perfectly btw.

So yeah, any ideas?
 
Remove class='container' in the main div for some more insight. It seems like the footer is overflowing below where the body ends.
 
Take that background image off the body and put it on .container, like this -
Code: 
.container {
background: #fff url(bg2.gif) top center repeat-y;
width:780px;
padding:5px 0;
height: 100%;
}

Then center the divs inside .container.
Normally, you would give those divs a width of 750px and center them with margin:0 auto; but you have something in your CSS taking specificity over that. If you don't find it, this works -
Code: 
#logo, #mainmenu, #header, #content, #footer {
margin-left: 15px;
}
 
thanks a ton, it makes sense. i'll try it in a little bit :)

EDIT: ok i made the changes, but it's still not completely fixed. the shadow image is now part of the container only which is seen, but the gap still exists.. hm

I've been messing with a completely blank template, and I still get the gap at the bottom :confused:
 
On your new version, change the top of style.css to look like this -
Code: 
@charset "utf-8";
/* CSS Document 
 MAINMENU.CSS */
* {
list-style-type:none;
list-style-image:none;
margin:0;
padding:0;
}
 
Snowknight26 said:
And probably at the top too. Change the body margins and/or padding to 0.
Click to expand...

i'll try it

Excavator said:
On your new version, change the top of style.css to look like this -
Code: 
@charset "utf-8";
/* CSS Document 
 MAINMENU.CSS */
* {
list-style-type:none;
list-style-image:none;
margin:0;
padding:0;
}
Click to expand...

hm that only served to muck up the menu and make the text wrap onto the next line

i'm half ready to give up lol
 
cesium666 said:
i'll try it

hm that only served to muck up the menu and make the text wrap onto the next line

i'm half ready to give up lol
Click to expand...

The * is a universal selector left over from DOS days. It just means "all" so when you use it with margin:0;padding:0; it zeros out all default margin and padding. That's a good thing to do since the defaults are different from browser to browser.
I put
Code: 
* {
margin: 0;
padding: 0;
border: none;
outline: none;
}
as the very first line of CSS on all my webpages.

--->The only thing you have to get used to is, now that you've zero'd out margin and padding, you have to specify margin and padding anywhere you need it.
 
ohhh ic. even then, it didn't fix with everything zeroed out.

i'll play around a bit more tomorrow with the blank template and with your suggestion
 
Hm i still couldn't get it to work, so I mucked around and just rounded off the borders and added margin to the background. looks decent this way heh
 
whats wrong with teh menus? they look fine to me under ff, ie, and safari :-/
 
You must log in or register to reply here.
Back
Top