homepage Welcome to WebmasterWorld Guest from 23.20.220.79
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

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




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

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]

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved