Difference between 100% and 101%?

seaport · May 23, 2005

I am trying to create a css pop up. The following code works.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title></title>
<style type="text/css">
<!--

.linkspot a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #00ffff;}

.linkspot a:hover {font-size: 101%; color: #ff0000; }

.linkspot a span {display: none;}
.linkspot a:hover span {display: block;
   position: absolute; top: 180px; left: 0; width: 125px;
   }
-->
</style>
	</head>
	<body>
	<div id="msn" class="linkspot" 
	style="position: absolute; top: 81px; left: 50; width: 166px; 
	height: 700px; font: 16px Verdana, sans-serif; z-index: 100;">
	<a href="void()">Yahoo.com<span>This is a dsecription for Yahoo.com.</span>
	</a>
	</div>
	
	</body>
</html>

However, if I change the "101%" (the font size) to "100%", the pop-up does not work. I just cannot figure out why.

Seaport

BabyJeffy · May 23, 2005

Fix your CSS first - may it's a cumulative thing:
margin: 0 0 1px; is missing (or has one extra) a parameter and is lacking measurement.

Does the CSS validate?

Cheers,
Jeff

seaport · May 23, 2005

CSS has been validated by W3C CSS Validator.

http://jigsaw.w3.org/css-validator/

Seaport

spewn · May 23, 2005

it seems that when the font-sizes are the same, it won't display the text, whether you set it to 100% or 16px...but when you go 15px, 17px, 99% or 101% it shows up...

i'm working on it...

- g

seaport · May 23, 2005

Spewn,

Thanks.

The page has also be validated by W3C Markup validation service, after I inserted the charset specs.

Code:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

It seems that showing the "<span>" needs to be triggered by some change of the "<A>".

FYI, I added a right border to the style of "<A>". The pop up works even when the font-size is not changed.
[code}
.linkspot a:hover {font-size: 100%; color: #ff0000; border-right:2px}
[/code]

seaport

BillyRayPreachersSon · May 24, 2005

I think this is to do with having a block element (well, an inline element behaving as a block element) inside an inline element.

Personally, I would restructure your code to avoid this.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

ChrisHunt · May 24, 2005

margin: 0 0 1px; is missing (or has one extra) a parameter and is lacking measurement.

Not true, on both counts.

If you give three parameters to [tt]margin[/tt] (or to [tt]padding[/tt] or to other box model properties) the first one applies to the top, the second to both left and right, and the last to the bottom. See

http://www.w3.org/TR/CSS21/box.html#propdef-margin

Whilst you normally need to include a unit when specifying length values in CSS, you don't when the value is 0 - because 0em = 0% = 0px = 0anything_else. 0 is 0. So, as it says at

http://www.w3.org/TR/CSS21/syndata.html#length-units

"After a zero length, the unit identifier is optional".

As to the original problem, well, it works OK in Firefox whatever value you pick for [tt]font-size[/tt]. It's just IE that chokes, even if you add a full doctype to push it out of quirks mode. Guess it must be yet another IE bug, but you've already found a work-around for it so why worry?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Difference between 100% and 101%?

seaport

MIS

BabyJeffy

Programmer

seaport

MIS

spewn

Programmer

seaport

MIS

BillyRayPreachersSon

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor