6 replies [Last post]
peterdouglas
peterdouglas's picture
Offline
Enthusiast
Montréal, Canada
Last seen: 9 years 51 weeks ago
Montréal, Canada
Timezone: GMT-4
Joined: 2005-06-20
Posts: 162
Points: 10

Using an image-free css tabbed navigation seemed like a good idea at the time. At this point, I got the website to look the same in IE and Firefox. But, now the tabs are too tall. When you hover over the tabs, the fill color is the right height though. If the tabs are that hight, then the 1ps border extends too far down.

http://writefirsttime.com/
http://writefirsttime.com/styles.css

I've tried changing the padding which is only successful in moving everything down, including the extra spill-over of color. Any ideas on what I could change?

Thanks! Smile

You're only young once, but you can stay immature indefinately -- Ogden Nash

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

You need to add display:

You need to add display: block to the :hover state as well and then make the anchors the same height as the list items.

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

peterdouglas
peterdouglas's picture
Offline
Enthusiast
Montréal, Canada
Last seen: 9 years 51 weeks ago
Montréal, Canada
Timezone: GMT-4
Joined: 2005-06-20
Posts: 162
Points: 10

That makes sense. I've added

That makes sense. I've added display:block to the hover state, but I'm not sure about where to make the anchors the same height as the anchors. I added height: 21px; to every place that I thought made sense but the tabs are still too high.

When I think of anchors, I think of anchors to make a link jump to a certain spot on a web page. This probably isn't what you were referring to. Sorry to ask again, but you could you please let me know what you had in mind?

Thanks. Smile

You're only young once, but you can stay immature indefinately -- Ogden Nash

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Anchors

In this case, Hugo is referring to the actual anchor tag - the <a> tag. That's the anchor. Anchors can go to different locations on the same page, or new pages - but they're still called anchors. Although everyone calls them "links" Laughing out loud

If I understood properly, Hugo wants you to set the a tag to block display (by default it is inline) and give the anchr and list-item the same height.

Verschwindende wrote:
  • CSS doesn't make pies

peterdouglas
peterdouglas's picture
Offline
Enthusiast
Montréal, Canada
Last seen: 9 years 51 weeks ago
Montréal, Canada
Timezone: GMT-4
Joined: 2005-06-20
Posts: 162
Points: 10

Got it, thanks!

Got it, thanks!

You're only young once, but you can stay immature indefinately -- Ogden Nash

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

thepineapplehead wrote:If I

thepineapplehead wrote:
If I understood properly, Hugo wants you to set the a tag to block display

He probably does too, but I don't think he relied to this thread Wink

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Ooops

Tyssen wrote:
thepineapplehead wrote:
If I understood properly, Hugo wants you to set the a tag to block display

He probably does too, but I don't think he relied to this thread Wink

Erm . . . hmmm . . . . erm . . .

/runs

Verschwindende wrote:
  • CSS doesn't make pies