By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,636 Members | 1,693 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,636 IT Pros & Developers. It's quick & easy.

Inline-Element with higher font-size inside A: Hover about full height?

P: n/a
Hi,

what is the task with which I could not cope?

There is a link with an inline-element (strong e.g.) inside. It has a
higher font-size than the content of its parent.

For the hover effect I prefer an inverse styling.

Hovering should just cover the link and not his parent (li e.g.).

My question:
How could one realize a hovering about the full height of the
inline-element with a higher font-size than it's parent?
I search for a solution which works well on actual(tm) browsers.

In the following you find a screenshot, the code and a testcase with
the code.

Thank you.

Screenshot:
http://borumat.de/bilder/misc/temp/hc-083.png

Code:
| strong{
| font-size: 2em;
| }
| a{
| text-decoration: none;
| }
| a:link{
| color: blue;
| background: white;
| }
| a:link:hover{
| background: blue;
| color: white;
| }
| a:visited{
| color: red;
| background: white;
| }
| a:visited:hover{
| background: red;
| color: white;
| }

| <ul>
| <li><a href="#a">Lorem <strong>ipsum</strongdolor<br />
| sit amet</a></li>
| <li><a href="#b">Consectetur adipisicing elit<br />
| sed <strong>do</strongeiusmod
| tempor</a></li>
| <li><a href="#c">Incididunt ut <strong>labore</strong><br />
| et dolore magna aliqua</a></li>
| </ul>

Testcase:
http://borumat.de/html/temp/hover-ni...olle-hoehe.php

Andreas
--
http://borumat.de/firefox-browser-tipps
http://borumat.de/thunderbird-email-tipps
http://borumat.de/openoffice-writer-tipps
http://borumat.de/40tude-dialog-newsreader-tipps
Nov 22 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Scripsit Andreas Borutta:
Hi,

what is the task with which I could not cope?
The task of getting to the point in the first sentence, I presume.
There is a link with an inline-element (strong e.g.) inside. It has a
higher font-size than the content of its parent.
Remove the tag or rule that causes the higher font size. Problem solved.
For the hover effect I prefer an inverse styling.
Huh? Why not reverse or perverse? What is "inverse styling"?
Hovering should just cover the link and not his parent (li e.g.).
And your problem with that is exactly what?
My question:
How could one realize a hovering about the full height of the
inline-element with a higher font-size than it's parent?
So you actually have a CSS question, not HTML? Well, the right answer is
still: stop creating the problem. (Besides, I still don't see what you see
as a problem here. Font size changes inside text are usually problem, but
I'm afraid you don't mean that.)
http://borumat.de/bilder/misc/temp/hc-083.png
Oh. There I can see a problem, but there's no indication of where (on which
browser) it happens. And the solution is to remove the pointless font size
change.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 22 '06 #2

P: n/a
Jukka K. Korpela schrieb:
>For the hover effect I prefer an inverse styling.

Huh? Why not reverse or perverse? What is "inverse styling"?
Swapping color and background color.
>My question:
How could one realize a hovering about the full height of the
inline-element with a higher font-size than it's parent?

So you actually have a CSS question, not HTML?
Yes.
Well, the right answer is
still: stop creating the problem.
I prefer the view of "solving a task".
>(Besides, I still don't see what you see
as a problem here.
Later you point out, that you see it - in the screenshot.

In words, to be sure: the upper part of strong is not hovered. With
the used style for hovering the upper part is not readible.
Font size changes inside text are usually problem
I like to use this type of emphasizing for a special purposes, not
alway it usual continuous text.

I think of it to emphasize the main keywords inside the linktexts
inside a list of a dozen of links in a linklist.
>http://borumat.de/bilder/misc/temp/hc-083.png

Oh. There I can see a problem, but there's no indication of where (on which
browser) it happens.
It happens on FF 2.0 and Opera 9
And the solution is to remove the pointless font size
change.
I know now, that you don't like the styling.

Andreas
--
http://borumat.de/firefox-browser-tipps
http://borumat.de/thunderbird-email-tipps
http://borumat.de/openoffice-writer-tipps
http://borumat.de/40tude-dialog-newsreader-tipps
Nov 22 '06 #3

P: n/a
Andreas Borutta schrieb:
How could one realize a hovering about the full height of the
inline-element with a higher font-size than it's parent?
It seems to me that no "clean" solution exists: I will use "markup
layout" in form of SPANs as long as I know a better solution.

| body { background : white; color : black; }
| a{ font-size : 2em; color: blue; }
| a:hover{ background : blue; color : white; }
| li{ line-height : 2.3em; }
| span{ font-size : .5em; }

| <p><a href="#a"><span>Lorem </span><strong>ipsum</strong></a></p>

http://borumat.de/html/temp/hover-ue...-elementen.php

Sorry for my missposting in this group.
Next time I will post an issue about stylesheets in
comp.infosystems.www.authoring.stylesheets

Andreas
--
http://borumat.de/firefox-browser-tipps
http://borumat.de/thunderbird-email-tipps
http://borumat.de/openoffice-writer-tipps
http://borumat.de/40tude-dialog-newsreader-tipps
Nov 24 '06 #4

P: n/a
Andreas Borutta schrieb:
How could one realize a hovering about the full height of the
inline-element with a higher font-size than it's parent?
It seems to me that no "clean" solution exists: I will use "markup
layout" in form of SPANs as long as I know a better solution.

| body { background : white; color : black; }
| a{ font-size : 2em; color: blue; }
| a:hover{ background : blue; color : white; }
| span{ font-size : .5em; }

| <p><a href="#a"><span>Lorem </span><strong>ipsum</strong></a></p>

http://borumat.de/html/temp/hover-ue...-elementen.php

Sorry for my missposting in this group.
Next time I will post an issue about stylesheets in
comp.infosystems.www.authoring.stylesheets

Andreas
--
http://borumat.de/firefox-browser-tipps
http://borumat.de/thunderbird-email-tipps
http://borumat.de/openoffice-writer-tipps
http://borumat.de/40tude-dialog-newsreader-tipps
Nov 24 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.