Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Thanked 0 Times in 0 Posts

    help with vertical alignment

    Hi, I am having touble with vertical alignment in IE vs Firefox.

    In the header of my blog, I have links that appear inside an image. In Firefox the links are centered vertically, but in IE they move to the top. I've tried changing the padding, but can't get it to work right in both at the same time. How do I get them centered vertically in both IE and Firefox?

    Here is my code:

    <div style="clear: both; margin:0 auto; "></div>
    <div style="background-image: url(http://www.mysite.com/images/sidebar_center.jpg); border: #000000 1px solid; height: 30px; width: 850px; padding: 6px; margin: 0px auto; font-size: 11px; "> 
    <p><font face="verdana" color="#ffffff">
    <a href="http://www.mysite.com.com/"><font color="#ffffff">Home</font></a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="http://www.mysite.com.com/blog/"><font color="#ffffff">Blog</font></a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="http://www.mysite.com/contact/"><font 
    Any help is appreciated.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Some say it's everything.
    Thanked 397 Times in 390 Posts
    We need more to go by than this. Really, we need all of your code and all of your images. In other words, we could use link to your test page!

    Without seeing the rest of what you have here are a couple of possible issues that might be at play:

    1: IE and FF have different default padding and margins for different elements. Try a "universal reset" (as seen in my sig here) and then style from the resultant state.

    2: IE and FF deal with vertical margins with parent and adjacent elements a bit differently. IE will tend to collapse margins whereas FF will tend not to. Look into "collapsing margins" to see what I mean.

    If you can give us a link to the page you are dealing with we can get more precise in our advice.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,847 Times in 1,831 Posts
    Hello ubonline,
    A single line of text can be vertically centered with line-height. Try it like this -
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {background: #f63;}
    #header {
    	width: 850px;
    	margin: 50px auto;
    	padding: 0;
    	background: #cc0 url(http://www.mysite.com/images/sidebar_center.jpg);
    	border: 1px solid #000;
    	font: 11px Verdana, Geneva, sans-serif;
    	color: #fff;
    	line-height: 30px;
    	text-align: center;
        <div id="header"> 
                <a href="http://www.mysite.com.com/">Home</a>
                <a href="http://www.mysite.com.com/blog/">Blog</a>
                <a href="http://www.mysite.com/contact/">Contact</a>
        <!--end header--></div>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Dec 2010
    Thanked 0 Times in 0 Posts
    Excavator, adding a line height simply flipped the problem.

    Rowsdower, here is my page: http://www.debt-tips.com/blog



    Posting Permissions

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