opmaak voor links

[HenkRog]

Hallo,

ik gebruik een css bestand om een stippelijn te tonen onder een link wanneer je er met de muis over beweegt. Dit werkt voor alle links, behalve de links die in een tabel staan (met Windows Vista, Internet Explorer 8). Op een Windows XP, met Internet Explorer 7 gebeurt het echter wel correct. Heeft iemand er een verklaring voor of weten jullie wat ik doen om het in Internet Explorer 8 ook goed te krijgen?

 

[ErikBooy007]

Post je CSS eens.

 

[HenkRog]

/* CSS layout */

/*Container*/
#container {
	width: 900px;
	margin: 0 auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: smaller;
}


/*Heading*/
#masthead {
	margin: 20px;
	text-align: center;
}


/*Navigation*/
#top_nav {
	height: 1.5em;
	background-color: #F4F4F4;
	border: 1px solid #A0ACC0;
}
#top_nav ul {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}
#top_nav li {
	float: left;
	margin-right: 5px;
	margin-left: 5px;
	color: #000080;
}
#top_nav a {
	text-decoration: none;
	display: block;
	color: #000080;
}
#top_nav a:hover {
	text-decoration: none;
	border-bottom-style: dotted;
	border-bottom-width: thin;
}


/*Content*/
#page_content {
	margin-top: 20px;
	margin-bottom: 30px;
}


p a {
	color: #000080;
	text-decoration: none;
}
p a:hover  {
	border-bottom-style: dotted;
	border-bottom-color: #000080;
	border-bottom-width: thin;
}

p a img{
	border: none;
}

.thumb {
	font-family: "Trebuchet MS", sans-serif, Verdana, Arial, Helvetica;
	margin: 10px;
	border: 1px solid #666666;
	width: 155px;
	height: auto;
	float: left;
	text-align: center;
	background-color: #F4F4F4;
}
.thumb img{
	display: inline;
	margin: 5px;
	border: 1px solid #A0ACC0;
}
.thumb a:hover img {
	border: 1px solid #FDF002;
}
.gemeente {
	text-align: center;
	font-weight: bold;
	background-color: #666666;
	color: #FFFFFF;
}
.omschrijving {
	text-align: center;
	/*font-size: smaller;*/
	width: 150px;
	margin: 0 3px 3px 3px;
	font-family: "Courier New", Courier, monospace;
}
.prijs {
	text-align: center;
	/*font-size: smaller;*/
	width: 150px;
	margin: 0 3px 3px 3px;
	font-family: "Courier New", Courier, monospace;
}
.verhuurdverkocht {
	text-align: center;
	font-weight: bold;
	background-color: #666666;
	color: #FDF002;
}

label {
	margin-right: 10px;
}
input {
	margin-right: 10px;
}

/*Footer*/
#footer {
	clear: left;
	color: #C0C0C0;
	border-top-color: #F4F4F4;
	border-top-style: solid;
	border-top-width: thin;
	text-align: center;
	font-size: x-small;
}

 

[5i5]

a {
	color: #000080;
	text-decoration: none;
}
a:hover  {
	border-bottom-style: dotted;
	border-bottom-color: #000080;
	border-bottom-width: thin;
}

p a betekent als er zowel <p> tags omheen staan als <a> tags. Dit is waarschijnlijk niet het geval in je tabel.

 

[HenkRog]

zo lukt het ook nog niet.

Ik heb juist die p gebruikt omdat hij anders ook een lijntje trok onder mijn afbeeldingen waar een hyperlink op zat.

De bewuste tabel zit ook in een <p></p>

 

[Goeroeboeroe]

Heb je misschien 'n link naar de code online?

 

[HenkRog]

http://users.telenet.be/HenkR/test/

Blijkbaar doet hij het wel goed als ik het online zet.

Als ik het echter lokaal open hebben de links in de tabel geen opmaak (in IE8).


Iemand een verklaring?

 

[ErikBooy007]

In firefox ook niet.

Maar als je de tip van 5i5 eens opvolgt?

 

[Goeroeboeroe]

Je table staat in een <p>. Dat mag niet, 'n <p> mag geen andere blok-elementen bevatten.
Als ik de <p> door 'n <div> vervang, werkt het wel goed. (Moet je 't in de css natuurlijk ook even aanpassen.)
'n table mag wel binnen 'n <div> staan.
Als je je code door de validator haalt op http://validator.w3.org/ worden dit soort fouten gemeld. Die validator is echt heel handig...
Ik neem aan dat 't dan overal werkt. Dat IE 7 (en waarschijnlijk ook 6) 't wel 'goed' doen zegt heel veel over de kwaliteit van die twee browsers.

 

[HenkRog]

ok bedankt voor de nuttige informatie maar kan je soms het gedeelte van de css en broncode eens laten weten want het lukt mij nog steeds niet.

 

[Goeroeboeroe]

Ik heb 't even opnieuw bij jou van de site gehaald. Je hebt 't in de html goed veranderd, maar in de css niet.
In de css staat nog

p a:hover  {
border-bottom-style: dotted;
border-bottom-color: #000080;
border-bottom-width: thin;
}

Dat moet je veranderen in

div#test a:hover  {
border-bottom-style: dotted;
border-bottom-color: #000080;
border-bottom-width: thin;
}

Bij mij werkt het dan in Firefox. En omdat dit zo'n duidelijke fout is, denk ik dat 't nu zou moeten werken in alle browsers.
En anders horen we 't wel. Succes!

 

[HenkRog]

ok

nu is het goed


heel erg bedankt

 

[Goeroeboeroe]

Mooi. Kun je nog even aangeven dat je vraag is opgelost, zodat mensen niet voor niks gaan kijken?