I have a link listed below that looks accurate in IE8, Chrome 3 and Firefox 3 but falls apart in IE7 and IE6.
I have looked into the doubled float bug and added display:inline to the div’s that are floated left and also have a margin left but it did not solve the issue.
Can someone take a look and let me know what needs to be fixed? Thanks in advance!
you have
that together make your layout fall apart in ie6-7.
I removed the margin-top from the navbar. Does it look accurate in IE7 and IE6 now?
A lot of this isn’t your specific problem, though it can be contributing to your development headaches.
Your COMMENT placement (yes, I said COMMENTS) are tripping the dissapearing content and/or dual render bugs. Move the comments like “<!–end nav–>” inside the elements. Also just a little common sense, we know </ul> and </div> are the end of things, so do you really have to say “end”?!? 
you appear to have a LOT of extra DIV for no good reason.
Some formatting in your CSS would probably prevent you from saying the same property four or five times – the ‘cram it all on one line’ train wreck is likely a contributing factor to the bad CSS.
I would NOT be attempting to float the LI since you don’t have any dropdowns. Set those to display:inline and target the anchors instead.
sending your screen appearance to “all” is probably a bad idea – though at least you tried to use a media type; that’s more than most people manage.
Your heading orders make no sense since the h2 is not the start of a subsection of the h1 near as I can tell.
Light advice, swing a giant axe at all the link attributes that NOTHING actually makes use of.
Since CSS can only be ascii7, don’t waste your time trying to give it a character set!
You’ve gone nuts stating widths on EVERYTHING when you don’t even have columns… you also seem to be declaring widths the same time as padding and border which kills your legacy IE support – mind you that’s IE 5.x and we really don’t care about that anymore, but it’s little extra effort to support it and can actually simplify your markup to do so.
Tranny is for supporting old/outdated/half-assed coding techniques. Since you appear to be working on a new page you should be using a STRICT doctype, not transitional.
Don’t know who started this idiocy of using vertical breaks in TITLE attributes was, but we meet in a dark alley… Hyphens work fine for the browser itself, so format it the same way.
keywords should be ‘name’ not http-equiv.
screwing around with javascript just to add rounded corners is a waste of code and time… especially on a fixed width layout where all you have is black corners.
since in the end there can be only h1, there’s no reason to be wasting a class or ID on it. It also makes no sense to be wasting a TITLE attribute on an anchor that is IDENTICAL to the text inside the anchor.
the image replacements used do not actually WORK if you turn images off while leaving CSS on – defeating the point of using image replacements.
You are using WAY too many images instead of text. It’s fine for small elements like headers but to do it with EVERY bit of text on the page is just ludicrous.
If I wrote the same page my markup would probably look something like this:
<!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"
/>
<meta
name="description"
content=""
/>
<meta
name="keywords"
content=""
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<link
type="image/x-icon"
rel="shortcut icon"
href="favicon.ico"
/>
<title>
Temple Photography - Knoxville, Tennessee
</title>
</head><body>
<div id="pageWrapper">
<h1>
<a href="/">
<span>Temple<span></span></span> Photography
</a>
<small>Knoxville Photography & Other Good Stuff</small>
</h1>
<ul id="mainMenu">
<li class="home"><a href="index.html" class="current">Home</a></li>
<li class="portfolio"><a href="portfolio/">Portfolio</a></li>
<li class="pricing"><a href="pricing/">Pricing</a></li>
<li class="about"><a href="about/">About</a></li>
<li class="news"><a href="news/">News</a></li>
<li class="contact"><a href="contact/">Contact</a></li>
<li class="blog"><a href="http://www.toddtemple.com/">Blog</a></li>
</ul>
<div id="contentWrapper"><div id="content">
<img src="i/gfx_stage.jpg" alt="" width="932" height="497" />
<!-- #content, #contentWrapper --></div></div>
<div id="footer">
<div>
© Temple Photography. All Rights Reserved.
</div>
<a
href="http://www.facebook.com/templephotography"
title="Connect on Facebook"
class="faceBook"
>Connect on Facebook</a>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
Lemme get dinner down my gullet, and then I’ll toss together the CSS and images I would use to build that same page. (assuming FF will play nice and let me extract all the existing stuff)
Oh, I could probably get rid of the DIV inside #footer by moving the anchor first, but given the content of the anchor I’d rather have a block level container in there for when CSS is off. I might consider throwing some HR in there for the same reason, and setting them to display:none for screen.css
… and here we are:
http://www.cutcodedown.com/for_others/toddTemple/template.html
The markup got changed a bit in the h1, but apart from that no major changes from the markup I belted out above.
As with all my examples the directory:
http://www.cutcodedown.com/for_others/toddTemple
Is unlocked for easy access to the CSS and images. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for two -moz properties (which are entirely there for FF 2 support), tested working 100% perfect in IE 6, 7 & 8, Opera 10.6, FF 2 and 3.53, and the latest flavors each of Safari and Chrome. It also renders in a usable fashion in IE 5.x, though the lack of text-transform and IE 5.0 collapsing the padding make the menu not entirely perfect there. (Who cares?)
I redid all the images and got rid of that single combined sprite file. Image recombination is great for saving handshakes and a technique I advocate using, but should only be used if it saves you 2k or so per file. The wide color depth you were using (and overuse of transparency) was resulting in excessively large files. I also axed the javascript rounded corners to use a single image – gee, 29k of javascript sent to all browsers or a half-k image and one extra div. Let me think…
Net result, the rewrite is 92k in 10 files, compared to the 160k in 7 files of the original. Pretty sure the 68k reduction is well worth the three extra handshakes. (Mind you, your gfx-stage.jpg is larger by itself than I would usually allow an entire page on a site to be!)
The biggest change is using the text for the text on everything other than the header. Sure it’s not the perfect match font, but really that’s the typical art <snip /> obsessiveness that really should be kicked to the curb when it comes to targeting screen. It also degrades gracefully when images are off but CSS is still on, a common method of bandwidth reduction used by people on metered connections.
To break down the markup:
#pageWrapper is there pretty much to center and set the fixed width.
You’ll notice I got rid of all the extra pointless DIV around the h1 and UL. Those didn’t do anything that needed to be done, so get rid of them.
H1 uses SMALL to indicate the tagline and A to indicate the actual logo, spans to indicate the differently colored text (so images off it at least resembles the images on appearance), and empty bold tags for the image replacement elements. (Instead of the retarded text-indent method)
#mainMenu doesn’t need any of those classes if we just leverage the text inside it for the text apart from marking the current page.
#contentWrapper and Content are simply a double-wrapper to apply our top/bottom images too. With no transparency and background color matching this ends up a lot simpler and a hell of a lot less code than throwing that 29k of javascript at it. (especially since we can just use a 305 byte image to do the same job!)
#footer - the inner DIV will be floated in the CSS, as will the anchor. I do NOT consider that enough text or in terms of ‘complete thoughts’ to be a paragraph.
Pretty simple. In the next post I’ll explain the CSS.
looks ok to me 
Follow the bouncing ball with the CSS
http://www.cutcodedown.com/for_others/toddTemple/screen.css
First thing I have in every CSS file is a reset. Mine is medium sized, never needed more, and using less invariably bites you in the ass. MOST of the time using a reset like the one I do can actually result in LESS CSS overall.
body - I set bottom padding so #footer is spaced from the bottom of scrolling the same as it’s top distance from #contentWrapper… the text-align is as the comment says to center #pageWrapper in IE 5 (it’s one line of code, big deal). I set up the font with a serif font stack pretty much guaranteed to be present everywhere – might not be identical to what you were using but frankly, OH WELL. If you REALLY want that specific font you could always @font-face it, though welcome to blowing 30-80k on something trivial. Finally the background declaration should be no big surprise.
#pageWrapper - fix the width, center it… again, no surprises.
h1 - set it up to wrap floats which is how we’ll build the SMALL next to the A, and pad down the top to push it off the body background-image. I use padding instead of margin so as to avoid collapse headaches.
h1 a,
h1 small - these share a number of common properties including float, position:relative so we can absolute position our B tags inside them, a display:inline margin fix on floats, and the same height.
h1 a – and these are the unique values. margin-left to push it over, letter-spacing to space the letters apart for our images off appearance, and some pretty font/colors… oh, and turn the underlines off.
h1 a span – the display:block forces it to a new line, the fixed width prevents the border-top I apply from being too wide, naturally we center it with margins, and turn off the high letter spacing resulting in it being about the same width as the larger text above it.
h1 b – the bold tags in both the A and the SPAN share the absolute positioning values, height, and even background-image so put them together. The absolute positioning over the text shows the image instead of the text; a technique called “gilder-levin image replacement”. Unlike the method you were using this one works images off/css on.
h1 a b – this one’s only unique value is the width.
h1 small – padding the top to push the text down, a font declaration reasonably close to what you were using in the image, and of course the same (approximate) color.
h1 small span – the span just gets a different color.
h1 small b – this image replacement gets a nice big width and the background slid into position.
#mainMenu – clear the floats just in case, turn off bullets, and center the contents.
#mainMenu li – rather than dealing with the headaches formatting the LI can imbue, I choose to set them to display:inline which pretty much strips all the formatting quirks clear off them. Don’t even waste time trying to do anything extra with them.
#mainMenu a – setting these to inline-block lets us top/bottom pad these. I avoid declaring a height and instead use the 18px line-height and 14px top / 6px bottom padding to add up to the 38px of the background image. The side padding and letter-spacing is just to make it pretty…
The background-image I load on the anchor and then position so you can’t see it – this way you don’t have to wait for it to load on hover. Instead of having all those separate drawings of every button, just use the text and put the background behind it.
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover,
#mainMenu .current – These all get a background-color for images off. To erase that background-color when hovered I made the background-image 256px wide, which to show we just change the alignment to “top center”.
#mainMenu .current – of course the current one also gets a different color.
This too is crafted so images off/CSS on the page still looks good.
#contentWrapper – The top padding is to make room for the borders.png image. Since we’re working fixed-width we can simply put both images side-by-side and use top/left alignment on this one and bottom-right on the other. The margin-bottom is to space #footer away from this wrapper. From there it’s just color and background. Rather than use transparent .png I use a black background and let the image erase the corners.
Content – as mentioned pad the bottom for the background image, and then the image itself.
.plate – a plate image is pretty much what you have there, I usually have a .plate class with these values for that very reason. (I usually also have ‘leadingPlate’ which is a left float and ‘trailingPlate’ which is a right float)
#footer – again float wrapping behavior due to its’ children, some text formatting (regrettably using PX fonts since we’re on a fixed height background image), and colors/background. I did NOT try to use the sliding doors effect as you did since it’s a fixed width layout.
#footer div – float it, pad it. Pretty simple. Again, no heights so we don’t have the legacy IE height+padding bugs.
#footer .facebook – float it, prevent margin doubling in IE, fix the width, use text-indent instead of padding to push the text off the F part of the image, some top/bottom padding to add up to our desired height, and of course the image itself. This too gets a background-color on it so images off there’s still a hover effect and we get rid of having the text in the image.
#footer .facebook:active,
#footer .facebook:focus,
#footer .facebook:hover – simple color changes and background slide.
… and that’s it. Pretty simple… and half as much CSS to do the same job.
Hope all this helps, or at least you are able to come away with some handy tidbits.