katestusazy
New Member
Let's say I have a logo, a search box and two other menu options. I am obviously using margins but those margins are not working so well with regards to cross-browser compatibility. What are some ways I can make sure that the top header appears consistent across all browsers.It appears perfect on Mac but now on windows. The logo and search box are differently aligned when viewed on any browser on windows. HTML: \[code\]<div class="header"> <div class="logo"></div> <div class="middler"> <input type="text" name="search" id="searchbox" value="http://stackoverflow.com/questions/15486962/Something"> </div> <div class="call_us"> <img src="http://stackoverflow.com/questions/15486962/#" class="call"> <span class="contact">(000) 000-0000</span> </div> <div class="button_now"> <input type="button" value="http://stackoverflow.com/questions/15486962/Login"> </div></div>\[/code\]CSS:\[code\].header { background-color: #000; width: 100%; top: 0; left: 0; height: 70px; position:absolute; z-index: 200;}.logo_holder { background-position: -3px 0; height: 41px; width: 227px; background-attachment: scroll; background-image: url("#"); background-repeat: no-repeat; cursor: pointer; display: inline-block; vertical-align: middle; margin-left: 300px; margin-top: 10px;}.middler { height: 170px; width: 318px; background-color: #F4F4F4; margin: -130px auto; box-shadow: 1px 1px 5px #888; -moz-box-shadow: 1px 1px 5px #888; -webkit-box-shadow: 1px 1px 5px #888; z-index: 400; padding: 3px 20px 10px 20px;}\[/code\]