Incompatibility with browsers IE and Firefox at least

I have a webpage. My problem is that I see it different depending the browser. Here you have some screenshots explaining the problems:

Chrome:

http://airsimmers.com/Chrome.PNG

That is perfect. I see the header menu well and wel the borders on the dropdown menu in use.

Firefox:

http://airsimmers.com/firefox.PNG

With firefox I don't see the top menu (Can be for a bad performance of the overflow:hidden). And if you see the borders on the dropdown menu are bad. And the dropdown is separeted to the navigation bar. I think the problem is in the margins (you will see it in the code).

Internet Explorer:

http://airsimmers.com/IE.PNG

With IE I see the top bar but the borders on the dropdown menu are bad. And the dropdown is also separated from the navigation bar (Less than firefox).

Here you have the code:

index.php:

    <!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" xml:lang="en" lang="en">
    <head>
        <link type="text/css" rel="stylesheet" href="./lib/css/layout.css" media="all"/>
    </head>

    <body>

    <div id="headerbar">
        Hello World
    </div>

    <div id="mainmenu-bar">
        <div id="mainmenu-content">
            <img src="./lib/images/logo.png" height="75" width="75" style="float:left;margin-top:5px;"/>
            <h1 style="color:white; float:left; margin-bottom:0px; display:inline-block;">X-Sky</h1>

            <div id="mainmenu">
                <ul>
                    <li>
                        <a href="#">Inicio</a>
                    </li>
                    <li>
                        <a class="menuitem" href="#">Acerca de</a>
                            <ul>
                                <li><a href="#">Producto</a></li>
                                <li><a href="#">Nosotros</a></li>
                            </ul>
                    </li>
                    <li>
                        <a class="menuitem" href="#">Servicios</a>
                        <ul>
                            <li><a href="#">Servicio uno</a></li>
                            <li><a href="#">Servicio dos</a></li>
                            <li><a href="#">Servicio tres</a></li>
                            <li><a href="#">Servicio cuatro</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="content">
        <h1 color="white">Hello World</h1>
    </div>

    </body>
</html>

layout.css

@font-face{font-family: Maven Pro; src: url(../fonts/MavenPro-Regular.ttf);}

body{font-family:Maven Pro; background:#ECECEC; border:0; font-size:100%; vertical-align:baseline; margin:0; padding:0;}

#headerbar{height:30px; float:right; margin-right:20px; margin-top:5px;}

/*MAIN MENU BAR*/
#mainmenu-bar{background:#4C84BC; width:100%; height:90px; overflow: hidden;}
#mainmenu-content{margin: 0 auto; width:1000px;}
#mainmenu{margin-top:35px; display:inline-block;}
#mainmenu ul li{float: left; margin-right: 20px; list-style: none;}
#mainmenu ul li a {color:#FFF; text-decoration: none; font-size:20px; margin-left:25px;}
#mainmenu ul li a:hover {color: #FCD100;}
#mainmenu ul li ul a {color: #000; font-size:16px; margin-left:10px; margin-top:10px; margin-bottom:10px; display: block;}
#mainmenu ul ul {display: none; padding: 0px; position: absolute; width: auto; margin-left: 0px;}
#mainmenu ul li:hover>ul {background: #fff; width:220px; border-right:1px solid #a4a4a4; margin-top:16px; z-index:9; position: absolute; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3); border-top:3px solid #FCD100; display: block;}
#mainmenu ul ul li {float: none;position: relative; text-decoration: none; display: block;}
#mainmenu ul ul li a{text-decoration: none;}
.menuitem {padding:0px 0px 11px;}
#mainmenu ul li:hover>.menuitem{border-bottom:5px solid #FCD100;}

NOTE: Sorry I confused the index.php for a first time. Now is OK! Now you can try the code here: http://jsfiddle.net/jaGwr/

Answers


Try adding a clear after the #headerbar div

<body>

    <div id="headerbar">
        Hello World
    </div>
<!-- add this -->
<div style="clear:both;"></div>
<!-- end -->

    <div id="mainmenu-bar">
    {... }

Optionally, You can add a css clear style class instead of inline if you'd like

.clearBoth {clear:both;}

Need Your Help

creating custom interactive map using jquery and html5

javascript jquery html5

I want to create a custom interactive map which will be similar to this one: http://shows.marketart.com/surf10/

Android Beam - activate programmatically

android nfc android-beam

I try to activate or deactivate the Android Beam feature programmatically on ICS but I can't find any api for this. Is it possible ?