View Full Version : Problem with getting inline list elements to vertically align w/ different browser

10-18-2010, 10:42 PM

I have a Wordpress theme I'm making. It can be found at smallyetstrong.com.

I'm having a problem getting 4 elements in an inline list to vertically align consistently across all browsers. In Chrome, the webpage renders beautifully. In IE8 and FF (IE7 is a whole different story), the list with the search box, Facebook, Twitter and RSS icon will not vertically align like they do in Chrome.

If you go to the site, you will see what I mean. In Chrome, it's perfect. I've been trying several different methods to get those elements aligned consistently but I've not found a solution thus far.

Here is the code for that list and it's DIV:

<div id="social-search">
<?php $search_text = "Search..."; ?>
<form method="get" action="<?php bloginfo('home'); ?>/">
<input type="text" value="<?php echo $search_text; ?>" name="s" id="s" onblur="if (this.value == '') {this.value = '<?php echo $search_text; ?>';}" onfocus="if (this.value == '<?php echo $search_text; ?>') {this.value = '';}" />
<input type="hidden" id="searchsubmit" />
<li><a href=""><img src="<?php bloginfo('template_directory'); ?>/img/fb.png" alt=""/></a></li>
<li><a href=""><img src="<?php bloginfo('template_directory'); ?>/img/twit.png" alt=""/></a></li>
<li><a href=""><img src="<?php bloginfo('template_directory'); ?>/img/rss.png" alt=""/></a></li>

And the CSS:

padding:5px 0;

#social-search ul{

#social-search ul li{
margin:0 0 0 5px;

#social-search ul li a{

#social-search ul li a img{

Any tips or help is greatly appreciated. I'm just trying to get these elements to align vertically in Chrome, IE8 and FF consistently.

10-18-2010, 11:37 PM
They're beautifully lined up in:

Chrome 7
Firefox 4
IE 8
Opera 10
Safari 5

10-19-2010, 07:05 AM
That's interesting. The alignment is varies between Chrome, FF and IE8 on my machine. I suppose if it looks good to you it will do. The text field and the 3 image links should all be dead center vertically in the brown bar they are housed in.

Thank you very much for testing so thoroughly for me.

Anyone else having issues with that spot? I don't have many test machines :(

10-19-2010, 08:07 AM
In Firefox 3.6, the elements don't align correctly.

I'm looking around for a solution now. It seems that padding and heights are not behaving properly at all in browsers other than Chrome and a few of the newest ones.