...
PDA

Page displays in IE and Safari but not Firefox

jg2008
12-01-2008, 10:01 PM
My code displays properly when viewed locally in Firefox, IE, and Safari.

When I upload the new page to a server (I am updating a site done in html), the code only displays properly in IE and Safari-- not in Firefox.
In Firefox, the page wrapper and formatting disappears and everything appears as a long list against the left edge of the computer screen.

I decided to upload the code to Yahoo GeoCities to test the page (a different server than where I will ultimately be uploading the page) and it displayed almost perfectly in Firefox. There was one spacing issue underneath the navbar.

I originally thought that there was definitely something faulty with the coding causing the problem. I have validated both the xhtml and the css. Now I am wondering why the page works in GeoCities when viewed with Firefox but not on the other server?

I am including the code below.

Does anyone know what could be the cause of the problem? Any advice? Does GeoCities overlook certain errors that another server might not?


I am new at this and appreciate any help.

Thanks.

<!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>
<title>Sample Page
</title>
<link rel="stylesheet" type="text/css" href="cssfile.html" />
</head>

<body>
<div id="wrapper">
<div id="header">

<table class= "name2">
<tr>
<td class="name1">&nbsp;&nbsp;&nbsp;</td>
<td style="background-color:#2e9fa1;">&nbsp;</td>
</tr>

<tr>
<td style="background-color:#2e9fa1;">&nbsp;</td>
<td class="name">Name</td>
</tr>
</table>

</div>

<div id="navbararea"><!--Navigation bar begins-->

<div id="navbar">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<br />

<h2 class="pagename">Page Name</h2>
</div><!--Navigation bar ends-->

<div id="sidebar"><!--Sidebar begins-->
<br />
<br />
<div style="width:110px; height:250px; padding: 2px; border: thick outset #CCCC99;">
<p class="boldtext"><span style="text-decoration:underline">Notes</span></p>
<p class="sidetext"><br />Notes.<br /><br />Notes.<br /><br /></p>
</div>
</div><!--Sidebar ends-->

<div id="main"><!--Main content area begins-->
<p class="boldtext">Welcome!</p><br />
<p class="text">written text here. written text here. written text here.written text here.</p>

<br />
<hr />
<br />
<br />

<div id="left">
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<!--end left--></div>
<div id="right">
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<!--end right--></div>

<div id="center">
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<!--end center--></div>

<br />
</div><!--End of main content area-->

<div id="footer"><!--Footer begins-->
<hr />
<div id="footermenu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#" >Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul><br style="clear: left" />
</div>
<br />

<p class="copy">© 2008 Name</p>
<br />
</div><!--Footer ends-->
<br />
</div>
</body>
</html>

here is the css:

/* CSS File */

*
{
margin:0;
padding:0;
}

/*Wrapper contains all of the information on the page*/
#wrapper
{

/* Set layout width */
width:70em;
/* Center the layout */
margin:auto;
background-color:#ffffff;
border:thin solid #003399;
padding: 0;
position: relative;
}

/*Style for header div*/
#header
{
margin: 0;
padding: 10;
width: 100%;





}

/*Style for navigation bar div*/
#navbararea
{
margin: 0;
padding: 0;
width: 100%;
}


/* Style for main content column */
#main
{
margin: 1em;
/*margin-left must equal total width of left sidebar*/
margin-left: 11em;
}
#left {
width: 33%;
float: left;

}
#right {
width: 33%;
float: right;

}
#center {
margin: 0 0 0 33%;

}
.normal_new {
display: inline;
padding: 2px 8px;
}


/* Style for sidebar column */
#sidebar
{
float: left;
display: inline;
padding: 1em;
margin: 1em;
width: 9em;
/*Total width is 11em */
}


/*Style for footer section*/
#footer
{
clear: both;
width: 100%;
}



/*---------------------------------------------------*/

/* Body text and page background */
body
{
margin: 0;
padding: 0;
font-family: arial, helvetica,sans-serif;
font-size: 78%;
color: #000000;
background-color: #CCCCCC;

}

/*Header text and background*/
table.name2
{
width: 100%;
margin: 0;
padding: 0;


}

td.name
{
font-family: 'times new roman',times,serif;
font-size: 1.7em;
color: #333333;
padding: 6px;
background-color:#2e9fa1;
font-weight: bold;
}

td.name1
{
padding: 2px;
background-color:#2e9fa1;
}


/*Style for navigation bar div*/
#navbar
{
margin-left: 2px;
margin-right: 2px;
height: 2em;
background-color: #0066CC;
font-family: arial,helvetica,sans-serif;
font-size: .85em;
font-weight: bold;
line-height: 2em;

}

#navbar ul
{
list-style-type: none;
}

#navbar li
{
float:left;
}

/*Navigation bar links*/
#navbar li a
{
text-decoration: none;
display: block;
text-align: center;
outline-style: none;
width: 13em;
border-right: solid 1px #cccccc;
height: 2em;
}

#navbar li a:link
{
color: #ffffff;
background-color: #0066CC;
display: block;
}

#navbar li a:visited
{
color: #ffffff;
background-color: #0066CC;
display: block;
}

#navbar li a:hover
{
color: #ffffff;
background-color: #3399ff;

}

#navbar li a:active
{
color: #ffffff;
background-color: #0066CC;
}



/*Page title -- page name*/
h2
{
font-family: arial,helvetica,sans-serif;
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
color: #003399;
padding: 8px;
}

/*Normal body text for paragraph use*/
p,td.text
{
color: #333333;
font-size: 1em;
margin-left: 5px;
font-family: arial,helvetica,sans-serif;
vertical-align: top;
line-height:1.4em;
}

/*Heading for paragraph body text*/
p.boldtext
{
color: #003399;
font-size:1.2em;
margin-left: 5px;
font-family: arial,helvetica,sans-serif;
font-weight: bold;
}

/*SIDEBAR text for normal paragraph use*/
p.sidetext
{
color: #333333;
font-size: 1em;
margin-left: 2px;
font-family: arial,helvetica,sans-serif;
vertical-align: top;
line-height:1.4em;
}

/*Heading text for Links in main body text*/
td.maintitle
{
color: #333333;
font-size: 1em;
font-family: arial,helvetica,sans-serif;
vertical-align: top;
line-height:1.4em;
font-weight: bold;
padding: .7em;
margin: 1em;
}


/*Link styles in main body text*/
a.normal
{
font-family: arial,helvetica,sans-serif;
font-size: 1em;
font-weight: bold;
text-decoration: underline;
width: 100%;
line-height:2em;
}
a.normal:link
{
color: #663300;
}

a.normal:visited
{
color: #cc9966;
}

a.normal:hover
{
color: #663300;
text-decoration: none;
}

a.normal:active
{
color: #8B4513;

}


/*Line style for page divisions*/
hr
{
margin-left: 10px;
margin-right: 10px;
background-color: #CCCC99;
color: #CCCC99;
height: 2px;

}

br
{
line-height: 1em;
}



/***********************************************************************/
#footermenu
{
width: 100%;
height: 2em;
font-family: arial,helvetica,sans-serif;
font-size: .7em;
font-weight: bold;
}

#footermenu ul
{
list-style-type:none;
}

#footermenu li /*This makes the list horizontal*/
{
float:left;
}

/*Link styles for Bottom Navigation Bar*/

#footermenu li a
{

text-decoration: none;
text-align: center;
display:block; /*required to set width and height*/
height: 2em;
line-height: 2em;
outline-style: none; /*removes dotted border from Firefox*/
width: 14em;
}

#footermenu li a:link
{
color: #333333;
}

#footermenu li a:visited
{
color: #333333;
}

#footermenu li a:hover
{
color: #0066CC;
text-decoration: underline;
}

#footermenu li a:active
{
color: #0066CC;
text-decoration: none;
}

/*Style for copyright information*/
p.copy
{
font-family: 'times new roman',times,serif;
font-size: .9em;
float: left;
color: #333333;
text-decoration: none;
margin-left: 1em;
}
Rowsdower!
12-01-2008, 10:25 PM
Hello and welcome, jg2008. As an FYI, placing your code inside of [&CODE] [&/CODE] tags (remove the &'s within those brackets - they were only placed here to keep the tags from becoming active in this post) will make it much easier for us to read your post (and improve the chances that we can help you). As you'll probably also hear if I don't say it now, live links to your page(s) in question will greatly enhance things as well.
jg2008
12-01-2008, 10:40 PM
Thanks, Rowsdower!. I edited my post to include the code tags. Hopefully it will be easier to read now. :)
Excavator
12-02-2008, 01:24 AM
Hello jg2008,
The bit in red below must be a mistake?
<!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>
<title>Sample Page
</title>
<link rel="stylesheet" type="text/css" href="cssfile.html" />
</head>

<body>
<div id="wrapper">
<div id="header">


Do you have a link you can give us so we can see it live?
Rowsdower!
12-02-2008, 06:32 PM
Hello jg2008,
The bit in red below must be a mistake?
<!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>
<title>Sample Page
</title>
<link rel="stylesheet" type="text/css" href="cssfile.html" />
</head>

<body>
<div id="wrapper">
<div id="header">


Do you have a link you can give us so we can see it live?

That's a good catch. Maybe Geocities, IE7, and FF (when it's a local file) will correct your file extension to "css" rather than "html" but then FF doesn't correct published extensions? I'm just grasping at straws at this point though.

I don't know what your CSS looks like and I can't get at your images but skipping the CSS file yields what you see in the thumbnail below for me on FF. A live link would be best, but can we at least get the CSS? Pictures aside, is the thumbnail below the same thing you're seeing on FF when you upload?
jg2008
12-02-2008, 10:09 PM
Thanks for the replies. I have added the css to the original post.
I am sorry that I can't provide you with a link to a live page.

Excavator,
I did have the incorrect file extension.
I am going to verify whether or not this corrects the problem.

Rowsdower!,
Yes--That is exactly what the file looks like after I have uploaded it and view with Firefox.

Thank you again.
jg2008
12-03-2008, 09:25 PM
Sure enough, the problem was the incorrect file extension.
The page now displays in firefox, ie , and safari when I upload it to the server.
Clearly a rookie mistake!

Thanks so much for the help. :)

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum