CSS layout

[birdsall]

Hi

I've just started a CSS layout and when I checked it on firefox there are a few things showing up differently. It would be much appreciated if someone could save me time by correcting my CSS..... The way it looks on IE is how i want it to look on firefox,etc

This is the address: birdsall.pcriot.com

CSS:

body{
font-family: Arial;
font-size: 12px;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
vertical-align:middle;
text-align: center;
}
#masthead{
margin: 0;
padding: 10px 0px;
border-bottom: 1px solid #cccccc;
width: 850px;
background:#ffffff;
}
#mainpart {
padding: 10px;
background-color: #ffffff;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 625px;
float:left;
text-align:justify;
}
#navBar{
padding: 0px;
background-color: #ffffff;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 225px;
height: 100%;
float:right;


}
#content{
width: 850px;
margin: 0;
padding: 0 0 0 0;
background: #ffffff;
display: inline;
}

[misson]

The way it looks on IE is how i want it to look on firefox,etc

Screenshots are always helpful, especially for those of us w/o IE (we can use browsershots, but there's a wait).

Develop on the most CSS compliant browser (currently, Safari 4, Google Chrome 3 or 4, and Opera 10), though Firefox is close enough (and Firebug is invaluable). The Acid3 test is the common test for compliance.

This is the address: birdsall.pcriot.com

You can use the [URL] tag (accessible using the button) to create a link: birdsall.pcriot.com.

body {
...

Use the [CODE], [PHP] or [HTML] tag (as appropriate) to delineate code from the rest of your post. Look to the editing toolbar for corresponding buttons.

It doesn't matter as much for CSS, but indenting code helps readability.

body {
    font-family: Arial;

Always end font-family with a generic font family, in case the other fonts aren't available (which might be the case on mobile devices, even for Arial). Try: font-family: Arial, Helvetica, sans-serif;.

body {
    font-size: 12px;

px are best suited for images and movies, but make for a terrible font size unit, given differences in display size and resolution and viewers' eyesight. em and % are better, though they work differently (sizing font relative to parent's font-size). For this particular rule, I recommend leaving off the font size, given you're using close to the default size.

    vertical-align:middle;

This probably doesn't do what you expect. It doesn't generally vertically center elements. vertical-align is for aligning inline-boxes (which matters when inline content is of different height).

#masthead {
    border-bottom: 1px solid #cccccc;

Since you want this to line up with the content, make this the border-top of #content:

#content {
    border-top: 1px solid #CCC;
}

    width: 850px;

Fixed layouts... not so hot. Especially fixed layouts using px. Better are fluid and elastic layouts.

    background:#ffffff;

You don't need to keep setting the background color. Set it on body and let the cascade take care of the rest. While you're at it, do the same thing with widths.

#mainpart {
    width: 625px;
} 
#navBar {
    border-left: 1px solid #ccc;
    width: 225px;

Note that according to the W3C box model, width is the width of the content and thus doesn't include margin, padding or border. Given the sizing of #mainpart (1px border + 10px padding 625px width + 10px padding), you have 204 px free for #navBar's content and border, meaning the largest value for width is 203px.

    height: 100%;

This causes one issue, namely that the navbar border goes too far down the page. Don't set height explicitly. If you need to invoke hasLayout, use 'zoom'.

#content {
    display: inline;

The width property is ignored for inline elements; remove display: inline;. Once you do this and the width takes affect, you'll find you need to set overflow on #content to auto in order to get the #navBar positioned next to #mainpart. This will also stretch #content to contain its floated children.

Some comments on the page's HTML code: the border and align attributes are deprecated. Use CSS for the former. For the logo, the latter is unnecessary; harmful, even, as align="left" gets translated to float: left, moving #mainpart over, but not #siteInfo. Instead, try positioning the logo and padding the body.

For content images (such as in the masthead), always set the alt attribute (this falls under the category of usability). The images are small, so using images rather than text isn't too much of a resource drain, but you should support screen readers and search engine spiders.

<div id="masthead">
  <a href="index.html" id="Logo"><img src="images/Dlogo3.jpg" alt="Daibe Consultants" width="48" height="100"/></a>
  <div id="globalNav" >
    <a href="index.html"><img src="images/home.jpg" alt="Home"/></a>
    <img src="images/line.jpg" alt="|"/>
    <a href="#"><img src="images/services.jpg" alt="Services"/></a>
    <img src="images/line.jpg" alt="|"/>
    <a href="#"><img src="images/testis.jpg" alt="Testimonials"/></a>
    <img src="images/line.jpg" alt="|"/>
    <a href="#"><img src="images/CONTACT.jpg" alt="Contact"/></a>
  <!-- /#globalNav --></div>
<!-- /#masthead --></div>

Note the placement of the closing comments: if you place them before the close tag, they're connected to the element; if after, they're a separate node.

All together, the CSS becomes:

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
    line-height: 1.166; 
    margin: 0;
    padding: 0 0 0 50px /* for logo */;
    text-align: center;
    background-color: white;
    max-width: 53em;
}

a img {
    border: 0px;
}

#Logo {
    position: fixed;
    top: 10px;
    left: 0;
}

#masthead {
    padding: 0.75em 0;
}
#content {
    border: 1px solid #CCC;
    border-width: 1px 0px 0px 1px;
    overflow: auto;
}
#mainpart {
    padding: 0.75em;
    padding-right: 0;
    width: 73%;
    float:left;
    text-align:justify;
} 
#navBar {
    padding: 0px;
    border: 1px solid #ccc;
    border-width: 0px 0px 1px 1px;
    width: 23%;
    float:right;
}
#siteInfo{
    font-size: 75%;
    padding: 0.75em;
    margin: 0;
    clear: both;
    margin-top: 0;
    border: 1px solid #CCC;
}

An alternative for the nav bars: since navigation bars are lists of links, a common implementation is to use a list element (<ul>, <ol> or <dl>) for the navbar. This lets you add the separators using styling:

<style type="text/css">
.nav {
    padding: 0.75em;
    margin: 0;
}
.nav ul {
    margin: auto;
}
.nav ul, .nav li {
    margin: 0;
    padding: 0;
}

.nav li {
    display: inline-block;
    padding: 0 0.4em;
    border-right: 1px solid black;
}
.nav li:last-child {
    border-right-width: 0px;
}

/* Make adjustments for text size & positioning in image */
#Header ul li { height: 12px; }
#Header ul a img {
    position: relative;
    top: -3px;
}

#Footer {
    clear: both;
    margin-top: 0;
    border: 1px solid #CCC;
}
</style>
...
<div id="Header" class="nav">
  <a href="index.html" id="Logo"><img src="images/Dlogo3.jpg" alt="Daibe Consultants" width="48" height="100"/></a>
  <ul id="globalNav" >
    <li><a href="index.html"><img src="images/home.jpg" alt="Home" title="Home" /></a></li><li><a href="#"><img src="images/services.jpg" alt="Services" title="Services" /></a></li><li><a href="#"><img src="images/testis.jpg" alt="Testimonials" title="Testimonials"/></a></li><li><a href="#"><img src="images/CONTACT.jpg" alt="Contact" title="Contact"/></a></li>
  <!-- /#globalNav --></ul>
<!-- /#header --></div>
...
<div id="Footer" class="nav">
  <ul class="navbar">
    <li><a href="#">About Us</a></li><li><a href="#">Site Map</a></li><li><a href="#">Privacy Policy</a></li><li><a href="#">Contact Us</a></li><li>&copy;2009 Daibe Consultants</li>
  </ul>
<!-- /#footer --></div>

IE6 doesn't support :last-child, so you'll have to emulate it.

[birdsall]

Misson,

Thanks so much for your time - you've saved me heaps and taught me alot.

Regards
Simon