Jump to content

Header padding issue in Opera only


Recommended Posts

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...