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 to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    0
    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:

    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 
    color="#ffffff">Contact</font></a>&nbsp;&nbsp;|&nbsp;&nbsp;
    </font></p>
    </div>
    Any help is appreciated.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    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
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello ubonline,
    A single line of text can be vertically centered with line-height. Try it like this -
    Code:
    <!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">
    <head>
    <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;
    }
    </style>
    </head>
    <body>
        <div id="header"> 
            <p>
                <a href="http://www.mysite.com.com/">Home</a>
                	&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="http://www.mysite.com.com/blog/">Blog</a>
                	&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="http://www.mysite.com/contact/">Contact</a>
            </p>
        <!--end header--></div>
    </body>
    </html>
    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
    Posts
    6
    Thanks
    0
    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

    thanks


  •  

    Posting Permissions

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