Stylesheets - CSS navigation queries and fix bugs with Internet Explorer

Author

CSS navigation queries and fix bugs with Internet Explorer

slaterino@googlemail.com

2007-03-15, 11:16 pm

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

2007-03-15, 11:16 pm

On 15 Mar, 11:49, slater...@googlemail.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 <div> as 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 <div> there 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

2007-03-16, 11:16 pm

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:absolute'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 <div> container. 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 <div> and 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...@codesmiths.com> wrote:
> On 15 Mar, 11:49, slater...@googlemail.com wrote:
>
>
> 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 <div> as 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 <div> there 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.
>
>
> Search on this. IE has transparency issues with PNGs.
>
>
> 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)