By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,625 Members | 2,235 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,625 IT Pros & Developers. It's quick & easy.

CSS-P: A few problems with layout, plus cross-browser issues

P: n/a
CJM
I'm developing a site for a charity which I am aiming to make
standards-compliant, accessible and cross-browser compatible.

I'm doing OK so far and have the workings of a respectable site, but I still
have a few little niggly problems:

Site: http://www.aif-advocacy.org.uk/index.asp

CSS: http://www.aif-advocacy.org.uk/aif.css

1) The horizontal menu isn't right on any browser. Using IE6 as a reference
point, there is a gap between the hmenu bottom
border and the bottom of the menu links - the navy blue menu links should
join the nave bottom border.

In Opera v7, the hmenu is the right vertical size, but the links are offset
(ie below) from their intended position.
In Mozilla v1.4, it is similar to Opera, except that the parts of the offset
links that are below the border are not visible.

2) I can't get the right column to position correctly. I want a x-pixel gap
between the rh-col and the content of that DIV. I tried various
margin/padding settings but couldn't get it right....

3) A question more about taste: On pages that are fairly short, the footer
appears quite high up on the page, which I dont think look that great. One
option would be to make sure each page was of a certain minimum length, but
this would seem to go against the spirit of the web - ie, people will view
the pages in different resolutions on different mediums, and you shouldn't
try force the layout in the same way you would do with paper. So does
anybody have any thoughts on this? Do we leave the footer as it is or is
there a way to improve the design, without breaking the rules..?

Thanks in advance for you help.

This is my first serious CSS-P implementation, so I'm clearly not an expert.
I need a solution this week(!), and I don't want to spoil it all by
resorting to any nasty hacks out of desperation, so you help would be
appreciated.

Chris
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
"CJM" <cj*****@yahoo.co.uk> wrote in message
news:bo*************@ID-209813.news.uni-berlin.de...
I'm developing a site for a charity which I am aiming to make
standards-compliant, accessible and cross-browser compatible.

I'm doing OK so far and have the workings of a respectable site, but I still have a few little niggly problems:

Site: http://www.aif-advocacy.org.uk/index.asp

CSS: http://www.aif-advocacy.org.uk/aif.css

1) The horizontal menu isn't right on any browser. Using IE6 as a reference point, there is a gap between the hmenu bottom
border and the bottom of the menu links - the navy blue menu links should
join the nave bottom border.

In Opera v7, the hmenu is the right vertical size, but the links are offset (ie below) from their intended position.
In Mozilla v1.4, it is similar to Opera, except that the parts of the offset links that are below the border are not visible.

2) I can't get the right column to position correctly. I want a x-pixel gap between the rh-col and the content of that DIV. I tried various
margin/padding settings but couldn't get it right....

3) A question more about taste: On pages that are fairly short, the footer
appears quite high up on the page, which I dont think look that great. One
option would be to make sure each page was of a certain minimum length, but this would seem to go against the spirit of the web - ie, people will view
the pages in different resolutions on different mediums, and you shouldn't
try force the layout in the same way you would do with paper. So does
anybody have any thoughts on this? Do we leave the footer as it is or is
there a way to improve the design, without breaking the rules..?

Chris


Chris,
I visited your site. One problem is that on pages where the lh menu is
longer than the content column, the layout breaks quite badly on ie,
netscape7, mozilla1.4. I tried page
http://www.aif-advocacy.org.uk/aboutaif/Funders.asp where you can see the
footer is overwritten by the lh column. I don't know the answer to why, all
I know positioning a footer is a real pain in css when I try to use it with
a fluid layout I've still not found a satisfactory solution to using one
myself with 2/3 column fluid layouts. For instance I've seen people using
javascript to find out how tall each of the 3 columns/divs is, and then
positioning the footer at the bottom of the lowest div. Not ideal.
Sorry I can't help
Cheers
Tony
Jul 20 '05 #2

P: n/a
CJM

"Tony Benham" <to***@kerrisway.freeserve.co.uk> wrote in message
news:bo*************@ID-170918.news.uni-berlin.de...
Chris,
I visited your site. One problem is that on pages where the lh menu is
longer than the content column, the layout breaks quite badly on ie,
netscape7, mozilla1.4. I tried page
http://www.aif-advocacy.org.uk/aboutaif/Funders.asp where you can see the
footer is overwritten by the lh column. I don't know the answer to why, all I know positioning a footer is a real pain in css when I try to use it with a fluid layout I've still not found a satisfactory solution to using one
myself with 2/3 column fluid layouts. For instance I've seen people using
javascript to find out how tall each of the 3 columns/divs is, and then
positioning the footer at the bottom of the lowest div. Not ideal.
Sorry I can't help
Cheers
Tony


I know what you mean about the long lh menu/ short content... I'm manually
going to make sure the content is meatier
for the time being so this issue doesnt show itself.

I've also come to the same conclusion about the footer... So in my next
major revision, I am going to remove and use 3 variable length columns.

Incidently, I've solved the horizontal menu problem, by changing the links
back to plain links, rather than list items. Semantically, it's a step
backwards but it's perfectly valid nonetheless.

Thanks anyway.

Chris
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.