Member Avatar for ben.matthews18

Hi, i'm having a problem with the 'margin-top' property. Here's my current html and css -

HTML -

<div id="nav"> <div id="navwrap">
     <ul>
           <li><a href="index.php"><img src="images/frame/homebtn.gif" width="63" height="20" /></a></li> 
           <li><a href="portfolio.php"><img src="images/frame/portfoliobtn.gif" width="93" height="20" /></a></li> 
           <li><a href="contact.php"><img src="images/frame/contactbtn.gif" width="84" height="20" /></a></li>
        </ul> </div>
   </div>

CSS -

#nav{
    width:100%;
    height:70px;
    background-image:url(../images/frame/nav_1.gif);
}

#navwrap{
    margin-left:76px;
    margin-top:15px;


}

Everytime i add the 'margin-top:15px' to the 'navwrap' div it applies it to the 'nav' div.

Any ideas?

Thanks

Edited by ben.matthews18
  • 3 Contributors
  • 4 Replies
  • 108 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by dcdruck
Member Avatar for dcdruck

It seems like it is working fine to me. I tried it on jsfiddle and locally and in neither case is it applying the margin to div#nav. I applied a border to each div in order to make it more clear. http://jsfiddle.net/dcdruck/gU6t9/1/ What browser are you using? I'm using Chrome.

Edited by dcdruck because: Updated link
Member Avatar for ben.matthews18

thanks for your quick reply i tried it in firefox and ie and they are applying it to the #nav :/

Member Avatar for JorgeM

The fiddle example looks OK from IE9 and Chrome.

Member Avatar for dcdruck

I've tried it in Firefox (latest), Chrome (latest), IE 9 (including IE 8 and 7 modes of IE 9, and IE 6 and it all seems to look fine. Maybe you can try explicitly adding margin:0; to the style for #nav and see if that helps your situation.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.