Hi Folks,

I'm hoping you can help me with a strange IE problem. My clients site at http://www.cmrbuilding.com works fine in Firefox, Safari, Opera etc but when it comes to IE, though it works in IE6, the site has a huge extra, blank area that scrolls to the right and I can't work out why.

I have tried removing all Javascript and taking out blocks of code, main background, header, content, footer etc, to try to isolate the problem without success and I am now stumped.

Can anyone help me with this problem please.

Head section

<meta http-equiv="Content-Script-Type" content="text/JavaScript" />
<link type="text/css" rel="stylesheet" href="styles/style.css" media="screen" />
<link type="text/css" rel="stylesheet" href="styles/screen.css" media="screen" />
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="styles/ie7.css" /><![endif]-->
<!--[if lt IE 7]><script defer type="text/javascript" src="scripts/pngfix.js"></script><![endif]-->
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/easySlider1.7.js"></script>
<script type="text/javascript">//<![CDATA[
    $(document).ready(function() {
    $("#slider").easySlider({
            auto: true,
            continuous: true,
            numeric: true,
            pause: 4000
        });
    });
//]]></script>
<script type="text/javascript" src="scripts/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">//<![CDATA[
    $(document).ready(function() {
        $('.navmenu li').append('<div class="hover"><\/div>');
        $('.navmenu li').hover(function() {
            $(this).children('div').fadeIn('1000');
        },function() {
            $(this).children('div').fadeOut('1000');
        })
    });
//]]></script>

Main Body

<body>
<div id="wrapper">
    <div id="header">
        <h1>Construction Maintenance and Renovation: Kitchen Fitting</h1>
        <div class="logo"><img src="images/logo.png" alt="Construction Maintenance &amp; Renovation Ltd" /></div>            
        <div class="phone"><img src="images/0800.png" alt="Free Phone 0800 654 3129" /></div>
        <ul class="navmenu">
            <li><a href="default.htm" title="About Construction Maintenance and Renovation">Home</a></li>
            <li><a href="http://www.howdens.com/product-range/kitchen-collection/" title="view our range of kitchens" target="_blank">Kitchens</a></li>
            <li><a href="contact-us.htm" title="Construction Maintenance and Renovation Contact Details">Contact Details</a></li>
        </ul>
    </div><!--end header-->    
    <div id="photo">
        <div id="slider">
    		<ul>
    			<li><img src="slider/slider-kitchen-01.jpg" alt="Kitchen Fitters" /></li>
    			<li><img src="slider/slider-kitchen-02.jpg" alt="Kitchen Suppliers" /></li>
    			<li><img src="slider/slider-kitchen-03.jpg" alt="Garage Conversions" /></li>
    			<li><img src="slider/slider-kitchen-04.jpg" alt="Commercial Work" /></li>
    		</ul>
    	</div>
    </div><!--end photo-->    
    <div id="content-wrapper">
        <div class="intro">
            <p>Welcome to <span class="blue">Construction Maintenance &amp; Renovation Ltd</span> an all trades, property improvements company.</p>
            <p><span class="blue">CM&amp;R</span> specialise in the design, supply and installation of high quality rigid built kitchens.</p>
            <p><span class="blue">CM&amp;R</span> also specialise in extensions, loft/attic &amp; garage conversions, from planning &amp; design through to complete construction.</p>
            <p>Covering all areas of Glasgow and West Central Scotland <span class="blue">CM&amp;R</span> go further to offer quality of work at highly competitive prices. All projects are fully insured and project managed ensuring complete peace of mind.</p>
        </div>
        <div class="service-wrapper">
            <div class="service">
                <h1>Kitchen Fitters</h1>
                <h2><img src="images/kitchens.png" alt="All about kitchen fitting and kitchen suppliers" /></h2>
                <p><span class="blue">CM&amp;R</span> offer full, free survey and design service with all kitchens. We supply &amp; installation service, from joinery &amp; tiling to plastering, plumbing &amp; gas fitting. Every installation is fully insured and project managed from start to finish, ensuring a stress free installation</p>
                <p class="left">You can <a href="http://www.howdens.com/product-range/kitchen-collection/" title="view our range of kitchens" target="_blank">view our range of kitchens here</a>.</p>
            </div>
            <div class="service">
                <h1>Extensions &amp; Loft Conversions</h1>
                <h2><img src="images/garage-conversions.png" alt="garage conversions" /></h2>
                <p><span class="blue">CM&amp;R</span> offers full planning &amp; design service if required. Fully project managed from start to finish with every trade supplied to complete the project</p>
                <p>All interior fit outs carried out to a very high standard including extras such as hardwood flooring, home office installations etc.</p>
            </div>
            <div class="service">
                <h1>Commercial Work.</h1>
                <h2><img src="images/commercial-work.png" alt="Joinery &amp; Building Work and more" /></h2>
                <p><span class="blue">CM&amp;R</span>, being an all trades company, have the facility to carry out all general joinery and building maintenance tasks, including full installation of customers own supplied kitchens.</p>
                <p><span class="blue">CM&amp;R</span> can also cover any sized property improvement for commercial contracted projects.</p>
            </div>
        </div>        
        <div class="clear"></div>
    </div><!--end content-wrapper-->       
    <div class="clear"></div> 
    <div id="footer">
        <h1>Call now for a no obligation quote.</h1>
        <a href="contact-us.htm" title="Contact Construction Maintenance and Renovation"><img src="images/call-now.png" alt="Call now for a no obligation quote -0773 284 0932 or 0141 641 6670" /></a>
    </div><!--end footer-->
    <div class="cubed"><p>site created by: <a href="http://www.cubed-design.com" title="Visit Cubed Design Portfolio" target="_blank">Cubed-Design</a></p></div>
</div><!--end wrapper-->
</body>

CSS

body {
	font-family: tahoma,Sans-Serif,verdana,arial;
	font-size: 90%;
	color: #ddd;
	line-height: 150%;
	margin: 0 auto;	
	padding: 0;
	min-width: 800px;
	text-align: center;
	background: transparent url(../images/brick-bg.jpg) 0 0 fixed repeat;
}
/* main layout */
#header,photo,#content-wrapper,#footer {
	overflow: hidden;
}
#wrapper {
    margin: 0 auto;
	padding: 0;
    text-align: left;
}
#wrapper,#header,#footer { width: 100%; }
#photo { width: 100% }
#content-wrapper { width: 100%; }
#footer { clear: both; }
#header
{
    height: 180px;
}
#header .button
{
    height: 158px;
    width: 116px;
    padding: 0;
    border: none;
    cursor: pointer;
    background: transparent url(../images/contact-button.png) center center no-repeat;    
}
#photo 
{
    height: 241px;
    border-top: solid 2px #fff;
    border-bottom: solid 2px #fff;
    background: #333 url(../images/slider-bg.jpg) top left repeat-x;
    position: relative;
    z-index: 101;
}
#content-wrapper
{
    clear: both;
    padding: 0 0 40px; 
}
#footer
{
    width: 540px;
    margin: 25px auto;
    padding: 0;   
}
/* end main layout */
.logo
{
    float: left;
    width: 330px;
    margin: 25px 0 0 20px;
}
.phone
{
    position: absolute;
    top: 45px;
    right: 125px;   
    width: 395px;
}
.intro
{   
    width: 80%;
    margin: 75px auto 0;
    padding: 0 20px 0 0; 
}
.intro p { text-align: center; margin: 30px 0;}
.service-wrapper
{
    clear: both;
    width: 95%;
    margin: 25px auto 0;
}
.contact
{
    clear: left;
    width: 80%;
    margin: 0 auto 0;
    padding: 10px 0 0;  
    /*background: url(../images/seperator.png) 0 0 repeat-x;  */    
    position: relative;
    z-index: 101;
    border-top: solid 1px #fff;
}
.service
{
    float: left;
    width: 31%;
    margin: 5px 0.5em 0;
}
.form
{
    float: left;
    width: 340px;
    margin: 0 1.56em 0 0;
    padding: 30px 0 0;
}
div.row
{
    padding-top: 7px;
}
div.row span.label
{
    float: left;
    width: 75px;
    text-align: right;
}
div.row span.formData
{
    float: right;
    width: 250px;
    text-align: left;    
}
span.asterisk
{
    margin: 0;
    color: #ff0000;
}
.button 
{
    width: 88px;
    height: 38px;
    padding: 3px 5px;
    background: transparent url(../images/buttons.png) top left no-repeat;
    border: none;
    cursor: pointer;
}
input 
{
    width: 240px;
    color: #fff;
    background: #333;
    border: solid 1px #aaa;  
}
textarea 
{
    width: 240px;
    height: 120px;
    color: #fff;
    background: #333;
    overflow: auto;
    border: solid 1px #aaa;   
}
.contact-details
{
    float: left; 
    width: 270px; 
    text-align: left;  
    margin: 0;
    padding: 30px 0 0;
}
.contact-details h2
{
    font-size: 150%;
    font-weight:lighter;
    text-align: left;
    margin: 0;
    padding: 0 0 7px 0;   
}
.contact-details p 
{ 
    margin: 0; 
    padding: 0;
}
.contact-button
{
    position: absolute;
    top: 75px;
    right: 0;
    width: 170px;
    z-index: 99;
}
.bottom 
{
    height: 40px;
    position: relative;
    left: -4px;
}
.cubed  
{
    width: 190px;
    margin: 0 auto; 
    font-size: 0.9em;
}
.cubed p { margin: 0; padding: 0; }
/* elements */
.clear { clear: both; }
.left { text-align: left;}
.blue { color: #6699ee; }
img { border: none; }
a:link,a:visited {color: #6699ee;}
a:hover {color: #fff;}
h1  
{
    position: absolute; 
    font-size: 90%;
    margin: 0;
    padding: 0;
    text-indent: -999px;
}
h2{ text-align: center; padding-bottom: 0; margin-bottom: 0; }
p 
{
    padding: 0 20px; 
    text-align: left; 
}
/*end elements*/
/*navmenu*/
.navmenu 
{
    float: right;
    width: 430px;
    height: 40px;
    list-style: none;
    text-align: center;
    position: absolute;
    top: 139px;
    right:80px;
}
.navmenu li
{
    float: left;
    width: 115px;
    height: 40px;
    margin: 0 1px 0 0;
    position: relative;
    background: url(../images/nav-up.jpg) center top no-repeat;
    border: solid 1px #fff;
}
.navmenu li a
{
    z-index: 99;
    display:block;
    position: relative;
    height: 40px;
    padding: 9px 0 0 0;
    color: #fff;
    text-decoration: none;
}
.navmenu li a:hover {color: #fff;}
.navmenu li .hover
{
    position: absolute;
    width: 115px;
    height: 40px;
    left: 0;
    top: 0;
    z-index: 1;
    display: none;
    background: url(../images/nav-hover.jpg) center top no-repeat;   
}
.selected
{
    width: 115px;
    height: 40px;
    background: url(../images/nav-hover.jpg) center top no-repeat;
}
/*end navmenu*/

Thank you

I have found the problem. It was the absolutely positioned, -999px indented h1 tags that were causing it.

On that subject. I have the h1 tags indented for SEO reasons to replace my image headings and keep my h tags structured properly.

Does anyone know if this could cause problems with Google as I know they don't like hidden content? I have researched a fair bit about this and the opinion seems to be a bit divided whether Google will give you penalties for this.

Any ideas?

Cheers

Developers used "h1" tag for main logo and replace text with image, instead of "img" tag. That helps our site ranks increase and search engine friendly. Try this one:
HTML:

<h1 id="logo"><a href="#">Your site name</a></h1>

CSS:

h1#logo {
       background: url('../your_logo.jpg') no-repeat top left; /* this image replace the heading text */
       height: /* your logo image height */;
       width: /* your logo image width */;
       text-indent: -9999em /* remove text from browser view */
       }

Now your heading replace by image. The link is now inline-level and small area to click. Try this:

h1#logo a {
         display: block;
         height: 100%
         }

'absolute position' makes problems for some browsers. Sorry for my language skill. Good luck...

Thanks zero 13

I have implemented your version and it works a treat and now I knw my code is SEO friendly.

Cheers

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.