clubbuilder Posted January 30, 2014 Share Posted January 30, 2014 I have multple images floating around in my header. The header looks proper in every browser (IE, Firefox, Chrome, Safari) except Opera where the padding does not seem to work properly. The issue is the alignment of my social media icons below my search bar. Here is the site: http://www.wallcrafters.com/ it looks fine in all the other browsers but in Opera does not align right. Here is my heading HTML5 code: <body><div class="wrapper row1"> <div class="wrapperHeader"> <header id="header" class="clear"> <div class="fl_right"> <form action="#" method="post"> <fieldset> <legend>Search:</legend> <input type="text" value="Search Our Website…" onFocus="this.value=(this.value=='Search Our Website…')? '' : this.value ;"> <input type="submit" id="sf_submit" value="submit"> </fieldset> </form> <div class="sMediaContainer"> <span class="sMedia"> <ul> <li><a href="https://www.facebook.com/pages/Wallcrafters-Interior-and-Exterior/445929025453816" target="_blank"><img src="images/social/10.png" title="Facebook" alt="Facebook" /></a></li> <li><a href="#"><img src="images/social/20.png" title="Twitter" alt="Twitter" /></a></li> <li><a href="#"><img src="images/social/30.png" title="Pinterest" alt="Pinterest" /></a></li> <li><a href="#"><img src="images/social/40.png" Title="LinkedIn" alt="LinkedIn" /></a></li> </ul> </span> </div> </div> </header> And here is my css coding: #header{}#header hgroup{float:left;}#header hgroup h1, #header hgroup h2{font-weight:normal; font-style:normal; text-transform:none;}#header hgroup h1{font-size:46px; line-height:38px;}#header hgroup h1 span{font-size:36px; text-transform:uppercase;}#header hgroup h1 a{color:#2C2C2C; background-color:#FFFFFF;}#header hgroup h2{font-size:12px; text-align:right;}/* Social Media Sprites */#header .fl_right{margin:20px 10px 0 0;}.sMediaContainer {padding:25px 68px 0 0;}.sMedia {float:right;}.sMedia a{width:42px;height:42px;overflow:hidden;float:left;}.sMedia img{border:none;}.sMedia a:hover img {margin-top:-42px;}.sMedia li{display:inline;list-style-type:none;} In IE I had to change the from this .sMediaContainer {padding:25px 68px 0 0;} from padding to margin to get it to display properly which it does. The issue still persists in Opera. Your help would be much appreciated. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 31, 2014 Share Posted January 31, 2014 default margins, padding and even text-indent are not the same for elements like ul and li, so its good practise to zero these. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now