Not sure why I didn’t pick up on this before going online, but in IE8 the pages don’t scroll as they need to, and do in most other browsers. Even IE7 scrolls albeit with multiple scrollbars.
I’ve Googled all morning, tried changing overflow: auto to overflow: hidden and back again but cannot get scrollbars in IE8.
Code is a bit complicated as I am using jQuery plugins some of which do not validate. They may not be the issue, it might be my own code.
I even added <meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7” /> on one of the pages to see if it made a dfference but it didn’t. (www.bouvardbush.com/pens.html). I know I have a lot of containing divs which seemed necessary at the time. Still, most browsers render as intended at least the main ones I have tested. It is only IE8 that has the problem.
Your problems appear to be related to your treatment of overflow in the body (hidden) and in the contentWrapper (auto). When you turn these off you can again see the bottom scrollbar.
Holmescreek - I am seeing the very narrow vertical scrollbar on Windows now as well! Must be a width issue somewhere I suppose.
Anyway, I have resolved the issue with IE8 though I don’t really understand how. I removed the ie-only css:Content{
background: transparent;
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#A5000000,endColorstr=#A5000000)”; /* IE8 /
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A5000000,endColorstr=#A5000000); / IE6 & 7 */
zoom: 1;
}
which I used as a conditional comment on each page. Not sure where I got it from, however, once removed, the scrollbar appeared in IE8. Now I willl have to look at getting rid of the horizontal scrollbars.
The scroll problem is caused by the HTML comment you have in your CSS file:
<!--
core.html
Supersized - Fullscreen Slideshow jQuery Plugin Version 3.0
By Sam Dunn (www.buildinternet.com // www.onemightyroar.com)
Website: www.buildinternet.com/project/supersized
-->
Remove that, or at least enclose it in CSS comments.
There are few other typos in the CSS file that could cause trouble, such as:
html {overflow: auto;}[COLOR="Red"]/*better than on the body[/COLOR]
body {
[COLOR="Red"]xoverflow[/COLOR]:hidden;/*Needed to eliminate scrollbars*/
background:#000;
font: normal 80%/1.4 verdana, arial, sans-serif;
}
I’ve fixed up the CSS a bit and changed the index.html page. Now I have transparency in IE8 but still no scrolling. On the pens page for example I now have the black background up the top but no transparency but it has a scrollbar in IE8.
NOTE I’m not trying to be mean, I’m trying to help you make your site better. The following may seem harsh, but it’s the truth. Truth hurts, GET OVER IT. It’s the only way to make things better.
That background image is NOT viable for a web design. PERIOD. At 168k it is larger than the entire page of markup+images+CSS+scripting should be allowed to reach. (I usually set 70k as my ideal total and 140k as the max) – there’s a REASON you don’t see websites doing that.
even on a 3ghz i7 scrolling that large a transparency over a resized image is PAINFUL in fast browsers like Opera and Chrome. There’s a reason the only place you see that large a transparency is on goofy myspace pages nobody actually visits more than once.
while Opera and Chrome have scrollbars, the mouse-wheel is broken due to the use of absolute positioning.
Are you REALLY going to use 800k of nonsense to deliver less than 1k of plaintext? Mein gott you’ve got 232k of javascript and FOR WHAT? Scaling an image (something browsers can do without scripting assistance) and menu rollovers (CSS’ job) ?!?
This is a NEW website, right? If so why is it a Tranny? <broeken record>Transitional is for supporting old/outdated/half-assed coding techniques, NOT for building new websites!</broken record>
Ease up on the DIV, even stripping out the stuff that has NO PLACE in the markup like the scripting and IE conditional nonsense you’ve STILL got more markup than neccessary.
Some semantics and PROPER use of headings wouldn’t hurt. The h1/h2 pairing for example should NOT be two separate headings since they are not the start of a section and subsection, but the start of a SINGLE section. Likewise the “table for nothing”, title tags redundant to the content of the anchors, use of non-breaking spaces to do “white-space:nowrap;”'s job, oddball unneccessary DIV for nothing around the image anchors, and use of spans where heading tags should be used all combine for some particularly bad markup.
Your comment placement could be tripping rendering bugs in both IE and FF.
Your keywords meta is too long and likely getting the entire declaration ignored by search engines. 8-10 words/80 character MAX on that is best practice.
There is little reason for the markup on that site to be a whole lot more than:
<!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="Woodturning, wildflowers and wildlife in Bouvrd, Western Australia"
/>
<meta
name="keywords"
content="bouvrd, australia, bush, woodturning, pens, bottle, stoppers, crafts, wild, flowers, animals"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Bouvard Bush
</title>
</head><body>
<div id="pageWrapper">
<h1>
BOUVARD BUSH<br />
<small>Woodturning, Wildflowers and Wildlife</small>
<span><!-- image replacement --></span>
</h1>
<ul id="mainMenu">
<li class="home">
<a href="index.html">Home<span></span></a>
</li>
<li class="woodTurning">
<a href="woodTurning.html">Woodturning</a>
<ul>
<li><a href="pens.html">Pens</a></li>
<li><a href="bottlestoppers.html">Bottle Stoppers</a></li>
<li><a href="otheritems.html">Other Items</a></li>
</ul>
</li>
<li class="wildflowers">
<a href="wildflowers.html">WildFlowers<br />and Fungi</a>
<ul>
<li><a href="flora1.html">Wildflowers A - C</a></li>
<li><a href="flora2.html">Wildflowers D - M</a></li>
<li><a href="flora3.html">Wildflowers N - Z</a></li>
<li><a href="fungi.html">Fungi</a></li>
</ul>
</li>
<li class="wildlife">
<a href="wildlife.html">Wildlife</a>
<ul>
<li><a href="frogs.html" title="Frogs">Frogs</a></li>
<li><a href="lizards.html" title="Lizards">Lizards</a></li>
<li><a href="birds.html" title="Birds">Birds</a></li>
<li><a href="animals.html" title="Animals">Animals</a></li>
<li><a href="insects.html" title="Insects">Insects</a></li>
</ul>
</li>
<li class="contact">
<a href="contactUs.html">Contact Us</a>
</li>
</ul>
<div id="content">
<h2>Welcome to Bouvard Bush - Woodturning, Wildflowers and Wildlife</h2>
<div class="pictureRow">
<a href="pens.html">
<img src="woodimages/boxpens.png" alt="box of pens" />
</a>
<a href="bottlestoppers.html">
<img src="woodimages/bottlestoppers.png" alt="bottlestoppers" />
</a>
<a href="otheritems.html">
<img src="woodimages/bowl3.png" alt="bowl" />
</a>
<a href="flora1.html">
<img src="floraimages/flora3.png" alt="flora" />
</a>
<a href="wildlife.html">
<img src="faunaimages/roo1.png" alt="flora" />
</a>
<!-- .pictureRow --></div>
<h3><a href="pens.html">PENS:</a></h3>
<p>
All pens are hand-made from Western Australian timber available with 24 carat gold, gold plating, chrome, black chrome, gun metal and copper. Pens can be finished with Australiana flora and fauna bands. For the complete range of pens, please go the the Woodturning section of the site
</p>
<h3><a href="bottlestoppers.html">BOTTLESTOPPERS:</a></h3>
<p>
This stand is a slice of Agonis flexuosa common name WA Peppermint.
</p>
<h3><a href="otheritems.html">OTHER ITEMS:</a></h3>
<p>
99% Of these items are made from WA timber.Lignotuber - a natural growth that occurs at ground level or just below ground that holds many buds which stay dormant until the tree is stressed by fire or severe damage. This is typical of the genus Eucalyptus & Myrtaceae
</p>
<h3><a href="flora1.html">WILDFLOWERS:</a></h3>
<p>
Some of the 147 confirmed species, including 27 different orchids, of wildflowers on the block. There is also a section on Fungi.
</p>
<h3><a href="wildlife.html">WILDLIFE </a></h3>
<p>
Some of the wildlife seen on the block.
</p>
<!-- #content --></div>
<div id="footer">
Copyright 2011 Bouvard Bush Website by
<a href="http://www.westernwebdesign.com.au/index.html">Western Web Design</a>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
with most everything you are wasting hundreds of k of javascript on being able to be done in less than 2k of css… and the images and effects chosen are just bad web design. That giant background image that’s being rescaled and the use of transparency over such a large area being the biggest (though not the only) offender… especially given how it falls apart on very large and very small window sizes.
Again, there’s a reason you don’t see websites that do this a whole lot.
Thank you deathshadow60 - I do appreciate the time you have taken to look at this.It is not the usual sort of site I do but the fact is, it is for a non-paying client (husband!) so all good sense went out the window and I thought I would experiment a bit particularly with the bush background which is a bit ridiculous seeing that at smaller screen sizes it is hardly visible! You are quite right - far too many divs, far too much of everything.
Be assured I would NEVER have even considered this stuff for a paying client - I just liked the idea of a total bush background.
OK - am done with “fancy” - back to basics. Thanks for the wake-up call!