Yet another CSS Cross browser issue

[ackerley1]

Updating a site and again have stumbled upon a quirk between IE(7 specifically) and FF that I cannot seem to resolve.

Reef Village 2008 v1 (http://www.reefvillagebelize.com/2008/temp.php)

In FF the "grey" content box is where it should be - aligned with the left of the Orange logo box and the bottom of the top blue band.

In IE7 the "grey" box is to the right of the orange logo box when it is directly under the blue, but if you shift it to the align with the left of the logo box it is not directly under the blue band.

Any ideas? Is there a way around this without resorting to IE conditionals?

[Dubbya]

It's a pretty simple fix.



#logo {
float:left;
position:relative;
top: -102px;
margin-bottom:-164px;

}

#content_container {
background-color:#CCCCCC;
margin-left:3px;
height:400px;
clear:both;
}


I set the content div to clear under the logo, allowing it to move left, then applied a negative bottom margin on the logo to "pull" the content div up vertically.

The content container also has a 3 pixel left margin applied so that it aligns more precisely with the left edge of the logo.

FYI: With this code, the logo div will rest above any text or images you place in the content area, so text will flow behind it.

I'm assuming that your navigation menu will reside directly beneath the logo. If that's the case, you can use the following to constrain your paragraph text so that the main content stays to the right of it.




p {margin-left:230px; margin-right:20px;text-align:left;}

#logo {
float:left;
position:relative;
top: -102px;
margin-bottom:-164px;

}

#content_container {
background-color:#CCCCCC;
margin-left:3px;
padding-top:10px;
height:400px;
clear:both;
}


You'll also note that this works in IE6, IE7, FireFox, Opera, Safari for Windows and Google Chrome.

Enjoy!

[Dubbya]

One thing that puzzles me is the character set declaration in your style sheet.


@charset "utf-8";


Why would you need that if it's already declared in the head of the web page?


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

[Vaijero_Maya]

mmmm looks good to me (IE8)

[ackerley1]

Wow... never even thought of a negative Margin :-) Thanks for that!

Nav will actually be to right of logo...

Not sure on the utf8... DW defaults that into there... and i figured it did no harm...


thanks for the help!!