This is another one of those IE vs FireFox issues.
Please look at <!-- w --><a class="postlink" href="http://www.kokopellisonorangrill.com">www.kokopellisonorangrill.com</a><!-- w -->
I need some help on two pages: the front page and spacing issues on the others.
Looks fine in IE. The positioning travels along dynamically correctly. In Firefox. the frontpage positioning isn't right - the nav links don't stay centered, and in Firefox on the interior pages there is a huge gap between the top header and the rest of the content.
I'm a little stumped, any help would be appreciated.
Thanks, ChrisEDIT: Your page does not validate. Check that first. If it doesn't validate, chances are IE is in quirks mode and won't work like FF in standards mode.w3c.org validates my CSS just fine - the file is <!-- m --><a class="postlink" href="http://www.kokopellisonorangrill.com/index.asp">http://www.kokopellisonorangrill.com/index.asp</a><!-- m --> - and other than the mozilla tweaks for opacity on the other pages - the CSS is valid other than I didn't reference a generic font...
HTML is valid other than no ALT's and two old margin attribute holdouts that are in the <body> tag as tweaks.
I need help on the positioning issues, please.I know I will get flamed for this, but statistically most Internet users are using IE because they are using some version of windows. Your page looks great in IE so I wouldn't be too concerned with it in FF. FF is still trying to work out bugs of it's own. No browser is perfect but having a site that the majority can view properly should be the goal unless you plan to learn about every single browser out there, build pages designed for them, and write the code to differentiate between them.<flame on>
Of course it wouldn't matter that his code is wrong and he needs to find how to code it right, eh?
BTW, you have 20 validation errors on your own site.
</flame off>LOL - yea thanks for validating! My site isn't up there for anyone other than me to test code but thanks for looking.If anyone would have bothered to look at my validation errors, they have nothing to do with positioning, and w3c validates my CSS just fine.
Can we focus on the subject of my request for help instead of being instant validation freaks...please? Positioning help, anyone?Hi there ChrisBrown,
try this modification, no table in sight or site.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kokopelli Sonoran Grill</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: rgb(0,152,189);
background-image: url(images/site2005/frontPageBackground.jpg);
background-repeat: repeat-x;
margin:0px;
padding:0px;
}
div#topHeaderContainer {
margin-top: 72px;
text-align:center;
}
img#three {
display:block;
margin:auto
}
div#frontNav {
width:770px;
height:148px;
background-image: url(images/site2005/frontPageNavBack.jpg);
text-align:center;
margin:auto;
}
#frontNavButtons {
width:545px;
padding-top:10px;
text-align:center;
margin:auto;
}
div#frontNav img{
display:block;
border:0px;
}
div#frontNavButtons a {
float:left;
margin-left:1px;
margin-right:1px;
}
div#frontNavButtons a:hover {
margin-top:-1px;
margin-left:0px;
margin-right:0px;
border:1px solid #fff;
}
p.copy {
font-family:tahoma,verdana,arial,sans-serif;
font-size:11px;
color:#fff;
}
p.copy a {
font-size:14px;
color:#fff;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {
//reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="topHeaderContainer">
<img id="three" src=http://www.webdeveloper.com/forum/archive/index.php/"images/site2005/frontPageRandom/3.jpg" alt="">
<div id="frontNav">
<div id="frontNavButtons">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"locations.asp"><img src="images/site2005/frontPageNav/locations.jpg" width="106" height="26" alt=""></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"menu.asp"><img src="images/site2005/frontPageNav/menu.jpg" width="70" height="26" alt=""></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"press.asp"><img src="images/site2005/frontPageNav/press.jpg" width="68" height="26" alt=""></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"franchise.asp"><img src="images/site2005/frontPageNav/franchise.jpg" width="104" height="26" alt=""></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"photos.asp"><img src="images/site2005/frontPageNav/photos.jpg" width="84" height="26" alt=""></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.asp"><img src="images/site2005/frontPageNav/contact.jpg" width="89" height="26" alt=""></a>
</div>
</div>
<p class="copy">
Copyright 2005 Kokopelli Franchise Company
</p>
<p class="copy">
Designed and maintainted by
</p>
<p class="copy">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.uniondigitalmedia.com" >Union Digital, Inc.</a>
</p>
</div>
</body>
</html>
cootheadI will give it a shot and see how it goes, thanks for your suggestion. I will post back with the results.You're CSS may validate just fine but if the html is wrong your positioning can be thrown off. True, in this case, your margin attributes did not affect it but why are you using them if you are using CSS?I tried that solution and it worked on the front page. Now I need to tackle my large gap problem on the left, has anyone looked at that in FireFox?
Thanks for the assistance, it is extremely appreciated.Has anyone taken a look at a page such as <!-- m --><a class="postlink" href="http://www.kokopellisonorangrill.com/press.asp">http://www.kokopellisonorangrill.com/press.asp</a><!-- m --> and thought about why there is that huge gap on the left side in non-IE browsers? I'm still stumped.
Thanks for the help so far.
Please look at <!-- w --><a class="postlink" href="http://www.kokopellisonorangrill.com">www.kokopellisonorangrill.com</a><!-- w -->
I need some help on two pages: the front page and spacing issues on the others.
Looks fine in IE. The positioning travels along dynamically correctly. In Firefox. the frontpage positioning isn't right - the nav links don't stay centered, and in Firefox on the interior pages there is a huge gap between the top header and the rest of the content.
I'm a little stumped, any help would be appreciated.
Thanks, ChrisEDIT: Your page does not validate. Check that first. If it doesn't validate, chances are IE is in quirks mode and won't work like FF in standards mode.w3c.org validates my CSS just fine - the file is <!-- m --><a class="postlink" href="http://www.kokopellisonorangrill.com/index.asp">http://www.kokopellisonorangrill.com/index.asp</a><!-- m --> - and other than the mozilla tweaks for opacity on the other pages - the CSS is valid other than I didn't reference a generic font...
HTML is valid other than no ALT's and two old margin attribute holdouts that are in the <body> tag as tweaks.
I need help on the positioning issues, please.I know I will get flamed for this, but statistically most Internet users are using IE because they are using some version of windows. Your page looks great in IE so I wouldn't be too concerned with it in FF. FF is still trying to work out bugs of it's own. No browser is perfect but having a site that the majority can view properly should be the goal unless you plan to learn about every single browser out there, build pages designed for them, and write the code to differentiate between them.<flame on>
Of course it wouldn't matter that his code is wrong and he needs to find how to code it right, eh?
BTW, you have 20 validation errors on your own site.
</flame off>LOL - yea thanks for validating! My site isn't up there for anyone other than me to test code but thanks for looking.If anyone would have bothered to look at my validation errors, they have nothing to do with positioning, and w3c validates my CSS just fine.
Can we focus on the subject of my request for help instead of being instant validation freaks...please? Positioning help, anyone?Hi there ChrisBrown,
try this modification, no table in sight or site.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kokopelli Sonoran Grill</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: rgb(0,152,189);
background-image: url(images/site2005/frontPageBackground.jpg);
background-repeat: repeat-x;
margin:0px;
padding:0px;
}
div#topHeaderContainer {
margin-top: 72px;
text-align:center;
}
img#three {
display:block;
margin:auto
}
div#frontNav {
width:770px;
height:148px;
background-image: url(images/site2005/frontPageNavBack.jpg);
text-align:center;
margin:auto;
}
#frontNavButtons {
width:545px;
padding-top:10px;
text-align:center;
margin:auto;
}
div#frontNav img{
display:block;
border:0px;
}
div#frontNavButtons a {
float:left;
margin-left:1px;
margin-right:1px;
}
div#frontNavButtons a:hover {
margin-top:-1px;
margin-left:0px;
margin-right:0px;
border:1px solid #fff;
}
p.copy {
font-family:tahoma,verdana,arial,sans-serif;
font-size:11px;
color:#fff;
}
p.copy a {
font-size:14px;
color:#fff;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {
//reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="topHeaderContainer">
<img id="three" src=http://www.webdeveloper.com/forum/archive/index.php/"images/site2005/frontPageRandom/3.jpg" alt="">
<div id="frontNav">
<div id="frontNavButtons">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"locations.asp"><img src="images/site2005/frontPageNav/locations.jpg" width="106" height="26" alt=""></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"menu.asp"><img src="images/site2005/frontPageNav/menu.jpg" width="70" height="26" alt=""></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"press.asp"><img src="images/site2005/frontPageNav/press.jpg" width="68" height="26" alt=""></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"franchise.asp"><img src="images/site2005/frontPageNav/franchise.jpg" width="104" height="26" alt=""></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"photos.asp"><img src="images/site2005/frontPageNav/photos.jpg" width="84" height="26" alt=""></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.asp"><img src="images/site2005/frontPageNav/contact.jpg" width="89" height="26" alt=""></a>
</div>
</div>
<p class="copy">
Copyright 2005 Kokopelli Franchise Company
</p>
<p class="copy">
Designed and maintainted by
</p>
<p class="copy">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.uniondigitalmedia.com" >Union Digital, Inc.</a>
</p>
</div>
</body>
</html>
cootheadI will give it a shot and see how it goes, thanks for your suggestion. I will post back with the results.You're CSS may validate just fine but if the html is wrong your positioning can be thrown off. True, in this case, your margin attributes did not affect it but why are you using them if you are using CSS?I tried that solution and it worked on the front page. Now I need to tackle my large gap problem on the left, has anyone looked at that in FireFox?
Thanks for the assistance, it is extremely appreciated.Has anyone taken a look at a page such as <!-- m --><a class="postlink" href="http://www.kokopellisonorangrill.com/press.asp">http://www.kokopellisonorangrill.com/press.asp</a><!-- m --> and thought about why there is that huge gap on the left side in non-IE browsers? I'm still stumped.
Thanks for the help so far.