Toon posts:

CSS en HTML in firefox

Pagina: 1
Acties:
  • 521 views

donderdag 21 januari 2010 21:34

Acties:
  • 0 Henk 'm!
  • evanraalte
  • Registratie: December 2008
  • Laatst online: 18-09 21:18

evanraalte

Topicstarter
Aangezien mijn vorige topic niet zo goed verliep heb ik besloten een nieuwe te maken. Allereerst weet ik ongeveer waar mijn probleem zat: firefox compaitiblity :)

In internet explorer gaat ie zoals het moet:

Afbeeldingslocatie: http://www.imagespray.nl/shared/npdhpqOn.png
Je ziet hier duidelijk de mouse over op het 2e plaatje.

Hier dan het firefox resultaat:

Afbeeldingslocatie: http://www.imagespray.nl/shared/asyhitaw.png
Je ziet hier toch echt heel duidelijk dat er iets mis gaat met de mouse over, terwijl het vanaf de zelfde pagina wordt gerunt.

Hier mijn html code:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>

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


<title>Mijn eerste pagina</title>
</head>
<body background="plaatje.jpg">
<a href="index.html" ><img src="plaatje.png" alt=""></a>
<a href="index.html" ><img src="plaatje.png" alt="" ></a>
<a href="index.html" ><img src="plaatje.png" alt="" ></a>
<a href="index.html" ><img src="plaatje.png" alt="" ></a>
<br>


</body>
</html>



Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

p {font-family:Calibri;
    font-size=25px;
}
img {
border-style: none;
text-decoration: none;
} 
a:hover, a:active {
            width:273px;
            height:137px;
            background:url(plaatje.png) center no-repeat;
}
a:      {
        width:273px;
        height:137px;
        background: center no-repeat;
}


ik heb mij nu volgens mij wel aardig aan de regels gehouden. Toch is er iets mis met firefox

[ Voor 2% gewijzigd door MueR op 21-01-2010 21:57 . Reden: code tags.. ]

donderdag 21 januari 2010 21:47

Acties:
  • 0 Henk 'm!
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
evanraalte schreef op donderdag 21 januari 2010 @ 21:34:

ik heb mij nu volgens mij wel aardig aan de regels gehouden
:X HTML leer je in 2 uur ja :P
Begin eens met een fatsoenlijke tutorial(s) HTML en CSS door te nemen en, ach ik noem maar wat, een doctype declaratie.

Je probleem zit niet in incompatibiliteiten tussen IE en Fx maar in je HTML en je CSS waar de nodige nukken in zitten. Verder hebben we je eerder al gewezen op code tags; gebruik die dan ook. In je CSS heb je een font-size=25px staan; dat gaat niet werken (hint: kijk eens naar de rest van je css).

Edit: je code tags werken nog steeds niet ;) We hebben niet voor niets een "Bekijk bericht" knop ;)

[ Voor 49% gewijzigd door RobIII op 21-01-2010 21:54 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 21 januari 2010 21:55

Acties:
  • 0 Henk 'm!
  • evanraalte
  • Registratie: December 2008
  • Laatst online: 18-09 21:18

evanraalte

Topicstarter
oww, I got it;)
Ik las net dat het kan gebeuren dat dit: "height:137px; "niet goed is maar "height: 137px"

PS: die code tags gaan niet helemaal goed geloof ik

donderdag 21 januari 2010 21:55

Acties:
  • 0 Henk 'm!
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
evanraalte schreef op donderdag 21 januari 2010 @ 21:55:
oww, I got it;)
Ik las net dat het kan gebeuren dat dit: "height:137px; "niet goed is maar "height: 137px"
oww, you haven't got it. At all.

Beiden zijn goed. Ik zie niet wat het verschil is anders dan een spatie. Doe jezelf een lol en kijk eens naar een willekeurige CSS file van een willekeurige site. (Hint: View source -> css file zoeken, url in je browser mikken of beter: gebruik (bijv) firebug of de webdeveloper toolbar, dan ben je er in 1 klik).

Ander vraagje: waarom gebruik je een background-attribuut als je dat (ook) in CSS kunt regelen? Je weet dat dat deprecated is?

[ Voor 58% gewijzigd door RobIII op 21-01-2010 21:59 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 21 januari 2010 22:01

Acties:
  • 0 Henk 'm!
  • Kn4kw0r5t
  • Registratie: Januari 2008
  • Laatst online: 19-07-2022

Kn4kw0r5t

RobIII schreef op donderdag 21 januari 2010 @ 21:55:
[...]

oww, you haven't got it. At all.

Beiden zijn goed. Ik zie niet wat het verschil is anders dan een spatie. Doe jezelf een lol en kijk eens naar een willekeurige CSS file van een willekeurige site. (Hint: View source -> css file zoeken, url in je browser mikken of beter: gebruik (bijv) firebug of de webdeveloper toolbar, dan ben je er in 1 klik).

Ander vraagje: waarom gebruik je een background-attribuut als je dat (ook) in CSS kunt regelen? Je weet dat dat deprecated is?
Misschien omdat dat per pagina anders moet zijn, maar hij de stylesheet wel wilt gebruiken op elke pagina?

donderdag 21 januari 2010 22:03

Acties:
  • 0 Henk 'm!
  • MueR
  • Registratie: Januari 2004
  • Laatst online: 01:20

MueR

Admin Tweakers Discord

is niet lief

Kn4kw0r5t schreef op donderdag 21 januari 2010 @ 22:01:
Misschien omdat dat per pagina anders moet zijn, maar hij de stylesheet wel wilt gebruiken op elke pagina?
Dus zet je een class op de body tag per pagina. Inline styling is minder performant omdat het (iig met background images) geen caching gebruikt.

Verder is je CSS nog steeds niet valid. Dat zei ik in je vorige topic met een reden.

Anyone who gets in between me and my morning coffee should be insecure.

donderdag 21 januari 2010 22:05

Acties:
  • 0 Henk 'm!
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Kn4kw0r5t schreef op donderdag 21 januari 2010 @ 22:01:
[...]


Misschien omdat dat per pagina anders moet zijn, maar hij de stylesheet wel wilt gebruiken op elke pagina?
Daar zijn CSS-classes voor uitgevonden ;)

edit: spuit 11 :P

[ Voor 3% gewijzigd door RobIII op 21-01-2010 22:05 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 21 januari 2010 22:22

Acties:
  • 0 Henk 'm!
  • evanraalte
  • Registratie: December 2008
  • Laatst online: 18-09 21:18

evanraalte

Topicstarter
je moet ergens beginnen...
hij werkt heel anders naar mijn mening, maar nog niet in firefox, kan iemand mij dit gewoon even uitleggen want ik zit hier al een hele tijd mee te kloten...
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
img
{
border-style: none;
text-decoration: none;
} 

a:hover,a:active
{
background-image:url('plaatje2.png');
width: 273px;
height: 137px;
}

</style>
</head>

<body>
<ul>
<li><a href="#home"><img src="plaatje.png" width="273" height="137" alt=""></a></li>
<li><a href="#news"><img src="plaatje.png" width="273" height="137" alt=""></a></li>
<li><a href="#contact"><img src="plaatje.png" width="273" height="137" alt=""></a></li>
<li><a href="#about"><img src="plaatje.png" width="273" height="137" alt=""></a></li>
</ul>
</body>
</html>

deze structuur heb ik van w3, maar ik heb zelf mijn spulletjes erin gezet, IE pakt em wel gewoon

EDIT: overbodige regels weg

[ Voor 6% gewijzigd door evanraalte op 21-01-2010 22:26 ]

donderdag 21 januari 2010 22:23

Acties:
  • 0 Henk 'm!
  • MueR
  • Registratie: Januari 2004
  • Laatst online: 01:20

MueR

Admin Tweakers Discord

is niet lief

Wat doen regels 20 tot en met 22 daar?

Anyone who gets in between me and my morning coffee should be insecure.

donderdag 21 januari 2010 22:28

Acties:
  • 0 Henk 'm!
  • macciez
  • Registratie: Maart 2008
  • Laatst online: 05-09 20:31

macciez

Ik zeg vast iets doms, maar volgens mij probeer je op 2 verschillende dingen iets te doen.
In je HTML geef je een image een link mee en in je CSS wil je een link een achtergrond meegeven, kan me niet voorstellen dat dat kan.

Do what you love, do it often

donderdag 21 januari 2010 22:28

Acties:
  • 0 Henk 'm!
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
evanraalte schreef op donderdag 21 januari 2010 @ 22:22:
je moet ergens beginnen...
Ja; bij een degelijke doctype declaratie. Zoals ik al eerder zei.

[ Voor 16% gewijzigd door RobIII op 21-01-2010 22:28 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 21 januari 2010 22:29

Acties:
  • 0 Henk 'm!
  • evanraalte
  • Registratie: December 2008
  • Laatst online: 18-09 21:18

evanraalte

Topicstarter
@macciez: Als ik het in css aangeef maakt het ook niet uit...

donderdag 21 januari 2010 22:31

Acties:
  • 0 Henk 'm!
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
evanraalte schreef op donderdag 21 januari 2010 @ 22:29:
@macciez: Als ik het in css aangeef maakt het ook niet uit...
Kan ik me niet voorstellen. Als jij dit doet:
Cascading Stylesheet:
1
2
3
4
5
6
7

a {
background:blablabla1
}

a:hover {
background:blablabla2
}

Dan ben je al een heel eind (als je de display op block zet en een width/height mee geeft). En nog beter: zet de backgroundimage op je listitem.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 21 januari 2010 22:32

Acties:
  • 0 Henk 'm!
  • macciez
  • Registratie: Maart 2008
  • Laatst online: 05-09 20:31

macciez

Om eerlijk te zijn geloof ik niet, dat je weet hoe het zou moeten in CSS. Nofi.
Ik zou je graag verder helpen, maar als het niet lukt om een hover te gebruiken moet ik mij aansluiten bij de rest. Ga op zoek naar tutorials die je verder kunnen helpen, zodat je zometeen ook weet wat je hebt gedaan en waarom.

Do what you love, do it often

donderdag 21 januari 2010 22:34

Acties:
  • 0 Henk 'm!
  • evanraalte
  • Registratie: December 2008
  • Laatst online: 18-09 21:18

evanraalte

Topicstarter
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
img
{
border-style: none;
text-decoration: none;
}
a:link 
{ 
background-image:url('plaatje.png');
width: 273px;
height: 137px;
}
a:hover,a:active
{
background-image:url('plaatje2.png');
width: 273px;
height: 137px;
}

</style>
</head>

<body>
<ul>
<li><a href="#home">-</a></li>
<li><a href="#news">-</a></li>
<li><a href="#contact">-</a></li>
<li><a href="#about">-</a></li>
</ul>
</body>
</html>


Als jullie bedoelen dat ik het plaatje ook in de css moet stoppen is dat goed, maar wat moet ik dan bij de <a> tag zetten? En weer wordt dit in IE goed weergeven en in firefox als een paar streepjes...

donderdag 21 januari 2010 22:38

Acties:
  • 0 Henk 'm!
  • MueR
  • Registratie: Januari 2004
  • Laatst online: 01:20

MueR

Admin Tweakers Discord

is niet lief

Dat ligt niet aan firefox maar aan IE. IE geeft inline elementen zomaar width en height, terwijl dat alleen op block elementen moet gebeuren. Inline elementen zijn namelijk inline.

Doe ons een lol en ga een CSS tutorial volgen (http://www.csstutorial.net/ bijvoorbeeld). Dit heeft echt geen nut zo.

[ Voor 8% gewijzigd door MueR op 21-01-2010 22:38 ]

Anyone who gets in between me and my morning coffee should be insecure.

donderdag 21 januari 2010 22:38

Acties:
  • 0 Henk 'm!
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
evanraalte schreef op donderdag 21 januari 2010 @ 22:34:
Als jullie bedoelen dat ik het plaatje ook in de css moet stoppen is dat goed, maar wat moet ik dan bij de <a> tag zetten?
Wat dacht je van een tekst die de gebruiker vertelt waar 'ie op klikt? :P
evanraalte schreef op donderdag 21 januari 2010 @ 22:34:
En weer wordt dit in IE goed weergeven en in firefox als een paar streepjes...
DOCTYPE!

http://got.devcorner.nl/testcases/1390695/
Veel plezier ermee.

[ Voor 8% gewijzigd door RobIII op 21-01-2010 22:46 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 21 januari 2010 22:39

Acties:
  • 0 Henk 'm!
  • evanraalte
  • Registratie: December 2008
  • Laatst online: 18-09 21:18

evanraalte

Topicstarter
Oke Oke, is goed. kun je anders ff alleen even zo'n block regeltje geven ( ik zou nie weten wat je bedoeld) dan kan ik zo ook gaan slapen :)

donderdag 21 januari 2010 22:40

Acties:
  • 0 Henk 'm!
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
evanraalte schreef op donderdag 21 januari 2010 @ 22:39:
Oke Oke, is goed. kun je anders ff alleen even zo'n block regeltje geven ( ik zou nie weten wat je bedoeld) dan kan ik zo ook gaan slapen :)
Kan iemand even...?

truste! :w

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 21 januari 2010 22:42

Acties:
  • 0 Henk 'm!
  • evanraalte
  • Registratie: December 2008
  • Laatst online: 18-09 21:18

evanraalte

Topicstarter
Ow laat maar, al gevonden:)
morgen maar ff wat tuts lezen

donderdag 21 januari 2010 22:43

Acties:
  • 0 Henk 'm!
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 01:18

crisp

Devver

Pixelated

MueR schreef op donderdag 21 januari 2010 @ 22:38:
Dat ligt niet aan firefox maar aan IE. IE geeft inline elementen zomaar width en height, terwijl dat alleen op block elementen moet gebeuren. Inline elementen zijn namelijk inline.
In IE > 6 zijn het ook inline elementen - in standards compliant mode uiteraard. TS heeft dus ook nog niet serieus naar RobIII in "CSS en HTML in firefox" geluisterd ;)

Intentionally left blank

donderdag 21 januari 2010 22:51

Acties:
  • 0 Henk 'm!
  • MueR
  • Registratie: Januari 2004
  • Laatst online: 01:20

MueR

Admin Tweakers Discord

is niet lief

evanraalte schreef op donderdag 21 januari 2010 @ 22:39:
Oke Oke, is goed. kun je anders ff alleen even zo'n block regeltje geven ( ik zou nie weten wat je bedoeld) dan kan ik zo ook gaan slapen :)
Nee, kunnen we niet. Zoals ik in je vorige topic ook aangaf, dit is niet een quickfix desk, noch een "leer mij html/css" forum. Ga alsjeblieft goede tutorials volgen en luister naar wat er gezegd wordt..

Anyone who gets in between me and my morning coffee should be insecure.

Pagina: 1

Dit topic is gesloten.

Apple iPhone 16e LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq