Well, first off one of the reasons to USE em’s is so that the fonts automatically enlarge to the size the user expects them to be – Are you running 120dpi/large fonts on Windows where you are testing? Gecko and Webkit based browsers ignore that by default – IE does not.
Looking at your code so far, it’s a bit hard to decipher with the “throwing all the properties on one line”… but I’m seeing a number of things re-declared for no reason, values like “left” on elements that aren’t set up to even RECEIVE positioning, and font-size declarations all over the place without matching line-heights. A good mantra to get into is if you change the font-size, redeclare the line-height, at which point you’ve blown enough characters one typically might as well use the full condensed font property.
You’re also declaring it ‘all over the place’ instead of just ONCE on body… Set your most common size on BODY, (like what your content text is going to be) and then adjust off of that.
The markup has issues too – like some of the DIV serving no real purpose, your comment placements “after” closing tags running the risk of ending up between floats – which can trip some REALLY annoying rendering bugs in legacy IE and some versions of FF… and have the typical oddball redundancies like saying “end” – </div> is the end of something? REALLY? Never would have guessed… That’s a joke
You could probably also simplify your CSS greatly by using a ‘reset’ to target the paddings and margins that have inconsistent default values across browsers… It’s also worth mentioning that DIV start out at ‘auto’ width, so saying width:100% on them is typically a waste of time.
Though also, if this is a new page, why did you write it “in transition” from 1997 to 1998? That’s what a “transitional” doctype means – probably not your fault, you’re probably just learning from a decade out of date source (like most books published in the past three years). that’s a joke too… almost
If I was trying to code the same thing, I’d open a LOT of it up more dynamic. Probably using a semi-fluid width declaration since fixed width blows chunks from an accessibility standpoint.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Layout Demo
</title>
</head><body>
<div id="pageWrapper">
<div id="pageHeader">
<h1>
Site title
<span><!-- image replacement sandbag for logo --></span>
</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<!-- #pageHeader --></div>
<div id="sideBar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<!-- #sideBar --></div>
<div id="content">
<div class="trailingPlate">
<img src="images/dummy.png" alt="Image Here" />
<img src="images/dummy.png" alt="Image Here" />
<!-- .trailingPlate --></div>
<h2>Subject Title</h1>
<p>
Consectetur adipiscing elit. Aliquam eu sem quis lacus lobortis malesuada. In posuere libero non nunc gravida in dictum nibh auctor. Nunc nunc libero, iaculis vel molestie sed, facilisis a tortor. Donec arcu tellu
</p><p>
Is, placerat id suscipit sed, mattis eu diam. Duis nec eros at est dictum ultrices. Cras non metus vel lectus tempus euismod. Mauris tincidunt ante vel arcu tincidunt nec lacinia augue condimentum. Nam libero justo, convallis quis lobortis non, posuere id tellus.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus nisl et elit posuere facilisis. Curabitur aliquet dictum lectus ultricies ornare. Nulla at dui sit amet ante malesuada condimentum eget ut erat. Sed commodo tellus iaculis nibh euismod tempor. Mauris vehicula, massa et consequat fermentum, turpis urna ornare urna, non feugiat mauris purus sit amet purus.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus nisl et elit posuere facilisis. Curabitur aliquet dictum lectus ultricies ornare. Nulla at dui sit amet ante malesuada condimentum eget ut erat. Sed commodo tellus iaculis nibh euismod tempor. Mauris vehicula, massa et consequat fermentum, turpis urna ornare urna, non feugiat mauris purus sit amet purus.
</p>
<!-- #content --></div>
<div id="footer">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
With this for the screen.css file:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
body {
padding:10px 0;
text-align:center; /* center #pageWrapper IE 5.x */
font:normal 85%/150% arial,helvetica,sans-serif;
background:#333;
}
#pageWrapper {
width:95%;
min-width:752px;
max-width:68em;
margin:0 auto;
text-align:left;
background:#699;
}
#pageHeader {
padding:10px;
overflow:hidden; /* wrap floats */
zoom:1; /* trip haslayout, wrap floats legacy IE */
background:#6CC;
}
h1 {
position:relative;
width:300px;
padding:34px 0;
text-indent:10px; /* since padding would be added to width, cheat! */
font:normal 28px/32px arial,helvetica,sans-serif;
color:#FFF;
background:#66C;
}
h1 span {
position:absolute;
top:0;
left:0;
width:300px;
height:100px;
/* put logo/title image here as background-image! */
}
#pageHeader ul {
list-style:none;
margin:-1.5em 0 0 310px;
}
#pageHeader li {
display:inline;
}
#pageHeader li a {
margin-left:1em;
text-decoration:none;
color:#666;
}
#pageHeader li a:active,
#pageHeader li a:focus,
#pageHeader li a:hover {
color:#FFF;
}
#sideBar {
float:left;
width:8em;
padding:10px 0;
}
#sideBar ul {
list-style:none;
margin:0 10px;
font:normal 120%/150% arial,helvetica,sans-serif;
}
#sideBar li a {
display:block;
padding:5px 10px;
text-decoration:none;
color:#FFF;
}
#sideBar li a:active,
#sideBar li a:focus,
#sideBar li a:hover {
color:#FC0;
background:#573;
}
#content {
overflow:hidden; /* make not indent past float */
zoom:1; /* trip haslayout, make legacy IE not indent past float */
padding:1em 1em 0;
background:#FFF;
}
#content h2 {
margin-bottom:0.5em;
font:bold 150%/120% arial,helvetica,sans-serif;
color:#666;
}
#content p {
padding-bottom:1em;
}
.trailingPlate {
float:right;
margin:0 0 10px 10px;
}
.trailingPlate img {
display:block;
width:250px;
height:150px;
margin-bottom:10px;
color:#FFF;
background:#609;
}
#footer {
padding:10px;
background:#36C;
}
#footer ul {
list-style:none;
margin-left:8em; /* == sidebar width */
}
#footer li {
display:inline;
}
#footer li a {
margin-right:1em;
text-decoration:none;
color:#FFF;
}
#footer li a:active,
#footer li a:focus,
#footer li a:hover {
color:#306;
}
Though that may or may not address your font-sizing issue and/or line-height issues. As a rule of thumb line-height can’t be trusted to remain properly scaled when you change the font-size in all browsers. It’s why I take the time to use the entire condensed font property to state it.
In case you’ve not seen it before:
font:normal 85%/150% arial,helvetica,sans-serif;
first word or two is style and weight (like normal, bold or italic), do NOT assume omitting it will give you normal. The next value is the font-size, I like 85% on body since that rounds off to 14px on 96dpi/small font computers/browsers and 17px on large font/120dpi browsers – at least when using sans-serif fonts like Arial. (serif fonts typically need larger size due to the higher detail needed for their glyphs). That 150% is the line-height I use (I like 'em big) and then the font family stack.
Notice I avoid declaring a lot of heights on the page, and instead let flow do the work for me wherever possible. This is the key to using EM’s. As a rule of thumb unless you’ve got some form of image interaction going on, declaring fixed heights on ANYTHING is a bad idea… You’ll notice I use no floats in the heading either – neat trick called ‘negative margins’ – I know generally how tall my UL is going to be, so I just use a negative top margin to “ride it up” over the H1’s natural position. This retains ‘flow’ and allows that menu to be bottom positioned while still allowing it’s text to scale upwards since again, it’s all declared in EM.
The H1 (site title/logo, of which ALL OTHER SECTIONS STARTED USING HEADING TAGS ARE SUBSECTIONS) got PX fonts and line-height so that it will stay fixed to the size of the image replacement. I put in image replacement code, so you can just add the image as a background there, overlapping/erasing the text. This is important so your top-most heading has meaningful text in it and is actually useful to people who turn images off.
The width code:
width:95%;
min-width:752px;
max-width:68em;
Should be fairly easy to follow – desired width, minimum allowed width, maximum allowed width. The percentage overall width gives a nice bit of the background showing at the sides when bigger than the min-width, the px min-width prevents the layout from being so small as to be ‘broken’ (at which point CSS3 media queries should be used to ‘adjust’ the layout), and the em max-width prevents lines from getting too long, while also adjusting to the font-size the user agent (browser) has set.
I imagine you’ll have lots of other questions, feel free to fire away, I’ll answer when I can.
… and don’t take my criticism above too hard – if this is your first time out with EM’s you’re head and shoulders over many developers who’ve been doing this for years. At least you are TRYING for accessibility, let’s see if we can get you over the conceptual hurdle on how to do it. There’s a lot of outdated learning materials, misconceptions, misunderstandings of the specifications and just plain bad advice out there – let’s get you past all that and into the good stuff.
