Avatar of phillystyle123
phillystyle123
Flag for United States of America asked on

div class is cutting off text bottom in ie7 AND text-decoration:underline in ie7 will not work

Hi

It seems like unless I use span I cannot get the link class atribute (text-decoration:underline) to work in ie7. it works fine in ff3.

URL:
http://collectors.cjehost.com/index.php

html:
<div class="formTagline">
                              <a href="#" class="linkStyle1">Fill out more Artspan surveys.</a>
                        </div>

Also, in ie7 the bottom of the same text: Fill out more Artspan  is getting cut off.

If I use span instead of div the link style works and the text is not cut off  but i lose my position formatting.


.formTagline{
		position:relative;
		bottom:-3px;#bottom:3px;
		width:100%;
		font:11px/0.688em "Century Gothic", Gil Sans, Arial, Sans;
		}
/*LINK STYLES*/
a:link.linkStyle1, a:visited.linkStyle1, a:active.linkStyle1{
text-decoration:none;
color:#c3546a;/*fuchsia*/
}
a:hover.linkStyle1{
text-decoration:underline;
color:#c3546a;
}

Open in new window

CSS

Avatar of undefined
Last Comment
phillystyle123

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
David S.

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
phillystyle123

ASKER
WOW! am i a dufus - a few things:

1. font:11px/0.688em - i assumed that i was telling the browser the font size with both pixels and ems - but i'm not am i - instead it's font:sizepx/line-heightem - right?

2. i am no longer cutting off the text (thanks) but the hover attribute (text-decoration:underline) is not working in ie7 - any ideas?

http://collectors.cjehost.com/index.php
.formTagline{
		position:relative;
		bottom:-3px;#bottom:3px;
		width:100%;
		font:11px/1 "Century Gothic", Gil Sans, Arial, Sans;
		}

Open in new window

SOLUTION
kingsburymedia

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
SOLUTION
kingsburymedia

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
phillystyle123

ASKER
kingsburymedia - thanks i'll adjust my link styles - text-decoration:underline still not working in ie7 though -

funny thing - if i change this:

<div class="formTagline">
                              <a href="#" class="linkStyle1">Fill out more Artspan surveys.</a>
                        </div>
to this:

<span class="formTagline">
                              <a href="#" class="linkStyle1">Fill out more Artspan surveys.</a>
                        </span>

text decoration:underline works but i lose my positioning




a.linkStyle1:link, a.linkStyle1:visited{
text-decoration:none;
color:#c3546a;/*fuchsia*/
}
a.linkStyle1:hover{
text-decoration:underline;
color:#c3546a;
}
a.linkStyle1:active{
text-decoration:none;
color:#c3546a;
}

Open in new window

SOLUTION
David S.

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
kingsburymedia

or perhaps this?
.formTagline a.linkStyle1:link, a.linkStyle1:visited{
text-decoration:none;
color:#c3546a;/*fuchsia*/
}
 
.formTagline a.linkStyle1:hover{
text-decoration:underline;
color:#c3546a;
}
 
.formTagline a.linkStyle1:active{
text-decoration:none;
color:#c3546a;
}

Open in new window

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
phillystyle123

ASKER
the padding worked - not int eh link class though but in the surrounding div - THANKS!!!

one more piece just to clarify:

font: 10px/.5em -

is the em part of this the line height and NOT the font size in ems?


.formTagline{
		position:relative;
		bottom:-3px;#bottom:3px;
		width:100%;
		font:11px/1 "Century Gothic", Gil Sans, Arial, Sans;
		padding-bottom:1px;
		}

Open in new window

SOLUTION
David S.

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
phillystyle123

ASKER
THANKS ALL!!!