SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Vertical spacing with em

    My HTML is source-ordered so I use absolute positioning to position the design and content portions where they should be for appearance purposes. I'm having a problem illustrated by the following example. I need the top border of the "Title" portion to line up perfectly with the bottom border of the "Text" portion regardless of the user's text size settings. It seems minor in this example but it turns into a big problem in my actual design. This doesn't seem to work correctly in either IE or Firefox. The borders don't line up to begin with, and as the text size is changed in the browser, the size of the gap changes. Doesn't this defeat the entire purpose of the em unit?

    <head>
    <title>Test</title>
    <style type="text/css">
    <!--
    * {padding:0;margin:0;border:0}
    .* {padding:0;margin:0;border:0}
    .border {border-top-width:1px;border-bottom-width:1px;border-color:black;border-style:solid}
    .font {font-size:1em}
    .margin {margin-top:5px}
    -->
    </style>
    </head>
    <body>
    <div style="position:relative">
    <div style="padding-top:20px;margin-top:4em;text-align:bottom">
    <div class="border font">Title</div>
    </div>
    </div>
    <div class="border" style="position:absolute;top:0">
    <div class="font margin">Text</div>
    <div class="font margin">Text</div>
    <div class="font margin">Text</div>
    <div class="font margin">Text</div>
    </div>
    </body>

  2. #2
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a link to your page?
    fisherboy
    Web Site Design

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd really like to keep my domain out of my posts.

    Am I out of luck without a link?

    - Grant

  4. #4
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm just not clever enough to see what you're getting at from the posted code. Others might. Alternatively you can send me the link by Private Message and I'll see if I can help.

    The best thing would be if one of the REAL experts took a look....
    fisherboy
    Web Site Design

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you like, just put the code on a page and see if you can tell me why the top border of the "Title" portion doesn't line up with the bottom border of the "Text" portion.

    - Grant

  6. #6
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    I think it's hard for any of us to tell what it is
    you're going for, exactly! [Thus a page would
    help...]

    I did try it out yesterday:
    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>
    <title>Test</title>
    <style type="text/css">
    *, html{
    margin:0; padding:0;}
    body{
    width:100%; height:100%; margin:0; padding:0;
    font-size:medium;}
    div#contain{
    font-family:"verdana", "tahoma", sans-serif; width:70%;
    background:#ececec none; margin:0 auto; height:600px; padding-top:30px;}
    div#main{
    width:60%; margin:0 auto; padding:20px; border:3px double silver;}
    #main p{
    width:50%; margin:0 auto; background:white none; color:#333333; font-size:80%;
    text-align:center;}
    p#title{
    border-top:1px solid black; border-bottom:1px solid black;}
    /*original styles*/
    .border {border-top-width:1px;border-bottom-width:1px;border-color:black;border-style:solid}
    .font {font-size:1em}
    .margin {margin-top:5px}
    </style>
    </head>
    <body>
    <div id="contain">
    	<div id="main">
    	<p>Text</p>
    	<p>Text</p>
    	<p>Text</p>
    	<p>Text</p>
    	<p id="title">Title</p>
    	</div>
    </div>
    <div style="position:relative">
    <div style="padding-top:20px;margin-top:4em;text-align:bottom">
    <div class="border font">Title</div>
    </div>
    
    </div>
    <div class="border" style="position:absolute;top:0">
    <div class="font margin">Text</div>
    <div class="font margin">Text</div>
    <div class="font margin">Text</div>
    <div class="font margin">Text</div>
    </div>
    </body>
    </html>
    I think em's are tricky for spacing because unlike px,
    you never know how resizing the text will affect the layout.
    Absolute positioning is also finicky since it takes
    an element out of the doc's flow.

    El
    F-Fox 2.0 :: WIN :: el design :: US

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It shouldn't be tricky though. If you specify the font-size in em units, the spacing that is specified in em units should change exactly in accordance with the font size. In my example, this should mean the top border of the "Title" section lies right next to the bottom border of the "Text" section, no matter the size of the font specified in the user's browser.

    I've got to take my girlfriend to her birthday dinner right now but I'll check your code out tomorrow. Thanks for your response.

    - Grant

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I checked out your code and I don't see how it relates to what I'm going for. I must not be making any sense. Let me know if this is any better.

    I need a div that is absolute-positioned in the middle of a page to slide up and down the page in precise accordance with changes to the height of four rows of text due to the user changing their font size.

    In other words, if the current height of a font is 10px, the absolutely positioned div should be positioned 40px from the top of the page (10px * 4). If the user changes their font size so the height of the font is 15px, the absolutely positioned div should be positioned 60px from the top of the page.

    It seems like the em unit should make this possible. What do you think?

    - Grant

    P.S. I'm going to re-post this in simpler terms.
    Last edited by tonearm; Jul 1, 2006 at 09:10.


Bookmarks

Posting Permissions

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