473,320 Members | 2,145 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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

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
2 2569
"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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Bob Bedford | last post by:
Sorry to ask here, but can't find any CSS NG with more than 10 threads. On my site they are various article to sell from various companies. The companies update the database directly on my...
14
by: Richard Speiss | last post by:
I am trying to display a random background image for a webpage. I found this code to do it <% 'Defines the number of background images you have Const NUMBER_OF_IMAGES = 2 'Initiates the...
5
by: andy johnson | last post by:
Hi All, I called an external stylesheet main.css, created the html files and checked them locally OK. I uploaded everything to the server. When I checked it, the connection kept crashing. I...
1
by: Jocab | last post by:
Just had a look at the Wired.com site and it seems it's completely in XHTML and CSS. I don't understand this snippet of code on their homepage, though: <link rel="stylesheet" type="text/css"...
36
by: Peter Brause | last post by:
Hello, my stylesheet shows different colors for visited, active and hovered links. It works fine in IE 6, but in Opera 7 the color for the active link (red background) is never shown. How to...
7
by: codeslayer | last post by:
Greetings to everyone in ‘forum-land': I have a problem that has plaguing me to no end. It is a CSS-related question, and I have not seen this question posted anywhere in forums or through...
3
by: nick | last post by:
I have the following code in my master page: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
2
by: JWL | last post by:
Hi I need to create a bunch of sites with slightly dynamic CSS. Basically, all the image paths in the CSS need to be dynamic, depending on the values of certain ASP variables. I can think of...
4
by: Mikaël PLOUHINEC | last post by:
Hello, I have created a master page with a css. How can I use css in the children pages? The css must be declared in the <head</headsection. Does I have to import all my css in my master? Is...
1
by: fpimentel | last post by:
I have the following CSS: h1 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; margin:0; padding:0; }
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.