Design Comments and positioning problems

M

Marc

I've tried to produce a design which is accessible as possible, looks
aesthetically pleasing, and also has the required functions, whilst
using CSS as much as possible, and of course, without tables!

The end product is this:
Web Addy: http://preview.horizonlt.com/
Username: horizon
Password: leisureTrust

I'd like your general comments on the design; I know there are a few bad
links and nothing much functions yet, and I hate the animated icons too
- they were insisted on by the client, not me.

There are also a couple of problems I've encountered which I have not
really been able to fix satisfactorily. These are:

1. The updates box on the right is currently absolutely positioned - I
could not find any other way to fit this into the design without it
ending up below the content, or the content below it, and so on.

2. The footer is a mess in Firefox, although it looks okay in Internet
Explorer, I think.

I look forward to your comments, and hope someone can help me with the
problems.

Marc
 
C

clive

The general design looks fine to me in IE. But you seem to have more of
a problem with Opera than you do with any of the Gecko based browsers.
At the moment I don't have time but I will look at the Gecko stuff
later and let you know. Opera is a different beast and will take a bit
more work to get going. Have you tried the page in Safari?
 
C

clive

The general design looks fine to me in IE. But you seem to have more of
a problem with Opera than you do with any of the Gecko based browsers.
At the moment I don't have time but I will look at the Gecko stuff
later and let you know. Opera is a different beast and will take a bit
more work to get going. Have you tried the page in Safari?
 
T

Travis Newbury

clive said:
The general design looks fine to me in IE. But you seem to have
more of a problem with Opera than you do with any of the Gecko
based browsers. At the moment I don't have time but I will look
at the Gecko stuff later and let you know. Opera is a different
beast and will take a bit more work to get going. Have you tried
the page in Safari?

Who are you talking to, and what are you talking about?
 
C

clive

Marc said:
2. The footer is a mess in Firefox, although it looks okay in Internet
Explorer, I think.

If you look at your stylesheet you need to add
clear: both;
to #footer.

This sorts out the floating problem with the base bar in Gecko-based
browsers (FF, NN, Mozilla).
 
M

Marc

Toby said:

Thanks for your comments Toby.

Yes, I agree with you on the date - it's pointless, but the client
insists on it, and I'm not spending another 3 meetings trying to
persuade him to change his mind. It's supposed to make stupid people
think the website is being updated regularly... pfft.

Regarding the menu, no it isn't supposed to overlap, the menu items
should start to the right of the vertical URL - do you have any idea why
Opera does this and how I can fix it without messing it up in IE and FF
(which are the browsers I am required to support)?

Marc
 
M

Marc

clive said:
The general design looks fine to me in IE. But you seem to have more of
a problem with Opera than you do with any of the Gecko based browsers.
At the moment I don't have time but I will look at the Gecko stuff
later and let you know. Opera is a different beast and will take a bit
more work to get going. Have you tried the page in Safari?

My contract only means I have to ensure it works in IE and FF, but I
will obviously aim to support other browsers where possible. I don't
have access to a machine with Safari to check the design in it.

I would really appreciate your other comments/suggestions if you get time.

Thanks,

Marc
 
T

Toby Inkster

Marc said:
Regarding the menu, no it isn't supposed to overlap, the menu items
should start to the right of the vertical URL - do you have any idea why
Opera does this and how I can fix it without messing it up in IE and FF
(which are the browsers I am required to support)?

Yes I do know.

You set

#menu UL {
margin-left: 55px;
}

but you forgot the NUMBER ONE rule when playing with margins or paddings
for lists.

The number one rule is: always EXPLICITLY set:

* margin-left for UL (or OL)
* padding-left for UL (or OL)
* margin-left for LI
* padding-left for LI

Don't rely on the browser defaults for any of these values, as different
browsers have wildly different defaults for each of them.
 
M

Marc

Toby said:
You set

#menu UL {
margin-left: 55px;
}

but you forgot the NUMBER ONE rule when playing with margins or paddings
for lists.

The number one rule is: always EXPLICITLY set:

* margin-left for UL (or OL)
* padding-left for UL (or OL)
* margin-left for LI
* padding-left for LI

Don't rely on the browser defaults for any of these values, as different
browsers have wildly different defaults for each of them.

Meaning I need to set the margin-left the same for '#menu li'? Will
that not mean in IE and FF there'll be a margin of 110px?

Marc
 
T

Toby Inkster

Marc said:
Meaning I need to set the margin-left the same for '#menu li'?

You have to set that, yes. And padding-left for '#menu li' and
padding-left for '#menu ul'.

Whenever you set one, you must set all four.

Always EXPLICITLY set:
* margin-left for UL (or OL)
* padding-left for UL (or OL)
* margin-left for LI
* padding-left for LI
Will that not mean in IE and FF there'll be a margin of 110px?

I never said you had to set it to 55px as well -- just that you have to
set it to *something*. 0px will do.
 
N

Neredbojias

With neither quill nor qualm, Toby Inkster quothed:
Yes I do know.

You set

#menu UL {
margin-left: 55px;
}

but you forgot the NUMBER ONE rule when playing with margins or paddings
for lists.

The number one rule is: always EXPLICITLY set:

* margin-left for UL (or OL)
* padding-left for UL (or OL)
* margin-left for LI
* padding-left for LI

Uh, that sounds like 4 rules to me. If one has 4 Number One rules, one
might become unilaterally fourensic.
 
M

Marc

Neredbojias said:
Uh, that sounds like 4 rules to me. If one has 4 Number One rules, one
might become unilaterally fourensic.

Thanks Neredbojias. A thread isn't worth reading until you've posted
some big works in it... :D

Marc
 
M

Marc

Toby said:
Always EXPLICITLY set:
* margin-left for UL (or OL)
* padding-left for UL (or OL)
* margin-left for LI
* padding-left for LI


I never said you had to set it to 55px as well -- just that you have to
set it to *something*. 0px will do.

Ah, good point. I have explicitly set these now. :)

It works in IE and FF still, and specifying all four meant I could take
out the 'div > #menu' hack I had in place to make IE ignore CSS I had
specified for FF! Would you might checking in Opera again?

Thanks.

Marc
 
B

Beauregard T. Shagnasty

Marc said:
Anyone would think you work for Opera. :p
No...

I don't want to download it, as my contracts never say that I'll ensure
compatibility with Opera, just IE and FF.

If you did, you wouldn't need to ask the question. <g> Really, it is a
nice browser (you may decide to use it for your own surfing), and it
will not interfere with your operating system. C'mon, go for it!

Your contracts should say "my sites will work in *all* browsers."
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,906
Latest member
SkinfixSkintag

Latest Threads

Top