login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Layout browserstrijd

Offline Pellens - 16/06/2008 22:49
Avatar van PellensPHP interesse Hi, ik heb het volgende script geschreven:

  1. <!--ZOEKEN-->
  2.  
  3. <div id="divZoeken">
  4. <form name="zoeken" action="zoeken.php" method="post">
  5.  
  6. <input type="hidden" value="events" name="type" id="type" />
  7. <div id="inputZoekveld" onmouseover="toonTabblad(1);" onmouseout="toonTabblad(0);">
  8.  
  9. <!--INPUTVELD-->
  10. <input type="text" name="zoekveld" id="zoekveld" onkeyup="liveSearch();" autocomplete="off" /><input type="submit" value="" id="zoekknop" />
  11. <!--/INPUTVELD-->
  12.  
  13. <!--TABBLAD-->
  14. <div id="tabblad">
  15. <p id="tabbladLinkevents" onclick="wijzigType('events'); liveSearch();" style="color:#FF3333;">Feestje <span id="tabbladFeestje"></span></p>
  16. <hr id="dotted"/>
  17. <p id="tabbladLinkfestival" onclick="wijzigType('festival'); liveSearch();">Festival <span id="tabbladFestival"></span></p>
  18. <hr id="dotted"/>
  19. <p id="tabbladLinkhal" onclick="wijzigType('hal'); liveSearch();">Locatie <span id="tabbladZaal"></span></p>
  20. <hr id="dotted"/>
  21. <p id="tabbladLinkprovincie" onclick="wijzigType('provincie'); liveSearch();">Provincie <span id="tabbladProvincie"></span></p>
  22. </div>
  23. <!--TABBLAD-->
  24.  
  25. </div>
  26. </form>
  27. </div>
  28.  
  29. <!--/ZOEKEN-->


met de volgende opmaak code:

  1. #divZoeken {
  2. background-color:#333333;
  3. padding:5px;
  4. height:30px;
  5. border:1px solid #000000;
  6. width:220px;
  7. }
  8.  
  9. #inputZoekveld {
  10. float:left;
  11. }
  12.  
  13. #tabblad {
  14. width:150px;
  15. display:none;
  16. height:110px;
  17. background-image:url(images/tabblad_bg.png);
  18. background-repeat:no-repeat;
  19. margin-left:-6px;
  20. padding-top:5px;
  21. }
  22.  
  23. #tabbladLinkhal, #tabbladLinkprovincie, #tabbladLinkevents, #tabbladLinkfestival {
  24. cursor:pointer;
  25. color:#0099CC;
  26. margin:4px 0 4px 12px;
  27. font-size:11px;
  28. font-family:arial;
  29. }
  30.  
  31. #zoekveld {
  32. background-image:url(images/zoeken_bg.png);
  33. padding:7px 5px 5px 7px;
  34. height:30px;
  35. width:170px;
  36. background-color:#333333;
  37. border:none;
  38. margin-bottom:1px;
  39. }
  40.  
  41. #zoekknop {
  42. background-image:url(images/zoeken_knop_bg.png);
  43. height:30px;
  44. width:30px;
  45. border:none;
  46. background-color:#333333;
  47. }
  48.  
  49. #dotted {
  50. border-top:dotted 1px #eeeeee;
  51. margin:0 8px 0 8px;
  52. border-bottom:none;
  53. border-left:none;
  54. border-right:none;
  55. }


Nu zoals je kan zien is deze versie ideaal voor Firefox en Netscape, maar Opera en IE6 (7 weet ik nog niet) tonen een ongewenst resultaat.

Ik vroeg me af als jullie me kunnen helpen/leren deze strijd op te lossen.

Alvast bedankt!!

7 antwoorden

Gesponsorde links
Offline Wim - 16/06/2008 23:07
Avatar van Wim Crew algemeen http://jigsaw.w...e_by_input

geen fouten gevonden volgens W3....
Offline Pellens - 16/06/2008 23:26
Avatar van Pellens PHP interesse Hij is correct qua code, maar qua lay-out (vormgeving in de browser) is er verschil van dag en nacht...
Offline master666 - 17/06/2008 01:38
Avatar van master666 Lid lang leve microsoft...

je kan het best op google op zoek gaan naar CSS hacks...

dit zijn stukjes code/tekst dat je toevoegt in je css, waardoor sommige browsers lijnen anders/niet gaan interpreteren en het zo wel goed komt...
Offline zointer - 17/06/2008 08:42
Avatar van zointer HTML gevorderde
Pellens schreef:
Nu zoals je kan zien is deze versie ideaal voor Firefox en Netscape, maar Opera en IE6 (7 weet ik nog niet) tonen een ongewenst resultaat.

Pellens schreef:
Hij is correct qua code, maar qua lay-out (vormgeving in de browser) is er verschil van dag en nacht...

En als je nu eens een voorbeeld geeft van wat er fout loopt, want volgens het geen ik zie is het enkel in IE6 goed????

master666 schreef:
lang leve microsoft...
je kan het best op google op zoek gaan naar CSS hacks...

Begin hier al niet mee van voor je nog niet eens weet wat er fout loopt.
Offline Pellens - 17/06/2008 11:16 (laatste wijziging 17/06/2008 15:20)
Avatar van Pellens PHP interesse Inderdaad niet slim van mij om het zo te posten, ik heb even de pagina online gezet, zodat je rechtstreeks eens kan kijken:

Zoekscript Pellens

De pagina is Firefox/Netscape compatibel gemaakt.
De fouten zitten hem in:

IE
- PNG afbeeldingen (IE fix v/h forum deed het niet...)
- <p>-elementen binnen het tabblad
- <hr> element wordt vreemd weergegeven
- <div id='inputzoekveld'> vergroot mee bij het openen van het tabblad

Opera
- <div id='inputzoekveld'> vergroot mee bij het openen van het tabblad

Alvast bedankt!

Edit: nu zie ik weer dat zelfs Firefox 3 verschilt van haar oudere versie... Zo wordt het allemaal wel moeiiljk he!
Offline Sandernerd - 17/06/2008 14:17
Avatar van Sandernerd PHP beginner Over dat op een lijn komen van input en zoekknop: Gebruik eens float: left;
Offline Pellens - 17/06/2008 15:27
Avatar van Pellens PHP interesse One down!

Dit werkt, zie edit #5 voor overblijvende problemen...
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2019 Sitemasters.be - Regels - Laadtijd: 0.208s