Can anyone tell me what is wrong here?

[olavt]

I am trying to figure out some basic css-issues. This is a rudimentary structure of what could be a header section on my site. But it does not work exactly as it is inteded to do. And I am not able to figure out what is wrong. The three graphical elements display as they should. (I have included the full URLs, just in case anyone should look at it. But it will not be like that when/if I use this on my site.)

There are two main problemes so far: My intent was that it should be in a div-block. I have tried to define such a block with ID="hb". But it does not work. If it had worked, the background should have been yellow. (Just a test colour, this will not be the background colour.) It should also have a defined height (80px). The vertical lines are there only to mark before and after what should have been a block.

The other problem is the vertical alignment of the two right graphical elements. I have included vertical-align: middle in the definition, but it does not seem to work.

Are there anyone out there who can tell what I am doing wrong?


CSS test


#hb
{display:inline;
height: 80px;
background-color: yellow}
h2.header
{font-size: large;
text-align: center;
color: blue}
h1.header
{font-size: x-large;
text-align: center;
color: green}
img.fr
{float: right;
vertical-align: middle;
padding: 10px}
img.fl
{float: left}









This should be the centrePart 2

[Greg]

Looking at the source code from your website I see three instances of doctype the html, head and body sections.
Take a look in the main template you are using to ensure there is only one instance of these sections there.
I also notice your doctype isn't a standard doctype which could confuse some browsers.