Padding IE FF

[Verwijderd]

Hey

Ik zit een nieuwe layout te maken, ik zat de hele tijd te werken met Firefox, maar ik bekeek de website met IE en toen zag de website er opeens heel anders uit.
Ik heb het opgezocht en kwam erachter dat dit met de paddingverschillen tussen IE en FF te maken heeft.
Dit is mijn css code :

code:

      .menutitelr {
              text-align: right;
              padding-right: 10px;
              padding-top:9px;
              font-size: 18px;
              color: #c2bdbd;
              font-family: "BankGothic Md BT";
      }

En dit in html :

code:

#
<table width="145" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="33" background="images/menu_rechts_boven.jpg" class="menutitelr">menu</td>
      </tr>
      <tr>
        <td background="images/menu_rechts_midden.jpg" class="menucontent">Ssss</td>
      </tr>
      <tr>
        <td><img src="images/menu_rechts_onder.jpg" alt="" width="145" height="16" /></td>
      </tr>
    </table>

En dit zijn de verschillen :
Klik

Ik heb gezocht voor een oplossing, heb er ook een gevonden met google, maar deze werkt helaas niet(meer).
Kan iemand me aub verder helpen?

Bvd

[RobIII]

Verwijderd schreef op woensdag 26 december 2007 @ 00:38:
Ik heb gezocht voor een oplossing, heb er ook een gevonden met google, maar deze werkt helaas niet(meer).

Dan zijn we natuurlijk zeer benieuwd naar wat die oplossing was en waarom die volgens jou niet (meer) werkte.

Verwijderd schreef op woensdag 26 december 2007 @ 00:38:
Kan iemand me aub verder helpen?

Ik zet mijn geld op het ontbreken van een DocType (overigens ook meer dan eens hier op GoT besproken)

Daarnaast is nog wel het een en ander op te merken aan je code; zoals de font-family die zeer waarschijnlijk maar op een select aantal PC's werkt en het gebruik van tables voor layout (wat an sich geen ramp is, maar anno 2007 _{en bijna 2008} gewoon not-done is).

[ Voor 34% gewijzigd door RobIII op 26-12-2007 00:50 ]

[Verwijderd]

RobIII schreef op woensdag 26 december 2007 @ 00:42:

Dan zijn we natuurlijk zeer benieuwd naar wat die oplossing was en waarom die volgens jou niet (meer) werkte.

De oplossing die ik had was die met "!important" en "*" in css file te zetten om het alleen IE-only te maken, maar die werkt niet

Ik zet mijn geld op het ontbreken van een DocType (overigens ook meer dan eens hier op GoT besproken)

Dat heb ik nu juist wel

Daarnaast is nog wel het een en ander op te merken aan je code; zoals de font-family die zeer waarschijnlijk maar op een select aantal PC's werkt en het gebruik van tables voor layout (wat an sich geen ramp is, maar anno 2007 _{en bijna 2008} gewoon not-done is).

Wat kan ik dan nog anders gebruiken in plaats van een tabel?

[Verwijderd]

Lay out wordt bijna alleen nog maar met Div's gedaan. Zie hier een beknopte uitleg. Als je het met divs gaat doen en het blijft nog steeds niet werken, kun je proberen om even je paddings uit te zetten en een 'veilig' lettertype te nemen (arial ofzo). Op die manier moet je vanzelf bij de oplossing uitkomen.

[Verwijderd]

Voor dat lettertype heb ik al een oplossing gevonden, dus dat is niet meer nodig denk ik
De lettertype uploadwen en dan in de css file ernaar verwijzen.
Maar kan je met Div's hetzelfde als met tabellen, zoals kolommen, rijen etc?

[CH4OS]

Verwijderd schreef op woensdag 26 december 2007 @ 19:39:
Voor dat lettertype heb ik al een oplossing gevonden, dus dat is niet meer nodig denk ik
De lettertype uploadwen en dan in de css file ernaar verwijzen.

Alleen niet elke browser ondersteund dat.
En ergens misschien maar goed ook: Ik zit niet op zoiets te wachten ivm security...
Dus mocht het ooit mainstream worden in de browsers, zou ik het gráág uit willen zetten...

Maar kan je met Div's hetzelfde als met tabellen, zoals kolommen, rijen etc?

Ja, alleen vereist dat een andere manier van denken én werken. Zijn zat voorbeelden voor te bedenken, de bekendste is denk ik wel de Holy Grail bij A List Apart...

[ Voor 7% gewijzigd door CH4OS op 26-12-2007 19:57 ]

[Verwijderd]

Oke , bedankt.
Dit was de manier die ik had gevonden :

code:

@font-face {
    font-family: "BankGothic Md BT";
    src:url("BNKGOTHM.TTF");
}

Ondersteunt elke browser dit niet? Of bedoelde je een andere manier?

[CH4OS]

Verwijderd schreef op woensdag 26 december 2007 @ 20:32:
Oke , bedankt.
Dit was de manier die ik had gevonden :

code:

@font-face {
    font-family: "BankGothic Md BT";
    src:url("BNKGOTHM.TTF");
}

Ondersteunt elke browser dit niet? Of bedoelde je een andere manier?

Of elke browser het niet ondersteund weet ik niet.
Ik kan je wel vertellen dat er vast browsers zullen zijn die het niet ondersteunen (IE bijvoorbeeld).
En dan zijn er nog de gebruikers die het uit (kunnen) hebben staan.

Ik vertrouw fonts vanaf een website niet zo, of het moet van de bekendere font-download pagina zijn... Zodat ik ze in mijn %windir%\fonts kan zetten...

[Verwijderd]

Oke,
en over die DIV's , is het daarin mogelijk om alles te doen wat je ook met een tabel kan?
Of kan ik het ook zo doen, met een PHP script controleren welke browser er wordt gebruikt, als het IE is een css file laden, en als het FF(en andere browsers) is, dan een andere css file laden?

[Verwijderd]

Verwijderd schreef op woensdag 26 december 2007 @ 21:52:
en over die DIV's , is het daarin mogelijk om alles te doen wat je ook met een tabel kan?

Bijna alles. Verticaal centreren is moeilijk in div's.
In het algemeen wordt je html overzichtelijker en - belangrijker nog - semantisch beter.

Of kan ik het ook zo doen, met een PHP script controleren welke browser er wordt gebruikt, als het IE is een css file laden, en als het FF(en andere browsers) is, dan een andere css file laden?

Hier kun je het beste conditional comments voor gebruiken.

[Verwijderd]

GJ-tje schreef op woensdag 26 december 2007 @ 19:53:
[...]
Alleen niet elke browser ondersteund dat.
En ergens misschien maar goed ook: Ik zit niet op zoiets te wachten ivm security...

Ja joh, stel je voor, dat je zo een virus binnen krijgt.

Die kans is toch zeker even groot bij elk ander willekeurig bestandstype wat een webserver je voorscholtelt .

[Verwijderd]

Verwijderd schreef op woensdag 26 december 2007 @ 20:32:
Dit was de manier die ik had gevonden :

code:

@font-face {
    font-family: "BankGothic Md BT";
    src:url("BNKGOTHM.TTF");
}

Ondersteunt elke browser dit niet? Of bedoelde je een andere manier?

Volgens mij doet alleen Webkit dit met .ttf's. IE ondersteunt wel @font-face, maar dan alleen met .eot-files, die je met dat afschuwelijke WEFT aan moet maken.

[RobIII]

Verwijderd schreef op woensdag 26 december 2007 @ 22:07:
[...]

Ja joh, stel je voor, dat je zo een virus binnen krijgt.

Die kans is toch zeker even groot bij elk ander willekeurig bestandstype wat een webserver je voorscholtelt .

Daar heb ik dan zelf wel ook om gevraagd, als ik iets expliciet download. Als een bestand zonder mijn medeweten wordt gedownload omdat anders de pagina niet goed weergegeven kan worden is het andere koek. Of je krijgt situaties waar browsers je lastig blijven vallen met vragen van "dit-en-dat kan niet goed weergegeven worden; wilt u blabla downloaden?".

Verder draagt je reactie nou niet echt bij aan dit topic.

Voor superlol heb ik de opmerking dat ik graag wat meer eigen inzet zou zien; we komen hier met tips aanzetten waar je prima wat mee kunt als je je er even in verdiept; vragen als "Wat kan ik dan nog anders gebruiken in plaats van een tabel?" en "Maar kan je met Div's hetzelfde als met tabellen, zoals kolommen, rijen etc?" en "Ondersteunt elke browser dit niet?" en de daarop volgende post kun je prima zelf beantwoorden met een beetje zoeken en puzzelen.

[ Voor 3% gewijzigd door RobIII op 26-12-2007 22:18 ]

[Cartman!]

Als je custom fonts zo graag wilt gebruiken dan kun je het best sIFR gebruiken : http://www.mikeindustries.com/sifr

Wat het is, hoe het werkt en hoe je het moet gebruiken kun je op bovenstaande url vinden.

[Verwijderd]

Oke bedankt iedereen.
Ik heb tuts over div's opgezocht en ermee begonnen.
Maar bij sommige dingen is het toch beter om geen div's te gebruiken?
Bijv. :
Mijn header ziet er zo uit(verschillende stukjes):


Is het in dit geval niet beter om met tabellen te werken?
Of is dit dan ook mogelijk in div's?

[RobIII]

Verwijderd schreef op donderdag 27 december 2007 @ 19:45:
Is het in dit geval niet beter om met tabellen te werken?

Wederom: Wat heb je zelf al bedacht? Geprobeerd? Gezocht? Gevonden?

Verwijderd schreef op donderdag 27 december 2007 @ 19:45:
Of is dit dan ook mogelijk in div's?

Zie hierboven.

Het zou fjin zijn als je een wat minder passieve houding nam en wat meer zelf probeerde. Wat je hierboven in je afbeelding laat zien is prima te doen in div's.

[Verwijderd]

Dit is ook prima te doen met divs. Je maakt een container-div zoals ze dat noemen, dat is een alles omvattende div. Deze noem je bijvoorbeeld header.

Vervolgens heb je in je Header een div headerlinks, headermidden1, headermidden2 en headerrechtsboven/headerrechtsonder. Denk hierbij aan de tussenHoofdLetters om het leesbaar te houden, en denk op deze manier na over een structuur en logische namen voor je divs. Ik kan je wel code geven, maar dan leer je het nooit
Je kunt divs uitlijnen in een alles omvattende (meestal container genoemde) div dmv de property Float, bijvoorbeeld 'Float: left;' in je stylesheet. Google weet het allemaal.

Tables gebruik je echt alleen voor tabellen content, en worden al geruime tijd niet meer als layout object gebruikt.

[ Voor 5% gewijzigd door Verwijderd op 27-12-2007 20:18 ]

[Boelie-Boelie]

Verwijderd schreef op donderdag 27 december 2007 @ 20:17:
Vervolgens heb je in je Header een div headerlinks, headermidden1, headermidden2 en headerrechtsboven/headerrechtsonder. Denk hierbij aan de tussenHoofdLetters om het leesbaar te houden, en denk op deze manier na over een structuur en logische namen voor je divs. Ik kan je wel code geven, maar dan leer je het nooit
[..]
Tables gebruik je echt alleen voor tabellen content, en worden al geruime tijd niet meer als layout object gebruikt.

Ten eerste is niet bekend wat al die zwarte hokjes voorstellen; je kunt niet op basis van zo'n vage afbeelding iets zeggen over de structuur van de HTML. Wellicht ben je met één block-level element (niet eens een div) en een background gewoon klaar.

Ten tweede gebruik je op Gapsters manier voor elk hokje een div, net als dat je voor tabellen een cel zou gebruiken. Dat is geen moer beter dan tabellen voor layout.
Rikkert Koppes: Do you smurf what I smurf?

Ten derde heb je het over logische namen, maar aangezien je CSS voor de layout gebruikt, kun je de layout achteraf nog aanpassen en wellicht besluit je later om het helemaal te veranderen. Zit je toch nog met je divs 'headermidden1', 'headermidden2', terwijl ze misschien niet eens meer in het midden staan. (En dan hebben we het nog niet eens over hoe logisch het is om in dit geval elementen te nummeren).
W3C: Use class with semantics in mind

Verder gebruikt superlol wel een doctype, maar of deze volledig is, is onbekend (dat maakt nogal wat uit).
W3C: Recommended list of DTDs you can use in your Web document

[Verwijderd]

pff wat een verhaal, de TS snapt het verschil tussen div's en tables nog niet en dan begin jij hierover.. Ik denk dat de TS maar eens moet gaan googelen en uitzoeken hoe hij divs het beste kan gebruiken hier, en dan als het niet lukt z'n vragen maar moet stellen. Denk dat dit wat ver gaat voor 't prille begin.

[wackmaniac]

Boelie-Boelie schreef op donderdag 27 december 2007 @ 23:50:
[...]
Ten tweede gebruik je op Gapsters manier voor elk hokje een div, net als dat je voor tabellen een cel zou gebruiken. Dat is geen moer beter dan tabellen voor layout.
Rikkert Koppes: Do you smurf what I smurf?

Leuk dat je interessant gaat doen met een mooi artikel, maar in dit geval is de opzet, zoals Gapster aangaf, niet echt van toepassing hierop he. Dat artikel gaat vooral over het correct gebruiken van de elementen, niet over dat je een header layout niet in div's kan plaatsen. Het is geen lijst, het is geen tabel, dus ik zie het probleem hier niet zo.

Je hebt wel gelijk over de naamgeving van de elementen.

[Verwijderd]

Ben met je eens dat mijn voorbeelden niet slim waren, maar ik wilde de TS uitleggen dat je niet alleen moet nadenken over structuur in de divs, maar ook over naamgeving en alle aspecten eromheen. Dat je ze een zo'n geval het beste kan nummeren zoals je aangeeft, dat moet hij dan maar verzinnen

[Boelie-Boelie]

wackmaniac schreef op vrijdag 28 december 2007 @ 11:42:
Leuk dat je interessant gaat doen met een mooi artikel, maar in dit geval is de opzet, zoals Gapster aangaf, niet echt van toepassing hierop he. Dat artikel gaat vooral over het correct gebruiken van de elementen, niet over dat je een header layout niet in div's kan plaatsen. Het is geen lijst, het is geen tabel, dus ik zie het probleem hier niet zo.

Dan begrijp je waarschijnlijk niet goed wat ik bedoel. Ik heb nooit gezegd dat een header niet uit een div kan bestaan, ik heb slechts gezegd dat er wellicht niet zoveel divs nodig zijn en dat er misschien niet eens divs nodig zijn (misschien wel, misschien niet; dat is onbekend). Op dat laatste slaat het artikel van Rikkert.

Het punt dat ik wil maken is dat het lukraak propageren van divgebruik grote onzin is. Tabellenlayout vervang je niet door divs; je vervangt het door beschrijvende markup. Da's iets heel anders dan het gebruik van 'een div headerlinks, headermidden1, headermidden2 en headerrechtsboven/headerrechtsonder', want dat laatste is precies zoals het niet zou moeten (overvloedig divgebruik, id's op basis van layout i.p.v. op basis van functie, volgordeloze divs nummeren, etc.).

[Verwijderd]

Ik heb nu over divs geleerd en geprobeerd om toe te passen :

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
<script type="text/javascript" src="swfobject.js"></script>
</head>

<body>
<div id="headerrechts"><p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript">
    var s1 = new SWFObject("swf/mp3spelerboven.swf", "line", "140", "20", "7");
    s1.addVariable("file","http://muziek.rapmaster.nl/<?php echo $link; ?>");
    s1.addVariable("repeat","true");
    s1.addVariable("showdigits","false");
    s1.addVariable("showdownload","false");
    s1.addVariable("width","140");
    s1.addVariable("height","20");
    s1.addVariable("backcolor","0x000000");
    s1.addVariable("frontcolor","0x0000FF");
    s1.addVariable("lightcolor","0x00FF00");
    s1.write("player1");
</script>
</div>
</body>
</html>

CSS :

code:

#headerrechts {
    width:143px;
    height:155px;
    float:left;
    padding-top:45px;
    padding-right:10px;
    background-image: url("images/header2.jpg");
    text-align:right;
    color:#ffffff;
}

Maar als ik nu het resultaat bekijk in IE & FF dan zie ik nog steeds een verschil...
Weet iemand wat ik fout doe, of hoe ik het oplos?
Ik wil liever geen conditional comments gebruiken (die iemand noemde), dus iemand?

[ Voor 4% gewijzigd door Verwijderd op 03-01-2008 00:53 ]

[Verwijderd]

Iemand?

[Verwijderd]

?

[Verwijderd]

Wat gaat er dan niet goed nu (we gaan niet alles voor je uitpluizen)?

[ZpAz]

Het makkelijkste is om de padding verschillen van de browsers aan te pakken door dit boven in je stylesheets te zetten:

* {
margin:0;
padding:0; }

Dit reset dan de padding en margin voor elk element naar 0, daarna moet je het gewoon voor de diverse elementen goed zetten en ziet dat er hetzelfde uit in de browsers. (Er kunnen andere gare problemen voorkomen, maar het resetten helpt een groot gedeelte )

[Joopieboy]

Ik merk zelf dat als ik websites bouw dat in FF padding-right wel werkt, en IE juist weer niet.
Dus misschien kan je dmv padding-left ipv right dit in beide browsers goed krijgen?
Dan hoef je ook geen apparte code alleen voor IE te gebruiken enzo.

Werkt bij mij iig wel.

[Verwijderd]

ZpAz schreef op zaterdag 05 januari 2008 @ 23:26:
Het makkelijkste is om de padding verschillen van de browsers aan te pakken door dit boven in je stylesheets te zetten:

* {
margin:0;
padding:0; }

Dit reset dan de padding en margin voor elk element naar 0, daarna moet je het gewoon voor de diverse elementen goed zetten en ziet dat er hetzelfde uit in de browsers. (Er kunnen andere gare problemen voorkomen, maar het resetten helpt een groot gedeelte )

Dit heb ik nog nooit gedaan. Iemand die dit bij ons op het werk doet mag echt geen stylesheets meer maken. Teveel CSS properties ineens veranderen is nooit verstandig. Wees gewoon specifiek.

[Joopieboy]

Ja precies, de locatie van die codes maakt ook niet veel uit...

[Verwijderd]

code:

* {
margin:0;
padding:0; }

Met dit is het echter wel gaan werken ?
Is dit niet slim om te gebruiken?

[Boelie-Boelie]

Als je in je huis last van tocht hebt, kun je natuurlijk alle ramen, deuren en kieren dichtspijkeren... Maar misschien is het handiger om alleen de plek aan te pakken die de tocht veroorzaakt.

Zie trouwens ook het artikel 'No margin for error' (of Boelie-Boelie in "[CSS] IE probleem floats"), met uitleg waarom het niet zo handig is om álle margins en paddings op 0 te zetten.