a:hover + chrome + <link> = feil?

Diablonor · 28. mai 2011

Har akkurat sitti og lagd en nettside med css i selve html filen med hjelp av <style>.

Men så lagde jeg 2 nye filer: 1 index.html og 1 style.css.

I begge disse skrev jeg alt på nytt, med utgangspunkt i den første filen.

Men plutselig så virket ikke a:hover. Det var et problem jeg møtte fra starten av. (testet css etter jeg la det til):

body {
background: #000;
margin: 0px;
}

a {
color: #55AAFF;
text-decoration: none;
}	

a:hover {
text-decoration: underline;
}


* {
font-size: 12px;
font-family: helvetica;
color: #ddd;
}

Problemet er at lenkene ikke får hover effekten. Jeg tenkte det var at problemet lå et annet sted, så jeg skrev ferdig både HTML og CSS filen. Til slutt var alt som i den første filen( i nettleseren), med unntak av hover effekten.

Etter mye frem og tilbake, bestemte jeg meg for å teste, ved å legge alt fra style.css rett inn i index.html. Det virket heller ikke - før jeg fjernet <link rel="stylesheet" type="text/css" href="style.css" />.

Så min konklusjon, ble at <link> elementet gjorde at a:hover ikke virket som den skulle. Etter å ha funnet ut dette, ble jeg intressert i å sjekke det samme i IE 9 og FF (brukte chrome i utgangspunktet). Her fungerer a:hover uten at jeg må legge css direkte inn i HTML'en.

Er det slik at Chrome ikke klarer å ta ibruk :hover når det er en <link> tag med?

Kan hende det bare er jeg som har surra det til og! Men uansett må jeg få ordnet det, slik at det virker i chrome og.

For de som vil se hele css filen:

Legger ikke ut HTML om ikke det er nødvendig, da problemet bare oppstår når <link> taggen er med, og den er skrevet slik: <link rel="stylesheet" type="text/css" href="style.css" />

/* Starting with anything not defined */

body {
background: #000;
margin: 0px;
}

a {
color: #55AAFF;
text-decoration: none;
}	

a:hover {
text-decoration: underline;
}


* {
font-size: 12px;
font-family: helvetica;
color: #ddd;
}

/* now, on the the divs that make out the different sections of the site */

div#wrapper {
width: 1280px;
height: 800px;
margin: auto;
}

div#header {
width: 100%;
height: 120px;
background: #333;
}

div#stats {
float: left;
padding: 10px;
width: 180px;
height: 90px;
margin: 5px;
}

div#content {
width: 100%;
height: 100%;
margin-top: 10px;
background: #333;
}

div#profile {
margin: auto;
padding: 10px 0 10px 0;
width: 200px;
text-align: center;
}

div#navigation {
margin: auto;
padding: 10px 0 10px 0;
width: 200px;
}

div#content_frame {
float: left;
margin: 5px;
padding: 10px;
width: 828px;
height: 608px;
}

div#footer {
margin-top: 10px;
padding: 5px;
width: 1270;
height: 30px;
background: #333;
text-align: center;
}

/* Making classes used by multiple elements in all the sections */

div.sidebar {
float: left;
margin: 5px;
width: 200px;
}

div.standard_box {
padding: 5px;
background: #222;
border: solid 1px #444;
}

div.box_1 {
width: 188px;
height: 100px;
margin-bottom: 10px;
}

/* Then comes the elements of the header section */

table#stats {
padding: 0xp;
margin: 0px;
width: 100%;
height: 100%;
}

table#stats td {
margin: 0px;
padding: 1px;
}

img.logo {
margin: 5px;
float: left;
width: 750px;
height: 108px;
border: solid 2px #444;
}

/* Next is the sidebar elements profile and navigation */

div#profile img {
margin: auto;
display: block;
width: 100px;
height: 100px;
border: solid 2px #444;
}

div#status_box {
margin-top: 10px;
}

div#status_box b {
padding-left: 20px;
text-align: left;
display: block;
}

div#profile meter {
margin: auto;
width: 180px;
}

div#navigation {
margin: auto;
padding: 10px 0 10px 0;
width: 200px;
}

div#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
background: #222;
border: solid 1px #444;
}

div#navigation li.nav_head {
display: block;
padding-left: 20px;
}

div#navigation li.nav_head b {
font-size: 14px;
line-height: 20px;
}

div#navigation ul li.nav_element {
padding-left: 40px;
line-height: 18px;
}
div#navigation ul li.nav_element {
display: block;
}

**Runar** · 29. mai 2011

Jeg har aldri vært borti dette problemet før. Kan du laste opp koden til index.html så jeg kan prøve på min egen maskin?

Occi · 29. mai 2011

Det fungerer helt utmerket for meg her i Chrome (og Firefox). Bruker stable på Ubuntu, tviler på at det har noe å si.

HTML:

<!DOCTYPE HTML>
<html>
<head>
   	<title>a:hover test</title>
   	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   	<a href="http://diskusjon.no">diskusjon.no</a>
</body>
</html>

CSS:

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

Resultatet kan sees her (privat server, ikke garantert oppetid).

Diablonor · 29. mai 2011

HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div id="wrapper">

<div id="header">

	<div id="stats" class="standard_box">

		<table id="stats">
			<tr>
				<td><b>Level:</b></td>  <td>1</td>
			</tr>
			<tr>
				<td><b>Coins:</b></td>	 <td>1000</td>
			</tr>
			<tr>
				<td><b>Energy:</b></td> <td>100</td>
			</tr>
			<tr>
				<td><b>Rank:</b></td>	 <td>#1</td>
			</tr>
			<tr>
				<td><b>Account Type:</b></td>	 <td>Administrator</td>
			</tr>
		</table>

	</div>

	<img src="logo.png" alt="logo" class="logo">

</div>

<div id="content">

	<div class="sidebar">

		<div id="profile" class="standard_box">

			<a href="#">Diablo(1)</a>

			<img src="noPicture.jpg" />

			<div id="status_box">

				<b>Health:</b>

				<meter value="89" min="0" max="100" high="60" low="20" optimum="100">80%</meter>

				<b>Experience:</b>

				<meter value="10" min="0" max="100" optimum="100">10%</meter>

			</div>

		</div>

		<div id="navigation">

			<li class="nav_head"> <b>Your character</b> </li>

			<ul>
				<li class="nav_element"> <a href="#">Profile</a> </li>
				<li class="nav_element"> <a href="#">Storage</a> </li>
				<li class="nav_element"> <a href="#">Mail [0]</a> </li>
				<li class="nav_element"> <a href="#">Events [0]</a> </li>
			</ul>

			<li class="nav_head"> <b>Travel</b> </li>

			<ul>
				<li class="nav_element"> <a href="#">Town</a> </li>
				<li class="nav_element"> <a href="#">Forest</a> </li>
				<li class="nav_element"> <a href="#">Arena</a> </li>
				<li class="nav_element"> <a href="#">My clan</a> </li>
				<li class="nav_element"> <a href="#">Clan wars</a> </li>
			</ul>

			<li class="nav_head"> <b>Communication</b> </li>

			<ul>
				<li class="nav_element"> <a href="#">Updates</a> </li>
				<li class="nav_element"> <a href="#">Support</a> </li>
				<li class="nav_element"> <a href="#">Forum</a> </li>
				<li class="nav_element"> <a href="#">Chat</a> </li>
			</ul>

			<li class="nav_head"> <b>Other</b> </li>

			<ul>
				<li class="nav_element"> <a href="#">Preferences</a> </li>
				<li class="nav_element"> <a href="#">Donate</a> </li>
				<li class="nav_element"> <a href="#">Log out</a> </li>
			</ul>

		</div>

	</div>

	<div id="content_frame" class="standard_box">

		Her er en liten bit med content!

	</div>

	<div class="sidebar">

		<div class="box_1 standard_box">
			REKLAME?
		</div>

		<div class="box_1 standard_box">
			TOP 10?
		</div>

		<div class="box_1 standard_box">
			SISTE INNLEGG?
		</div>

		<div class="box_1 standard_box">
			NAVIGASJON?
		</div>

	</div>

Testet med <a href="#">link</a> og ekstern styleshet(uten noe annet) og det fungerte som påpekt over. Men når jeg la til resten av HTML, så virket den første lenken(så nå ligger øverst på siden) mens det andre virket ikke. MEN de andre fungerer, om jeg tar musa over den første lenken! Det er rart

Endret 29. mai 2011 av Diablonor

Occi · 29. mai 2011

Veit ikke om det er noen limit her eller om du har kuttet scriptet, men det som du postet der har jo ikke sluttag til body eller html, så er ikke rart om det ikke fungerer i så fall. Er også en drøss med andre feil i scriptet ditt, men jeg veit ikke om det er det som gjør at du får problemer. Om du ikke la ut hele koden (eller den ble kuttet), prøv med validator.w3.org.

Diablonor · 29. mai 2011

Veit ikke om det er noen limit her eller om du har kuttet scriptet, men det som du postet der har jo ikke sluttag til body eller html, så er ikke rart om det ikke fungerer i så fall. Er også en drøss med andre feil i scriptet ditt, men jeg veit ikke om det er det som gjør at du får problemer. Om du ikke la ut hele koden (eller den ble kuttet), prøv med validator.w3.org.

Har fikset alle feil validatoren gir meg, uten hell når det gjelder :hover.

Jeg sjekket som HTML 5 (da jeg får error med 4.01 siden jeg har HTML5s nye <meter> </meter>), og besto.

Gjorde for sikkerhets skyld det samme med HTML 4.01 validering, og fikk kun feil som lå i <meter>.

Ser at koden min ble kortet ned, men her er hele HTML filen:



<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div id="wrapper">

<div id="header">

	<div id="stats" class="standard_box">

		<table id="stats_table">
			<tr>
				<td><b>Level:</b></td>  <td>1</td>
			</tr>
			<tr>
				<td><b>Coins:</b></td>	 <td>1000</td>
			</tr>
			<tr>
				<td><b>Energy:</b></td> <td>100</td>
			</tr>
			<tr>
				<td><b>Rank:</b></td>	 <td>#1</td>
			</tr>
			<tr>
				<td><b>Account Type:</b></td>	 <td>Administrator</td>
			</tr>
		</table>

	</div>

	<img src="logo.png" alt="logo" class="logo">

</div>

<div id="content">

	<div class="sidebar">

		<div id="profile" class="standard_box">

			<a href="#">Diablo(1)</a>

			<img src="noPicture.jpg" alt="">

			<div id="status_box">

				<b>Health:</b>

				<meter value="89" min="0" max="100" high="60" low="20" optimum="100">80%</meter>

				<b>Experience:</b>

				<meter value="10" min="0" max="100" optimum="100">10%</meter>

			</div>

		</div>

		<div id="navigation">

			<ul>
				<li class="nav_head"> <b>Your character</b> </li>
			</ul>

			<ul>
				<li class="nav_element"> <a href="#">Profile</a> </li>
				<li class="nav_element"> <a href="#">Storage</a> </li>
				<li class="nav_element"> <a href="#">Mail [0]</a> </li>
				<li class="nav_element"> <a href="#">Events [0]</a> </li>
			</ul>

			<ul>

			<li class="nav_head"> <b>Travel</b> </li>

			</ul>

			<ul>
				<li class="nav_element"> <a href="#">Town</a> </li>
				<li class="nav_element"> <a href="#">Forest</a> </li>
				<li class="nav_element"> <a href="#">Arena</a> </li>
				<li class="nav_element"> <a href="#">My clan</a> </li>
				<li class="nav_element"> <a href="#">Clan wars</a> </li>
			</ul>

			<ul>

			<li class="nav_head"> <b>Communication</b> </li>

			</ul>

			<ul>
				<li class="nav_element"> <a href="#">Updates</a> </li>
				<li class="nav_element"> <a href="#">Support</a> </li>
				<li class="nav_element"> <a href="#">Forum</a> </li>
				<li class="nav_element"> <a href="#">Chat</a> </li>
			</ul>

			<ul>

			<li class="nav_head"> <b>Other</b> </li>

			</ul>

			<ul>
				<li class="nav_element"> <a href="#">Preferences</a> </li>
				<li class="nav_element"> <a href="#">Donate</a> </li>
				<li class="nav_element"> <a href="#">Log out</a> </li>
			</ul>

		</div>

	</div>

	<div id="content_frame" class="standard_box">

		Her er en liten bit med content!

	</div>

	<div class="sidebar">

		<div class="box_1 standard_box">
			REKLAME?
		</div>

		<div class="box_1 standard_box">
			TOP 10?
		</div>

		<div class="box_1 standard_box">
			SISTE INNLEGG?
		</div>

		<div class="box_1 standard_box">
			NAVIGASJON?
		</div>

	</div>

</div>

<div id="footer">
	© Diablonor 2011
</div>

</div>

</body>

</html>

Hvilke feil fant du i filen forresten?

Occi · 29. mai 2011

Merkelig. Jeg testet nå med nyeste HTML-scriptet du skrev, samt hele CSSen du linket i stad, og det fungerer fint her. Var ganske fin css egentlig :-) Irriterer meg at FF 4.01 ikke støtter meter. Men er litt risky å basere sidene sine på slikt enda med andre ord.

Testet med Firefox 4.01 og Chrome 11.0.696.71

Feilene jeg fant var mest ukjente ting som validatoren ikke kjente igjen, så ikke så nøye, men det klarer du å fikse selv

Endret 29. mai 2011 av Occi

Matsemann · 29. mai 2011

En liten ting:

alltid putt

* {

blablabla

}

ØVERST i CSS-filen. Settes en egenskap flere ganger, velges alltid den siste (nederste) verdien.

Jeg er og fan av å putte

margin: 0px;

padding: 0px;

innunder *. Da blir alt nullstilt, og så setter man ting selv isteden for å kjøre på med standardverdiene til nettleserne (som er forskjellig fra nettleser til nettleser).

Bare mine 2 cent.

Diablonor · 29. mai 2011

Merkelig. Jeg testet nå med nyeste HTML-scriptet du skrev, samt hele CSSen du linket i stad, og det fungerer fint her. Var ganske fin css egentlig :-) Irriterer meg at FF 4.01 ikke støtter meter. Men er litt risky å basere sidene sine på slikt enda med andre ord.

Testet med Firefox 4.01 og Chrome 11.0.696.71

Feilene jeg fant var mest ukjente ting som validatoren ikke kjente igjen, så ikke så nøye, men det klarer du å fikse selv

Sitter med Chrome 13.0.772.0 dev-m av en eller annen grunn, så feilen ligger sikkert der

Men sålenge den fungerer i 11.0.696.71 så vil jeg tro det er greit, er jo ikke gitt at alle sitter med chrome dev-m

Tusen takk for all hjelp!

Occi · 29. mai 2011

Ah, det er vel forhåpentligvis feilen ja.

Lykke til videre med siden din! :-)

Endret 29. mai 2011 av Occi

**Runar** · 29. mai 2011

margin: 0px;

padding: 0px;

Tips til tipset: 0px kan erstattes med en enkel 0.

Logg inn

a:hover + chrome + <link> = feil?

Anbefalte innlegg

Diablonor

Lenke til kommentar

Videoannonse

Runar

Lenke til kommentar

Occi

Lenke til kommentar

Diablonor

Lenke til kommentar

Occi

Lenke til kommentar

Diablonor

Lenke til kommentar

Occi

Lenke til kommentar

Matsemann

Lenke til kommentar

Diablonor

Lenke til kommentar

Occi

Lenke til kommentar

Runar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer