Hi everyone,
I am doing my darndest but can’t get this site
ashevilleplaygrounds.com
to work in IE 5 & 6 (and even 7 for the bottom left address part)? Any ideas how to get this to look right?
Also wondering what to do about all the PNGs for IE 5 & 6. Can’t remember the PNG fix for that?
Thanks much!
Hi,
You have made a few design flaws I’m afraid and made things much too complicated which is why IE6 is confused. Not to mention all those extra nested divs when none is needed but I guess that’s a limitation of the package you are using.
You don’t really need any transparent images apart form the overlapping images on the right and even then I feel a transparent gif with a close matching matte background would suffice for ie6 to save using the pngfix routines.
I would have done the page like this.
left column - contains logo and nav plus some padding bottom to protect the absolutely placed address that I assume you want to stay at the bottom of the layout at all times.
At the moment you have the logo in the header section and that is confusing IE6 and creates a gap when it follows the other floats and doesn’t fill the gap properly.
Right column - this would contain the header section, content section and footer section as separate divs.
The header section could use a non transparent image for the background and the facebook image could be cut out with background included to match the background and put into position to avoid transparency issues.
Then you have you main content section which would contain the faded background and again no need for a transparent image. The image on the right could then be floated right and dragged up with negative margins to overlap the header assuming position:relative has been added. The bottom could also protrude into the footer using a negative bottom margin also.
The content text could be floated left with the correct width as you don’t want it to wrap around the image.
This overlapping image needs to be transparent but for IE6 I would use a transparent gif and match the matte background colour to that light brown and avoid the pngfix routine as already mentioned.
Then you have a final div for the footer section which could just contain the footer background image and again no need for a transparent image.
Finally the footer links should go outside the main wrapper so that they sit outside the background and can be placed into position as required.
No need for anything clever, no heights required - just let content flow and control the page.
That’s how I’d do it anyway:)
Here are a few IE6 fixes for the page as it stands though:
#sidebar{padding-bottom:60px}
#content{position:relative;z-index:99}
.float-home,
.float-contact,
.float-wide {
position:relative;
}
* html #content-sidebar-wrap {
height: 498px;
}
I get what you’re saying. The whole set up is very awkward and not the way I would normally do things. I know you don’t know WordPress, but I just started using the Genesis framework for custom WordPress sites and I had someone show me how to work with it. He said I had to finagle the header and some other things b/c of the way it’s already preset. I think there was probably another way around it or I should probably just have done a custom theme.
Thanks for the fixes. They worked for IE6 and 7 but not IE 5. Also, the sprite isn’t working in IE 6. When I click the “gallery” link on the top it goes to the page and then “church” shows up as “current”.
Also, for the gallery and online store main page I used the current code b/c the thumbs code below wouldn’t work with WP. Any simple fix to make the images float side by side with caption in IE 5 - 7? The image won’t even link in IE 5 -7.
HTML
<div class="thumbs">
<a href="#" class="first"><img src="images/gallery1.png" width="199" height="252" alt="Residential Projects" /><br />
<h2>Residential Projects</h2> </a>
<a href="#"><img src="images/gallery2.png" width="197" height="252" alt="Commercial Projects" /><br />
<h2>Commercial Projects</h2>
</a>
<a href="#"><img src="images/gallery3.png" width="197" height="252" alt="Church Playgrounds" /><br />
<h2>Church Playgrounds</h2>
</a>
</div><!-- End thumbs -->
CSS
#content .thumbs img{
height:auto;
margin:0px;
border:none;
}
#content .thumbs a, #content .thumbs a.first {
display:block;
float:left;
text-align:center;
margin:10px 0px 20px 22px;
text-decoration:none;
}
#content .thumbs a.first{
margin-left:27px;
}
#content .thumbs h2{
font-size: 11px;
text-align:center;
color:#005244;
}
I don’t support IE5 (almost no one does) so I’m not even going there.
I’ll try and look at the other bugs later on but I am out for a while now 
Okay, thanks!
I didn’t know that…I thought you still supported IE 5 :-). It’s off my list then too!
I personally just stay away from PNGs if I’m optimizing for IE. Gif’s can usually offer you the same value.
Hi,
You need some fixes for IE6 and 7 to imitate the inline-block for the captions.
You also need to change the html as you can’t wrap block level elements inside an anchor (oustide of html5 and even then its likely to break things).
You would need to do this:
<div class="gallery">
<a href="http://ashevilleplaygrounds.com/gallery/church-playgrounds/">
<span id="attachment_78" class="wp-caption aligncenter" style="width: 207px"><img src="http://ashevilleplaygrounds.com/wp-content/uploads/2011/08/gallery3.png" alt="Church Playgrounds" title="Church Playgrounds" width="197" height="252" class="size-full wp-image-78" />
<b class="wp-caption-text">Church Playgrounds</b>
</span>
</a>
</div>
#center{zoom:1.0}
.gallery,gallery a{display:inline-block}
* html .gallery{display:inline}/* ie6 fix for inline-block - rule must follow the inline-block rule*/
*+html .gallery{display:inline}/* ie7 fix for inline-block - rule must follow the inline-block rule*/
.gallery span,.gallery b{display:block}
.gallery span{width:auto!important}
Dang IE! Thanks, let me try that.
Any idea about the sprite not working in IE6?
The problem is that you have used code that IE6 doesn’t understand.
#menu-primary-nav li[B].menu1.current-menu-item[/B]
IE6 doesn’t understand the dot syntax on multiple classes so you should never use them if you want Ie6 support.
To identify the nav you would need to separate the classes on different elements but of course that would mean changing all those multiple nav rules.
You have also made the hover effect on the list element which IE6 doesn’t understand either and you should have applied the hover images to the anchor instead and allow iE6 to play. Then that would allow you to place the current class on the anchor only and then you can target it easily.
#menu-primary-nav li[B].menu1 a.current-menu-item[/B]
Why on earth are there so many classes on the list item.
<li id="menu-item-32" class="menu1 menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item menu-item-32"><a href="http://ashevilleplaygrounds.com/gallery/">Gallery</a></li>
There’s no need for all of those apart from menu1 and then current-menu-item should be on the anchor for IE6 as mentioned above.
I had to change the anchor per to fit into the Genesis framework. Not sure working with this Genesis framework is the best thing to do I’m seeing.
I think all that extra code was generated by WP somehow. Let me check.
Yeah, WP generates the extra code and classes. Not sure I can change that. So nothing we can do for the IE6 sprite?
Any way to get rid of the horizontal scroll bar with the below code? Thought “auto” only displayed vertical scrollbar which it does on all other browsers.
.scrollbar{
width:679px;
height:22em;
padding:0.25em;
overflow:auto;
}
<div class=“scrollbar”></div>
Could try oveflow-x:hidden;
Thanks for the suggestion. That didn’t work, though. All the content is spilling out. Made some adjustments to margins and I think that helped.
Wish I’d seen this sooner as typically I can get 5.5 and even 5.01 working in most cases… but the page in question appears to have been taken down.
Paul’s advice is ok – but looks like WAY more tags than you should need on something simple. The div.thumbs in your second post is just plain 100% gibberish markup – block levels inside inline-level containers, headings on elements that do NOT appear to be the start of subsections of the page, unnecessary line-breaks… and this ALMOST looks like it should be a LIST.
<ul class="thumbs">
<li>
<a href="#">
<img
src="images/gallery1.png"
width="199" height="252"
alt="Residential Projects"
/>
Residential Projects
</a>
</li><li>
<a href="#">
<img
src="images/gallery2.png"
width="197" height="252"
alt="Commercial Projects"
/>
Commercial Projects
</a>
</li><li>
<a href="#">
<img
src="images/gallery3.png"
width="197" height="252"
alt="Church Playgrounds"
/>
Church Playgrounds
</a>
</li>
</ul>
.thumbs {
list-style:none;
overflow:hidden; /* wrap floats */
zoom:1; /* trip haslayout, wrap floats IE */
padding-left:5px;
}
.thumbs li {
display:inline;
}
.thumbs a {
float:left;
display:inline; /* prevent IE margin doubling */
margin:10px 0px 20px 22px;
text-align:center;
text-decoration:none;
font:normal 12px/14px arial,helvetcia,sans-serif;
color:#005244;
}
.thumbs img {
display:block;
margin:0 auto;
border:none;
}
But that’s guessing wildly – Do you have a link to what you HAD up at that page?
Oh, and you do know that 11px is uselessly small to >40% of internet users, right? 12px should be considered MINIMUM and I get squirrelly below 14px… though that’s why I use %/em on content areas.
Nice and direct as always, DeathShadow :-). Thanks for the feedback.
The page is back online.
Concerned about the sprite right now in IE6.
Also, getting the footer (nav and copyright lines) centered in all browsers…
Ooph… Quadruple whammy on the issues – I mean, apart from the TWO MEGABYTES of images, illegible color contrasts (orange on white? Really? REALLY? REALLY…) and fixed metric fonts that immediately caught my eye, making it painful to watch load and even more painful to try and use… sending me DIVING for the zoom almost instantly (which isn’t an option on the netbook)…
Once again I see the “but I can do it in photoshop” nonsense in action. That wood background is too big, it forces you into a fixed height container for no real good reason, the image placements have to remain static basically crapping all over the text next to them, and the sidebar isn’t actually large enough for it’s content – which without even looking at the code I suspect is part of the layout issues I’m seeing.
But of course, going into the code is where that quad whammy comes into. Turdpress + jquery for nothing + static scripts in-lined in the markup + comment placements that are pretty much GUARANTEED to trip rendering bugs in IE and may also cause FF issues (yes, I said COMMENTS causing rendering bugs – that’s not a joke!)
… centering the footer (which it is centered… to the column it’s in DOM-wise) is the LEAST of the issues I see here.
The biggest problem being that it’s a ungodly 2.3 megabytes total… hell, at 318k your home.png is more than DOUBLE what I would allow for a single page on a site! (that’s HTML+CSS+Images!)
First order of business should be to get markup that doesn’t suck – unfortunately turdpress basically takes a giant dump all over that idea, which is why you need to write your markup WITHOUT wordpress present, then chop it up into that steaming pile of…
Going through, I have no idea what that “entry-content” part is, apart from it being content cloaking that no script seems to be using. Oh wait, that’s the actual page content… before the menu… SIGH you’re content order is making the code for the layout needlessly complex…
I mean even simple stuff – like these “nav-divider.jpg” images that have NO BUSINESS IN THE HTML!
… and of course the wordpress bull crapping all over things like the menu… can ANYONE give me a SERIOUS reason for this nonsense apart from COMPLETE ineptitude at HTML/CSS on the part of the people who wrote wordpress in the first place?
id="menu-item-31" class="menu2 menu-item menu-item-type-post_type menu-item-object-page menu-item-31"
MEIN GOTT, what idiocy!
So, gutting out all the wordpress bloat/scripting for nothing so we can work on it and getting it into some semantic markup we end up with:
<!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="Premier design builder of custom, hand-crafted residential and commercial playgrounds"
/>
<meta
name="robots"
content="noodp,noydir"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<link
rel="shortcut icon"
href="http://www.sitepoint.com/forums/images/favicon.ico"
/>
<title>
Asheville Playgrounds - Premier design builder of custom, hand-crafted residential and commercial playgrounds
</title>
</head><body>
<div id="pageWrapper">
<h1>
ASHEVILLE <small>PLAYGROUNDS</small>
<span><!-- image replacement --></span>
</h1>
<div id="contentWrapper"><div id="content">
<a
href="http://www.facebook.com/pages/Asheville-Playgrounds/270914823977"
id="faceBookLike"
>
Like us on Facebook!
</a>
<hr />
<div id="homeContent">
<h2>
Playing Outside
<span>Since 1985</span>
</h2>
<p>
Asheville Playgrounds is North Carolina’s premier design builder of custom, hand-crafted residential and commercial playgrounds. We also craft tree houses, gazebos and other outdoor structures. We develop each design with your dreams in mind, and often mimic the architectural style of your house or church. At Asheville Playgrounds, we build each unique playground with materials that are time-tested for strength, durability and resistance to the elements. These materials include naturally rot-resistant locust wood, pressure-treated lumber, recycled plastic lumber and composite decking. Each custom creation is then expertly installed at your location.
</p><p>
Have some fun! Explore our website. Enjoy the pictures in our gallery. And when you’re ready, contact us to learn how we can get started on your Asheville Playground. (You can even check out our online store for do-it-yourself playground kits, slides and accessories!)
</p>
<div id="samples"><div><div></div></div></div>
<!-- #homeContent --></div>
<hr />
<!-- #content,#contentWrapper --></div></div>
<div id="sideBar">
<ul id="mainMenu">
<li class="gallery"><a href="/gallery/">Gallery</a></li>
<li class="aboutUs"><a href="/about-us/">About Us</a></li>
<li class="residential"><a href="/residential/">Residential</a></li>
<li class="commercial"><a href="/commercial/">Commercial</a></li>
<li class="churches"><a href="/churches/">Churches</a></li>
<li class="onlineStore"><a href="/online-store/">Online Store</a></li>
<li class="playgroundSafety"><a href="/playground-safety/">Playground Safety</a></li>
<li class="contact"><a href="/contact/">Contact</a></li>
</ul>
<hr />
<div id="contactAddress">
543 Short McDowell Street<br />
Asheville, NC 28803<br />
phone 828 225 5868<br />
toll-free 888 298 5868 <br />
<a href="mailto:info@ashevilleplaygrounds.com">info@ashevilleplaygrounds.com</a>
<!-- .contactAddress --></div>
<hr />
<!-- #sideBar --></div>
<div id="footer">
<ul>
<li><a href="http://ashevilleplaygrounds.com" class="first">home</a></li>
<li><a href="/gallery/">gallery</a></li>
<li><a href="/about-us/">about us</a></li>
<li><a href="/residential/">residential</a></li>
<li><a href="/commercial/">commercial</a></li>
<li><a href="/churches/">churches</a></li>
<li><a href="/online-store/">online store</a></li>
<li><a href="/playground-safety/">playground safety</a></li>
<li><a href="/contact/">contact</a></li>
<li><a href="/sitemap/">sitemap</a></li>
</ul>
<p>
All designs and design concepts are the property of Blue Ridge Builders, LLC DBA Asheville Playgrounds © 2006-2011 Asheville Playgrounds
</p>
Website design by <a href="http://s3s3s3.com/">The S3 Agency</a> |
web development by<a href="http://www.charlotteswebservices.com/"> Charlotte's Web</a>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
+/- 5%. Gimme a while to re-optimize all the images, replace a few as being “but I can do it in photoshop” nonsense, and belt out a sample CSS for ya.
– edit – actually, probably an hour or so, need to get breakfast first.
I already gave you the answer to that in my previous post
However wait until Jason has given you a better version to work with.
My thoughts exactly
Yeah, I guess the answer is that it will have to stay as is for IE6 b/c can’t use a as anchor with this framework. Argh.
Hey DS, I’m with you and you’re right. I’d love to see what you come up with?!
Sorry for the delay – busy morning it turns out – one person who’s e-mail server wasn’t working… two bicycle repairs came in… one of which was a riot – “the front tire keeps falling off” – local bike shop told them they needed a new wheel hub; what was really wrong is the fork was on backwards, the nuts were attached over flat washers instead of retaining clips, and they’ve been oiling it which washed away all the grease inside the bearings. WD-40 to clean out the crud, Marine Bearing grease liberally applied – good as new.
Ok, on to your problem. Fixing things – it’s what I do. Starting in on coding how I’d do the CSS for that now.