(stock answer #3) A lot of your issues IMHO start with your nonsensical markup – exacerbated by the use of that HTML 5 idiocy when you’re not even USING any HTML 5 in your actual markup. A “slogan” is not the start of a new subsection, why does it warrant a h2… you don’t have meaningful H2’s or H3’s, so why are those H4’s in there? While the nonsensical half-assed HTML 5 rule may allow you to wrap block level tags in anchors, browser support is nonexistent. You also appear to be using a bunch of DIV and ID’s that IMHO probably aren’t even necessary… and to be brutally frank, if you have to resort to filters for silly things like gradients or IE conditionals for CSS, there’s probably something fundamentally wrong with how you are building the page.
… and that’s before we even TALK CSS. You’re “reset” goes a little overboard pissing on accessibility by messing with outline, the HTML font-size is redundant nonsense, you don’t explicitly state a line-height, you’re using div.clear like it’s still 1998, you’re redeclaring font sizes without restating line-heights causing inheritance issues when %/EM actually do their job, you seem to be using oddball fractional sizes that don’t round off the same cross browser, you’ve got multiple classes that appear to be redundant to each-other with 90%+ of their properties… and of course since legacy IE knows not RGBA, there’s why your hover states don’t work in IE8-. Of your 3.5k of CSS I’d ballpark 15% or more should go on the cutting room floor.
So first step is let’s swing an axe at the HTML 5 nonsense, and try to get you some actually semantic markup in there.
<!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>
Your Business Name
</title>
</head><body>
<div id="pageWrapper">
<h1>
Your Business Name
<small>
<span>Your Business Slogan</span>
+254 202 902 000
</small>
</h1>
<div id="cartStatus">3 Items</div>
<ul id="mainMenu">
<li><a href="#" class="current">home</a></li>
<li><a href="#">range 1</a></li>
<li><a href="#">range 2</a></li>
<li><a href="#">custom page</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">view cart</a></li>
<li><a href="#">404</a></li>
<li><a href="#">product not found</a></li>
</ul>
<hr />
<div class="contentBox">
<img
src="placeHolder"
alt="Image Here"
class="trailingPlate"
/>
<p>
Pellentesque at augue. Etiam quis enim. Suspendisse tincidunt consectetuer sem. Morbi quis velit. Nulla vel dui. Praesent eros odio, fringilla sit amet, tincidunt sed, accumsan ac, erat. Nullam ultricies luctus ligula.
</p><p>
Pellentesque at augue. Etiam quis enim. Suspendisse tincidunt consectetuer sem. Morbi quis velit. Nulla vel dui. Praesent eros odio, fringilla sit amet, tincidunt sed, accumsan ac, erat. Nullam ultricies luctus ligula. Pellentesque at augue. Etiam quis enim. Suspendisse tincidunt consectetuer sem. Morbi quis velit. Nulla vel dui. Praesent eros odio, fringilla sit amet, tincidunt sed, accumsan ac, erat. Nullam ultricies luctus ligula.
</p>
<!-- .contentBox --></div>
<hr />
<ul class="ranges">
<li>
<a href="#">
<span>Range 1</span><br />
<img src="images/range1.png" alt="Range 1" />
</a>
</li><li>
<a href="#">
<span>Range 2</span><br />
<img src="images/range2.png" alt="Range 2" />
</a>
</li><li>
<a href="#">
<span>Range 3</span><br />
<img src="images/range3.png" alt="Range 3" />
</a>
</li><li>
<a href="#">
<span>Range 4</span><br />
<img src="images/range4.png" alt="Range 4" />
</a>
</li><li>
<a href="#">
<span>Range 5</span><br />
<img src="images/range5.png" alt="Range 5" />
</a>
</li><li>
<a href="#">
<span>Range 6</span><br />
<img src="images/range1.png" alt="Range 6" />
</a>
</li>
</ul>
<!-- #pageWrapper --></div>
</body></html>
Which despite the heavier comments and ‘wasteful bloated’ HTML4/XHTML1.0 style header, is still a smaller file thanks to axing all the ‘div for nothing’ and use of semantic markup – surprising since I changed what appear to be content images (product pictures) into IMG tags. Remember content images (product thumbnails, gallery pictures, etc) go in IMG, everything else is presentational (border images, cutesy icons next to text) belong in the CSS.
so how about some CSS for that?
/* 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,dl,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
hr {
/* In my code HR are for semantics and non screen.css users */
display:none;
}
body {
text-align:center; /* center #pageWrapper legacy IE */
font:normal 85%/150% verdana,helvetica,sans-serif;
background:#187CA7 url(images/bodyBackground.jpg) top center repeat-x;
}
#pageWrapper {
position:relative;
width:95%;
min-width:752px;
max-width:68em;
margin:0 auto;
padding:3em 0 1em;
text-align:left;
}
h1 {
padding:0.5em;
margin-bottom:1px;
font:normal 180%/130% arial,helvetica,sans-serif;
color:#333;
background:#C5E0EB; /* for browsers that don't know RGBA */
background:rgba(255,255,255,0.75);
}
h1 small {
overflow:hidden; /* wrap floats */
width:100%; /* trip haslayout, wrap floats legacy IE */
display:block;
text-align:right;
font:normal 65%/130% verdana,helvetica,sans-serif;
}
h1 small span {
float:left;
}
p {
padding-bottom:1em;
}
#cartStatus {
position:absolute;
top:0.5em;
right:0.5em;
padding-left:28px;
white-space:nowrap;
font:normal 120%/150% verdana,helvetica,sans-serif;
color:#FFF;
background:url(images/cart.gif) center left no-repeat;
}
#mainMenu,
.ranges {
overflow:hidden; /* wrap floats */
width:100%; /* trip haslayout, wrap floats IE */
margin-bottom:1em;
list-style:none;
}
#mainMenu li,
.ranges li {
display:inline; /* basically remove from flow, avoid IE7 headaches */
}
#mainMenu a,
.ranges a {
float:left;
display:inline; /* prevent IE margin doubling */
margin:0 1px 1px 0;
text-decoration:none;
font:normal 110%/120% verdana,helvetica,sans-serif;
text-align:center;
color:#000;
background:#C5E0EB; /* for browsers that don't know RGBA */
background:rgba(255,255,255,0.75);
}
#mainMenu a {
padding:0.3em 12px; /* using px side padding in case you're adding icons */
}
.ranges a {
position:relative;
width:182px;
height:160px;
}
#mainMenu a.current,
#mainMenu a:active,
#mainMenu a:hover {
background:#D5D55E; /* for browsers that don't know RGBA */
background:rgba(243,226,78,0.85);
}
.ranges a:active,
.ranges a:hover {
background:#97C4D8; /* for browsers that don't know RGBA */
background:rgba(255,255,255,0.55)
}
.ranges a span {
position:absolute;
left:0;
bottom:16px;
padding:0.25em 0.5em;
background:#FFF;
}
.contentBox {
overflow:hidden; /* wrap floats */
height:1%; /* holly hack, trip haslayout, wrap floats IE */
padding:1em 1em 0;
margin-bottom:1em;
background:#D5D55E; /* for browsers that don't know RGBA */
background:rgba(243,226,78,0.85);
}
/* standard image content plates */
.leadingPlate {
float:left;
margin:0 1em 1em 0;
}
.trailingPlate {
float:right;
margin:0 0 1em 1em;
}
.plate {
display:block;
margin:0 auto 1em;
}
Which you can find a live demo of here:
http://www.cutcodedown.com/for_others/escapedf/template.html
As with all my examples the directory:
http://www.cutcodedown.com/for_others/escapedf/
Is wide open for easy access to the bits and pieces.
Valid XHTML 1.0 Strict, Valid CSS 2.1 apart from the RGBA declarations, Tested working all the way back to IE 6… Though admittedly legacy IE doesn’t get the transparencies (oh noes, not that!). I also did some image optimizations since at 289k total your original was TWICE the upper limit I’d allow for a page and almost four times my ideal target. This rewrite comes out to 55k thanks to cropping the redundancies out of the body background, saving it as jpeg, switching the ‘range’ images and cart to palette transparency, and of course the smaller source code.
Hope this helps. Basically I think you were diving for DIV before you were thinking semantics, which combined with failing to grasp element inheritance in your CSS was leading you down the path towards a ‘non-viable’ layout and overcomplicated code. Don’t worry, it happens to all of us at the start.
thanks!!