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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with a text resizing issue

    Hi people, I'm fairly new to CSS. This is my first site, and I'm having a problem with text resizing. Specifically, when I increase the text size, the size of the div that contains the header image is also increasing, which creates a separation between the header image and the navigation. I've put red borders on the elements at www.jontakiff.com so you can see what I'm talking about. Neither the width nor the padding of the header is set in ems, so I don't know why the header div is being resized. Any solutions to this problem are greatly appreciated. Also: I put my name on the right side of the site - is this a total mistake? It fits in the window upon initial resizing in IE and Firefox, but I'm sure it was the smartest move...anyway.

    Thanks..here's the CSS-


    body{text-align:center;font-family:Georgia;}

    #wrap{width:80%;margin:-7px auto; text-align:left;background-color:#fcfcfa;border:1px solid gray;padding-top:0;}

    #header{padding:45px;background-image:url(finalhead12.jpg);background-repeat:repeat-x;border:2px solid red;}

    #navbuttons{padding-bottom:4em;border:2px solid red;}

    ul#navlist{padding:0px 0px 0px 0px;margin:0px;list-style-type:none;;background-color:#ececec;align:center;
    float:left;width:100%;font-family:"rockwell",serif;font-size:12px;}


    ul#navlist li {
    display:inline;float:none;
    }

    ul#navlist li a
    {

    text-align:center;
    float: left;
    width:14%;
    color: black;
    background-color: none;
    padding-top:1em;padding-bottom:1em;
    margin-right:0px;margin-bottom:0px;
    text-decoration: none;
    border-right: 0px solid black;
    }

    and the relevant HTML: (note: the h1 in the header doesn't make a difference.)

    <body>
    <div id="everything">
    <div id="wrap">

    <div id="header">
    <h1>&nbsp</h1>

    </div>

    <div id="navbuttons">
    <ul id="navlist">
    <li><a href="index.html">Home </a></li>
    <li><a href="jonffwriting.html">Writing</a></li>
    <li><a href="jonffbasement.html">Basement Tapes </a></li>

    <li ><a style="padding:.4em" href="jonaboutme.html">About Me<Br>(Generator)</a></li>
    <li><a href="#">Resume</a></li>
    </ul>
    </div>

    <div id="rightnav">

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello johnnyblotter,
    I'm not sure but I think it's got something to do with the text's line-height when it's resized?
    Could it possibly be a float not cleared?
    Maybe if you get it to validate that will go away.

    Not much help, I know...
    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

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    The problem is caused by the border that appears when the mouse hovers over the anchor elements; adding a one pixel border adds two pixels to the effective width and height of each anchor element when hovered upon.

    I’d also go with Excavator’s suggestion and validate your HTML and CSS documents. There are a lot of errors, but every one of them seems easy to fix.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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