Forums

CSS

This topic is locked

Having Problems with CSS Positioning

Posted 13 Jan 2006 14:32:59
1
has voted
13 Jan 2006 14:32:59 kirsty burgoine posted:
Hi,
I've set up a new website for the company I work for and have tried a lot of new things with it (You may have noticed a lot of posts from me in the last few months).

Anyway, I'm using CSS now to define the look of my site and have taught myself alot but have hit a stumbling block. When previewing my work I have a 15" monitor and everything is as I want it. However when viewing my site on a 17" monitor there are large spaces which I can't get rid of without everything overlapping on the 15". There must be a way to set universal sizes as other websites manage it but I don't seem to be able to find a way.

You can see the page I'm having problems with at www.bandm.co.uk/Index.asp

and the CSS file is at
www.bandm.co.uk/Bandm.css

I'm happy with columns around the edge I just want to get the spacing between '.toprow' '.middlerow' and '.bottomrow' correct.

Am I missing something obvious? I've tried changing the positioning to relative but, while the top two appear correctly, I lose the '.bottomrow' completely.

This CSS file is set to display correctly in Explorer I have other files for Opera and Firefox. I'm using Dreamweaver MX2004 with an Access Database on PC.

I hope I'm missing something obvious.

Thanks

Kirsty

Kirsty

Replies

Replied 17 Jan 2006 13:26:11
17 Jan 2006 13:26:11 kirsty burgoine replied:
Me again,

I've been teaching myself CSS through a mixture of reading books and modifying free scripts I've found online. When I uploaded my site, it appeared differently on the computers in the office that had different sized monitors or used a different resolution to 1024 x 728.

I found out that this was largely due to the fact that I was using absolute positioning not relative.

The problem only occurred with the three content boxes in the centre of the page (referenced as .toprow .middlerow and .bottomrow in my CSS file) I've managed to change it so the top two appear as they should in all browsers now.

My problem is '.bottomrow'. With all three rows set at 'position:relative;' the '.bottomrow' doesn't show at all in my browser. I've added a 'z-index' in case it appears underneath '.middlerow' and have tried changing the percentage of the 'top' value. The only way it appears is if I change the 'top' value to 'inherent;' but then it overlaps '.middlerow'.

Has anyone got any ideas on how I can fix this?

Thanks

Kirsty

Kirsty

Reply to this topic