Pseudo-element-using hover state messed up - CSS-Tricks

This topic is empty.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
April 7, 2013 at 10:42 am #43941

dheeraj
Member

[Codepen Reduced Test Case](http://codepen.io/dheeraj/pen/dgnFj)

As shown in the example above, if you hover over the black box, the hover state is messed up. Can you tell me why it is so? What is the solution to this unexpected (at least to me) problem?

*As a side-note, can you tell me what line-height to use so that the two lines don’t overlap?

April 7, 2013 at 1:04 pm #130929
Excavator
Member
Hello dheeraj,
That’s a lot of CSS there! I think most of it is not needed but it’s hard to tell what you intend for it all to do.

Your anchor breaks into two lines because that’s how the large font-size fits into your 892px width. They overlap because, with the added padding, you exceed the 96px height you’ve put on it.
See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

I’m also unclear what your positioning when you hover.

Look at it this way once –
```
CodePen - A Pen by dheeraj











The Greatest Shortcoming Of The Human Race Is Our Inability To Understand The Exponential Function
```
April 7, 2013 at 1:19 pm #130938
Excavator
Member
Ok, what’s up with the <code></code> ?
What is the preferred way of quoting code on this forum???

Sorry for forum question in this thread but I see no user forum, no sticky about how to use it and no search function to find an FAQ…
```
<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>Untitled Document</title>

<style type="text/css">

html, body {

margin: 0;

background: #fc6;

}

#container {

width: 900px;

margin: 20px auto;

padding: 10px 5px 300px;

background: #999;

}

.entry-title {

width: 892px;

margin: 0;

color: #fff;

font: normal 24px Nobile;

}

.entry-title a {

line-height: 48px;

padding: 12px;

display: block;

text-decoration: none;

background: #000;

border: 2px solid #000;

}

.entry-title a:hover {border-color: #fff;}

</style>

</head>

<body>

<div id="container">

<h3 class="entry-title">

<a href="#">The Greatest Shortcoming Of The Human Race Is Our Inability To Understand The Exponential Function</a>

</h3>

</div>

</body>

</html>
```
Ok, I used <pre></pre> tags AND escaped the raw HTML. Kind of a pain …
April 7, 2013 at 1:26 pm #130931

TheDoc
Member

@Excavator – http://cl.ly/image/3W0s3O2Z413Z http://daringfireball.net/projects/markdown/syntax

April 7, 2013 at 1:27 pm #130932

Paulie_D
Member

@dheeraj

What exactly is the hover state supposed to do?

April 8, 2013 at 11:24 am #131028

wolfcry911
Participant

@dheeraj, try this: http://codepen.io/wolfcry911/pen/kwlsf

@Excavator, the lines overlap because of the line-height: normal, which is up to the user agent to set (usually around 1.2 (without a unit it becomes a multiplier)), so in this case is around 28.8px. But if you consider the font-size and padding, causes the line boxes to overlap. The box model says nothing about ‘whatever you put in an element can’t be larger than that element’ – that’s what overflow is.

I’m in agreement with you about posting to the forum. IMHO, markdown sucks @ss (no offense to Gruber). Far more people are confused on how to post code to the forum than those that understand. I also don’t think it’s right to force people to read through 30 pages of markdown instructions just to post. And I also agree about the search function – completely missed the UE boat on that one, Chris. Oh I know it exists, but again like many others it took me a while to discover that the magnifying glass (top right) was a search field.

April 9, 2013 at 4:38 pm #131164

dheeraj
Member

@wolfcry911
I saw [http://codepen.io/wolfcry911/pen/kwlsf](http://codepen.io/wolfcry911/pen/kwlsf), but I didn’t understand how exactly you achieved the desired effect.

What I really wanted was for the white ‘border’ to sort-of outline around the heading even if it went into two lines.

What I want to know is the *procedure you followed, step by step, to get from my Pen’s code to your code that’s worked so well.* (although not exactly what I desired to achieve, which I now think is impossible)

*By the way, why was the pseudo-element behaving in the way shown in my Pen; I thought it was supposed to cover the element completely, but it didn’t do that…

April 9, 2013 at 4:57 pm #131166

dheeraj
Member

@wolfcry911 I implemented your solution on my site [http://canamla.tk/](http://canamla.tk/), but a problem has arisen. Why does the white border get cut off towards the top. I wanted to position the heading so that it aligns together with the date, and since I couldn’t do that with margin (maybe because the element is now inline), I used position: relative; .... I know this is very, very bad, but I could find no other way to make the date and heading align together.

I know this issue is caused due to line-height but reducing it causes the ‘overlapping’ issue.

So what should I do?

April 10, 2013 at 6:00 am #131239

Paulie_D
Member

>Why does the white border get cut off towards the top.

It’s definitely the positioning causing it.

April 10, 2013 at 8:18 am #131241

wolfcry911
Participant

@dheeraj, my solution works even if the heading goes to two lines (shrink the viewport for my pen). I’ll explain it later as I’m off to work now…

Paulie is correct, the reason it doesn’t work in webkit is that it is positioned outside of its container (why it doesn’t work, I’m not exactly sure, it does in Firefox). A simple fix is to remove the relative positioning from the h3 and remove the bottom margin from the h2
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

The forum ‘CSS’ is closed to new topics and replies.

The Greatest Shortcoming Of The Human Race Is Our Inability To Understand The Exponential Function