Steve K <sm***@cornell.edu> wrote:
While reading "Eric Myer on CSS" I decided it was time to replace the
buttons on my page (which were graphics) with some CSS "buttons" but I
hit some snags.
The first set of buttons I replaced seem to be working great, these are
the buttons on the left side, the main navigation buttons. But the four
buttons at the top (Prospective students, Alumni, Current Students,
Corporate) are not working as well as I'd hoped.
I'm getting some unwanted margins, and white margins that I can't seem
to get rid of. It's kind of hard to explain where they are but the best
way to explain it when you see it is that there should be no white
anywhere, except for the very bottom, under the buttons themselves,
about 13px high of white space. Don't worry about the top white space
and the left white space.
There is unwanted space right above the buttons also, about 6 px worth.
This is the file I'm talking about.
http://business.aem.cornell.edu/test/top_sub.htm
td#toplinks a {
display: block;
text-decoration: none;
border-right: 1px solid rgb(60%, 27%, 9%);
border-left: 1px solid rgb(100%, 57%, 39%);
margin: 0;
font: bold 11px arial, verdana, sans-serif;
Text sized in pixels is a bad idea as IE user's will not (easily) be
able to resize it.
color: white;
padding: 5px 5px 5px 5px;
background: rgb(82%, 36%, 15%)
}
<table width="758" border="0" style="margin: none;" cellspacing="0" cellpadding="0">
Should be margin: 0; not margin: none;
Now you've told the table to be 758 pixels wide.
<tr>
<td id="toplinks" width="161" align="center" height="21" >
A 165 pixel wide image in a 161 pixel wide cell?
<img src="../art/top_buttons_left.gif" width="165" height="21"></td>
<td id="toplinks" width="161" align="center" height="21">
id should be unique. Use class is you want to assign the same styles
to multiple elements.
And what happens if the user's text size is larger than 21 pixels?
<a href="../prospective/index.htm" target="_top">Prospective Students</a></td>
<td id="toplinks" width="141" align="center" height="21"><a href="../current/index.htm" target="_top">Current Students</a></td>
<td id="toplinks" width="142" align="center" height="21"><a href="../alum_parent/index.htm" target="_top">Alumni & Parents</a></td>
<td id="toplinks" width="140" align="center" height="21"><a href="../corporate/index.htm" target="_top">Corporate Visitors</a></td>
</tr>
</table>
The widths on those cells are 161 + 161 + 141 + 142 + 140 = 745, even
allowing for the extra four pixels forced in there by the image that's
still nine pixels short of the width of the table.
The height is also wrong. You've set the font size to 11px so the line
height will probably be 14 pixels, plus 5 pixels top and bottom
padding makes these links 24 pixels tall. Taller then the 21 pixels
specified in your table cells and given by your image.
Personally I would scrap the tables and use a more flexible layout.
But for starters you can change your styles to :
td.toplinks a {
display: block;
text-decoration: none;
border-right: 1px solid rgb(60%, 27%, 9%);
border-left: 1px solid rgb(100%, 57%, 39%);
height: 100%;
margin: 0;
font-weight: bold;
font-size: 70%;
font-family: sans-serif;
color: white;
padding-top: 4px;
background: rgb(82%, 36%, 15%)
}
Make the width of that first cell 165 and delete the other cell
widths.
That will get rid of your excess white space (at least until the user
makes his text size larger).
The red space between the upper image (BTW alt="site header" is
useless, it should be alt="Cornell University Undergraduate Business
Program") and the navigation is due to the line breaks between the
<img> tag and the </td> tag. Move the <map> outside the table and
close up all the spaces inside it.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
