My CSS Navbar works in IE but Not Firefox! Help!

  • locust
  • Beginner
  • Beginner
  • User avatar
  • Posts: 44
  • Loc: Austin, TX

Post 3+ Months Ago

Here is the code for my navbar:

Code: [ Select ]
/* NAVIGATION */

#navigation {
    float: left;
    clear: left;
    width: 170px;
    height: 800px;
    text-align: left;
    border-right: 1px solid #000000;
    background-color:#CDB1A2;
}

#navigation ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#navigation ul a{
    display: block;
    width: 170px;
    height: 40px;
    line-height: 36px;
    color:#000000;
    text-decoration: none;
    background: url(images/new site/button.jpg) no-repeat left;
    text-indent: 35px;
}




#navigation a:hover{
background-position: right;
color: #fff;
}
  1. /* NAVIGATION */
  2. #navigation {
  3.     float: left;
  4.     clear: left;
  5.     width: 170px;
  6.     height: 800px;
  7.     text-align: left;
  8.     border-right: 1px solid #000000;
  9.     background-color:#CDB1A2;
  10. }
  11. #navigation ul {
  12.     margin: 0;
  13.     padding: 0;
  14.     list-style-type: none;
  15. }
  16. #navigation ul a{
  17.     display: block;
  18.     width: 170px;
  19.     height: 40px;
  20.     line-height: 36px;
  21.     color:#000000;
  22.     text-decoration: none;
  23.     background: url(images/new site/button.jpg) no-repeat left;
  24.     text-indent: 35px;
  25. }
  26. #navigation a:hover{
  27. background-position: right;
  28. color: #fff;
  29. }

HTML CODE EXAMPLE:

Code: [ Select ]
<div id="navigation">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About the School</a></li>
            <li><a href="company.html">About the Company</a></li>
            <li><a href="director.html">About the Director</a></li>
            <li><a href="classinfo.html">Class Information</a></li>
            <li><a href="contact.html">Contact Us</a></li>
            <li><a href="achievements.html">Achievements</a></li>
            <!--<li><a href="performances.html">Performances</a></li>-->
            <!--<li><a href="testimonials.html">Testimonials</a></li>-->
            <!--<li><a href="directions.html">Directions</a></li>-->
        </ul>
    <p class="centeredImage"><img src="images/new%20site/Alexis.jpg" alt="Ballet Dancer" border="0" align="middle" /></p>
        <!--<p id="address">4624 Burnet Road<br />Austin, TX 78756</p>-->
        <!--<p id="address">(512)762-4522<br />(512)451-2332</p>
        <p id="address"><a href="mailto:jenniferfelkner@hotmail.com">Email Us!</a></p>-->
    </div>
  1. <div id="navigation">
  2.         <ul>
  3.             <li><a href="index.html">Home</a></li>
  4.             <li><a href="about.html">About the School</a></li>
  5.             <li><a href="company.html">About the Company</a></li>
  6.             <li><a href="director.html">About the Director</a></li>
  7.             <li><a href="classinfo.html">Class Information</a></li>
  8.             <li><a href="contact.html">Contact Us</a></li>
  9.             <li><a href="achievements.html">Achievements</a></li>
  10.             <!--<li><a href="performances.html">Performances</a></li>-->
  11.             <!--<li><a href="testimonials.html">Testimonials</a></li>-->
  12.             <!--<li><a href="directions.html">Directions</a></li>-->
  13.         </ul>
  14.     <p class="centeredImage"><img src="images/new%20site/Alexis.jpg" alt="Ballet Dancer" border="0" align="middle" /></p>
  15.         <!--<p id="address">4624 Burnet Road<br />Austin, TX 78756</p>-->
  16.         <!--<p id="address">(512)762-4522<br />(512)451-2332</p>
  17.         <p id="address"><a href="mailto:jenniferfelkner@hotmail.com">Email Us!</a></p>-->
  18.     </div>
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6810
  • Loc: Martinsburg, WV

Post 3+ Months Ago

I tested this sample code in both IE7 and FF 3.0.5 and it appears the same to me.
Attachments:
ff.JPG

Firefox 3.0.5

Attachments:
ie.JPG

Internet Explorer 7

  • locust
  • Beginner
  • Beginner
  • User avatar
  • Posts: 44
  • Loc: Austin, TX

Post 3+ Months Ago

Yeah, that's because the style sheet isn't attached. I'm using an image for the rollover effect.

But you've never heard of any css problems with firefox before?
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

usually it's ie that makes the problems. it would be easier to check what's wrong if you gave us a link to a full live example to work with?
  • locust
  • Beginner
  • Beginner
  • User avatar
  • Posts: 44
  • Loc: Austin, TX

Post 3+ Months Ago

Ok. Here's a link to the website. Check it with IE and Firefox and you'll see what I mean.

http://www.austinclassicalballet.com/new/

Thanks.
  • locust
  • Beginner
  • Beginner
  • User avatar
  • Posts: 44
  • Loc: Austin, TX

Post 3+ Months Ago

Here's the style sheet I'm using.

/* BODY */

body, div, img, p, h1, h2, h3, ul, li { margin: 0; padding: 0; }

h1, h2, h3 { font-size: 100%; }

body {
background-color:#000000;
}

a { overflow: hidden; }


/* HEADER */

#header {
width: 650px;
height: 103px;
margin: 0px auto;
border-bottom: 1px solid black;
}

/*
h1 a {
width: 550px;
height: 65px;
display: block;
text-indent: -9999px;
}
*/
/* CONTENT */

#content {
width: 650px;
margin: 0 auto;
background-color:#ffffff;
}

/* CLASSINFO PAGE */

#classes li {
margin: 0 0 0 10px;
list-style-type: none;

}

#classes h3 {
/*font-size: 1.2em;*/
text-decoration: underline;
}

#achievements li {
margin: 0 0 0 20px;
list-style-type: disc;
}

/* MAIN */

#main {
float: right;
width: 478px;
height: 800px;
background-color: #FFFFFF;
padding: 0 1px 0 0;


}

#maintext {
font-family: Garamond, Verdana, Arial, sans-serif;
font-size:18px;
text-align:left;
}

#maintext p {
/* text-indent: 1.25em; */
text-indent: .25em;
line-height: 1.3em;
/*margin: 1em 0;*/
margin: 0 0 0 5px;
}

.centeredImage {
text-align:center;
margin-top:5px;
margin-bottom:0px;
padding:0px;
}

#address {
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
padding: 0px;
}

/* PAGE TITLES */

#pagetitle {
font-family:Garamond, Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
text-align: left;
padding: 0 0 0 5px;
margin: 0 0 10px 0;
border-bottom: 1px solid #666666;
}


/* NAVIGATION */

#navigation {
float: left;
clear: left;
width: 170px;
height: 800px;
text-align: left;
border-right: 1px solid #000000;
background-color:#CDB1A2;
}

#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navigation ul a{
display: block;
width: 170px;
height: 40px;
line-height: 36px;
color:#000000;
text-decoration: none;
background-image: url(images/new site/button.jpg) no-repeat left;
text-indent: 35px;
}

#navigation a:hover{
background-position: right;
color: #fff;
}




/* FOOTER */

#footer {
font: 0.77em Garamond, Verdana, sans-serif;
color:#FFFFFF;
width: 650px;
/*height: 12px; */
margin: 0 auto;
padding: 3px 0 0;
text-align: center;
clear: both;
}


#footer a{
color:#FFFFFF;
text-decoration: none;
}
  • locust
  • Beginner
  • Beginner
  • User avatar
  • Posts: 44
  • Loc: Austin, TX

Post 3+ Months Ago

I solved the issue by the following:

This is defined wrong in the #navigation ul statement:
background-image: url(images/new site/button.jpg) no-repeat left;

Here's the correct definition:
background-image: url(images/button.jpg);
background-repeat:no-repeat;
background-position: left;

Now it works in both IE and Firefox.
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6254
  • Loc: Seattle, WA

Post 3+ Months Ago

You can still combine the three background attributes; just use 'background' instead of 'background-image', put single quotes around the image filename, and switch your ordering slightly:

Code: [ Select ]
background: url('images/new site/button.jpg') left no-repeat;

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 32 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.