I am in the middele of putting my website online. everything is all right I have tested my website on a smaller screen and on different browsers.the problem is on some PC with different OS the header of my website looks messy!!(how can the OS affect the the code html).Please where are the problem?this the html code that appear messy and this is the unique part where the image and the text looks not in the right order:\[code\]<body> <div id="header"> <div > <img class="imgPosition" src="http://stackoverflow.com/questions/images/drapeau.jpg" alt=""/> <a href="http://stackoverflow.com/questions/index.html" class="logo1"> <h1><span>Republic of ........ </br>our company name part 1</br> company name part2 </span></h1></a> <span><a href="http://stackoverflow.com/questions/fr/HomeFrench.html" class="logo">French</a> <a href="http://stackoverflow.com/questions/ar/Homespanish.html" class="logo">spanish</a></span> </div> .......</div>......</body>\[/code\]the css code:\[code\]html { margin:0; padding:0; width:100%; height:100%;}@media screen and (max-width:480px) { body { font-size: 0.8em; }}body { background: #317070; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1; margin : 0; padding: 0; width:100%; height:100%;}#header { margin: 0 auto; padding: 0; width: 960px;}#header div { margin: 0; overflow: hidden; padding: 40px 0 38px; height: 30px;}#header div .imgPosition{ alignment-adjust:middle; margin:0 0 0 -420px; height: 60px; width:90;}/* french*/#header div .logo { color: #fff; display: block; float:left; margin: 0 ; padding: 0 0 0 20px; text-decoration: none;}#header div .logo h1 { font-family: "Times New Roman", Times, serif; font-size: 40px; font-weight: normal; margin: 0; padding: 0; text-transform: capitalize;}/* english*/#header div .logo1 { color: #fff; display: block; float:left; margin: 0 ; padding: 0 0 0 100px; text-decoration: none;}#header div .logo1 h1 { font-family: "Times New Roman", Times, serif; font-size: 40px; font-weight: normal; margin: 0; padding: 0; text-transform: capitalize;}#header div span { color: #fff; display: block; font-size: 16px; float: right; letter-spacing: 1px; margin: 0; padding: 0 30px 0 0; text-transform: uppercase;}#header div span b { display: block; font-size: 27px; font-weight: normal; letter-spacing: 2px; margin: 0; padding: 10px 0 0;}#header ul { background: #000; border-top: 3px solid #0eacae; margin: 0; overflow: hidden; padding: 2px 0 0;}#header ul li { float: left; list-style: none; margin: 0; padding: 0;}#header ul li a { color: #a1a1a1; display: block; height: 35px; letter-spacing: 1px; line-height: 35px; margin: 0; padding: 0; text-align: center; text-decoration: none; text-transform: uppercase; width: 160px;}#header ul li.selected a { background: #262626; color: #0dd5d8;}#header ul li a:hover { color: #0dd5d8;}\[/code\]for more clarification what should appear: (.... means space)image of the flag....Republic of...............................Our name company part1...........................................french spanich...............................our name comapny part2
the header of my website looks messy on some particular PC
- Thread starter giatestor
- Start date