problems with Firefox

Hi,

My wife has just started a new photography business and I am building a webstei/blog through wordpress and a drag and drop editor called ProPhoto.

I wanted to add social icons, a search bar and a facebook like box above the logo at the top of the page but there wasn't the functional;ity to do this within prophoto.

So I needed to use the custom CSS and custom HTML editor. I managed to write the code with sa lot of help from Google (My coding skills aren't great).. This is what I cam up with.

CSS:


#flike_button {
float: right
}
#hp_socialicons {
float: left;
margin-left: 50px;
}
#hp_socialicons a {
float: left;
}

#search-form {
margin-top: 7px;
float: left;
}

HTML:

<div id="hp_socialicons">

<img src="http://www.michellewaspe.com/wp-content/uploads/p4/images/searchicon.png" alt="search" align="left">
<div id="search-form">
<form name="mainsearch" class="searchbar" method="get" action>
<fieldset>
<input type="text" name="s" id="s">
</fieldset>
</form>
</div>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=michellewaspe/feed&loc=en_US" target="_blank"><img src="http://www.michellewaspe.com/wp-content/uploads/p4/images/rssicon2.png"></a>

<a href="http://pinterest.com/michelle_waspe/" target="_blank"><img src="http://www.michellewaspe.com/wp-content/uploads/p4/images/pinteresticon2.png"></a>


<a href="http://www.flickr.com/photos/57123627@N04/" target="_blank"><img src="http://www.michellewaspe.com/wp-content/uploads/p4/images/flickricon2.png"></a>

<a href="https://plus.google.com/103565547639915294633/posts" target="_blank"><img src="http://www.michellewaspe.com/wp-content/uploads/p4/images/googleicon2.png"></a>

<a href="https://twitter.com/#!/michellewaspe" target="_blank"><img src="http://www.michellewaspe.com/wp-content/uploads/p4/images/twittericon2.png"></a>

<a href="http://www.facebook.com/MichelleWaspePhotography" target="_blank"><img src="http://www.michellewaspe.com/wp-content/uploads/p4/images/facebookicon2.png"></a>
</div>
<div style="padding:5px;">
</div>

<div id="flike_button">

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FMichelleWaspePhotography&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</div>

This works great in all browsers (IE, Chrome, Safar and Opera) but in Firefox the rest of the home page shifts to the right, off the screen..

I can't figure out what the issue is and was hoping one of you could shed light on this.

Thanks

Barney

Barney,

Assuming that "http://michellewaspe.com/" is the website in question and judging by what you said you were trying to accomplish, the site appears fine in Firefox. It would seem you either resolved it or you might have a browser issues going on.