www.webdeveloper.com
Results 1 to 4 of 4

Thread: Navbars Working In IE, Not Safari or Firefox

  1. #1
    Join Date
    May 2007
    Posts
    14

    Question Navbars Working In IE, Not Safari or Firefox

    Can you please look at the following CSS and html? The Navbars work finr in IE, but do not display in the right place in Safari and Firefox. I've looked over the code and tried to play with it for the past 2 days and cannot figure it out. Thank you in advance.

    CSS:
    body{
    margin:0;
    padding:0;
    font-family: Papyrus, Comic Sans MS, Cursive;
    font-size: 14px;
    font-weight: 600;
    color: navy;
    background: #C0C0C0;
    }

    b{font-weight: 900; font-size: 15px;}
    em{color: white}
    li{ list-style: square inside }
    strong{color: #400080;font-weight: 900; font-size: 17px;}
    i{font-variant: small-caps;}

    #maincontainer{
    width: 840px; /*Width of main container*/
    margin: 0 auto; /*Center container on page, this is the main box on the site*/
    ;}

    #upperright {
    float: right;
    background: #80FF80;
    height: 130px; /*Height of top section*/
    width: 50%;
    background-image: url(../../../Users/Mary/gunpowder.quaker.org/logosmaller.gif);
    background-repeat: no-repeat;
    text-align: center;}

    #upperleft {
    float: left;
    background: #80FF80;
    height: 130px;
    width: 50%;
    font-size: 14px;
    }

    #rightcontainer{
    float: right;
    width: 30%;
    height: 400px;
    background: white;
    } /*this is the right side container*/

    #contentcolumn{
    margin-left: 2px; /*Set left margin to LeftColumnWidth*/
    }

    #leftcontainer{
    float: left;
    width: 70%; /*Width of left column*/
    height: 400px;
    background: white;
    }

    #footer{
    clear: left;
    width: 100%;
    background: #8080FF;
    text-align: center;
    padding: 4px 0;
    }

    #navbar2 {height: 30px;
    width: 100%;
    border-top: solid #000 5px;
    border-bottom: solid #000 5px;
    background-color: #8080FF;
    text-align: center;
    }
    #navbar2 ul {
    margin: 0px;
    padding: 0px;
    font-family: Papyrus, Comic Sans MS, Cursive;
    font-size: 12px;
    font-weight: 600;
    color: white;
    line-height: 30px;
    white-space: nowrap;
    }
    #navbar2 li {
    list-style-type: none;
    display: inline;
    }
    #navbar2 li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #FFF;
    }
    navbar2 lia:link {
    color: #FFF:
    }
    #navbar2 lia:visited {
    color: #CCC;
    }
    #navbar2 lia:hover {
    font-weight: bold;
    color: #FFF;
    background-color: #3366FF;
    }

    ul.navbar {
    position: absolute;
    list-style-type: none;
    padding: 0;
    margin: 0;
    }
    ul.navbar li {
    background: white;
    list-style-type: none;
    text-decoration: underline;
    color: blue;
    }
    ul.navbar a {
    text-decoration: underline; }
    a:link {
    color: blue
    }
    a:visited {
    color: blue }

    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }

    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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title>Gunpowder Friends Meeting -- About Us</title>
    <link rel="stylesheet" type="text/css" href="quakermain.css"/>

    </head>
    <body>
    <div id="maincontainer">

    <a href="index.html"><div id="upperright"></div></a>
    <div id="upperleft">Gunpowder Friends Meeting<br>14834 Priceville Road<br>
    Sparks, MD 21152<br>410-472-4583<br>
    <a href="http://www.mapquest.com/directions/main.adp?2a=14934+Priceville+Rd&amp;2c=Sparks&amp;2s=MD&amp;2z=21152&amp;2y=US&amp;cid=lfddlink"><fo nt face="Papyrus" color="#000080" size="3"><strong><font><u>Directions To Gunpowder Friends</u></font></strong></font> </a></div>

    <div id="navbar2">
    <ul>
    <li><a href="AboutUs.html"><font color="#FF0000">About Us</font></a></li>
    <li><a href="Worship.html">Worship</a></li>
    <li><a href="NewsCalendar.html">Newsletter/Calendar</a></li>
    <li><a href="Quakerism101.html">Quakerism 101</a></li>
    <li><a href="MemberLogin.html">Member &amp; Attender Login</a></li>
    </ul>
    </div>

    <div id="rightcontainer">
    <br><br><br>
    <img src="dottedline.gif" width="5" height="243" alt="" border="0" align="">
    <ul class="navbar">
    <b><li><li><a href="contacts.html">Contacts</a>
    <li>
    <li><a href="GunpowderHistory.html">Gunpowder History</a>
    <li>
    <li><a href="OpeningExercises.html">Opening Exercises</a>
    <li>
    <li><a href="Images.html">Images of Gunpowder</a>
    </li></b>
    </ul>
    </div>

    <div id="leftcontainer">
    <div class="innertube">
    <br>
    <p><strong>Welcome!</strong></p>

    <p><b><font color="#400080">We're glad you stopped by!</font></b></p>
    <p>
    We invite you to join us for Meeting for Worship at 11:00 am each First Day (that's Sunday in Quakerspeak). First Day School for children (during the school year) or child care (in the summer) are provided, beginning at 11:15am. Children generally spend the first 15 minutes of worship with their parents then depart with the First Day School teachers. Gunpowder Friends Meeting is an unprogrammed and mostly silent form of worship, one of the several contemporary strands of Quakerism. For those who long for song, Bible study, animated discussions of social justice and other issues, deeply shared spiritual journeys, or deep respite, we offer such opportunities as Opening Exercises, Bible Study, Forum, Spiritual Formation, Silent Retreat at the Meetinghouse, Quakerism studies, and other activities.
    </p>
    </div>
    </div>

    <div id="footer"><em>Gunpowder Friends is a community grounded in Quaker Practice, rooted in Christian Faith, and growing through its commitment to the ongoing spiritual lives of its members and attenders</em></div>





    </div>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    The two elements above the nav bar are floated and out of the document flow - clearing the floats positions the nav bar correctly below them :
    Code:
    #navbar2 {
    	height: 30px;
    	width: 100%;
    	border-top: solid #000 5px;
    	border-bottom: solid #000 5px;
    	background-color: #8080FF;
    	text-align: center;
    	clear: both;
    }
    Cheers
    Graeme

  3. #3
    Join Date
    May 2007
    Posts
    14

    Thanks - that worked, but still one issue

    Thanks very much. That worked for the horizontal nav bar. Is there something that I need to do for the vertical navbar in the right container? Thanks for looking at it!

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    You have some errors not closing the <li>s on that menu - try
    Code:
    <ul class="navbar">
    <b><li><a href="contacts.html">Contacts</a>
    </li>
    <li><a href="GunpowderHistory.html">Gunpowder History</a>
    </li>
    <li><a href="OpeningExercises.html">Opening Exercises</a>
    </li>
    <li><a href="Images.html">Images of Gunpowder</a>
    </li></b>
    </ul>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles