login  Naam:   Wachtwoord: 
Registreer je!
 Forum

IE en Safari verschillen (Opgelost)

Offline radiofreak - 15/04/2010 10:27
Avatar van radiofreakNieuw lid Hey,

Nu mijn probleem met de border opgelost is kom ik bij een volgend probleem.
Wanneer ik mijn website in Safari bekijk, zie ik de website zoals hij moet zijn maar wanneer ik hem in Internet Explorer bekijk krijg ik 2 menu's onder elkaar te zien ipv 1.
Heeft er iemand een oplossing? 


http://www.apropeau.net/muzzic/index.html

21 antwoorden

Gesponsorde links
Offline WouterJ - 15/04/2010 13:28
Avatar van WouterJ HTML gevorderde Misschien dat het ligt aan de vele fouten in CSS en HTML:
HTML
CSS
Offline WimJ - 15/04/2010 13:32
Avatar van WimJ Grafische gevorderde
Waldio schreef:
Misschien dat het ligt aan de vele fouten in CSS en HTML:
HTML
CSS


Zou eerder zeggen, het niet gebruiken van IE Hacks  
Offline radiofreak - 15/04/2010 13:56 (laatste wijziging 15/04/2010 17:37)
Avatar van radiofreak Nieuw lid Het probleem met de menu is opgelost. Heb heel de site laten checken door de W3C validator en er zijn geen errors meer. Toch blijf ik een verschil tussen IE en Safari zien.
Bij Safari werken de mouseovers perfect, in Internet Explorer zijn er geen mouseovers meer.

http://www.apropeau.net/muzzic/index.html
Offline denniseik - 15/04/2010 17:40
Avatar van denniseik Lid Waarom gebruik je niet gewoon het hover-effect in css.
Je kan bijvoorbeeld je menu opdelen in div's, vervolgens de images als achtergrond en bij hover een ander achtergrond image tonen. Voor het klikeffect gebruik je cursor: pointer.
Offline radiofreak - 15/04/2010 17:47
Avatar van radiofreak Nieuw lid Mag ik de code van de menu eens doorsturen? Ben niet zo'n held in Mouse-over in CSS.
Offline WouterJ - 15/04/2010 20:12 (laatste wijziging 15/04/2010 20:12)
Avatar van WouterJ HTML gevorderde Ik zal je wel wat helpen met CSS:hover, maar de rest moet je toch wel zelf doen:

Stap 1: De menu opdelen in classes
Eerst maken we een menu met lijsten, en laten elk lijst item left floaten zodat ze naast elkaar staan en we geven een width:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. li {
  2. float: left;
  3. width: 100px;
  4. }

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="menu">
  2. <ul>
  3. <li class="home"><a href="/"></a></li>
  4. <li class="nieuws"><a href="/nieuws.html"></a></li>
  5. <li class="contact"><a href="/contact.html"></a></li>
  6. </ul>


Stap 2: Aan de classes background-image toevoegen
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .home{
  2. background-image: url(/images/home.png);
  3. background-repeat: no-repeat;
  4. }
  5. .nieuws{
  6. background-image: url(images/home.png);
  7. background-repeat: no-repeat;
  8. }
  9. .contact{
  10. background-image: url(images/contact.png);
  11. background-repeat: no-repeat;
  12. }


Stap 3: De :hover effecten maken voor de classes
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .home:hover {
  2. background-image: url(images/homehover.png);
  3. background-repeat: no-repeat;
  4. }
  5. .nieuws:hover {
  6. background-image: url(images/nieuwshover.png);
  7. background-repeat: no-repeat;
  8. }
  9. .contact:hover {
  10. background-image: url(images/contacthover.png);
  11. background-repeat: no-repeat;
  12. }


Stap 4: De hele code
css code - Bekijk de code zonder highlighting - Klap code in 
  1. li {
  2. float: left;
  3. width: 100px;
  4. }
  5. .home{
  6. background-image: url(/images/home.png);
  7. background-repeat: no-repeat;
  8. }
  9. .nieuws{
  10. background-image: url(images/home.png);
  11. background-repeat: no-repeat;
  12. }
  13. .contact{
  14. background-image: url(images/contact.png);
  15. background-repeat: no-repeat;
  16. }
  17. .home:hover {
  18. background-image: url(images/homehover.png);
  19. background-repeat: no-repeat;
  20. }
  21. .nieuws:hover {
  22. background-image: url(images/nieuwshover.png);
  23. background-repeat: no-repeat;
  24. }
  25. .contact:hover {
  26. background-image: url(images/contacthover.png);
  27. background-repeat: no-repeat;
  28. }

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="menu">
  2. <ul>
  3. <li class="home"><a href="/"></a></li>
  4. <li class="nieuws"><a href="/nieuws.html"></a></li>
  5. <li class="contact"><a href="/contact.html"></a></li>
  6. </ul>


Als het goed is moet je nu met :hover de afbeelding veranderen.

Succes! 
Bedankt door: radiofreak
Offline radiofreak - 16/04/2010 10:20
Avatar van radiofreak Nieuw lid Eerst en vooral bedankt dat u mij wilt helpen...
De code ziet er goed uit, ik heb ze net uitgeprobeerd, maar het lijkt toch dat ik iets verkeerd doe, ik heb de pagina online gezet:
http://apropeau.net/muzzic/cssmenu.html
Offline genkstar - 16/04/2010 11:09
Avatar van genkstar Nieuw lid Je moet een hoogte en een breedtje instellen bij elke image

en bij li css

kan je zetten margin-left:10px;
Offline radiofreak - 16/04/2010 12:05
Avatar van radiofreak Nieuw lid Perfect, werkt zoals het moet... Nu zouden de buttons enkel nog gecentreerd moeten staan in de menu. Heb al eens geprobeerd met text-align: center;, maar helaas geen resultaat.
Offline Martijn - 16/04/2010 12:22 (laatste wijziging 16/04/2010 12:22)
Avatar van Martijn Crew PHP even een kortere versie:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .home{background: url('images/home.png') no-repeat;}
  2. .home:hover {background: url('images/homehover.png') no-repeat;}


scheelt in je css bestand weer, en is overzichtelijker, en omdat t kleiner is laad je site iets sneller ;)

edit: En wel netjes quotes in je url() zetten ;)
Bedankt door: radiofreak
Offline Mikee - 16/04/2010 13:27
Avatar van Mikee Nieuw lid Dat het sneller laat ben ik het mee eens maar overzichtelijker word het niet als je grote stylesheets hebt.

En die quotes in je url() => url('') waarom doe je dat als ik vragen mag?
Offline Martijn - 16/04/2010 13:39 (laatste wijziging 16/04/2010 13:41)
Avatar van Martijn Crew PHP Vind je dit:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .home{
  2. background-image: url(/images/home.png);
  3. background-repeat: no-repeat;
  4. }
  5. .nieuws{
  6. background-image: url(images/home.png);
  7. background-repeat: no-repeat;
  8. }
  9. .contact{
  10. background-image: url(images/contact.png);
  11. background-repeat: no-repeat;
  12. }
  13. .home:hover {
  14. background-image: url(images/homehover.png);
  15. background-repeat: no-repeat;
  16. }
  17. .nieuws:hover {
  18. background-image: url(images/nieuwshover.png);
  19. background-repeat: no-repeat;
  20. }
  21. .contact:hover {
  22. background-image: url(images/contacthover.png);
  23. background-repeat: no-repeat;
  24. }
  25. }

Overzichtelijker dan:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .home   {background: url('images/home.png')   no-repeat;}
  2. .nieuws {background: url('images/home.png')    no-repeat;}
  3. .contact{background: url('images/contact.png') no-repeat;}
  4. .home:hover    {background: url('images/homehover.png');   no-repeat;}
  5. .nieuws:hover  {background: url('images/nieuwshover.png')  no-repeat;}
  6. .contact:hover {background: url('images/contacthover.png') no-repeat;}

??

anyway, de quotes zijn gewoon een goede gewoonte. Mocht je om 1 of andere vage reden een bestandsnaam met een spatie hebben, blijft alles goed werken. NIet alleen hier in de url(), maar gewoon overal.
Offline radiofreak - 16/04/2010 14:26 (laatste wijziging 16/04/2010 14:27)
Avatar van radiofreak Nieuw lid Ik vrees dat het alleen maar erger geworden is.  
Take a look   http://www.apropeau.net/muzzic/cssmenu.html
Offline genkstar - 16/04/2010 14:29
Avatar van genkstar Nieuw lid Je hebt geen
background:url('imgpath');
staan bij de verschillende stijl-classes.
Offline radiofreak - 16/04/2010 14:33
Avatar van radiofreak Nieuw lid Klopt, nu is het inorde... Iemand een idee hoe ik alles mooi kan centreren?
Offline genkstar - 16/04/2010 14:41 (laatste wijziging 16/04/2010 14:48)
Avatar van genkstar Nieuw lid maak een div en geeft de attribute class de waarde menulist

.menulist {width:800px; margin-left:auto; margin-right:auto;}

zoiets endan zal het gecentreerd moete zijn

Je hebt ook JavaScript fouten waardoor je waarschijnlijk gecached informatie gaat ophalen..

var cacheBuster = "?t=" + Date.parse(new Date());
ergens in't begin staat dit.
var random : Math.floor(Math.random() * 999999999999);
var cacheBuster = "?t=" + random;

Zo kan je wel caching tegen gaan
Bedankt door: radiofreak
Offline radiofreak - 16/04/2010 14:46
Avatar van radiofreak Nieuw lid Inderdaad, het werkt volledig zoals het moet! 
Bedankt iedereen!!

Sorry hoor, merk hier nog 1 foutje 
Iemand een idee hoe ik mijn links aan de praat krijg? Ik kan niet klikken op de knoppen.
Offline WouterJ - 16/04/2010 15:08
Avatar van WouterJ HTML gevorderde Dat klopt. Dan moet je wat meer dingen aanpassen met CSS.

Ik zal het je wel even uitleggen. Ik ga verder op de code in post 6.

Stap 1: Eerst de link een naam geven en in een span zetten
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="menu">
  2. <ul>
  3. <li class="home"><a href="/"><span>Home</span></a></li>
  4. <li class="nieuws"><a href="nieuws.html"><span>Nieuws</span></a></li>
  5. <li class="contact"><a href="contact.html"><span>Contact</span></a></li>
  6. </ul>


Stap 2: De span laten verdwijnen
css code - Bekijk de code zonder highlighting - Klap code in 
  1. span{
  2. display: none;
  3. }


Stap 3: Van de link een blok maken die evengroot is als het plaatje
css code - Bekijk de code zonder highlighting - Klap code in 
  1. a{
  2. display: block;
  3. width: 100px;
  4. height: 50px;
  5. }


Stap 4: De hele code
css code - Bekijk de code zonder highlighting - Klap code in 
  1. span{
  2. display: none;
  3. }
  4. a{
  5. display: block;
  6. width: 100px;
  7. height: 50px;
  8. }

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="menu">
  2. <ul>
  3. <li class="home"><a href="/"><span>Home</span></a></li>
  4. <li class="nieuws"><a href="nieuws.html"><span>Nieuws</span></a></li>
  5. <li class="contact"><a href="contact.html"><span>Contact</span></a></li>
  6. </ul>


Als het goed is moet de link nu werken.

Succes 
Offline radiofreak - 16/04/2010 15:21 (laatste wijziging 16/04/2010 23:03)
Avatar van radiofreak Nieuw lid Ja, dit is de oplossing, allemaal heel erg bedankt!

Ik weet dat ik blijf afkomen met vragen, maar ik denk dat dit de laatste vraag is aangezien mijn menu er volledig staat. Bovenaan staat er nowplaying met daaronder een iframe.
Nu verschuift die iframe telkens als ik van pagina verander, terwijl op elke pagina "style.css" wordt toegepast. Switch maar eens tussen Home en Nieuws...

http://www.apropeau.net/muzzic/index.html
Offline kiwi - 16/04/2010 23:54 (laatste wijziging 16/04/2010 23:56)
Avatar van kiwi Nieuw lid Dit komt omdat er niet hetzelfde staat:


Home
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="beluister"><p class="tunein"><a href="http://www.apropeau.net/luisterdanceup" target="_blank"></a></p></div>
  2. <a href="index.html" target="_blank"></a>
  3.  
  4. <div id="nowplaying"><iframe src="http://www.apropeau.net/nowplaying/nowplaying%20website.php" name="nowplaying" width="400" height="45" scrolling="no" frameborder="0"></iframe></div>
  5. </div>

Nieuws
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="beluister"><a href="http://www.apropeau.net/luisterdanceup" target="_blank"><img src="images/tunein.png" alt="tunein"></a></div>
  2. <a href="index.html" onMouseOver="document.mouseover6.src=tuneinover.src" onMouseOut="document.mouseover6.src=tunein.src" target="_blank"></a>
  3.  
  4. <div id="nowplaying"><iframe src="http://www.apropeau.net/nowplaying/nowplaying%20website.php" name="nowplaying" width="400" height="45" scrolling="no" frameborder="0"></iframe></div>
  5. </div>
mss eens de "<p class="tunein"> ... </p>" bij de andere toevoegen?
en die andere zaken 
Offline radiofreak - 17/04/2010 13:20
Avatar van radiofreak Nieuw lid Klopt, niet goed opgelet, ik sluit deze topic af..
Nog eens bedankt iedereen!  
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.451s