Welcome to WebmasterWorld Guest from 54.196.238.210

Forum Moderators: incrediBILL

Message Too Old, No Replies

Different rendering in Firefox Mac and Firefox PC - Not to mention IE7

     

fRAiLtY

2:26 pm on Apr 23, 2010 (gmt 0)

5+ Year Member



Hi guys,

I'm building this quick website (well that was the idea) nothing special as it's for a mate, but ran into issues with a CSS menu I found online.

The menu displays perfectly in Firefox Mac and IE8, but in Firefox PC the menu is OK, but the footer text is differnet. I expect this in IE and would use an IE specific style to suit, but have never seen Firefox Mac and Firefox IE display differently before?!

Also my menu that works in IE8 just staggers downwards in IE7 and I can't figure out why?!

Am pulling my hair out with this as it was meant to be quick. Have been developing Magento on PHP/Zend for months and really seem to have lost my head for simple CSS/HTML. It validates to 4.01 Trans perfectly.

<URL REMOVED>

CSS:


body {
font-family: verdana, arial, helvetica;
font-size: 11px;
color: #000000;
}

#wrapper {
background: transparent;
margin-right: auto;
margin-left: auto;
width: 859px;
position: relative;
}

#header-image {
width: 859px;
height: 125px;
float: left;
background: url('../images/header.png') no-repeat;
}

#main-background {
width: 859px;
height: 500px;
background: url('../images/main-bg.png') repeat-y;
float: left;
}

#footer {
width: 859px;
height: 20px;
background: url('../images/footer.png') no-repeat;
float: left;
}

img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}

img.banner {
border: solid 1px;
}

@media screen and (max-width: 1024px) {
img.bg {
left: 50%;
margin-left: -512px; }
}

.text {
width: 666px;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
}

.copyright {
width: 666px;
margin-right: auto;
margin-left: auto;
position: relative;
top: -75px;
font-size: 9px;
text-align: center;
}

h1 {
font-family: verdana, arial, helvetica;
font-size: 14px;
color: #5d4b30; /* Remember this nice brown! */
}

hr {
position: relative;
top: -6px;
left: -32px;
color: #cccccc;
height: 1px;
}

li.buttons { float: left;}

ul.menu {
list-style-type: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 5px;
margin: 0px;
}

.menu a {
margin: 0px;
height: 20px;
padding: 0px;
float: left;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
background: #5d4b30;
font-size: 12px;
font-weight: bold;
}

.menu a:hover {
background: #e97118; /* That Orange, still undecided! */
}

.stepArrow {
position:inherit;
display:inline;
margin-top: 0px;
margin-bottom: 0px;
border: 0px;
vertical-align: middle;
}

.navigation {
width: 535px;
height: 29px;
margin-right: auto;
margin-left: auto;
float: left;
position: relative;
left: 240px;
top: 90px;
}


And HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Challenge</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
</head>
<body>
<img src="images/bg.gif" class="bg" alt="Off Road Challenge 2010">
<div id="wrapper">
<div id="header-image">
<div class="navigation">
<ul class="menu">

<li><a href="#">
<img src="images/arrowR.gif" class="stepArrow" alt="Challenge 2010">
Home
<img src="images/arrowL.gif" class="stepArrow" alt="Challenge 2010">
</a></li>
<li><a href="#">
<img src="images/arrowR.gif" class="stepArrow" alt="Challenge 2010">
Sponsors
<img src="images/arrowL.gif" class="stepArrow" alt="Challenge 2010">
</a></li>

<li><a href="#">
<img src="images/arrowR.gif" class="stepArrow" alt="Challenge 2010">
2009
<img src="images/arrowL.gif" class="stepArrow" alt="Challenge 2010">
</a></li>
<li><a href="#">
<img src="images/arrowR.gif" class="stepArrow" alt="Challenge 2010">
Entry
<img src="images/arrowL.gif" class="stepArrow" alt="Challenge 2010">
</a></li>

<li><a href="#">
<img src="images/arrowR.gif" class="stepArrow" alt="Challenge 2010">
In Aid Of
<img src="images/arrowL.gif" class="stepArrow" alt="Challenge 2010">
</a></li>
<li><a href="#">
<img src="images/arrowR.gif" class="stepArrow" alt="Challenge 2010">
Contact Us
<img src="images/arrowL.gif" class="stepArrow" alt="Challenge 2010">
</a></li>

</ul>
</div>
</div>
<div id="main-background">
<div class="text"><h1>Challenge 2010</h1>
<hr width="90%"></div>
</div>
<div id="footer">
<div class="copyright"><a href="http://www.example.com" target="new"><img src="images/blackwellprint.png" class="banner" alt="Proudly supported by Example Company"></a>
<br>Website Designed and Coded by <a href="mailto:tom@example.com?Subject=Challenge Website">Example Person</a> of <a href="http://example.com" target="new">Example.com</a>
| All Content and Imagery Copyright 2010 &copy;

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


Any help on this is appreciated. Just getting the menu to work would be a blessing.

[edited by: incrediBILL at 3:47 pm (utc) on Apr 23, 2010]
[edit reason] removed URL, see TOS #13 [webmasterworld.com...] [/edit]

 

Featured Threads

Hot Threads This Week

Hot Threads This Month