[HTML] Browser verschil... - Softwareontwikkeling

maandag 1 augustus 2005 15:37

Acties:

Topicstarter

Hallo, ben op dit moment bezig met een website, en uiteraard loopt het weer mis bij de browsers...

In Mozilla Firefox is hij perfect, en in IE laat ie wat gaten zien tussen de plaatjes..

Afbeeldingslocatie: http://img210.imageshack.us/img210/8030/ieff9hf.th.png

links dus IE, rechts FF...

Ik heb alle cellpadding/cellspacing/margins etc op 0 gezet, alle afmetingen van de plaatjes kloppen, en heb geen idee wat er aan de hand is

kan iemand helpen?

maandag 1 augustus 2005 15:43

Acties:

nsa1984

Ik hoop toch echt dat je niet met tabellen aan het vormgeven bent he

je kunt padding en margins ook op negatieve waarden zetten dacht ik en zorg ervoor dat ze absoluut zijn, als je met procenten gaat werken wil dat ook nog weleens voor probleempjes zorgen.

Met CSS moet je even zoeken op BOX model omdat dit anders is geimplementeerd door ie ten opzichte van opera en firefox.

De waarheid is leuk, maar hoe heb je die gevonden?

maandag 1 augustus 2005 15:45

Acties:

Thrilled

Topicstarter

nsa1984 schreef op maandag 01 augustus 2005 @ 15:43:
Ik hoop toch echt dat je niet met tabellen aan het vormgeven bent he

je kunt padding en margins ook op negatieve waarden zetten dacht ik en zorg ervoor dat ze absoluut zijn, als je met procenten gaat werken wil dat ook nog weleens voor probleempjes zorgen.

Met CSS moet je even zoeken op BOX model omdat dit anders is geimplementeerd door ie ten opzichte van opera en firefox.

ik werk dus wel met tabellen

en ze staan al absoluut...

maandag 1 augustus 2005 15:48

Acties:

Predje

Waarom zou je niet met tabellen werken? wat is dan een goed alternatief in CSS?

maandag 1 augustus 2005 15:51

Acties:

uruviel359

zet dit eens boven aan je document

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

Dat zou nog wel eens verschil kunnen maken

maandag 1 augustus 2005 15:51

Acties:

Harm

Ik gok dat je code hebt à la dit:

HTML:

[nohtml]<table>
    <tr>
        <td>Hier komt een plaatje:</td>
        <td>
            <img src="foo.bar">
        </td>
    </tr>
</table>[/nohtml]

Het gaat dus om die witregels om <img /> heen. Die moeten er niet staan en dan gaat het wel goed.

[edit]
Geef trouwens eens wat relevante code, want op dit moment is het behoorlijk tasten in het duister.

[ Voor 15% gewijzigd door Harm op 01-08-2005 15:52 ]

maandag 1 augustus 2005 15:52

Acties:

Verwijderd

Waarom zou je niet met tabellen werken? wat is dan een goed alternatief in CSS?

In dit geval <UL> en <LI> bijvoorbeeld...

maandag 1 augustus 2005 15:53

Acties:

Verwijderd

Niet in CSS maar met CSS en div's en list's ga je een heel eind komen. Resulteert in ee overzichtlijkere en onderhoudbaardere code.

[edit]
Menu's in list is erg goed te doen, ook geneste lijsten

[ Voor 24% gewijzigd door Verwijderd op 01-08-2005 15:54 ]

maandag 1 augustus 2005 15:53

Acties:

Zoefff

❤ 

Predje schreef op maandag 01 augustus 2005 @ 15:48:
Waarom zou je niet met tabellen werken? wat is dan een goed alternatief in CSS?

Omdat tabellen bedoeld zijn voor tabulaire data, en een menu is dat absoluut niet. Een goed alternatief element in HTML (!) is een (un)ordered list. Die kan je vervolgens met CSS zo opmaken dat het er precies hetzelfde uit ziet

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

maandag 1 augustus 2005 16:07

Acties:

Thrilled

Topicstarter

uruviel schreef op maandag 01 augustus 2005 @ 15:51:
zet dit eens boven aan je document
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

Dat zou nog wel eens verschil kunnen maken

hierdoor werd het alleen maar erger in FF en in IE bleef het hetzelfde, ik zal even de code opzoeken voor jullie, moment

<TD>
<a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image36','','images/actueelschilderwerken_04OVER.PNG',1)">
[img]"images/actueelschilderwerken_04.png"[/img]</a> </TD>

Dit is het Home knopje (inclusief roll-over via Dreamweaver gedaan..)

--

de hele code is nog niet uitgelijnd en netjes neergezet, dat doe ik altijd als ik klaar ben en als het werkt... dus als ik de hele code zou geven snapt niemand er iets van

[ Voor 59% gewijzigd door Thrilled op 01-08-2005 16:11 ]

maandag 1 augustus 2005 16:14

Acties:

Rowanov

Kop eens wat anders...

Als je het zo neer zet, dan zou het moeten werken:

HTML:

1	<td><a href="#">[img]"#"></a></td[/img]

Dus geen spaties en dergelijke. Dit soort problemen heb je niet of nauwelijks als je semantisch werkt en met behulp van css de opmaak regelt.

Mocht je daaraan willen beginnen, alvast wat links:
Semantiek algemeen: http://home.parse.nl/~michiel/semantiek.html
Wat voorbeeldjes van hoe je dat kan toepassen: http://www.mozilla.org/contribute/writing/markup#structure
Nuttige tips en voorbeelden van standaard layouts: http://glish.com/css/

[ Voor 9% gewijzigd door Rowanov op 01-08-2005 16:14 ]

maandag 1 augustus 2005 16:20

Acties:

LuCarD

Certified BUFH

Zoefff schreef op maandag 01 augustus 2005 @ 15:53:
[...]

Omdat tabellen bedoeld zijn voor tabulaire data, en een menu is dat absoluut niet. Een goed alternatief element in HTML (!) is een (un)ordered list. Die kan je vervolgens met CSS zo opmaken dat het er precies hetzelfde uit ziet

maar dat is wel een stuk lastiger, helemaal als je rekening moet houden met Safari, IE 5 voor MAC

, verschillende IE versie's voor windows en voor FF/Mozilla . En alles moet pixel nauwkeurig

Programmer - an organism that turns coffee into software.

maandag 1 augustus 2005 16:34

Acties:

Zoefff

❤ 

LuCarD schreef op maandag 01 augustus 2005 @ 16:20:
[...]

maar dat is wel een stuk lastiger, helemaal als je rekening moet houden met Safari, IE 5 voor MAC , verschillende IE versie's voor windows en voor FF/Mozilla . En alles moet pixel nauwkeurig

Dat valt imho wel mee hoor. Sowieso vind ik dat je niet te veel rekening hoeft te houden met oudere browsers, zie een post die ik toevallig net maak in een ander topic:

Zoefff schreef op maandag 01 augustus 2005 @ 16:16:
Maar het percentage mensen dat 5.01 nog gebruikt is behoorlijk laag. Op een gegeven moment vind ik dat mensen maar gewoon moeten upgraden of een beter alternatief moeten gebruiken, ik ga er in ieder geval geen rekening meer mee houden. Bovendien is het ivm beveiligings-issues ook reuze verstandig om te upgraden

En bovendien is een (un)ordered list voor een menu redelijk eenvoudig, ook in dit geval.

In de achtergrond verwerk je het blauwe afgeronde vlak, en daarin zet je een lijst met alle items als plaatje of achtergrondafbeelding. Als je de padding en margin tussen de items gewoon op 0 houdt is er helemaal geen probleem hoor.

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

maandag 1 augustus 2005 16:44

Acties:

disjfa

be

Als je IE op de mac nog wilt ondersteunen kan je toch ook net zo goed netscape 4.7 gaan ondersteuen aangezien deze erg brak omgaan met de css support (lees zo goed als niets)

Verder algemene browsers ondersteunen zoals IE/safari/opera/FF/moz is niet al te moeilijk. Je moet alleen niet te veel gekke dingen willen met de opmaak. Hoe simpeler opgelost hoe makkelijker het gaat werken in alle browsers

Verder voor de ts. Als je geen html kennis hebt kan je dit beter eerst vergaren voor je degelijke pagina`s wilt maken.

disjfa - disj·fa (meneer)
disjfa.nl

maandag 1 augustus 2005 17:02

Acties:

Harm

Thrilled schreef op maandag 01 augustus 2005 @ 16:07:
[...]

Dit is het Home knopje (inclusief roll-over via Dreamweaver gedaan..)

Maak daar eens dit van:

HTML:

[nohtml]<TD><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image36','','images/actueelschilderwerken_04OVER.PNG',1)"><img src="images/actueelschilderwerken_04.png" alt="Home" name="Image36" width="134" height="48" border="0"></a> </TD>[/]

maandag 1 augustus 2005 17:23

Acties:

Thrilled

Topicstarter

Harm schreef op maandag 01 augustus 2005 @ 17:02:
[...]
Maak daar eens dit van:

HTML:

[nohtml]<TD><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image36','','images/actueelschilderwerken_04OVER.PNG',1)">[img]"images/actueelschilderwerken_04.png"[/img]</a> </TD>[/]

dat verergert het juist...

dit is de hele tabel code... het is een zootje ik weet het, maar ik heb alle spaties en enters eruit gehaald.. toen verdween er 1 open gaatje, maar ze zitten er nog steeds..

Afbeeldingslocatie: http://img273.imageshack.us/img273/6725/code7cu.th.png

maandag 1 augustus 2005 17:39

Acties:

xander88

Zet die iframe-code eens op 1 regel en direct achter de <td> en voor de </td>. GEEN spaties of enters graag. Heeft een iframe ook de property framespacing? Misschien kun je die ook op 0 zetten.

maandag 1 augustus 2005 17:48

Acties:

Thrilled

Topicstarter

xander88 schreef op maandag 01 augustus 2005 @ 17:39:
Zet die iframe-code eens op 1 regel en direct achter de <td> en voor de </td>. GEEN spaties of enters graag. Heeft een iframe ook de property framespacing? Misschien kun je die ook op 0 zetten.

helpt allebei niet...

maandag 1 augustus 2005 18:20

Acties:

Zoefff

❤ 

Hier even een snel voorbeeldje van hoe je dit moet doen zonder die code-soep en prutstabellen, gewoon in correcte HTML en simpele CSS

HTML:

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Nieuwbouw</a></li>
    <li><a href="#">Onderhoud</a></li>
    <li><a href="#">Renovatie</a></li>
    <li><a href="#">Gevel &amp; Wand</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Cascading Stylesheet:

body {
    background-color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    behavior:url("csshover.htc");
}
a {
    color:#000000;
    text-decoration:none;
}
ul {
    background-image:url(bg.gif);
    background-repeat:no-repeat;
    height:408px;
    padding:50px 0px 0px 15px;
    margin:0px;
}
li {
    list-style-type:none;
    font-size:18px;
    text-align:center;
    background-image:url(button.gif);
    background-repeat:no-repeat;
    height:30px;
    width:160px;
    margin:0px 0px 0px 0px;
    padding:10px 0px 0px 0px;
}
li:hover {
    background-image:url(button_hover.gif);
}
li:hover a {
    color:#FFFFFF;
}

Doet precies hetzelfde, alleen van veel minder omslachtig. Kant-en-klaar, je hoeft alleen de plaatjes nog te veranderen volgens mij

Voorbeeld op mijn server: http://zoefff.gotdns.com/got/menu_list/menu.htm

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

maandag 1 augustus 2005 19:03

Acties:

Michali

de hover selector werkt niet op li element in IE. Je kunt beter van het a element een block element maken en daar de achtergrond inzetten.

[ Voor 4% gewijzigd door Michali op 01-08-2005 19:04 ]

Noushka's Magnificent Dream | Unity

maandag 1 augustus 2005 19:07

Acties:

Zoefff

❤ 

Michali schreef op maandag 01 augustus 2005 @ 19:03:
de hover selector werkt niet op li element in IE. Je kunt beter van het a element een block element maken en daar de achtergrond inzetten.

Als je goed kijkt zie je dat ik een behavior heb toegevoegd, waardoor het wél in IE werkt. Probeer het ook maar eens uit, in IE6.0 werkt het iig vlekkeloos, en in 5.5 volgens mij ook.

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

dinsdag 2 augustus 2005 10:25

Acties:

Michali

Dat had ik idd niet gezien nee. Maar dan nog zou ik de hover naar het a element plaatsen. Het a element is namelijk degenen die klikbaar is. En bij een hover effect van een button verwacht je dat je er op kunt gaan klikken. In dit geval is dat niet zo. Dat is voor de gebruiker ook verwarrend.

Noushka's Magnificent Dream | Unity

dinsdag 2 augustus 2005 10:41

Acties:

crisp

Devver

Pixelated

Ik zou sowieso van de anchor een blocklevel element maken zodat de gehele breedte klikbaar wordt.
Overigens bedenk ook dat IE6 bij een background-image swap het plaatje opnieuw download wat resulteert in 'flikkerende' plaatjes.

Intentionally left blank

dinsdag 2 augustus 2005 10:43

Acties:

Zoefff

❤ 

Jup, daar heb je gelijk in. Kan je oplossen door

Cascading Stylesheet:

li a {
    height:30px;
    width:160px;
    display:block;
}

toe te voegen.

Maarja, dan kan je eigenlijk net zo goed de background-image inderdaad van de li af te halen en op de a te zetten, heb je meteen ook geen workaround meer nodig voor IE.

Maar goed, daar heb ik nu geen zin in, dat kan de TS ook zelf wel doen. Bovendien staat het me op de een of andere manier toch tegen om een a een background-image te geven, weet niet waarom. Waarschijnlijk omdat het officieel een inline-element is ofzo. Dunnow, kan ook psychisch zijn

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter