FF and Opera display differntly thaqn...

Sep 12th, 2008 at 01:24 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

OK, not sure what I did wrong here, but have been looking at it for days and maybe fresh eyes can see what is wrong.

Displays like this in FF 3, and Opera 9, but displays perfect in IE7.

http://i130.photobucket.com/albums/p248/pug2775/ScreenShot042-1.png

here is the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- -->
<!-- -->
<!-- -->
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="Microsoft Flight Simulator, Online flying, Virtual flying, International Flying Club, VATSIM, TEAMSPEAK, Group Flight" />
<meta name="description" content=" The Virtual International Flying Club is a different concept of VA that offers to the flight simulation enthusiast the opportunity to enjoy Virtual Flight while making links with people from the whole world" />
<title>Virtual International Flying Club</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="css/lores.css" />
<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(css/style.css);
/* ]]> */
</style>
<!--
<link REL="SHORTCUT ICON" HREF="http://www.flydeervalley.com/favicon.ico">
-->
</head>
<body>
<div id="wrapper">
<div id="masthead">
<span class="farhar">VIFC Logo, The Virtual International Flying Club is a different concept of VA</span>
</div>
<div id="navcontainer">

</div>
<div id="content">
</div>
</div>

</body>
<div id="footer"></div>
</html>

and the CSS

body {
background: url(../assets/background.png) repeat-x;
background-color: #91918f; /*grey*/
color: #191919; /*black*/
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
#wrapper {
background-color: #91918f; /*grey*/
color: #9c0001; /*burgundy*/
background: url(../assets/wrapperbackground.png) repeat-y;
width: 835px;
padding: 0px;
margin: 0 auto;
text-align: left;
height: auto;
}

#masthead {
background-color: #91918f; /*grey*/
background: url(../assets/banners/banner_3.png) center no-repeat;
color: #45392a;
padding-top: 0px;
padding-left: 30px;
width: 800px;
height: 200px;
}
#navcontainer {
background-color: #c59a6f; /*lbrown*/
background: url(../assets/menubar.png) no-repeat;
color: #561420; /*bergundy*/
padding: 0px;
width: 830px;
height: 40px;
}
.farhar {
padding:0px;
width:190px;
height: 59px;
border-bottom: none;
margin: 0 0 0 0;
text-indent: -5000px;
display: none;
}
#content {
background: url(../assets/bodyback.gif) repeat-y;
color: #45392a;
padding: 0px;
width: 800px;
height: 502px;
}
#footer {
clear: both;
background: url(../assets/wrapperbottom.png) center no-repeat;
color: #561420;
/*padding: 0px;*/
width: 836px;
height: 34px;
}
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Sep 12th, 2008 at 06:08 PM
User 355448 Photo

BillR
Ambassador
3,144 posts

It is difficult to see what is happening without seeing the live page. When I just tried it in the HTML Editor preview, all I get is a gray page.

Can you provide a URL to the page?
Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
Sep 13th, 2008 at 09:09 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

billr wrote:
It is difficult to see what is happening without seeing the live page. When I just tried it in the HTML Editor preview, all I get is a gray page.

Can you provide a URL to the page?

Not live yet, I would like to fix this before it goes live.

If this is critical to have it live let me know I can find a place to stash it for you to view.
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Sep 13th, 2008 at 10:07 PM
User 355448 Photo

BillR
Ambassador
3,144 posts

David,

I don't even know where to start. A link would allow it to be viewed live and not as a partial code that I currently have.
Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
Sep 14th, 2008 at 02:38 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

billr wrote:
David,

I don't even know where to start. A link would allow it to be viewed live and not as a partial code that I currently have.

OK, here is a link

http://www.flyvifc.org/V2_0/
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Sep 14th, 2008 at 03:54 PM
User 355448 Photo

BillR
Ambassador
3,144 posts

David,

Now I can see what I think you are wanting to correct. The copyright graphic at the bottom is all the way over to the left.

Let me play around with the code a little and get back to you.
Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
Sep 14th, 2008 at 04:09 PM
User 355448 Photo

BillR
Ambassador
3,144 posts

David,

Your footer is outside of the body of your page. I think that is the problem.

Your code currently looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- -->
<!-- -->
<!-- -->
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="Microsoft Flight Simulator, Online flying, Virtual flying, International Flying Club, VATSIM, TEAMSPEAK, Group Flight" />
<meta name="description" content=" The Virtual International Flying Club is a different concept of VA that offers to the flight simulation enthusiast the opportunity to enjoy Virtual Flight while making links with people from the whole world" />
<title>Virtual International Flying Club</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<link rel="stylesheet" type="text/css" media="screen" href="css/lores.css" />
<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(css/style.css);
/* ]]> */
</style>
<!--
<link REL="SHORTCUT ICON" HREF="http://www.flydeervalley.com/favicon.ico">
-->
</head>
<body>
<div id="wrapper">
<div id="masthead">
<span class="farhar">VIFC Logo, The Virtual International Flying Club is a different concept of VA</span>
</div>

<div id="navcontainer">

</div>
<div id="content">
</div>
</div>

</body>
<div id="footer"></div>
</html>

Change the last few lines to look like this:
<div id="footer"></div>
</div>
</body>
</html>

That will put your footer inside the body tags, and will also put it inside the wrapper div which sets the width of the content area of your page.

You can see the difference here

Hope this is helpful.
Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
Sep 14th, 2008 at 05:44 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

Yes, Bill I see what you are saying, but now the wrapper borders show under the wrapper bottom, other than making the wrapper bottom non transparent, is there a way around this?

What I am trying to acomplish (aside from lineing things up), is also have the ability of changing the background graphic occasionally and not having to change the wrapper graphics.

My wrapper graphics have shadows and I made them transparent PNG's so the background would show through.

Thanks for any insight you might have.
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Sep 14th, 2008 at 07:17 PM
User 355448 Photo

BillR
Ambassador
3,144 posts

David,

You can move the footer outside the wrapper, but it needs to be inside the body. Make the code look like:

</div>
<div id="footer"></div>
</body>
</html>

The code that centers the wrapper needs to be applied to the footer. Just add:
margin: 0 auto; to the #footer section of structure.css and you will get: this

Do we have the correct alignment now?
That should put it below the wrapper and still keep it aligned.
Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
Sep 15th, 2008 at 09:31 AM
User 184085 Photo

david wilson
Ambassador
1,707 posts

PERFECT!!!!

Thanks
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.