Shrinking link size w/ % font-size

pindky · Jun 2, 2002

Hello,

My linked text is smaller than my text. I used the following CSS code:

.main {
margin-right: 10px;
margin-top: 15px;
margin-left : 50px;
margin-bottom : 0px;
color: #330000;
font-size: 85%;
line-height : 18px;
font-weight: normal;
}

.main a:link {
color: #330000;
text-decoration: underline;

}

.main a:visited {

color: #330000;
text-decoration: underline;
}

.main a:hover {

background-color: #cc9966;
text-decoration: none;
color: white;
}

The class is contained in the <p> tags.

Thanks!

Boomerang · Jun 2, 2002

Hi spindky,

To see , whats really going on, we have to see your HTML code, but maybe the following cause your problem?

Because your font-size is "%" and you might have a class in a class wich make the font-size 85% of 85%, like:

<body>
<p class="main">
just a text
<a class="main" href="blabla.html">link</a>
</p>
</body>

In that case you only have to code:

<body>
<p class="main">
just a text
<a href="blabla.html">link</a>
</p>

If not, then show the HTML code,

Hope this helps,
Erik
<!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

SashiRaveendran · Jun 5, 2002

This may be because there is no other font size specfied on the page, 85% of what?

% is a relative length unit
"a relative length unit specifies a length in relation to another length property" - MSDN

pindky · Jun 5, 2002

That is just the code for one of the styles on the sheet.

The P style just lists font-family, however.

I thought that % fonts are relative to the font size of the visitors base font size on their (user) computer. So, it would be 85% of the users base font size.

Anyone??

-pindky

Boomerang · Jun 5, 2002

As I said:

SHOW THE HTML CODE !!

Then we can see what really happens !!

Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

starway · Jun 5, 2002

Yes pindky, you are right.
But you have to be careful about this due to the rules of css classes inheritance.
Your classes are ok, but we don't see how do you use them.
Boomerang showed you an example what can happen in case of two nested <p> tags.

It's impossible to tell you what's the reason for your problem without looking at your html code.

pindky · Jun 5, 2002

Okay - here it is!

Code:

<h1>Office Services: <span class="orange">Clutter Control</span></h1>

</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" align="left" valign="top">
<p class="calloutbox"> How much is your clutter costing you?</p>
<p class="calloutbox">Disorganization costs executives 1 hour every
day, up to six weeks per year. </p>
<p class="calloutbox">The person who works with a messy desk spends,
on average, 1 1/2 hours per day looking for things. That's 7 1/2
hours per week! </p>

<p class="callout"> </p>
<p class="callout"> </p>
<p class="callout"> </p>
<p class="callout"> </p>
</td>
<td width="75%" align="right" valign="top">
<h2 class="faq">Organize Plus will help you:</h2>
<p class="main">Establish a neat and efficient workspace that will
reduce stress and improve your productivity.</p>
<p class="main"> Reorganize any room in your office or work place
to improve traffic flow and ergonomics.</p>
<p class="main"> Organize desks and files so you can find what you
need when you need it.</p>
<p class="main"> Unclutter and systematize <a href="closets.htm">closets</a>,
cabinets and storage areas.</p>

<p class="main"> </p>
<p class="main"> </p>
<p class="main"> </p>
</td>
</tr>

Boomerang · Jun 5, 2002

When I copy the HTML code + CSS code in a new file I can't see there is any problem (IE4.0 and IE5.5)

But I suggest you change your CSS code and make unique classes for the <P> and <A> , something like:

<style>
.main {
margin-right: 10px;
margin-top: 15px;
margin-left : 50px;
margin-bottom : 0px;
color: #330000;
font-size: 85%;
line-height : 18px;
font-weight: normal;
}

a.deflink:link {
margin-right: 10px;
margin-top: 15px;
margin-left : 50px;
margin-bottom : 0px;
color: #330000;
font-size: 85%;
line-height : 18px;
font-weight: normal;
text-decoration: underline;

}

a.deflink:visited {

color: green;
text-decoration: underline;
}

a.deflink:hover {

background-color: #cc9966;
text-decoration: none;
color: white;
}
</style>

and add both like:

<p class="main"> Unclutter and systematize <a class="deflink" href="closets.htm">closets</a>,
cabinets and storage areas.</p>

Hope this helps,
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

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!

Shrinking link size w/ % font-size

pindky

Programmer

Boomerang

Programmer

SashiRaveendran

Programmer

pindky

Programmer

Boomerang

Programmer

starway

Programmer

pindky

Programmer

Boomerang

Programmer

Similar threads

Part and Inventory Search

Sponsor