Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Problem with getting inline list elements to vertically align w/ different browser

    Hello,

    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:
    Code:
    <div id="social-search">
    				<ul>
    					<li>
    						<?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" /> 
    						</form>
    					</li>
    					<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>
    				</ul>
    				</div>
    And the CSS:
    Code:
    #social-search{
    	float:right;
    	height:25px;
    	padding:5px 0;
    }
    
    #social-search ul{
    	list-style:none;
    }
    
    #social-search ul li{
    	display:inline-block;
    	vertical-align:middle;
    	margin:0 0 0 5px;
    }
    
    #social-search ul li a{
    	color:transparent;
    }
    
    #social-search ul li a img{
    	max-height:25px;
    	max-width:25px;
    }
    Any tips or help is greatly appreciated. I'm just trying to get these elements to align vertically in Chrome, IE8 and FF consistently.

  • #2
    New Coder
    Join Date
    Oct 2010
    Location
    Sydney, Australia
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    They're beautifully lined up in:

    Chrome 7
    Firefox 4
    IE 8
    Opera 10
    Safari 5

  • #3
    New Coder
    Join Date
    Apr 2008
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    New Coder
    Join Date
    Apr 2008
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •