CSS Forum

**Orodreth** · 11:38 AM

On this site: http://weyn.be, when you move your mouse over the links in the navigation menu, its background changes color. This goes perfectly well in Firefox, Opera and Internet Explorer, but IE's showing a 2px border on the right. Anyone got an idea on how to fix it?

The stylesheet's dynamic, so here are the versions for IE and the other browsers
layout.css (IE):

Code:

@media print{
  div.header{
    display:none;
  }

  div.menu{
    display:none;
  }

  div.balk{
    display:none;
  }

  div.bottom{
    display:none;
  }
}

@media screen{
  body {
    background:url(/images/background.jpg);
    color:#555753;
    margin:0;
  }

  #Container{
    margin:120px 10px 10px 160px;
  }

  div.header{
    height:66px;
    background-color:#4D2905;
    text-align:center;
    position:absolute;
    top:0;
    left:0;
    width:100%;
  }

  div.balk{
    height:30px;
    background-image:url(/images/balkachtergrond.png);
    text-align:center;
    position:absolute;
    top:66px;
    left:0;
    width:100%;
    padding:0;
  }

  div.menu{
    position:absolute;
    top:0;
    left:0;
    padding:96px 0 0 0;
    width:150px;
  }

  div.menu a{
    color:#fdef12;
    text-decoration:none;
    display:block;
    padding:0 0 0 2px;
    width:150px;
  }

  div.menu a:hover{
    background-color:#ae6a27;
  }

  div.menu ul{
    padding:5px 0 5px 0;
    width:100%;
    background-color:#4D2905;
    margin:0;
  }

  div.menu ul li a{
    padding:0 0 0 5px;
    width:145px;
  }

  div.menu ul li ul{
    padding-top:0;
  }

  div.menu ul li ul li a{
    padding:0 0 0 15px;
  }
  div.menu ul li ul li ul li a{
    padding:0 0 0 25px;
  }

  div.bottom{
    margin-left: 160px;
  }
}

@media screen, print{
  h1{
    font-weight:bold;
    font-style:italic;
    font-size:175%;
    text-align:center;
  }

  .block{
    display:block;
    padding:2px;
  }

  .preload{
    display:none;
  }

  a.nou{
    text-decoration:none;
  }

  ul.listing li{
    font-weight:bold;
  }

  ul.listing li ul li{
    font-weight:normal;
  }
}

Other Browsers:

Code:

@media print{
  div.header{
    display:none;
  }

  div.menu{
    display:none;
  }

  div.balk{
    display:none;
  }

  div.bottom{
    display:none;
  }
}

@media screen{
  body {
    background:url(/images/background.jpg);
    color:#555753;
    margin:0;
  }

  #Container{
    margin:120px 10px 10px 160px;
  }

  div.header{
    height:66px;
    background-color:#4D2905;
    text-align:center;
    position:absolute;
    top:0;
    left:0;
    width:100%;
  }

  div.balk{
    height:30px;
    background-image:url(/images/balkachtergrond.png);
    text-align:center;
    position:absolute;
    top:66px;
    left:0;
    width:100%;
    padding:0;
  }

  div.menu{
    position:absolute;
    top:0;
    left:0;
    padding:96px 0 0 0;
    width:150px;
  }

  div.menu:after{
    height:30px;
    content:url(/images/menubottom.gif);
  }

  div.menu a{
    color:#fdef12;
    text-decoration:none;
    display:block;
    padding:0 0 0 2px;
    width:148px;
  }

  div.menu a:hover{
    background-color:#ae6a27;
  }

  div.menu ul{
    padding:5px 0 5px 0;
    width:100%;
    background-color:#4D2905;
    margin:0;
  }

  div.menu ul li a{
    padding:0 0 0 5px;
    width:145px;
  }

  div.menu ul li ul{
    padding-top:0;
  }

  div.menu ul li ul li a{
    padding:0 0 0 15px;
    width:135px;
  }
  div.menu ul li ul li ul li a{
    padding:0 0 0 25px;
    width:125px;
  }

  div.bottom{
    margin-left: 160px;
  }
}

@media screen, print{
  h1{
    font-weight:bold;
    font-style:italic;
    font-size:175%;
    text-align:center;
  }

  .block{
    display:block;
    padding:2px;
  }

  .preload{
    display:none;
  }

  a.nou{
    text-decoration:none;
  }

  ul.listing li{
    font-weight:bold;
  }

  ul.listing li ul li{
    font-weight:normal;
  }
}