Home/ Questions/Q 8641077
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T11:26:03+00:00

I want to make an html / css menu in my webpage that contain

  • 0

I want to make an html/css menu in my webpage that contain four links (horizontally in top center of page).

and I want the menu link font size to increase when hovering the mouse over (a:hover).

but the problem I have is the menu item change its place(down a little) when font size increases (in IE 8, and Chrome)
and I don’t want that to happen, note that I am using a background image (152 * 52) for the link

I tried doing a table instead of the inline-block but it made a bigger mess.

I also tried playing with margin and padding which didn’t work either.

I am new to html/css so any advice about anything in html/css would be appreciated and forgive my bad english.

Here is my code:

<html>
<head>
<title>Home page</title>
<style type="text/css">

body {
    font-family:Palatino, ‘Book Antiqua’, Georgia, Garamond, ‘Times New Roman’, Times, serif;
    font-size: 13px;
    color: #000060;
    background-color: #005070;
    background-repeat:repeat-x;
    text-align:center;
}

.menu
{
    height:64px;
    width:100%;
    background-image:url(img/bglb2.png);
    background-repeat:repeat-x;
    text-align:center;
}

.menuLink, .menuLink:visited
{
    color:#FFFFFF;
    background-image:url(img/btk.png);
    text-decoration:none;
    font-size: 20px;
    width:132px;
    height: 32px;
    padding: 10px;
    display:inline-block;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 6px;
}

.menuLink:hover
{
    color:#CC7011;
    background-image:url(img/bto.png);
    font-size: 26px;
}
</style>
</head>

<body>
<div class="menu">
    <a class="menuLink" href="index.html">Home</a>
    <a class="menuLink" href="page1.html">Page1</a>
    <a class="menuLink" href="page2.html">Page2</a>
    <a class="menuLink" href="page3.html">Page3</a>
</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I found a perfect simple solution for this that worked for me on Chrome, IE and Firefox on win7.

    I put a table with one cell inside the link (<a>) that have same width and height as <a> ( which is the image dimensions).

    Also made the table: text-align:center. The text-align:center made sure that the text inside the table will be horizontally centered. and the adavntage of the table is the text will be vertically centered even when font size changes when hovering mouse. Also the table prevented the link image and other links from shifting when font size increases.

    I removed all padding. Because if I combined (height,width) with (padding), it will produce different results on different browsers (especially IE and Chrome).

    It might be a wrong idea to put stuff inside<a> but it did work for most browsers.

    I also put this line of code as first line of my html file:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    which made the <table> inherit every thing from the link <a> which I don’t know why but it did simplify stuff.

    So resulting code is:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Home page</title>
<style type="text/css">

body {
    font-family:Palatino, ‘Book Antiqua’, Georgia, Garamond, ‘Times New Roman’, Times, serif;
    font-size: 13px;
    color: #000060;
    background-color: #005070;
    background-repeat:repeat-x;
    text-align:center;
}

.menu
{
    height:64px;
    width:100%;
    background-image:url(img/bglb2.png);
    background-repeat:repeat-x;
    text-align:center;
}

.menuLink, .menuLink:visited
{
    color:#FFFFFF;
    background-image:url(img/btk.png);
    text-decoration:none;
    font-size: 20px;
    width:152px;
    height: 52px;
    display:inline-block;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 6px;
}

.menuLink:hover
{
    color:#CC7011;
    background-image:url(img/bto.png);
    font-size: 26px;
}

table.ml
{
    text-align: center;
    width:152px;
    height: 52px;
}
</style>
</head>

<body>
<div class="menu">
    <a class="menuLink" href="index.html"><table class="ml"><tr><td>Home</td></tr></table></a>
    <a class="menuLink" href="page1.html"><table class="ml"><tr><td>Page1</td></tr></table></a>
    <a class="menuLink" href="page2.html"><table class="ml"><tr><td>Page2</td></tr></table></a>
    <a class="menuLink" href="page3.html"><table class="ml"><tr><td>Page3</td></tr></table></a>
</div>

</body>
</html>

    Thank you all.

    • 0