3 replies [Last post]
AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 42 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

HI All,
I am trying to convert a tables layout to css, but failing miserably. It is early stages at the moment and the first problem I am encountering is that the NAVIGATION BUTTONS ARE ENLARGING RATHER THAN JUST UNDERLINE THUS PUSHING ALL PAGE CONTENT DOWN.
LINK to PAGE: orange-house.co.uk/test/aboutustest.htm
LINK to CSS:orange-house.co.uk/test/act_files/styles.css

Can anyone advise so I can proceed with the reformatting please?

Many thanks in advance.

Andy

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 17 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

The font size is increasing

The font size is increasing on hover. it seems you havnt defined one there. try giving it a fixed font-size. That will fix it...

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

All this: #nav-menu

All this:

#nav-menu a:link, #nav-menu a:visited { background: url(act_files/background.gif) #fff bottom left repeat-x; height: 2em; line-height: 2em; float: left; width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center; } #nav-menu a:hover, #nav-menu a:active { background: url(act_files/background.gif) #fff bottom left repeat-x; height: 2em; line-height: 2em; float: left; width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: underline; text-align: center; }

is unnecessary duplication. All you need is:

#nav-menu a:link, #nav-menu a:visited { background: url(act_files/background.gif) #fff bottom left repeat-x; height: 2em; line-height: 2em; float: left; width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center; } #nav-menu a:hover, #nav-menu a:active { text-decoration: underline; }

The only thing different from the default state and the hover state is the underline, so that's the only thing you need to specify.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 42 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

Many thanks guys, the fixed

Many thanks guys, the fixed width fonts seemed to solve it. And I removed the duplication.

Cheers and thanks again
Andy