CSS Forum

**michelle1908** · 05-06-2007, 08:34 AM

Getting the css right so it works in Mozilla and IE is sooo trying my patience. This site looks fine in IE, but it shifted in Mozilla. Any help you can give me is greatly appreciated.

CSS - let me know if you need more. I think these are the culprits.

Code:

.topnav {
    border-top: 1px solid #cccc99;
    background-color: #C2A14D;
    width: 100%;
    height:23px;
    color: #f7f7f7;
    letter-spacing: 1px;
    font: 12px trebuchet, verdana, sans-serif;
    display: block;
    }

.content {
    width: 100%;
    padding: 20px;
    background: white url("../images/leftborder.png") top left repeat-y;
    }

.maincontent {
    margin-left: 200px;
    width:; 630px;
    }

.sidenav {
    width: 180px;
    float: left;
    font: 11px trebuchet, verdana, sans-serif;
    color: #450084;
    }

HTML

Code:

<body>
<div class="wrap">
  <div class="masthead">James Madison University Black Alumni Chapter</div>
<div class="topnav"><ul>
      <li><a href="index.htm">BAC HOME</a></li>
      <li><a href="contactus.htm">CONTACT US</a></li>
      <li><a href="http://www.jmu.edu/alumni/" target="_blank">JMU 
        ALUMNI</a></li>
      <li><a href="http://www.jmu.edu" target="_blank">JMU HOME</a></li>
      
    </ul></div>
<div class="content">
      <div class="sidenav">
      <ul>
        <li><a href="aboutus.htm">About Us</a></li>
        <li><a href="leadership.htm">BAC Leadership</a></li>
        <li><a href="presidentscorner.htm">President's Corner</a></li>
        <li><a href="diversity.htm">Diversity at JMU</a></li>
        <li><a href="getinvolved.htm">Get Involved</a></li>
        <li><a href="mentoring.htm">Become a Mentor</a></li>
        <li><a href="meetings.htm">Meetings</a></li>
        <li><a href="events.htm">Events</a></li>
        <li><a href="career.htm">Employment and Career Resources</a></li>
        <li><a href="http://www.jmu.edu/alumni/address_update/" target="_blank">Address 
          Update</a></li>
        <li><a href="scholarship.htm">Give to the BAC Scholarship</a></li>
        <li><a href="scrapbook.htm">BAC Scrapbook</a></li>
      </ul>
    </div>
      
    <div class="maincontent"> <!-- TemplateBeginEditable name="body" -->
      <h2>In the News</h2>
      <h3>Get the New JMU License Plate!</h3>
      <p>The sale of license plates help raise money for JMU student 
        scholarships. <a href="#">Buy yours today!</a></p>
      <p align="left"><img src="../images/2_new_plates2.jpg" width="300" height="120"></p>
      <hr>
      <h2>Get Involved with the BAC</h2>
      <h3>Mentoring Program</h3>
      <p>Become a MENTOR to JMU students. The Black Alumni Chapter 
        Mentoring Committee is still in need of alumni to serve 
        as mentors. As a mentor, we are looking for interested 
        person to reach out to our students and foster positive 
        relationships that will ultimately assist with the retention 
        and matriculation of African American students enrolled 
        at JMU. <a href="#">Learn More...</a></p>
      <hr>
      <h3>Black Alumni Chapter Scholarship</h3>
      <p>Help an African-American student at JMU by giving to 
        the BAC SCHOLARSHIP. The JMU Black Alumni Chapter Scholarship 
        is awarded annually to deserving African-American freshmen 
        at JMU. <a href="#">Learn more...</a></p>
      <!-- TemplateEndEditable --></div>   
</div>

  <div class="footer"><a href="mailto:info@simplifyourspace.com">Contact 
    the Webmaster</a> | <a href="mailto:jmubac@yahoo.com">Contact 
    Us with General Questions</a> | <a href="mailto:BlackAlumniChpt@alumni.jmu.edu">Email 
    the President</a></div>
</div>
</body>

**LadynRed** · 05-06-2007, 12:13 PM

You need to change your design strategy. Make it work in FF FIRST, then you spank IE until it behaves. Trust me, you'll save yourself a lot of stress and hair pulling if you go about it that way as opposed to making it work in IE first

One thing you need to do is clear the float that you have in #topnav. You'll need a clearing element just AFTER the closing div tag.

To pull your top nav up, you need to add margin: 0 and padding:0 to .topnav ul

To pull .content back where it belongs, remove the width: 100% - you don't need it anyway. If you don't specify a width other than 100%, the element is going to take up whatever space it has left inside it's parent container. I noticed you have width: 100% all over the place, mostly not necessary.

For the clearing element, I find this method works very well and has no cross-browser issues:

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
Then add <br class="brclear"> to your html.