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

Andreas Borutta

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 ipsum </strongdolor 
| sit amet</a></li>
| <li><a href="#b">Conse ctetur adipisicing elit 
| sed do</strongeiusmod
| tempor</a></li>
| <li><a href="#c">Incid idunt ut labor e 
| 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

Subscribe Reply

2962

Jukka K. Korpela

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

Andreas Borutta

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

Andreas Borutta

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; }

| <a href="#a">Lorem ip sum</a>

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.infosystem s.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

Andreas Borutta

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; }

| <a href="#a">Lorem ip sum</a>

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.infosystem s.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

Similar topics

6568

Inline Functions

by: A | last post by:

Hi, I'm having problems completing a project in C++. I have been using inline functions in some of my header files. I have only done so for simple functions that only have 1 statement (eg. accessor and mutator methods to access private data members). I would like to know if there are any issues with using inline functions that may have attributed to my errors before I start separting them out into "outline functions". Regards

C / C++

3875

Inlines with external linkage

by: Richard Hayden | last post by:

Hi, I have the following code: /******************************** file1.c #include <iostream> extern void dummy(); inline int testfunc() {

C / C++

3146

inline keyword and linkage

by: Grumble | last post by:

Hello everyone, As far as I understand, the 'inline' keyword is a hint for the compiler to consider the function in question as a candidate for inlining, yes? What happens when a function with extern linkage is inlined? Should the compiler still export the function? Or is an inlined function implicitly static?

C / C++

2859

inline class member functions

by: Srini | last post by:

Hello, Rules for inline functions say that they have to be defined in the same compilation unit as their declarations. For class member functions this means that the inline member functions must be defined either within the class or within the same header file. But its generally a good programming practice to have the declarations and definitions in seperate files. This would make the future maintenance of the code easier.

C / C++

4005

Which causes more code-bloat: inline virtual or template class?

by: RainBow | last post by:

Greetings!! I introduced the so-called "thin-template" pattern for controlling the code bloat caused due to template usage. However, one of the functions in the template happens to be virtual as well. To support thin-template, I need to make virtual function as inline. Now, I know that compiler would generate an out-of-line copy when it

C / C++

2898

inline functions -- advantages?

by: chinu | last post by:

hi all, i did a small experiment to grasp the advantages of declaring a function as inline. inline int fun1(); int main(){ unsigned int start=0,end=0; asm("rdtsc\n\t"

C / C++

676

inline functions

by: sam_cit | last post by:

Hi Everyone, I have few questions on inline functions, when i declare a function as inline, is it for sure that the compiler would replace the function call with the actual body of the function? or is it a call taken by compiler? Second, i see that it is same as what Macro's used to do for c, if so what is the advantage for going in for inline functions than to Macros?

C / C++

1922

How to make inline work?

by: Barry | last post by:

Hi, group First, I write same cases I've already known, I don't concern that specific compiler really do inline or not. Please check them if they are right, and add the cases I miss 1. // a.h inline void f() {}

C / C++

1555

Ways to make inline work?

by: Barry | last post by:

C / C++

2128

Any preprocessor definition to tell if inline is supported?

by: Martin Wells | last post by:

Is there anything like __inline_is_supported to indicate whether a certain C compiler supports inline? I'm writing my code as fully portable C89, but I want to use inline. Martin

C / C++

8969

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8788

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9476

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9263

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

6751

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6053

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4825

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2745

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2193

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General