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
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning problems in CSS

    I'm having a hard time vertically centering the four links I have in the top left. Is there a way I can do this? Also, Whenever i try and add borders to any of my elements, the entire order is messed up. How can I add borders while maintaining the same layout structure?

    PHP 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>V2</title>
    <
    style>
    htmlbody height100%; margin0}
    #maintable {
    positionrelative;
    width37.5em;
    height100%;
    marginauto;
    border-left1px solid;
    border-right1px solid;
    }
    #mainnav {
    floatleft;
    width:12em;
    height12em;
    }
    #mainnav_list {
    list-style-typenone;
    margin0;
    padding0;
    height12em
    }
    #mainnav_list li{
    floatleft;
    width6em;
    height6em;
    text-aligncenter;
    border 
    }
    #secondnav {
    floatright;
    width25.5em;
    height3em;
    }
    #banner {
    float:right;
    width25.5em;
    height6em;
    }
    #searchbar {
    floatright;
    width25.5em;
    height3em;
    }
    #allcontent {
    clearleft;
    width37.5em;
    top12em;
    }
    #leftcontent {
    floatleft;
    width12em;
    }
    #rightcontent {
    floatright;
    width25.5em;
    }
    #footer {
    clearboth;
    padding1em;
    text-aligncenter;
    }
    </
    style>
    </
    head>

    <
    body>

    <
    div id="maintable">

      <
    div id="mainnav">
          <
    div id="mainnav_container">
        <
    ul id="mainnav_list">
              <
    li><a href="#">Home</a></li>
            <
    li><a href="#">Sign Up</a></li>
            <
    li><a href="#">Tour</a></li>
            <
    li><a href="#">About</a></li>
        </
    ul>
        </
    div>
      </
    div>
        
      <
    div id="secondnav">
        
    Secondary Navigation</div>
        
        <
    div id="banner">
        
    Banner
        
    </div>
        
        <
    div id="searchbar">
        
    Search Bar
        
    </div>
        
        <
    div id="allcontent">
        
             <
    div id="leftcontent">
          
    Left Content
          
    </div>
            
          <
    div id="rightcontent">
          
    Right Content
          
    </div>
          
       </
    div>
      
        <
    div id="footer">2007</div
      
    </
    div>

    </
    body>
    </
    html

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    In firefox and IE<7 (I think) the borders add to the overall width of an element, so if you have a border that is 1 pixel on either side of an element, you'll need to shave off two pixels from the overall width to fit it into the same place. It is this that sounds like it's causing you problems?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes this is exactly the problem. Is it possible to format with em and then shave off a couple pixels by subtraction? For example lets say I wanted to shave off 2 pixels from 25 ems, could I do width: 25em - 2px; ?

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    No, you can't write it like that, and I don't think you can 'shave off' pixels from an em you can simply make the em smaller. Why not use pixels for the width? It'll give you a more precise figure anyway?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  

    Posting Permissions

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