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
tag (accessible using the [IMG]htt...tp://birdsall.pcriot.com"]birdsall.pcriot.com.
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 [URL="http://en.wikipedia.org/wiki/Indent_style"]indenting[/URL] code helps readability.
[quote="birdsall, post: 618326"][CODE]body {
font-family: Arial;
[/QUOTE]
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;.
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.
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).
Code:
#masthead {
border-bottom: 1px solid #cccccc;
Since you want this to line up with the content, make this the
border-top of
#content:
Code:
#content {
border-top: 1px solid #CCC;
}
Fixed layouts... not so hot. Especially fixed layouts using px. Better are
fluid and
elastic layouts.
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.
Code:
#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.
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'.
Code:
#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.
HTML:
<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:
Code:
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:
HTML:
<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>©2009 Daibe Consultants</li>
</ul>
<!-- /#footer --></div>
IE6 doesn't support
:last-child, so you'll have to
emulate it.
