How do I remedy this?

Discussion in 'CSS' started by ewwatson, Feb 15, 2008.

0
  1. #1
    So now I begin the part where I trouble shoot potential problems - by enlarging text, changing font-family, and so on, and watch as my layout crumbles.

    Right now the font-family for everything is Tahoma, Geneva, Arial, Helvetica, 'MS Sans Serif', sans-serif;. If I pretend that my computer does not have Tahoma or Geneva and that it just has Arial - then my nice hover effect on the navigation menu is messed up because the borders no longer line up, because the size of the text changed and therefore the padding along with it. What is the best way to alleviate this problem? I know that I can probably fix this with a fixed pixel measurement for the Nav, but I don't want to do that . How do you guys remedy this? Thanks http://www.discountsitedesign.com/

    My guess is a line-height issue? But before I do trial and error until the cows come home.... maybe someone can see right off the bat what it is, and save me some frustration? Or maybe I should just set the nav links as Arial for good and adjust correctly for that font.... because everyone has that font. What do you guys think?.
     
    ewwatson, Feb 15, 2008 IP
  2. iamben

    iamben Active Member

    Messages:
    116
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    73
    #2
    You know, I could be in a total minority here, but I tend to design to the majority - so get a list of all the standard mac / windows fonts (you can google for that) and use one of those. Design it to look fine when the browser is set at the normal font size and go from there.

    You can waste hours making everything look perfect in every size - but even then you'll have difficulty.

    Of course you can always stick the overflow on your divs to hidden, and then as the font size increases, you just lose some of the text...
     
    iamben, Feb 16, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Well, if you don't mind some changes to the design...

    If this were mine, I would INDEED set a line-height... a big one. Something which gives the letters some room to breathe. You could then add borders to the a (if the a was set to display:block you can set an actual height as well as a line-height) and the text can enlarge a bit and still be okay when hovered.

    Here's what I'd do-- set a nice height on the ul, and have that ul hold the colours etc. If they're all set in em, then stuff will grow with the text-size when enlarged. Because the a's height will be the same as the text-height, the borders should always line up.

    Like,
    <ul id="nav">
    <li><a href="#">Home</a></li>
    etc...
    </ul>

    #nav {
    height: 2em;
    }
    #nav li {
    display: inline;
    }
    #nav a {
    float: left;
    height: 2em;
    font-size: 1em;
    padding: 0 3em;
    line-height: 2em;
    }

    And on hover add the borders to the a.

    *Edit I dunno if it looks this way on your browsers, but on my old FF1.5, contact is wrapping underneath. Also, you could just get rid of the div around the ul.
     
    Stomme poes, Feb 16, 2008 IP
  4. ewwatson

    ewwatson Member

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #4
    Thanks alot guys for your help - I am still working on - I will let you know how it turns out.
     
    ewwatson, Feb 17, 2008 IP
  5. ewwatson

    ewwatson Member

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #5
    Alright!!!! Now all the borders line up on a:hover regardless of which ever font the users computer uses. With help from Paul O'B, I found 2 different ways to fix my hover/font problem. I will explain the one I am using and post the code. I'll just post the code of the second option for anyone to look at if they so wish.

    1) I took away the height from the nav.
    2) I added padding to the #nav ul. That pushed the black border-bottom off from the nav links making it more consistent with all the different fonts.
    and 3) there is no 3, thats it, it was so easy, just starring at me all along!


    Option 1 - the one I am using

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Discount Site Design</title>
    <style>

    /* -------------------- Resets --------------------- */
    body, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
    margin: 0;
    padding: 0;
    }
    fieldset, table {
    border: none;
    }
    /* --------------- Document Defaults -------------- */
    html {
    font-size: 100.01%;
    height: 100%;
    }
    body {
    margin: 0 auto;
    height: 100%;
    font-size: 62.5%;
    font-family: Tahoma, Geneva, Arial, Helvetica, 'MS Sans Serif', sans-serif;
    background-color: #666666;
    color: #333;
    text-align: center;
    }
    /* ------------------ Typography ------------------- */
    h1 {
    font-size: 2em;
    }
    h2 {
    font-size: 1.6em;
    }
    h3 {
    font-size: 1.4em;
    }
    p, li {
    font-size: 1.2em;
    }
    /* -------------------- Forms ---------------------- */
    input, label {
    vertical-align: middle;
    }
    label {
    cursor: pointer;
    }
    input, select, textarea {
    font-size: 1.2em;
    font-family: inherit;
    font-size: inherit;
    }
    input, textarea {
    padding: .2em;
    }
    /* -------------------- Tables --------------------- */
    table {
    table-layout: fixed;
    overflow: hidden;
    }
    /* ------------------- Template -------------------- */
    * html #wrapper {
    height:100%;
    }
    #wrapper {
    margin: 0 auto;
    width: 720px;
    min-height: 100%;
    background-color: #CCCCCC;
    text-align: left;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    }
    #header {
    height: 120px;
    border-bottom: 1px solid #33FFCC;
    }
    #nav {
    position: relative;
    background-color: #666;
    text-align: center;
    width: 722px;
    margin: 0 -1px;
    }
    #main {
    padding: 20px;
    border-top: 1px solid #33FFCC;
    }
    #left {
    }
    #right {
    }
    #clearfooter {
    height: 70px;
    }
    #footerborder {
    height: 1px;
    width: 640px;
    background-color: #666;
    margin: 0 40px;
    border-bottom: 1px solid #3FC;
    }
    #footer {
    height: 70px;
    width: 720px;
    text-align: center;
    margin: -71px auto 0;
    }
    /* ------------------- Links ---------------------- */
    a, a:visited {
    text-decoration: none;
    color: #333;
    }
    a:active, a:focus, a:hover {
    text-decoration: none;
    }
    a img {border: none;}

    #copyright a {
    text-decoration: none;
    }
    #copyright a:active, #copyright a:focus, #copyright a:hover {
    text-decoration: none;
    color: #666;
    }
    /* --------------------- Menus ---------------------- */
    /* Main Menu */
    #nav ul {
    padding: 0 0 1px;
    }
    #nav li {
    position: relative;
    display: inline;
    color: #000;
    font-weight: bold;
    padding: 0 20px;
    list-style-type: none;
    }
    #nav li a {
    text-decoration: none;
    color: #000;
    }
    #nav li a:active, #nav li a:focus, #nav li a:hover {
    color: #33FFCC;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 0 0 1px;
    }
    body#home a#homenav {
    color: #3FC;
    }
    body#home a#homenav:hover {
    color: #33FFCC;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    }
    /* Footer Menu */
    #footer ul {
    margin-top: 20px;
    }
    #footer li {
    display: inline;
    margin: 0;
    font-size: 1em;
    list-style-type: none;
    }
    #footer li a {
    text-decoration: none;
    }
    #footer li a:active, #footer li a:focus, #footer li a:hover {
    text-decoration: none;
    color: #666;
    }
    /* ---------------- Global Classes ----------------- */
    .center {
    text-align: center;
    }
    .clear {
    clear: both;
    padding: 0;
    margin: 0;
    line-height: normal;
    }
    .floatleft {
    float: left;
    }
    .floatright {
    float: right;
    }
    .hidden {
    display: none;
    visibility: hidden;
    }
    .inline {
    display: inline;
    }
    .small {
    font-size: 10px;
    font-weight: normal;
    }
    .large {
    font-size: 20px;
    font-weight: bold;
    }
    /* ----------------- Content/Pages ----------------- */
    #copyright {
    font-size: 1em;
    margin-top: 1px;
    }


    </style>
    </head>
    <body id="home">
    <div id="wrapper">
    <div id="header"></div>
    <div id="nav">
    <ul>
    <li><a href="#" id="homenav">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">PORTFOLIO</a></li>
    <li><a href="#">TESTIMONIALS</a></li>
    <li><a href="#">PRICES</a></li>
    <li><a href="#">TOOLS</a></li>
    <li><a href="#">CONTACT</a></li>
    </ul>
    </div>
    <div id="main">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
    <p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>
    </div>
    <div id="clearfooter"></div>
    </div>
    <div id="footer">
    <div id="footerborder">
    <!-- -->
    </div>
    <ul>
    <li><a href="#">Home</a> ? </li>
    <li><a href="#">About</a> ? </li>
    <li><a href="#">Portfolio</a> ? </li>
    <li><a href="#">Testimonials</a> ? </li>
    <li><a href="#">Prices</a> ? </li>
    <li><a href="#">Tools</a> ? </li>
    <li><a href="#">Contact</a></li>
    </ul>
    <p id="copyright"><a href="#" onClick="MM_openBrWindow('copyright.html','copyright','width=450,height=350')" >Copyright &copy; 2006 - 2007 DiscountSiteDesign.com All Rights Reserved</a></p>
    </div>
    </body>
    </html>

    Option 2

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Discount Site Design</title>
    <style>
    /* ----------------------------------------------------
    Screen Stylesheet for http://www.discountsitedesign.com

    Updated: 01/20/08
    author: Eric Watson
    website: http://www.discountsitedesign.com
    -------------------------------------------------------
    : Site Colors :

    : Table Of Contents :
    Resets
    Defaults
    Typography
    Forms
    Tables
    Template
    Links
    Menus
    Classes
    Content
    ---------------------------------------------------- */

    /* -------------------- Resets --------------------- */
    body, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
    margin: 0;
    padding: 0;
    }
    fieldset, table {
    border: none;
    }
    /* --------------- Document Defaults -------------- */
    html {
    font-size: 100.01%;
    height: 100%;
    }
    body {
    margin: 0 auto;
    height: 100%;
    font-size: 62.5%;
    font-family: Geneva, Arial, Helvetica, 'MS Sans Serif', sans-serif;
    background-color: #666666;
    color: #333;
    text-align: center;
    }
    /* ------------------ Typography ------------------- */
    h1 {
    font-size: 2em;
    }
    h2 {
    font-size: 1.6em;
    }
    h3 {
    font-size: 1.4em;
    }
    p, li {
    font-size: 1.2em;
    }
    /* -------------------- Forms ---------------------- */
    input, label {
    vertical-align: middle;
    }
    label {
    cursor: pointer;
    }
    input, select, textarea {
    font-size: 1.2em;
    font-family: inherit;
    font-size: inherit;
    }
    input, textarea {
    padding: .2em;
    }
    /* -------------------- Tables --------------------- */
    table {
    table-layout: fixed;
    overflow: hidden;
    }
    /* ------------------- Template -------------------- */
    * html #wrapper {
    height:100%;
    }
    #wrapper {
    margin: 0 auto;
    width: 720px;
    min-height: 100%;
    background-color: #CCCCCC;
    text-align: left;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    }
    #header {
    height: 120px;
    border-bottom: 1px solid #33FFCC;
    }
    #nav {
    position: relative;
    background-color: #666;
    text-align: center;
    width: 722px;
    margin: 0 -1px;
    }
    #main {
    padding: 20px;
    border-top: 1px solid #33FFCC;
    }
    #left {
    }
    #right {
    }
    #clearfooter {
    height: 70px;
    }
    #footerborder {
    height: 1px;
    width: 640px;
    background-color: #666;
    margin: 0 40px;
    border-bottom: 1px solid #3FC;
    }
    #footer {
    height: 70px;
    width: 720px;
    text-align: center;
    margin: -71px auto 0;
    }
    /* ------------------- Links ---------------------- */
    a, a:visited {
    text-decoration: none;
    color: #333;
    }
    a:active, a:focus, a:hover {
    text-decoration: none;
    }
    a img {border: none;}

    #copyright a {
    text-decoration: none;
    }
    #copyright a:active, #copyright a:focus, #copyright a:hover {
    text-decoration: none;
    color: #666;
    }
    /* --------------------- Menus ---------------------- */
    /* Main Menu */
    #nav ul {
    text-align:center;
    display:table;
    margin:0 auto;
    }
    #nav li {
    position: relative;
    color: #000;
    font-weight: bold;
    padding:0 20px;
    list-style-type: none;
    display:table-cell;
    }


    #nav li a {
    text-decoration: none;
    color: #000;
    border-top: 1px solid #33FFCC;
    border-bottom: 1px solid #33FFCC;
    position:relative;
    padding:2px 0;
    display:block;
    margin:-1px 0;
    }
    #nav li a:active, #nav li a:focus, #nav li a:hover {
    color: #33FFCC;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    }
    body#home a#homenav {
    color: #3FC;
    }
    body#home a#homenav:hover {
    color: #33FFCC;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    }
    /* Footer Menu */
    #footer ul {
    margin-top: 20px;
    }
    #footer li {
    display: inline;
    margin: 0;
    font-size: 1em;
    list-style-type: none;
    }
    #footer li a {
    text-decoration: none;
    }
    #footer li a:active, #footer li a:focus, #footer li a:hover {
    text-decoration: none;
    color: #666;
    }
    /* ---------------- Global Classes ----------------- */
    .center {
    text-align: center;
    }
    .clear {
    clear: both;
    padding: 0;
    margin: 0;
    line-height: normal;
    }
    .floatleft {
    float: left;
    }
    .floatright {
    float: right;
    }
    .hidden {
    display: none;
    visibility: hidden;
    }
    .inline {
    display: inline;
    }
    .small {
    font-size: 10px;
    font-weight: normal;
    }
    .large {
    font-size: 20px;
    font-weight: bold;
    }
    /* ----------------- Content/Pages ----------------- */
    #copyright {
    font-size: 1em;
    margin-top: 1px;
    }


    </style>
    <!--[if IE ]>
    <style type="text/css">
    #nav ul {display:inline-block;}
    #nav ul{display:inline; }
    #nav ul li{display:inline-block}
    #nav ul li{ display:inline;}
    #nav ul a{
    display:inline-block;
    margin:-2px 0;
    top:1px
    }
    #nav{text-align:center}
    </style>
    <![endif]-->
    </head>
    <body id="home">
    <div id="wrapper">
    <div id="header"></div>
    <div id="nav">
    <ul>
    <li><a href="#" id="homenav">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">PORTFOLIO</a></li>
    <li><a href="#">TESTIMONIALS</a></li>
    <li><a href="#">PRICES</a></li>
    <li><a href="#">TOOLS</a></li>
    <li><a href="#">CONTACT</a></li>
    </ul>
    </div>
    <div id="main">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
    <p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>
    </div>
    <div id="clearfooter"></div>
    </div>
    <div id="footer">
    <div id="footerborder">
    <!-- -->
    </div>
    <ul>
    <li><a href="#">Home</a> ? </li>
    <li><a href="#">About</a> ? </li>
    <li><a href="#">Portfolio</a> ? </li>
    <li><a href="#">Testimonials</a> ? </li>
    <li><a href="#">Prices</a> ? </li>
    <li><a href="#">Tools</a> ? </li>
    <li><a href="#">Contact</a></li>
    </ul>
    <p id="copyright"><a href="#" onClick="MM_openBrWindow('copyright.html','copyright','width=450,height=350')">Copyright &copy; 2006 - 2007 DiscountSiteDesign.com All Rights Reserved</a></p>
    </div>
    </body>
    </html>
     
    ewwatson, Feb 18, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Stomme poes, Feb 19, 2008 IP