SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    ottawa
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page doesn't display the same in Firefox as in Opera/IE6

    OK,

    So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks!

    URL: http://www.raisetheratesottawa.org/xhtml/

    ==========
    Style Sheet:
    ==========

    HTML {
    PADDING-RIGHT: 0px;
    MARGIN-TOP: 0px;
    PADDING-LEFT: 0px;
    BACKGROUND-COLOR: #FF99CC;
    MARGIN-BOTTOM: 20px;
    PADDING-BOTTOM: 0px;
    COLOR: #000000;
    PADDING-TOP: 0px
    }
    BODY {
    PADDING-RIGHT: 0px;
    MARGIN-TOP: 0px;
    PADDING-LEFT: 0px;
    BACKGROUND-COLOR: #FF99CC;
    MARGIN-BOTTOM: 20px;
    PADDING-BOTTOM: 0px;
    COLOR: #000000;
    PADDING-TOP: 0px
    }


    #upper {
    width:700px;
    margin:0px auto;
    text-align:left;
    padding: 0px;
    border: 5px solid #FFFFFF;
    BACKGROUND-COLOR: #000000;
    PADDING-RIGHT: 0px;
    MARGIN-TOP: 0px;
    PADDING-LEFT: 0px;
    MARGIN-BOTTOM: 10px;
    PADDING-BOTTOM: 0px;
    PADDING-TOP: 0px
    }


    /* Horizontal nav */

    #menu {
    width:700px;
    margin:0px auto;
    padding: 0;
    }

    #menu ul {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    clear: left;
    }

    #menu ul li {
    display: block;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
    }

    #menu ul li a {
    background: #000000;
    width: 175px;
    /* was 'height: 2em; */
    height: 24px;
    padding: 0;
    /* was 'margin: 0 0 10px 0;
    ' this affects the margin between upper menus*/
    margin: 0 0 0 0;
    color: #FF0000;
    text-decoration: none;
    display: block;
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
    /* was 'line-height: 2em; */
    line-height: 24px;
    /* was 'font-size: x-small;
    ' */
    font-size: 10px;
    font-size: 10px;
    /* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/
    }




    #menu ul li#one {
    width: 46px;
    }
    #menu ul li#two a {
    width: 154px;
    }
    #menu ul li#three a {
    width: 105px;
    }
    #menu ul li#four a {
    width: 85px;
    }
    #menu ul li#five a {
    width: 56px;
    }
    #menu ul li#six a {
    width: 57px;
    }
    #menu ul li#seven {
    width: 147px;
    }


    #menu ul li a:hover {
    color: #000000;
    background: #FF0000;
    }

    #menu a:active {
    background: #c60;
    color: #fff;
    }


    #content {
    width:700px;
    margin:0px auto;
    text-align:left;
    padding:0px;
    border:5px solid #FFFFFF;
    background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC;
    }


    ==========
    Page:
    ==========


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <title>Test</title>

    <link rel="stylesheet" href="graph/rtrcss2.css" type="text/css" />

    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta name="ROBOTS" content="No Index" />
    <meta name="Copyright" content="Copyright (c) 2004" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="MSSmartTagsPreventParsing" content="true" />

    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <link rel="help" href="about.php" title="Site info." />

    <meta name="Rating" content="General" />
    <meta name="revisit-after" content="2 Days" />
    <meta name="doc-class" content="Living Document" />


    </head>

    <body>

    <div id="upper">

    <div id="header">
    <img src="graph/top-right2.jpg" width="700" height="78" alt="" />
    </div>

    <div id="menu"><ul>
    <li id="one">&nbsp;</li>
    <li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li>
    <li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li>
    <li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li>
    <li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li>
    <li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li>
    <li id="seven">&nbsp;</li>
    </ul></div>
    </div>


    <div id="content">
    <p>Here is some text</p>
    <p>Here is some more text </p>
    </div>



    </body>
    </html>

  2. #2
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made your links absolute and put the css into the html for my convenience. Don't forget to change 'em back again
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
        <title>Test</title>
    
    <!--<link rel="stylesheet" href="rtrcss20.css" type="text/css" />-->
    
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta name="ROBOTS" content="No Index" />
    <meta name="Copyright" content="Copyright (c) 2004" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    
    <link rel="help" href="about.php" title="Site info." />
    
    <meta name="Rating" content="General" />
    <meta name="revisit-after" content="2 Days" />
    <meta name="doc-class" content="Living Document" />
    
    <style type="text/css" >
    
    body {
    	padding: 0px;
    	margin-top: 0px;
    	background-color: #f9c;
    	margin-bottom: 20px;
    	color: #000;
    	text-align:center;/*takes advantage of ie5 bug */
    }
    
    #upper {
    	width:700px;
    	margin:0 auto 10px;
    	padding:0;
    	text-align:left;/*correct the alignment*/
    	border: 5px solid #fff;
    	background: #000;
    }
    
    /*  horizontal nav */
    
    #menu {
    	width:700px;
    	height:1.5em;
    	margin:0 auto;
    }
    
    #menu ul {
    	margin:0;
    	padding:0;
    	list-style-type: none;
    	text-align:center;
    	clear:left;
    	}
    
    #menu ul li {
    	display:block;
    	float: left;
    	text-align: center;
    	padding:0;
    	margin:0;
    	}
    
    #menu ul li a {
    	background: #000;
    	width: 175px;
    	height: 24px;
    	padding:0;
    	margin: 0;
    	color: #f00;
    	text-decoration: none;
    	display: block;
    	text-align: center;
    	font-weight: bold;
    	letter-spacing: 1px;
    
    	line-height: 24px;
    
    	font-size: 10px;
    	font-size:    10px;
    
    	}
    
    #menu ul li#one 	{
    	width: 46px;
    	}
    #menu ul li#two a	{
    	width: 154px;
    	}
    #menu ul li#three a	{
    	width: 105px;
    	}
    #menu ul li#four a	{
    	width: 85px;
    	}
    #menu ul li#five a	{
    	width: 56px;
    	}
    #menu ul li#six a	{
    	width: 57px;
    	}
    #menu ul li#seven 	{
    	width: 147px;
    	}
    
    #menu ul li a:hover {
    	color:#000;
    	background:#f00;
    	}
    
    #menu a:active	{
    	background: #c60;
    	color: #fff;
    	}
    
    #content {
    	width:700px;
    	margin:0 auto;
    	text-align:left;
    	padding:0px;
    	border:5px solid #fff;
    	background: url(rtr-logo.gif) #f9c;
    	}
    </style>
    </head>
    
    <body>
    
    <div id="upper">
    
    <div id="header">
    <img src="top-righ.jpg" width="700" height="78" alt="" />
    </div>
    
    <div id="menu"><ul>
    	<li id="one">&nbsp;</li>
    	<li id="two"><a href="http://www.raisetheratesottawa.org/xhtml/link1.php" title="Link 1.">Link 1</a></li>
    	<li id="three"><a href="http://www.raisetheratesottawa.org/xhtml/link2.php" title="Link 2.">Link 2</a></li>
    	<li id="four"><a href="http://www.raisetheratesottawa.org/xhtml/link3.php" title="Link 3.">Link 3</a></li>
    	<li id="five"><a href="http://www.raisetheratesottawa.org/xhtml/link4.php" title="Link 4.">Link 4</a></li>
    	<li id="six"><a href="http://www.raisetheratesottawa.org/xhtml/link5.php" title="Link 5.">Link 5</a></li>
    	<li id="seven">&nbsp;</li>
    </ul></div>
    </div>
    
    
    <div id="content">
    	<p>Here is some text</p>
    	<p>Here is some more text </p>
    </div>
    
    
    
    </body>
    </html>
    <!-- This document saved from [url]http://www.raisetheratesottawa.org/xhtml/[/url] -->

  3. #3
    SitePoint Member
    Join Date
    Aug 2004
    Location
    ottawa
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey this works like a charm. Now to get down to sprucing it up a bit Thanks a bunch jfitz!


Bookmarks

Posting Permissions

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