Why is my header bar badly behaved...

I have been tinkering with CSS in a rather unstructured manner.
Fascinating stuff, but I'm a bit out of my depth on some issues and I am
appealing for help on the following items. I've cobbled the CSS together
from examples I've found on the Web. It seems to more or less work at
first glance, but on closer examination there are some irritating flaws.

Firstly, here is the URL of my site -

w-w-w-furfur.demon.co.uk/geop <slash> vgap4 - dot - htm

(please excuse the URL mangling, I have lots of spam problems.)

the CSS is in a file called

w-w-w-furfur.demon.co.uk/geop <slash> kk.css

The problems
==========
1. The top bar (header) height doesn't seem to be controllable. And
sometimes it becomes larger - for example if I make the image in the top
left corner a hyperlink, the whole header bar becomes deeper. Eventually
it struck me that this is because perhaps I do not actually define this
div properly anywhere - at the moment, it is sort of defined by the
"tabs" division, but I don't seem to be able to control its size any
way. Basically I'm confused and I think my structure is wrong. Can
anyone point me at how to control the dimensions of this bit? I want it
about 32 pixels deep.

2. If I make the top left image a hyperlink, a black bar appears to its
right. How can I get rid of that? I've tried specifying border=0.

3. Is it possible to make the main "frame" scroll but leave the navbar
and tabs at the top, in separate divs, not scrolling?

Thank you for your time,
--
Paul Honigmann

Nemo wrote:

Firstly, here is the URL of my site -
w-w-w-furfur.demon.co.uk/geop <slash> vgap4 - dot - htm

"I hope you find it more user-friendly and easier on the eye."

More than what?

The problems
==========
- Fix the validation errors. You have a random mix of HTML (pre v4!) and

XHTML.
See <http://validator.w3.org/>.
- <img src="images\diplomatpicture.jpg" ... /> is incorrect. Use a slash
(/), not a backslash (\).
- <img src="images/diplomatpicture.jpg" ... /> should be in the <p> with
"Welcome to the ..." so the text flows around it sensibly.
- No alt, width or height given for the images. "alt" is required even if
empty (alt="").
- Main body text is set to 0.8em, 80% of my preferred size. If you want
small text, make it small on your browser, not mine.
- The horizontal navigation ("Home," "Tools," etc.) is a list. So use a
list element, <ul>.
See <http://css.maxdesign.com.au/>.

1. The top bar (header) height doesn't seem to be controllable. And
sometimes it becomes larger - for example if I make the image in the top
left corner a hyperlink, the whole header bar becomes deeper. Eventually
it struck me that this is because perhaps I do not actually define this
div properly anywhere - at the moment, it is sort of defined by the
"tabs" division, but I don't seem to be able to control its size any
way. Basically I'm confused and I think my structure is wrong. Can
anyone point me at how to control the dimensions of this bit? I want it
about 32 pixels deep.

#tabs is not defined anywhere, period, only "#tabs a". And #tabs is an

"id" selector, not a class selector.
Try #tabs { height: 32px; } (although using ems may be better, scalable).

2. If I make the top left image a hyperlink, a black bar appears to its
right. How can I get rid of that? I've tried specifying border=0.

Don't know. Your test case does not show a link.

You could try #tabs img { border: 0; }

3. Is it possible to make the main "frame" scroll but leave the navbar
and tabs at the top, in separate divs, not scrolling?

Yes, but not in IE. See position:fixed .

Or you could use frames (ugh).

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jim Moe suggests

"I hope you find it more user-friendly and easier on the eye."
More than what?

The previous version of the site, worthy of a "Retinal burn award". I
thought it was pretty cool when I wrote it 6 years ago, but you know...
bright text on a black background may seem appropriate for a space game
site, but gets kinda wearing after a while 8)

Thank you for the detailed hit list of things to check. I just
discovered the \ versus / bit myself, I'm proud to say, but the rest
opened my eyes!

I won't be using frames. I have gone to some trouble to avoid them,
though they'd be an easy fix. I understand enough to know that though
they've got a place, it's not here.
--
Paul Honigmann

<snippage of useful stuff not relevant to this bit>

3. Is it possible to make the main "frame" scroll but leave the
navbar and tabs at the top, in separate divs, not scrolling?

Yes, but not in IE. See position:fixed .
Or you could use frames (ugh).

What about using "overflow: auto;" on the main div -- I've produced the
desired effect in this way before.

blagne ford
--
www.lightningnews.com Lightning fast anonymous usenet downloads for 5$ only !