if you scroll to the bottom of #menu_contents, there is no padding at the bottom even though a ‘padding-bottom: 30px’ is specified in the .css.
this problem is unique to IE8 and even IE7 has the correct padding at the bottom being shown. does anyone know off the top of their head what is causing this?
Wow, what a perfect example of what I’m talking about with endless classes and DIV’s wrapping elements for NOTHING. Paragraphs around non-paragraph elements, spans doing B’s job, classes on them for no good reason, clearing DIV’s, total lack of graceful degradation for images off users, jquery bloat for nothing useful, tranny doctype…
Though the core of your problem is the classic “declaring padding on the same element as width and height” which has NEVER worked properly cross browser. As noonope said pad the kids, not the parent wrapper.
Though I would HIGHLY suggest throwing 90% of the markup away as useless/redundant/pointless containers, and getting rid of the fixed-height container with overflow-y given what a train wreck that is… something I would NEVER do in a design in the first place! You’ve basically got 8k of markup doing four and a half K’s job.
there are a lot of things i could have done different, but i guess i was trying to finish pretty quick. for example using sprites for the navi would have been much better, but…
do you have any resources that talk about basic css design principles? just basic stuff like parents, children, margins, paddings. i will be the first to admit i have to get back to the basics even if the output looks how i want it.