PDA

View Full Version : Magin in table background image on mouseover



ReddaJoppe
Jan 18th, 2011, 09:19 PM
Hi

I have a table cell where the background changes to an image on mouseover.
However, there is a large margin in the right side of the cell that covers the outermost right part of the background image on mouseover, which I don't want.
I can't figure out where that margin comes from, and how to get rid of it.

I have:

<td class="nav1" align="center" valign="middle" bgcolor="transparent" onmouseover="class='nav1'" onMouseOut="this.bgColor='transparent'">
<a href="tekster.html">Tekster</a>
</td>

and

.nav1 a:hover {
display: block;
height: 60px;
text-decoration: none;
font-weight: bolder;
line-height: 60px;
text-transform: uppercase;
background: url("corner.png") no-repeat;
}

Can anyone figure out how to get rid of the margin and have the background image fill out the entire cell on mouseover?

Excavator
Jan 19th, 2011, 01:10 AM
Hello ReddaJoppe,
I think none of the code you've provided us produces any margin at all.
Link us to the test site - without seeing the image it's all just guessing anyway.

ReddaJoppe
Jan 19th, 2011, 08:34 PM
It's not uploaded yet, but I can paste the entire code of that page:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #CCC;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
}
a {
text-decoration: none;
color: #afdb52;
}
a:hover {
text-decoration: none;
color: #afdb52;
font-weight: bold;
}
hr
{border: 1px solid rgb(204,204,204);
border-width: 1px 0 0;
clear: both;
height: 0;
margin-top: 25px;
margin-bottom: 25px;
}
.aa {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
text-align: left;
color: #000;
}
.aa strong object {
text-align: center;
}
#MenuBar2 li a {
font-family: Verdana, Geneva, sans-serif;
}
.header {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 17px;
font-style: italic;
font-weight: 200;
color: #030;
}
.nav a {
display: block;
height: 60px;
text-decoration: none;
color: #afdb52;
font-weight: bolder;
line-height: 60px;
width: 158px;
text-transform: uppercase;
}
.nav a:hover {
display: block;
height: 60px;
text-decoration: none;
color: #afdb52;
font-weight: bolder;
line-height: 60px;
width: 158px;
text-transform: uppercase;
background-color: #003724;
}
.nav1 a {
display: block;
height: 60px;
text-decoration: none;
color: #afdb52;
font-weight: bolder;
line-height: 60px;
width: 158px;
text-transform: uppercase;
}
.nav1 a:hover {
display: block;
height: 60px;
text-decoration: none;
font-weight: bolder;
line-height: 60px;
text-transform: uppercase;
background: url("corner.png") no-repeat;
}
.overskrift1 {
color: #003724;
}
.Overskrift2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #003724;
}
</style>
</head>

<body>
<table width="950" cellpadding="0" cellspacing="0" border="0" rules="none" frame="void" align="center" valign="top" background="pentastatur3.png">
<tr>
<td colspan="2" valign="top" height="60"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="475" class="header" style="padding:10px"><strong>Vil I styrke jeres kommunikation?</strong></td>
<td align="center" bgcolor="transparent" class="nav" onMouseOver="this.bgColor='#003724'" onMouseOut="this.bgColor='transparent'">
<a href="forside.html">Forside</a>
</td>
<td class="nav" align="center" valign="middle" bgcolor="transparent" onMouseOver="this.bgColor='#003724'" onMouseOut="this.bgColor='transparent'">
<a href="cv.html">CV</a>
</td>
<td class="nav1" align="center" valign="middle" bgcolor="transparent">
<a href="tekster.html">Tekster</a>
</td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2" height="245" valign="top">&nbsp;</td>
</tr>
<tr valign="top" bgcolor="#F2FFD9">
<td width="260" bgcolor="#E5E5E5"><p><img src="Jeppe5.png" width="260" height="312" align="top" /></p></td>
<td rowspan="2" bgcolor="#EAFFE6" style="padding: 10px">
<table width="100%" border="0">
<tr>
<td><h5 class="overskrift1"><strong>HER ER JEG!</strong></h5>
<p class="aa">Jeg har oprettet denne side for at gøre opmærksom på mig selv og mine kompetencer over for potentielle arbejdsgivere. Hjemmesiden giver mig mulighed for at præsentere mit CV sammen med eksempler på mit arbejde, og så hjælper den mig forhåbentlig til at skille mig lidt ud fra mængden og demonstrerer samtidig at jeg er foretagsom og initiativrig.</p>
<p class="aa">Mit navn er Jeppe, jeg er 27 år og cand.mag. i International Virksomhedskommunikation med specialisering i dansk, og på jagt efter mit første fuldtidsarbejde.<br />
Mit ønskejob er lig med indflydelse på den strategiske kommunikation og hænderne fulde med konkrete kommunikationsopgaver. Med andre ord et job hvor jeg kan se at mit arbejde gør en forskel, at jeg er med til at flytte virksomheden derhen hvor vi gerne vil - det synes jeg er spændende og udfordrende.</p>
<p class="aa">Jeg er dog selvfølgeligbevidst omkring at det er noget jeg skal arbejde mig frem til mens jeg beviser mit værd, og jeg er naturligvis åben over for alle slags udfordringer jeg kan møde i mit arbejdsliv.<br />
I første omgang handler det for mig om at få foden inden for på arbejdsmarkedet og tilegne mig den ballast og de erfaringer jeg får brug for i min fremtidige karriere. Og hvem ved - måske er din virksomhed den rigtige for mig. <a href="CV.html">Læs mit CV</a> og se om jeg er den rigtige for din virksomhed.<br />
</p></td>
</tr>
<tr style="text-align: center">
<td><span class="aa"><br />
<strong>
<object width="425" height="344" hspace="10" vspace="10" align="middle">
<param name="movie" value="http://www.youtube.com/v/emMDmRtdP7w?fs=1&amp;hl=da_DK&amp;rel=0" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/emMDmRtdP7w?fs=1&amp;hl=da_DK&amp;rel=0" width="425" type="application/x-shockwave-flash" height="344" allowscriptaccess="always" allowfullscreen="true" hspace="10" vspace="10" align="middle"></embed>
</object>
<br />
<br />
</strong></span></td>
</tr>
<tr>
<td><p class="Overskrift2"><strong>Resultatet fra en typeindikatortest taget på*<a href="http://www.jobindex.dk/">jobindex.dk</a>:</strong></p>
<p class="aa"><u><br />
<em>Fokus på at udvikle metoder og ændre status quo</em></u><br />
<br />
INTJ-typer er ofte uafhængige, innovative og indsigtsfulde personer, der med stor vedholdenhed drives af deres indre univers af idéer og muligheder. Deres talent ligger i at definere mål, udtænke detaljerede planer og strukturer for det uforudsete. De er overbeviste om, at det nuværende kan ændres, og de derved kan være med til at skabe fremtiden. De er gode til at tænke tingene igennem, og når de har fået en idé, vil de med stor vedholdenhed forsøge at gennemføre denne via komplekse planer, der kan føre til målet. </p>
<p class="aa"> For INTJer er det derfor vigtigt, at organisationen eller virksomheden er struktureret og velorganiseret, så de inden for disse rammer kan arbejde selvstændigt med at omsætt

e idéer til konkrete handlingsplaner. Denne type har brug for at kunne sidde isoleret i ro og fred, så der er


mulighed for refleksion. Ofte vil man finde INTJer i job, hvor de kan bruge deres evne til at udvikle metoder og finde på for

bedringer, så målene bliver nået på en smartere måde. Ofte vil de være at finde inden for:</p>
<ul>
<li class="aa">lovgivning</li>
<li class="aa">ingeniørfaget</li>
<li class="aa">arkitektur</li>
<li class="aa">psykologi</li>
<li class="aa">IT</li>
<li class="aa">skribentvirksomhed</li>
<li class="aa">kunst</li>
<li class="aa">rådgivning<br />
<br />
</li>
</ul>
<p class="aa">Følgende kendte personer har typen INTJ:*<strong>Niels Bohr, Isaac Newton, Dwight D. Eisenhower</strong></p></td>
</tr>
</table></td>
</tr>
<tr valign="top" bgcolor="#F2FFD9">
<td bgcolor="#E5E5E5" style="padding-left: 10px; padding-right: 10px"><p class="aa">Jeppe Bech<br />
Blommegrenen 223, st.<br />
5220 Odense SØ</p>
<p class="aa">Tlf: 28 11 24 21<br />
e-mail: <a href="mailto:[email protected]">[email protected]</a><br />
</p>
<hr size="0" />
<p class="aa"><br />
<strong class="overskrift1"><br />
Stærke sider</strong></p>
<p class="aa"><em>Jeg er dygtig til:</em><br />
<br />
Tekstforfatning,<br />
kommunikationsstrategi,<br />
markedskommunikation,<br />
sponsorering, CSR, sprog, IT,
research mm.<br />
<br />
<em><br />
Desuden er jeg:</em><br />
<br />
Lærenem, videbegærlig,<br />
selvstændig, seriøs,<br />
humoristisk, positiv, initiativrig, engageret og har et godt
overblik<br />
</p>
<hr />
<p class="aa"><br />
<strong class="overskrift1"><br />
Eksamensbeviser og<br />
praktikudtalelse</strong></p>
<p class="aa"><a href="Eksamensbevis SDU.pdf" target="_blank">Eksamensbevis (kandidat)</a><br />
<a href="Eksamensbevis ASB.pdf" target="_blank">Eksamensbevis (bachelor)</a><br />
<a href="Udtalelse fra praktik.pdf" target="_blank">Praktikudtalelse</a><br />
<a href="KursusbevisVideoFlash.pdf" target="_blank">Kursusbevis (Video/Flash)</a><br />
<a href="KursusbevisDTP.pdf" target="_blank">Kursusbevis (DTP)</a></p>
<hr />
<p class="aa"><br />
<strong class="Overskrift2"><br />
Mød mig på LinkedIn,<br />
K-Forum eller Facebook</strong><strong><br />
</strong><br />
</p>
<p><a href="http://dk.linkedin.com/in/jeppebech/da" target="_blank"><img src="linkedin.png" width="70" height="70" hspace="0" border="0" /></a><a href="http://www.kommunikationsforum.dk/Jeppe-Bech" target="_blank"><img src="kforum.png" width="70" height="70" hspace="15" vspace="0" border="0" /></a><a href="http://www.facebook.com/jeppebech1" target="_blank"><img src="facebook.png" width="70" height="70" hspace="0" vspace="0" border="0" /></a></p></td>
</tr>
</table>
</body>
</html>

ReddaJoppe
Jan 19th, 2011, 08:50 PM
It's now online at http://www.jbech.webdillen.dk/CV/Forside.html

ReddaJoppe
Jan 19th, 2011, 09:04 PM
Nevermind, I solved it. It was simply the background image itself that was the problem. Don't know how I missed that :-)