/    Sign up×
Community /Pin to ProfileBookmark

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”><font 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>

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@CentauriMay 18.2007 — 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;
[COLOR="Red"]clear: both[/COLOR];
}[/CODE]


Cheers

Graeme
Copy linkTweet thisAlerts:
@mcubedmaauthorMay 18.2007 — 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!
Copy linkTweet thisAlerts:
@CentauriMay 18.2007 — 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>[/CODE]
×

Success!

Help @mcubedma spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...