[thelist] CSS background image riddle I can not solve...

Natalya Hucek natalyafrance at email.si
Mon Oct 27 16:49:00 CST 2003


Dear Sirs/Mesdames,

Here is the link:

http://www.ludwiginteriordesign.com/

The CSS file is at the bottom of the message.

If you mouse-hover over the quotation, the background image does not 
appear to be complete -- the last "N" of first line "desigN" is cut.  
It seems to be related to the size of the font in quotation (is it 
possible?). I tried everything (at least in my limited brain 
capability), the image gets "eaten up".  I guess the solution is very 
simple and obvious -- pls, save me from torture -- point it to me!  
Originally all the font sizes were in em, it seemed though, that  the 
image gets "eaten" if the users preferences is on font size 14px.  It 
only shows with users pref . size: 16px.  What does my blindness lie?   
My browser is IE mac osx.  Oh-oh, coding is not an easy walk :)

Thanks in advance

natalya

CSS file:

body
	{margin: 0px 0px; padding:0px;
	background: white;  font-size: 18px; color: #666666;
	font-family: serif,Times, Palatino,"Times New Roman";}
	
.Quotation

	{padding: 0; width:600px; margin-top: 30px;
	margin-left:auto; margin-right: auto;
	text-align:justify; font-size: 140%;
	}

.Quotation span {display: block; text-align:right}


.Quotation:first-letter

	{color: #CCCCCC;
	font-size:430%;
	float:left; padding: 4px;
	}

.Quotation img {
	position: absolute; width: 500px;
	margin-left: 60px; margin-right: auto;
	top: 110px; border: 0;padding: 0;
	z-index: 1
	}

.Quotation a:link, a:visited, a:active
	{
	text-decoration: none; color: #CCCCCC; border: 0;
	}

.Quotation a:hover
	{text-decoration: none; color: #666666;
background: url("../pictures/logo-work-light.gif") no-repeat 60px 80px}

.Quotation a:hover img {visibility:hidden}


.Footer  {margin-top: 30px; width:660px;
	margin-left: auto; margin-right: auto; padding: 0px;
	border:none; background: white;  font-size: 12px; line-height: 1em}

div.float {
   	float: left;
  	width: 80px;
   	padding: 15px;
   	text-align: center;}

a:link, a:active {text-decoration: none; color: #003300}
a:hover {text-decoration: underline; color:#666666}
a:visited {text-decoration: underline; color: #669966}





More information about the thelist mailing list