Hi. I have a wordpress site with coard containing a Featured Post Carrouseel on the left and a spot on the right, where I recently introduced a subscribe by email form along with 6 social icons down below.
In FireFox all works well and the Icons look centered and properly aligned.
So this section looks like this in FireFox (correct):
_______________________________________________
|#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!x|.......text......|
|#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!x|..Input Form..|
|#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!x|......FI SB.....|
|#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!x|6 Social Icons|
_______________________________________________
In Internet Explorer only one icon appears (the first one - Twitter). Verticaly it's position is correct but it appears on the right. The other five social icons are not visible in any way.
In IE it looks like this:
_______________________________________________
|#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!x|......text......|
|#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!x|..Input Form..|
|#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!x|.....FI SB......|
|#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!x|.............1SI|
_______________________________________________
Abrev: FI - Feedburner Readers Image; SB - Subscribe button; 1SI - 1 Social Icon Button;
Can you help put all social icons correctly displayed in IE just as it appears in Firefox?
I lost many hours over this and I still can´t see the solution.
Thank you!
ps. - This is my first post here and I'm not very gifted with CSS so I don't know if i inserted too much (or too little info). Hope everythings's alright :)
Here's the code:
HTML: <div id="board">
<div id="board_left">
<div id="board_items">
<div id="board_body">
<h2>Artigos Seleccionados</h2>
<div id="board_carusel">
<div class="belt">
<?php $coint_i = carousel_featured_posts(FEATURED_POSTS); ?>
</div>
</div>
</div>
<ul id="board_carusel_nav">
<li><a href="javascript:stepcarousel.stepBy('board_carusel', -1)"><img src="<?php bloginfo('template_url')?>/images/button_prev.png" alt="Prev" /></a></li>
<li><a href="javascript:stepcarousel.stepBy('board_carusel', 1)"><img src="<?php bloginfo('template_url')?>/images/button_next.png" alt="Next" /></a></li>
</ul>
</div>
</div>
<div id="subscr_home" align=center>
<h2>Recebe <b>grátis</b> o jogo C&C Red Alert + Livro Piadas de A-Z</h2>
<div id="subscr_home_body">
<form action="http://feedburner.google.com/fb/a/mailverify" [SNIPPED - FEEDBURNER INFO]
<div id="subscr_home_input"><input name="email" type="text" value="Põe aqui o endereço de email e..." onclick="this.value='';" /></div>
<div id="subscr_home_readers">
<img src="http://feeds.feedburner.com/~fc/Example.com?bg=99CCFF&fg=444444&anim=0" height="26" width="88" style="border:0" alt="" />
</div>
<div id="subscr_home_subs">
<input type="image" src="http://example.com/wp-content/themes/#*$!X/images/Subscreve-nos.gif" align="right">
</div><div class="clear">
<p id="subscr_home_links">
<a href="Twitter Link"><img src="Twitter Social Icon Pic" /></a>
<a href="Social Icon 2 Link"><img src="Social Icon 2 Pic" /></a>
<a href="Social Icon 3 Link"><img src="Social Icon 3 Pic" /></a>
<a href="Social Icon 4 Link"><img src="Social Icon 4 Pic" /></a>
<a href="Social Icon 5 Link"><img src="Social Icon 5 Pic" /></a>
<a href="Social Icon 6 Link"><img src="Social Icon 6 Pic" /></a>
</p>
</div>
</form>
</div>
</div>
</div>
CSS Code: #board{
width:100%;
height:215px;
overflow:hidden;
background:url(images/bgr_board.png) no-repeat;
}
#board_left{
float:left;
padding:16px 0 0 50px;
}
#board_items{
width:582px;
}
#board_body{
width:100%;
}
/*My costumizations on Board Right*/
#subscr_home h2 {
color:#000000;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:23px;
font-weight:normal;
padding:18px 10px 15px;
}
#subscr_home_body {
float:right;
width:365px;
}
#subscr_home_body p {
padding:5px 45px 0;
}
#subscr_home_input {
padding-top:4px;
}
#subscr_home_input input {
background:none repeat scroll 0 0 #D4EEF9;
border:1px solid #90C9E0;
color:#839195;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
padding:10px;
width:212px;
}
#subscr_home_readers {
float:left;
padding-top:12px;
padding-left:25px;
}
#subscr_home_subs {
padding:12px 25px 0 0;
}
#subscr_home_links {
float:right;
overflow:hidden;
}
#subscr_home_links img {
float:left;
margin:0 6px 0 0;
}
/*More Default Border Settings*/
#board_carusel{
width:582px;
height:120px;
position:relative;
}
#board_carusel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.board_item{
width:582px;
height:120px;
overflow:hidden;
}
#board_body h2{
color:#000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:23px;
font-weight:normal;
margin:0 0 15px 0;
}
#board_body strong{
font-size:12px;
color:#000;
line-height:18px;
display:block;
}
#board_body p{
font-size:12px;
color:#000;
line-height:18px;
padding:0 0 10px 0;
}
#board_body p img{
float:left;
border:1px solid #83b2c4;
margin:0 10px 0 0;
width:161px;
height:107px;
}
#board_body p a{
text-transform:uppercase;
color:#000;
}
#board_body p.more a{
text-decoration:underline;
}
#board_body p.more a:hover{
text-decoration:none;
}
#board_carusel_nav{
width:100%;
overflow:hidden;
}
#board_carusel_nav li{
float:left;
padding:0 5px 0 0;
}
#board_carusel_nav li a{
outline:none;
}
