Please help! great in webkit - terrible in moz and IE

carlos4147 · 03-17-2012, 12:46 PM

Hi, I am building a site at the moment and it looks perfect in chrome and safari but nothing looks right in mozilla and IE, now normally i have issues with IE (like everyone else) but this time is MOZ too.

Basically in Moz and IE anything that is a link (the logo, nav etc) seem to align to the right, but in webkit browsers it all is aligned correctly.

The details: Logo and bottom nav are incorrectly aligned to the right in IE and MOZ (the nav is actually where i want it but that too is aligned to the right) I'm guessing that this is inherited from something else but anyway, here's the code.

Code:

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="utf-8"/>
<title>Keyframe UK</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style1.css" rel="stylesheet" type="text/css" />
	<!--[if IE 6]>
	<link href="style2.css" rel="stylesheet" type="text/css" />
<![endif]-->
	<!--[if IE 7]>
	<link href="style2.css" rel="stylesheet" type="text/css" />
<![endif]-->
	<!--[if IE 8]>
	<link href="style2.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-29442669-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<body>
<div id="container">

<div id="header"><header>

<a href="home.html"><img src="images/logo.jpg" width="230px" height="200px" alt="Keyframe UK Logo"/></a>
<h1>Call us now on:</br>01204 705 718</h1>

<div id="nav"><nav>
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="location.html">Location</a></li>
<li><a href="delivery.html">Delivery</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="aboutus.html">About</a></li>
<li><a href="home.html">Home</a></li>
</ul>
</nav></div>

</header></div>

<div id="section"><section>

<img src="images/road.jpg" width="900px" height="300px" alt="Keyframe Banner" />

<div id="article" class="homecont"> <article>
<h2>Welcome to Keyframe UK</h2>
<p><blockquote>We are the market leaders in <strong>uPVC fabrication in the UK</strong>, specialising in <strong>REHAU</strong> products, including:<strong> window frames</strong>, <strong>doors</strong> 
and <strong>conservatories.</strong> We deliver accross the country and always on time, making sure you and your customers always have a pleasent experiance.</p>
 
 <p>As a world leader in polymer solutions, REHAU creates uPVC extrusions for <strong>windows and doors </strong>that set new standards for premium performance 
 and distinctive design. From aesthetics to function and durability, REHAU products benefit from quality materials and the most advanced technology.
 Our extensive range meets the requirements of renovation and new construction applications in residential and commercial buildings. 
 With nearly 60 years of expertise in product research and development, 
 you can always trust REHAU for the most innovative, well-engineered designs.</p>
 
 <p>Please browse our site and feel free to contact us using our online enquiry form or <strong>call us now on: 01204 705 718</strong> and speak to a friendly member of our
 team who will be happy to assist you with specific requirements.</blockquote>
</p>
</article></div>

<div id="article"  class="ctabox"> <article>

</article></div>

<div id="article" class="logobox"> <article>

</article></div>

</section></div>

<div id="footer"><footer>
<div class="links">

<p>
<a href="#">Areas |</a>
<a href="#">FAQ's |</a>
<a href="#">Rehau |</a>
<a href="#">uPVC |</a>
<a href="#">Windows |</a>
<a href="#">Doors |</a>
<a href="#">Conservatory |</a>
<a href="#">Energy</a>
</p></div>

<div class="legal">
<p>&copy; Copyright Keyframe UK LTD 2012. All Rights Reserved. Company Number: VAT Number: <p>
</div>
</footer></div>


</div>
</body>
</html>

Now here is the style sheet:

Code:


body{
background: #bce4f6;  
     background: -moz-linear-gradient(top, #bce4f6, #e3f3fb 30%, #ffffff) no-repeat;  
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bce4f6), color-stop(.3, #e3f3fb), to(#ffffff))no-repeat; 
}


#container {
width: 100%;
height: 1100px;
margin: auto;
background: #bce4f6;  
     background: -moz-linear-gradient(top, #bce4f6, #e3f3fb 30%, #ffffff);  
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bce4f6), color-stop(.3, #e3f3fb), to(#ffffff)); 

}


header {
width: 900px;
height: 200px;
margin: auto;
background:#bce0f4;

position: relative;
font-family: myriad pro, myriad, arial, sans-serif;
}

header h1 {
float: right;
margin: 15px 10px 0 0;
padding:0 15px 0 0;
color: #3475b8;
font-weight: bold;
font-size: 40px;
font-family: myriad pro, myriad, arial, sans-serif;
text-shadow: 2px 4px 3px #292929;
letter-spacing: -1;
}

header img {
margin: 0;
padding: 0;
float: left;
}

nav {
width: 70%;
height: 40px;
float: right;
display: inline;
font-weight: none;
text-decoration: none;
font-family: myriad pro, myriad, arial, sans-serif;
font-size: 23px;
margin: 0 0 0 0;
word-spacing: 20px;
position: absolute;
top: 160px;
left: 30%;
}

nav ul, li, a {
float: right;
display: inline;
font-weight: none;
text-decoration: none;
color: #004ca6;
margin: 5px 0;
padding:0;
word-spacing: 20px;
font-size: 22px;
list-style: none;
}

nav a {
font-size: 22px;
text-decoration: none;
color: #004ca6;
margin-right: 15px;

}

nav li:hover {
text-shadow: 1px 1px 1px #3475b8;
}


section {
width: 900px;
height:820px;
margin: auto;
padding: 0 0 0 0;
}

section img{
margin: 0 0 0 0;
padding:  0 0 0 0;
}

article {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.homecont {
width: 70%;
height: 505px;
float: left;
margin: 0 0 0 0;
padding: 0 0 0 0;
background: #a9ecae;
color: #1e4b60;
font-family: myriad pro, myriad, arial, sans-serif;
}

.homecont h2, p{
padding: 5px;
}

.aboutcont {
width: 70%;
height: 705px;
float: left;
margin: 0 0 0 0;
padding: 0 0 0 0;
background: #a9ecae;
color: #1e4b60;
font-family: myriad pro, myriad, arial, sans-serif;
}

.aboutcont h2, p{
padding: 5px;
}

.ctabox {
width: 30%;
height: 100px;
float: right;
color: #1e4b60;
margin: 0 0 0 0 ;
background: #c1f5e6;
}

.logobox{
width: 30%;
min-height: 405px;
float: right;
color: #1e4b60;
margin: 0 0 0 0 ;
background: #d8d6fa;
}

.aboutlogobox{
width: 30%;
min-height: 605px;
float: right;
color: #1e4b60;
margin: 0 0 0 0 ;
background: #d8d6fa;
}

footer {
width: 900px;
height: 110px;
margin: auto;
clear: both;
padding: 10px 0 0 0;
color: #3475b8;
}

footer p,a {
font-size: 15px;
font-weight: none;
text-decoration: none;
display: inline;
float: center;
text-align: center;
color: #3475b8;
margin: auto;
font-family: myriad pro, myriad, arial, sans-serif;
}

.links {
width: 800px;
height: 30px;
margin: auto;
margin-top: 20px;
padding: 0;
text-align: center;
float: center;

}

.links p{
font-size: 15px;
font-weight: none;
text-decoration: none;
display: inline;
float: center;
text-align: center;
color: black;
margin: auto;
font-family: myriad pro, myriad, arial, sans-serif;
}

.legal {
width: 700px;
height: 12px;
font-size: 10px;
text-align: center;
float: center;
margin: 20px auto;

}

.legal p {
font-size: 10px;
text-align: center;
}

and here is the alternate style sheet for IE ONLY:

Code:

body{
background: #ffffff;
}

#container {
width: 95%;
height: 100%;
margin: auto;
background:#bce4f6;



}



#header {
width: 900px;
height: 200px;
margin: auto;
background:#bce0f4;

position: relative;
font-family: myriad pro, myriad, arial, sans-serif;


}

#header h1 {
float: right;
margin: 10px 10px 0 0;
padding:0;
color: #3475b8;
font-weight: bold;
font-size: 50px;
font-family: myriad pro, myriad, arial, sans-serif;
text-shadow: 2px 4px 3px #292929;
}


#nav {
width: 70%;
height: 40px;
float: right;
display: inline;
font-weight: none;
text-decoration: none;
font-family: myriad pro, myriad, arial, sans-serif;
font-size: 23px;
margin: 0 0 0 0;
word-spacing: 10px;
position: absolute;
top: 160px;
left: 30%;
line-height: -10%;


}

#nav ul, li, a {
float: right;
display: inline;
font-weight: none;
text-decoration: none;
color: #004ca6;
margin: 0;
padding:0;

word-spacing: 10px;
font-size: 23px;
list-style: none;
}

#nav a {
font-size: 23px;
text-decoration: none;
color: #004ca6;
margin-right: 15px;

}

#section {
width: 900px;
height: 820px;
margin: auto;


}

#section img{

}

#article {
}

.homecont {
width: 70%;
height: 505px;
float: left;
color: #1e4b60;
background: #a9ecae;

}

.aboutcont {
width: 70%;
height: 705px;
float: left;
margin: 0 0 0 0;
padding: 0 0 0 0;
background: #a9ecae;
color: #1e4b60;
font-family: myriad pro, myriad, arial, sans-serif;
}

.aboutcont h2, p{
padding: 5px;
}

.ctabox {
width: 28%;
height: 100px;
float: right;
color: #1e4b60;
margin: 0 12px 0 0 ;
background: #c1f5e6;

}

.logobox{
width: 28%;
height: 400px;
float: right;
color: #1e4b60;
margin: 5px 12px 0 0 ;
background: #d8d6fa;

}

.aboutlogobox{
width: 30%;
min-height: 605px;
float: right;
color: #1e4b60;
margin: 0 0 0 0 ;
background: #d8d6fa;
}

#footer {
width: 900px;
height: 110px;
margin: auto;
margin-top: 10px;
clear: both;
padding: 0;
position: relative;


}

#footer p,a {
font-size: 20px;
font-weight: none;
text-decoration: none;
display: inline;
float: center;
text-align: center;
color: black;
margin: auto;
font-family: myriad pro, myriad, arial, sans-serif;
}

.links {
width: 800px;
height: 30px;
margin: auto;
margin-top: 20px;
padding: 0 0 0 0 ;
text-align: center;
float: center;

}

.links p{
font-size: 20px;
font-weight: none;
text-decoration: none;
display: inline;
color: black;
font-family: myriad pro, myriad, arial, sans-serif;
}

.links a {
text-align: center;
float: center;
margin: auto;
}


.legal {
width: 700px;
height: 12px;
font-size: 10px;
color: black;
text-align: center;
float: center;
margin: 20px auto;

}

.legal p {
font-size: 10px;
color: black;
text-align: center;
}

Any help would be great, i'm pulling my hair out here

webdev1958 · 03-17-2012, 01:19 PM

Quote:

Originally Posted by carlos4147

.....normally i have issues with IE (like everyone else) but this time is MOZ too....

I don't have any issues with IE7+.

In any case, you are using html5 elements. HTML5 is still in development and will be for a few years yet. Consequently browser support for it varies and is patchy.

For one thing, have a look at this in your code:

Code:

<div id="header"><header>

You have a <header> inside a div with an id="header". Looking at this, the purpose of the <div> appears to be the same as the header, so why on earth have both? How is one of them not redundant?

Why not ditch the still in development html5 from your code and use the Strict doctype for either html4 or xhtml? You don't need html5 at all for what you are trying to do.

Then validate the html and css. Having a separate stylesheet for a browser is just so unnecessary nowadays and so 20th Century.

You won't have browser compatibility issues for that page if you recode with Strict (x)html.