div wrap not working on IE pc

[jillcary]

I'm currently learning css on the mac but am obviously testing my site on both the mac and pc.

I've got a div wrap which looks fine in firefox both on the mac and pc but not in IE on the pc. What have I done wrong?

Code: Select all

<div id="wrap_services">
<div class="navigation">
  <div align="right"><a href="goldenballhome.html">Home</a> | <a href="services.html">Services</a> | <a href="clientlist.html">Client List</a> | <a href="contact.html">Contact</a> | <a href="testimonials.html">Testimonials</a></div>
</div>
<div class="navigation2">
  <div align="right"><a href="services_incentives.html" class="style2">Incentives</a> 
    | <a href="services_eventman.html" class="style2">Event Management</a> | <a href="services_corphosp.html" class="style2">Corporate Hospitality</a></div>
</div>
<div class="services_copy">
  <h>Services</h>
  <p>Powerful, Bespoke Incentive Platforms</p>
  <p>Innovative, Proficient and highly personalised Event Management</p>
  <p>First Class, VIP Hospitality Experiences</p>
  </div>
  <div class="logo"><img src="http://www.webforumz.com/images/goldenball_logo.jpg" alt="goldenball_logo" /></div>
</div>

---------

Code: Select all

#wrap_services {
    width: 780px;
    height: 400px;
    border: 2px solid;
    border-color: #ccc;
    padding: 00px;
    background: #fff;
    background-image: url(images/services_sm.jpg); 
    background-repeat: no-repeat;
    background-position: 0px 0px;
    margin:40px auto;
    }

.navigation {
    float: left;
    width: 310px;
    height: 15px;
    margin:22px 0px 0px 448px;
    font-family: arial, helvetica, sans-serif;
    font-size: 75%;
    color: #f90;
}


.navigation2 {
    float: left;
    width: 310px;
    height: 15px;
    margin:10px 0px 0px 448px;
    font-family: arial, helvetica, sans-serif;
    font-size: 75%;
    color: #666;
}

.logo {
    float: left;
    width: 170px;
    height: 100px;
    margin: 0px 0px 0px 0px;
    position: relative;
    top: 280px;
    left: 220px;
}

.services_copy {
    float: left;
    width: 390px;
    position: relative;
    top: 55px;
    left: 365px;
    font-family: arial, helvetica, sans-serif;
    font-size: 85%;
    color: #666;
}

.services_copy h{
    font-family: arial, helvetica, sans-serif;
    font-weight: bold;
    font-size: 120%;        
    color: #666;
    }

[karinne]

Is it possible to have a link? That way we can SEE right away what's happening

[jillcary]

http://www.blazedevelopment.net/gold...nballhome.html

[karinne]

Wow ... alot of relative positioning ... that might be your problem. Try removing that.

[karinne]

And I'm assuming it's a typo but there is no such thing as an h element

Code: Select all

<h>home page</h>

You were maybe thinking of using an <h1> or <h2>?

[karinne]

Ok ... you're problem with with the .navigation and .navigation2 classes.

The margin-left: 448px is what's throwing everything off.