html - DIV wrapper/centering not working cross browser -
i'm putting 2 divs next each other inside of wrapper. works designed on chrome, looks horrific on both ie , ff. don't know else try i've tried clear:both; in every place can think of , still looks miserable. please help! thank you!
the webpage is: http://www.thorelectriclongboards.com/contact.php
i not know how of needed, here code webpage:
<html> <head> <title>thor electric longboards</title> <link href='http://fonts.googleapis.com/css?family=roboto+condensed' rel='stylesheet' type='text/css'> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> <link rel="icon" href="img/favicon.ico" type="image/x-icon"> </head> <style> .title { font-weight: 800; font-size: 20px; background-color: rgba(255, 255, 255, 0.0); margin-bottom: 24px; text-align: center; } input[type=submit] { background-color: #000080; color: white; font-size: 16px; width: 100%; border: none; letter-spacing: 3px; cursor: pointer; padding: 3px; margin-top: 8px; } input[type=text] { line-height: 37px; border: none; width: 100%; text-indent: 10px; font-size: 18px; box-sizing: content-box; } input[type=email] { line-height: 37px; border: none; width: 100%; text-indent: 10px; font-size: 18px; box-sizing: content-box; } input:focus { outline: none; } textarea { border: none; line-height: 20px; font-size: 18px; resize: none; padding-left: 10px; padding-top: 5px; outline: none; } .contact { text-align: left; border-collapse: collapse; } .lab { background-color: #f7941e; text-align: right; vertical-align: top; overflow: auto; padding: 10px; border: 1px solid #000080; border-right: none; width: 8%; float: left; color: white; } form { margin: 0 auto; background: transparent; width: 50%; } .table-form { border-collapse: collapse; width: 27%; } tr { padding-top: 10px; padding-bottom: 10px; } .spacer { padding-top: 6px; padding-bottom: 6px; background: transparent; } .side { background-color: transparent; width: 50%; display: inline-block; vertical-align: middle; white-space: normal; letter-spacing: 2px; } .side > { display: inline-block; background-color: transparent; vertical-align: middle; } .contact-img { width: 20px; height: 20px; margin: 15px; padding: 12px; border: 1px solid #3c5a99; opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; background-color: transparent; } .contact-img:hover { opacity: 0.5; } .wrapper { display: inline-block; white-space: nowrap; background: transparent; overflow: hidden; } label { background-color: transparent; font-style: italic; } </style> <body id="background"> <?php include 'header.html'; ?> <div class='main'> <div class='title'>contact using of options below</div> <div class='wrapper'> <div class='side' style='float:left;'> <form id='contact-us' action='' method='post'> <table class='table-form'> <tr style='border: 1px solid #000080;'> <td class='lab'>name</td> <td><input type="text" name='name'></td> </tr> <tr><td class='spacer'></td><td class='spacer'></td></tr> <tr style='border: 1px solid #000080;'> <td class='lab'>email</td> <td><input type="email" name='email'></td> </tr> <tr><td class='spacer'></td><td class='spacer'></td></tr> <tr style='border: 1px solid #000080;'> <td class='lab'>message</td> <td><textarea name='message' rows="6"></textarea></td> </tr> <tr> <td colspan="2"><input type="submit" name='submit' value="send"></td> </tr> </table> </form> </div> <div class='side' style='float:right; text-align: left;'> <a href='https://www.facebook.com/pages/thor-electric-longboards/1533188433635268' target='_blank'><img class='fb contact-img' src='img/facebook-blue.png' id='fb'></a><label for='fb'>thor electric longboards</label><br> <a href='https://twitter.com/thorlongboards' target='_blank'><img class='tw contact-img' src='img/twitter-blue.png' id='tw'></a><label for='tw'>@thorlongboards</label><br> <a href='https://instagram.com/thor_electric_longboards' target='_blank'><img class='ig contact-img' src='img/instagram-blue.png' id='ig'></a><label for='ig'>thor_electric_longboards</label> </div> </div> </div> <?php include 'footer.html'; ?> </body> the thing in header.html or footer.html affect this:
.main { background-color: rgba(255, 255, 255, 0.7); color: #121b1c; width: 80%; margin: 50px auto; padding: 25px; overflow: hidden; text-align: center; border: 1px solid black; } please if can!!!
see if helps:
add width:100%; .wrapper , remove float:left; .lab class.
Comments
Post a Comment