Tables wrecking footer, XHTML/CSS help needed

MarcLister

MarcLister

MarcLister

Soldato
Joined
7 Mar 2005
Posts
19,605
Location
LU7
Hi. I've got a XHTML file with some CSS applied. I have a page with a table for a university module. The page also has a header, footer and menu. The header and footer are all set OK. But when the table is big enough that I have to scroll down to see it all the footer just goes weird and doesn't position itself where it should. I've tried a fair bit of fiddling and researching this kind of stuff so I'd appreciate it if anyone could give me a hand with this and tell me what I am doing wrong so I can fix it. I'm guessing that I didn't start with the right layout at the beginning?

This is for a university final year project btw so if you don't want to help because of that I understand. :)

You can find the html page and the css at http://www.marclister.com/ocuk/test/modules.html and http://www.marclister.com/ocuk/test/default.css. :)

The footer should be at the bottom of the page, as it is with others, but for some reason tables or the need to scroll down the page is ruining this.
 
One thing i have noticed whilst scanning through, is that you have a lot of redundant (i think thats the word) html which you don't need.

par example:

Code: 
<div id="header">
<h1><a href="main.html">First Year Matters</a></h1>
</div>

should be:

Code: 
<h1><a href="main.html">First Year Matters</a></h1>

and

Code: 
<div id="menu">
<ul>
...
</ul>
</div>

should be just

Code: 
<ul>
...
</ul>

.....of course, there are some rare examples where you need to use wrapping divs, but in this case, i doubt so...but generally, if you only have one thing in a div (like a header), you don't need the div.
 
going out for 20 minutes but will look at it once im back.

just quickly added overflow: auto; to content div which puts the content to the max height you have set and adds a scroll bar to the tables. is this what you want?

btw im looking at it in ff
 
Sounds cool Mammalian. :) If the scroll bar looks OK and solves the footer issue I don't mind.

I'm using Opera and FF here. Using the Web Developer tool in FF I'm finding that the footer div has stupidly big dimensions.
 
Doesn't look right to me, you have to scroll the content div to see the rest of the table, and then you have to scroll the browser to see the footer - not good design practise if you ask me - but it works none the less (sort of) - if i was a lecturer i'd fail you :p (i jke!)



....if you were to ask me, I think the problem is that you are using the position styling when you don't need to, it just makes it messy...
 
Last edited:
MarcLister said:
position styling on what? Everything or the footer?
Click to expand...

Everything if you ask me - but someone else who knows more may say otherwise.

You also can't use fixed widths + fluid (percentage) widths on the same layer (that is what's giving you the horizontal scroll) - again someone may end up correcting me on this.

There isn't a lot more i can do without rewriting the whole thing - im not good enough to be able to correct what you have already done....I admire your effort though - i do exactly the same thing as you when i just want to get it done so i can go to the pub.

...What i suspect you have done is a bit of googling found a solution to another problem and messed around until it looked right on yours :p

What mammalian said might be best, although if your lecturer views it on a laptop with the same resolution as mine (1280*800 - a standard resolution) - he may not be impressed :p
 
Last edited:
im sorry but the pageis way too much of a mess for me to help you out as i'd end up doing the whole thing again for you and that wouldn't be fair to your peers.

the advice i give though, remove all the position: blah; stlying and position it as it should be place with margins, padding etc.

don't use em for size, use pixels, you have 104em for header which makes it 1664px, same with footer and everything else is really badly sized as you are using em.

by doing the above you will first end up with a mess, but a mess that will be easy to fix, float things, add margins, set the height and width and you will get what you want.
 
question. why the mouse over highlighting on the tables when there is nothing to click? :)

edit: question 2. why the same colour as ocuk..... freaky. :D
 
Last edited:
MarcLister said:
The hover feature isn't for clicking on but to help you focus on that particular row.
Click to expand...

people expect things to happen when highlighted like that. the text is perfectly legible without it. bad practice imho.....

Any colour is better than the colour of the original site. ;)
Click to expand...

what's wrong with the millions of other colours? i could understand if it was ocuk related - i know the rogues gallery/motors forum use the same colours to tie in but why does yours? :confused:
 
You must log in or register to reply here.
Back
Top Bottom