Browser layout problem

Hi Guys

I am in the middle of designing a site for a friend and have checked it at home using FF and IE and all looks fine. Just checked at college using IE 6 and the layout is knocked down the page for some reason??

Link: http://www.level200.co.uk/gary/contact.php

Can someone have a look please and possibly suggest a fix.

Cheers
John

Try left-floating your content div and then on your footer div clear the floats:

Code:

#cont {
float:left;
}

#ftr {
clear:both;
}

Hi Spanner

Tried that and the result was not pretty.

Any other ideas?

Cheers

Strange - I downloaded your contact.php page, added float:left; to the #cont css and it worked for me in IE6 (and IE7, FF Opera etc.)

I only added clear:both; to the #ftr css for insurance.

I've just had another look and it definitely works locally (for that page).

Hi Carl

The client wanted a fluttering uk flag in the background, i had to build the flag in 3D Studio Max and simulate wind to make it flutter.

Did you notice it?

HI Spanner

Did you add the css changes to the layout.css file? I added it to the end of the other styles in cont and ftr but the end result looked bad.

Cheers
John

Yep - I added them to layout.css:

Code:

#cont {
    width:550px;
    background:#FFFFFF url(images/mainback.gif) repeat-y left;
    color: #333333;
    text-align:left;
    border-top: 0px solid #FFFFFF;
    border-right: 0 solid #FFFFFF;
    border-bottom: 0 solid #FFFFFF;
    border-left: thick solid #FFFFFF;
    float:left;
 }

#ftr {
    clear:both;
    height:15px;
    background:#CC0000;
    color: #FFFFFF;
    margin:0;
    border-top: thick solid #FFFFFF;
    border-right: 0 solid #FFFFFF;
    border-bottom: 0 solid #FFFFFF;
    border-left: 0 solid #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    vertical-align: middle;
    padding: 3px;
    text-align: center;
 }

Fluttering flag here in all browsers ;-)

Hi Spanner

Thats what I did, I'll try it again.

Carl, if you knew the header was flash why cant you see the flag?

Strange.

Cheers

Hi Spanner

When you do the css changes, what does it look like in FF.

Cheers
John

Mmm... not so good - blue vertical bars under the LH images and to the right of the content.

Hi Spanner
Thank God for that :funny:
Thought I was being stupid then :funny:

Back to the drawing board then.

Hi Carl

Very strange, wonder why you cant see the flag..... what can you see?

It looks like it's one of those things that could be solved instantly or could take hours...

The mixture of tables and CSS probably doesn't help - try to get rid of the table based stuff (the top menu ought to be a styled list and the form doesn't need be laid out using a table).

Try running your pages through the W3C validator - it'll highlight possible problem areas.

I'd also suggest downloading and installing the Multiple IE installer and ironing it out in IE6 locally.

Sorry I couldn't be more help.

Hi,

Just had another look at this - it was bugging me!

Forget what I said earlier and add the following to your layout.css file instead:

Code:

#bodyblock {overflow:hidden;}
#cont {float:right;}
#ftr {clear:both;}

Thanks Spanner

I'll try that when I get home, thanks for your help.

Can you see a fluttering flag in the header?

Again thanks for your help :funny:

np.

...and yes, I can see the fluttering flag!