- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I am using an icon font for one of the list items in my main navigation.
I put this icon into it’s own class, and gave it a font size so it matches the rest of the navigation. I also had to assign a specific line height for the icon font so it lines up.
Now the problem is when I hover over the icon (I am using a background colour), there is a gap underneath which is visible as you hover over it. This wouldn’t be a problem if I wasn’t using a background colour, but I would really like to keep this.
To illustrate what I mean, you can see the image here… https://dl.dropbox.com/u/94593656/test.jpg
Any ideas on how I can correct this, so that when you hover, there is no gap underneath?
I have uploaded the HTML and CSS here… http://codepen.io/anon/pen/xeCLj
@croydon86 I just changed the iconfont class in your CSS.
http://codepen.io/anon/pen/sbviC
This seems to be a lot of markup for a simple menu bar.
Hi Christopher, thank you so much, I can’t believe it was just a case of adding an ‘a’ as I had already tried doing the height but that wouldn’t work.
Yeh you’re right, there is a lot of markup, I am using twitter bootstrap as a base and they use a lot of code.
Thanks again!!