0

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

2
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by Cragdo
0

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

0

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...

Edited by mike_2000_17: Fixed formatting

0

Thanks zero 13

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

Cheers

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.