Jump to content

clubbuilder

Members
  • Posts

    1
  • Joined

  • Last visited

Everything posted by clubbuilder

  1. 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.
×
×
  • Create New...