View Full Version : Help with a text resizing issue

12-04-2006, 07:29 PM
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-


#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;

ul#navlist li {

ul#navlist li a

float: left;
color: black;
background-color: none;
text-decoration: none;
border-right: 0px solid black;

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

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

<div id="header">


<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>

<div id="rightnav">

12-04-2006, 07:48 PM
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...

12-05-2006, 04:25 PM
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 (http://validator.w3.org/) and CSS (http://jigsaw.w3.org/css-validator/) documents. There are a lot of errors, but every one of them seems easy to fix.