HI all, I was wondering how to fix the following code as the menu lose its format in FF and Chrome.

The menu its inside of a div class header, and inside there are three elements, logo,description, and the menu which its made up of ul,li elements. It looks fine on IE7 but it losses all format in other browsers.

Can anybody help?

Thanks in advance.

Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
    border:none 0px transparent;
}

#heading{
    width: 600px;
   height:auto; 
    margin: 0 auto;
    background-color:#FFFFFF;
    margin-top:5px;
    margin-bottom:5px;
    display:block;
}
#imglogo{
 float:left;

}

#barDescription{
    float:right;


}
#navigation{
    text-align: right;
    margin-top: 70px;


}

#navigation li{
    float: right;
    display: block;
    text-align: center;
    list-style-type: none;


}
#navigation li a{

    color:#A08019;
    background-image: url('Images/Menu1.png');
    background-repeat:repeat-x;
    background-position: center center;
    text-decoration:none;   
    font-weight:bold;
    display: block;
    height:25px;
    vertical-align:middle;
    padding-right:10px;
    padding-left:10px;


}


#content {
    width: 600px;
    height:600px;
    margin: 0 auto;
    background-color:#E9E2CB;
    padding:5px;
    margin-top:5px;
    margin-bottom:5px;

}
#fotter{
        width: 600px;
    height:80px;
    margin: 0 auto;
    background-color:#FFFFFF;
    padding:5px;
    margin-top:5px;
    margin-bottom:5px;
}

body{
 background-color:#E9E2CB;
}

h4{
    color:#B39A48;
}

h5{
    color:#B39A48;
}

</style> 
</head>

<body>
<div id="heading" >
<div id="imglogo">
    <img id="logo" src="Images/logo.png" alt="logo" />
</div>
<div id="barDescription">
<h4>Especialidad en tapas,vinos y menus</h4>
<h5>Restaurante de cocina creativa tradicional. Vinos y tapas</h5>
</div>


<ul id="navigation">
<li><a href="#">Contacto</a></li>
<li><a href="#">Ubicacion</a></li>
<li><a href="#">Reservas</a></li>
<li><a href="#">Menus</a></li>
<li><a href="#">Local</a></li>
</ul>

</div>
<div id="content">

</div>
<div id="fotter"></div>

</body>

</html>

2 answers

KC Rajput 178
1
point
This was chosen as the best answer

try this css

  #navigation{
        text-align: right;
        margin-top: 70px;
    }
  #navigation ul{
      float:right;
      margin:0;
      padding:0;
   }

    #navigation li{
        float: right;
        display: block;
        text-align: center;
        list-style-type: none;
    }
    #navigation li a{
        color:#A08019;
        background-image: url('Images/Menu1.png');
        background-repeat:repeat-x;
        background-position: center center;
        text-decoration:none;   
        font-weight:bold;
        display: block;
        height:25px;
        vertical-align:middle;
        padding-right:10px;
        padding-left:10px;}

html

<div id="navigation">
<ul>
<li><a href="#">Contacto</a></li>
<li><a href="#">Ubicacion</a></li>
<li><a href="#">Reservas</a></li>
<li><a href="#">Menus</a></li>
<li><a href="#">Local</a></li>
</ul>
</div>
Answered over 6 years ago by KC Rajput
  • Hey, Thank for that, would you mind to give a short explanation. Once again. Thanks a lot. ErCesar over 6 years ago
0
points

Just add this below your css code and problem fixed :)

CSS:

#heading { overflow: hidden }
Answered over 6 years ago by cssrockstah