Click here to get back home

Inline-Element with higher font-size inside A: Hover about full height?
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Inline-Element with higher font-size inside A: Hover about full height? Andreas Borutta 11-21-2006
Posted by Andreas Borutta on November 21, 2006, 7:55 pm
Please log in for more thread options

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</strong> dolor<br />
|                 sit amet</a></li>
|         <li><a href="#b">Consectetur adipisicing elit<br />
|                 sed <strong>do</strong> eiusmod
|                 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-nicht-ueber-volle-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

Posted by Jukka K. Korpela on November 22, 2006, 1:06 pm
Please log in for more thread options

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/


Posted by Andreas Borutta on November 22, 2006, 3:59 pm
Please log in for more thread options


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

Posted by Andreas Borutta on November 24, 2006, 5:34 am
Please log in for more thread options


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-ueber-volle-hoehe-bei-grossen-inline-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

Posted by Andreas Borutta on November 24, 2006, 5:38 am
Please log in for more thread options


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-ueber-volle-hoehe-bei-grossen-inline-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

Similar ThreadsPosted
What is the full name of DIV and SPAN tags February 17, 2007, 11:11 am
Linux-based full screen browser for kiosks January 8, 2007, 7:01 pm
Make textboxs height = the height of the cell it's in minus (n)px August 6, 2004, 6:37 am
Adjust height base on the the height of the browser window. October 20, 2006, 4:23 pm
CSS - using a: hover changes layout in IE ? Is this a known bug ? October 12, 2005, 1:14 am
How Do I prevent a:hover from affecting November 8, 2004, 2:09 pm
Using hover-images on different on Firefox and IE June 2, 2005, 8:31 am
How to get around IE's a:hover deficiency? July 20, 2006, 10:30 am
mouseover/hover Link September 22, 2006, 3:05 am
css - hover over change background of entire map February 14, 2006, 6:35 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap