fluid layout/header problem (in IE)

[ste.diamond]

Heya guys,

This is my first time posting on a group, so first of all, hello to
everybody

At the moment I'm on a placement (I'm a student studying BSc
Multimedia) doing some web related work, and part of it involves me
creating a website for a shop.

Originally they wanted me to design for high resolution but I figured
I would try my hand at a fluid layout with xhtml/css, as I'm used to
creating fixed widths.

The problem is this:

In IE, when you resize the window, the navigation breaks away from the
container.

Here's a screenshot to explain what I mean:
http://stediamond.co.uk/css_layout_problem/problem.jpg

I was just wondering if I'd be able to keep the top/bottom borders
connected to the container, It seems that when the container reaches
the end of the header (right hand side, 421px I think) it causes the
navigation to break away.

Here's the files for you to have a look at:
http://stediamond.co.uk/css_layout_problem/index.html
http://stediamond.co.uk/css_layout_problem/style.css

The files I've linked to are just a dummy page to highlight my problem.
In the website I'm creating I've used min-width on the container, but
I guess min-width only applies to FF and isn't recognised by IE.

I hope I've explained my problem clearly, if not please say and I'll do
my best to add more clarity.

Thanks in advance,
Steve

 

[dorayme]

http://stediamond.co.uk/css_layout_problem/style.css

What is your purpose in having both #wrap and also #container?

 

[ste.diamond]

What is your purpose in having both #wrap and also #container?

A friend pointed out that the original margin I had applied to the body
{ margin: 30px; } could be conflicting with the browser, so I tried
placing the container inside a wrap and then applying a top margin to
wrap and an auto to the left/right margin of the container, as the
employers want the website centered on the screen.

However this didnt work and I still had the same problem.

I did find some some sort of a solution:

http://stediamond.co.uk/css_layout_problem/attempt2/index.html
http://stediamond.co.uk/css_layout_problem/attempt2/style.css

I happen to come across this by accident as I was reading into
overflow, however I'm not too sure if this is the result I want, I
wouldnt mind your opinion (or anyone elses for that matter).

Thanks for the quick response by the way, appreciate it

 

[mbstevens]

http://stediamond.co.uk/css_layout_problem/attempt2/index.html
http://stediamond.co.uk/css_layout_problem/attempt2/style.css

I'm not too sure if this is the result I want, I

wouldnt mind your opinion (or anyone elses for that matter).

One obvious problem is that the header is not a header.
Here's what a real header would look like:

<h1>Header!</h1>

An image such as you're using, without header tags, is actually more
like a logo and should not be confused with a header.

Since you've given no doc type, IE is thrown into quirks mode.
IE does not handle CSS very well in that mode. Look here:


http://www.webstandards.org/learn/reference/charts/doctype-switch/

 

[ste.diamond]

Thanks for the input mbstevens, I've altered the /attemp2/ files and
put in a transitional xhtml doctype and also changed the header to logo
to clear up any confusion, appreciate you pointing that out, completely
forgot about quirks to be honest.

Ste