| carlos4147 |
03-17-2012 12:46 PM |
Please help! great in webkit - terrible in moz and IE
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>© 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 |
