Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Page displays in IE and Safari but not Firefox

    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.

    Code:
     <!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:
    Code:
    /* 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;
    }
    Last edited by jg2008; 12-02-2008 at 09:55 PM. Reason: added css

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks, Rowsdower!. I edited my post to include the code tags. Hopefully it will be easier to read now.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jg2008,
    The bit in red below must be a mistake?
    Code:
     <!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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    jg2008 (12-03-2008)

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Excavator View Post
    Hello jg2008,
    The bit in red below must be a mistake?
    Code:
     <!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?
    Last edited by Rowsdower!; 03-03-2009 at 07:00 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    jg2008 (12-03-2008)

  • #6
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •