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,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 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,274
    Thanks
    28
    Thanked 271 Times in 265 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
    •