CSS navigation queries and fix bugs with Internet Explorer

[slaterino@googlemail.com]

Hello,
I'm hoping someone can help me with a couple of queries. I am in the
process of designing a site which I have uploaded to:
http://www.cca-ltd.co.uk/New/index.html, but I currently have 2
problems.

Firstly, the navigation bar (Home, About Us, Training, etc.) looks
fine on a full screen browser but when I decrease the size of the
screen the tabs roll onto the next line. Is there anyway I can make
this navbar static?

Secondly, I have designed my page mainly using Firefox and everything
looks fine. In Internet Explorer though, my .png's don't show
correctly and the transparent tables are opaque. Does anyone know why
this is and have any possible fixes?

Thanks for your help folks. This is my first CSS page so go easy on me
eh?

Cheers
Russ Slater

[Andy Dingley]

Re: CSS navigation queries and fix bugs with Internet Explorer

On 15 Mar, 11:49, slater...@googl email.com wrote:

Firstly, the navigation bar (Home, About Us, Training, etc.) looks
fine on a full screen browser but when I decrease the size of the
screen the tabs roll onto the next line. Is there anyway I can make
this navbar static?

Not really. How do you fit a quart into a pint pot? If your problem
is "How do I make a big nav bar fit into a small space", then you can
either force it to always be smaller than the space, or you can cause
it to wrap / scroll / fold / spindle or mutilate in some other way.
Usability wise we could tell you how to shrink the nav bar, but that's
a bad idea. It soon becomes simply too small to be usable. So instead,
just live with it wrapping when absolutely necessary.

You can improve how it looks by not setting the position property (on
the other elements). Just leave it as the default of "static". Don't
set position unless you need to, you understand how to, you set it
consistently between siblings and you can deal with the side-effects
you're seeing here when re-sizing a page. Using position: absolute; in
particular is a recipe for pages that look great on your particular
display, but bad when re-sized.

You might also find it simpler to use a few more <divas containers,
especially if you're trying to make it work with just
position:static ; Rather than a number of image blocks down the RHS,
put one <divthere and put the existing image blocks inside it. CSS
positioning works pretty well, and much more simply, when you nest
things like this. You replace tricky "alignment" problems with default
action based on containment.

As another suggestion, reduce the number of entries on it (7 is
traditional top limit) and use a second menu if necessary. Always take
a user-centred design approach: give users what they're looking for,
rather than what you think you need to offer. "Training", "Homecare"
etc. want to be on the top menu. "Contact Us", "About", "Links" and
"Home" could go on a single secondary menu; maybe beneath, maybe on
the LHS. You might have one of these on the main menu, but all three
of them is burning a lot of valuable real-estate for not much
benefit.

Breadcrumbs can be good too, as they offer many of the "upward" links
in a context-sensitive manner. Users seem to understand tree-
navigation quite easily.

Secondly, I have designed my page mainly using Firefox and everything
looks fine. In Internet Explorer though, my .png's don't show
correctly and the transparent tables are opaque.

Search on this. IE has transparency issues with PNGs.

This is my first CSS page so go easy on me

It's looking pretty good so far -- it's certainly heading in all the
right directions.

Take a look at code validity - fixing this (easy, with good tools)
makes problems of browser consistency (hard, you're on your own)
easier to solve. Choosing HTML 4.01 Strict is good, but watch out for
the XML empty tags that have crept in.

Get some better contrast between text and background! Text is
black!! Set your background colour too.

Fix the font size. Fonts go at 1em!!! (search the archives)

Use more em units rather than pixels. They encourage a "fluid
design" (good search term to look for in the archive)

Ditch the @import and the media="screen" from the stylesheet <link>.
Doing it the simple way works fine. I'd also lose the split-file CSS
and jsut do it in one. It's not a hugely complex site that needs to
look at modularising its CSS.

I'm not a fan of textured backgrounds, as they can only make reading
harder. Solid colour blocks over them (like your LHS) are good, and at
least your background has very low contrast so isn't distracting.

Read Joe Clark's excellent on-like book about usability. If you're any
sort of community project, you should take this seriously (so shoudl
we all, but you especially)

[slaterino@googlemail.com]

Re: CSS navigation queries and fix bugs with Internet Explorer

Thanks for your help Andy. I'm slowly tidying up my script and have
put what I've got online so far. I was wondering how I would go about
putting the navigation bar in a container that stops it spilling out
onto the next line when the page is reduced in size. You alluded to
doing this using a container and taking away the positive:absolu te's
but is there something I need to do for this to work. I can work out
how to do it using a fixed width page but it seems a lot harder when
the width is variable.

Secondly, a similar kind of query in that you talk about putting the
pictures all within the same <divcontainer . My only problem with
this is that I like there to be a break between each picture and
caption so that you can see the background. Is there a way of putting
them in the same <divand also creating breaks for the background to
show through?

Lastly, the reason the text is the middle is not black is because I've
set the transparency lower to let the background shine through. I have
then tried to revert the text to it's normal darkness but have
struggled. Is there any fix for this at all?

Thanks very much for your help
Russ


On 15 Mrz., 14:52, "Andy Dingley" <ding...@codesm iths.comwrote:

On 15 Mar, 11:49, slater...@googl email.com wrote:
>

Firstly, the navigation bar (Home, About Us, Training, etc.) looks
fine on a full screen browser but when I decrease the size of the
screen the tabs roll onto the next line. Is there anyway I can make
this navbar static?

>
Not really. How do you fit a quart into a pint pot? If your problem
is "How do I make a big nav bar fit into a small space", then you can
either force it to always be smaller than the space, or you can cause
it to wrap / scroll / fold / spindle or mutilate in some other way.
Usability wise we could tell you how to shrink the nav bar, but that's
a bad idea. It soon becomes simply too small to be usable. So instead,
just live with it wrapping when absolutely necessary.
>
You can improve how it looks by not setting the position property (on
the other elements). Just leave it as the default of "static". Don't
set position unless you need to, you understand how to, you set it
consistently between siblings and you can deal with the side-effects
you're seeing here when re-sizing a page. Using position: absolute; in
particular is a recipe for pages that look great on your particular
display, but bad when re-sized.
>
You might also find it simpler to use a few more <divas containers,
especially if you're trying to make it work with just
position:static ; Rather than a number of image blocks down the RHS,
put one <divthere and put the existing image blocks inside it. CSS
positioning works pretty well, and much more simply, when you nest
things like this. You replace tricky "alignment" problems with default
action based on containment.
>
As another suggestion, reduce the number of entries on it (7 is
traditional top limit) and use a second menu if necessary. Always take
a user-centred design approach: give users what they're looking for,
rather than what you think you need to offer. "Training", "Homecare"
etc. want to be on the top menu. "Contact Us", "About", "Links" and
"Home" could go on a single secondary menu; maybe beneath, maybe on
the LHS. You might have one of these on the main menu, but all three
of them is burning a lot of valuable real-estate for not much
benefit.
>
Breadcrumbs can be good too, as they offer many of the "upward" links
in a context-sensitive manner. Users seem to understand tree-
navigation quite easily.
>

Secondly, I have designed my page mainly using Firefox and everything
looks fine. In Internet Explorer though, my .png's don't show
correctly and the transparent tables are opaque.

>
Search on this. IE has transparency issues with PNGs.
>

This is my first CSS page so go easy on me

>
It's looking pretty good so far -- it's certainly heading in all the
right directions.
>
Take a look at code validity - fixing this (easy, with good tools)
makes problems of browser consistency (hard, you're on your own)
easier to solve. Choosing HTML 4.01 Strict is good, but watch out for
the XML empty tags that have crept in.
>
Get some better contrast between text and background! Text is
black!! Set your background colour too.
>
Fix the font size. Fonts go at 1em!!! (search the archives)
>
Use more em units rather than pixels. They encourage a "fluid
design" (good search term to look for in the archive)
>
Ditch the @import and the media="screen" from the stylesheet <link>.
Doing it the simple way works fine. I'd also lose the split-file CSS
and jsut do it in one. It's not a hugely complex site that needs to
look at modularising its CSS.
>
I'm not a fan of textured backgrounds, as they can only make reading
harder. Solid colour blocks over them (like your LHS) are good, and at
least your background has very low contrast so isn't distracting.
>
Read Joe Clark's excellent on-like book about usability. If you're any
sort of community project, you should take this seriously (so shoudl
we all, but you especially)