[html | IE] tekst probleem - Softwareontwikkeling

zondag 13 januari 2008 15:21

Acties:

Verwijderd

Topicstarter

Ik zit met het volgende probleem waar ik niet uitkom.

Ik heb een simpel voorbeeld om het te laten zien.
Ik Heb een tabel met meerdere plaatjes als achtergrond en een tekst eroverheen. de tekst moet verticaal in het midden staan. Dit alles doe ik met Dreamweaver CS3. Maar het vervelende is dat in Firefox het goed staat en in IE niet. Het Staat bij IE veel te hoog. Zie plaatje hieronder.

Afbeeldingslocatie: http://www.basandra.nl/fastlinks/probleem.jpg

Afbeeldingslocatie: http://www.basandra.nl/fastlinks/probleem.jpg

Dit is de code voor deze test

code:

<style type="text/css">
<!--
.style32 {color: #CCCCCC; font-weight: bold; font-size: 14px; font-family: Geneva, Arial, Helvetica, sans-serif; }
.style34 {color: #FFFFFF; font-weight: bold; font-size: 14px; font-family: Geneva, Arial, Helvetica, sans-serif; }
-->
</style>
</head>

<body>
<table width="220" border="0" cellspacing="0" cellpadding="0">
  <tr valign="middle">
    <td width="220" height="220" background="images/main/home-achtergrond.jpg"><ul class="style32">
      <li class="style32">Gordijnen</li>
      <li class="style32">Vitrages</li>
      <li class="style32">Rolgordijnen</li>
      <li class="style32">Jaloezie&euml;n</li>
      <li class="style32">Pliss&eacute;gordijnen</li>
      <li class="style32">Vouwgordijnen</li>
      <li class="style32">Rolhorren</li>
      <li class="style32">Vaste horren</li>
      <li class="style32">Roll-ups</li>
      <li class="style34">en meer</li>
      </ul>    </td>
  </tr>
</table>

Nu ben ik er al een paar dagen mee bezig om het goed te krijgen met de beperkte kennis die ik heb maar ik kom er niet uit. Ik zie dat de opbouw van het lettertype iets anders is FF dan in IE, de tussenruimte is in IE wat groter. Dit is op zich geen probleem als hij maar verticaal in het midden staat. Ik vermoedt zelf dat het de lijst opbouw zit die ik heb gekozen maar zeker weet ik dat niet

Aangezien ik niet weet waar het fout gaat is het ook erg moeilijk zoeken op google en of GOT.
Ik heb een basis kennis van Dreammweaver en html. CSS regelt Dreamweaver voor me en daar weet ik niet zo veel van.

Vandaar dat ik nu toch bij jullie moet aankloppen.

zondag 13 januari 2008 15:27

Acties:

Bitage

Gebruik een doctype, dat lost al een hoop margin problemen tussen FF en IE op. Bovendien kun je een aparte correctie-stylesheet gebruiken voor IE, die de reguliere stylesheet overschrijft, alleen voor IE.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<!--[IF IE]><link rel="stylesheet" href="iehacks.css" type="text/css"><![ENDIF]-->
</head>

[ Voor 9% gewijzigd door Bitage op 13-01-2008 15:29 ]

zondag 13 januari 2008 15:34

Acties:

gertvdijk

Idd... Doctype gebruiken. Zonder doctype gaat alles in quirks mode, wat onvoorspelbaar is. Dreamweaver geeft standaard wel een Doctype, toch? En in je styles aangeven welke marges en line-heights je wilt hebben. Die staan er nu niet in, dus je moet niet verwachten dat die in elke browser gelijk wordt gerenderd.
Als je dit soort dingen meer onder controle wil houden, leer dan zelf HTML en CSS

Gewoon boekje kopen en dan eventueel Dreamweaver gebruiken voor 'auto-aanvulling' op code/CSS en code-highlighting.

[ Voor 31% gewijzigd door gertvdijk op 13-01-2008 15:37 ]

Kia e-Niro 2021 64kWh DynamicPlusLine. 3x Victron MP-II op 15kWh US5000 3f thuisbatterij met 3x25A→3x40A PowerAssist, Victron EVCS, 3200Wp HoyMiles zp. my GitHub, my blog

zondag 13 januari 2008 15:51

Acties:

Verwijderd

Topicstarter

Ja ik gebruik wel een Doctype. ik dacht dat jullie deze niet nodig had daarom had ik deze niet plakt.

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>Beldekor, de speciaalzaak voor uw interieur.</title>

Ik zie al wel dat ik de XHTML heb en jullie de HTML versie aangeven dus dat zal ik meteen nakijken of dat verschil uitmaakt.

zondag 13 januari 2008 15:56

Acties:

gertvdijk

Even wat algemener: waarom gebruik je hier een tabel? Je kan prima de opmaak krijgen die je wil door het ul-element en de li-elementen de juiste styles mee te geven. Scheelt een hoop gezeik als je het op een manier doet zoals dat bedoeld is. Dat wat Dreamweaver doet is meestal alles behalve elegant, doch beter dan wat Frontpage doet/deed.

edit: XHTML of HTML boeit niet zoveel, voor zover ik kan zien is het allemaal vast wel XHTML compliant.

edit2: zoiets dus:

Cascading Stylesheet:

body { font-size: 72% }
ul.mijnstijlnaam { background: url('') transparent top left no-repeat; width: 220px; height: 220px; }
ul.mijnstijlnaam li { color: #CCC font-weight: bold; font-size: 1.2em; font-family: Geneva, Arial, Helvetica, sans-serif; margin: 0.5em; } /* standaard li-elements */
li.wit {color: #FFFFFF; } /* witte li-elements */

HTML:

<body>
<ul class="mijnstijlnaam">
      <li>Gordijnen</li>
      <li>Vitrages</li>
      <li>Rolgordijnen</li>
      <li>Jaloezie&euml;n</li>
      <li>Pliss&eacute;gordijnen</li>
      <li>Vouwgordijnen</li>
      <li>Rolhorren</li>
      <li>Vaste horren</li>
      <li>Roll-ups</li>
      <li class="wit">en meer</li>
</ul>
</body>

Het enige wat je nu mist is de verticale centrering, wat je weer kan oplossen door je achtergrond op te delen in bovenkant en onderkant en die toe te wijzen, respectivelijk, aan het ul-element en het laatste li-element. Dan is je lijstje ook schaalbaar en daarmee dus ook eleganter in opzet.

@Bitage: Ik ben ook geen fan van IE, maar om nou een iehacks.css file te maken, alleen omdat jij en de TS blijkbaar verwachten dat IE de marges die jullie verwachten kan ruiken vind ik een beetje overtrokken. (en FF die blijkbaar beter gokt). IE hacks moet je gebruiken voor bugs in IE, niet als IE een keer iets anders rendert dan FF zonder dat je hem wat vertelt over wat 'ie moet doen.

[ Voor 77% gewijzigd door gertvdijk op 13-01-2008 16:19 ]

Kia e-Niro 2021 64kWh DynamicPlusLine. 3x Victron MP-II op 15kWh US5000 3f thuisbatterij met 3x25A→3x40A PowerAssist, Victron EVCS, 3200Wp HoyMiles zp. my GitHub, my blog

zondag 13 januari 2008 16:02

Acties:

Verwijderd

Topicstarter

Dit is alleen maar een voorbeeldje om het probleem weer te geven.
Hier is de volledige pagina dan hoe ik het in wil/is

www.beldekor.nl/test

Doctype maakte inderdaad niets uit nee.

Edit:/ als ik geen <li> gebruik en dus ook geen opsomming's tekens dan is de spatiëring wel goed geworden alleen staat het dan nog te hoog in IE
Afbeeldingslocatie: http://www.basandra.nl/fastlinks/probleemv1.jpg

Afbeeldingslocatie: http://www.basandra.nl/fastlinks/probleemv1.jpg

[ Voor 36% gewijzigd door Verwijderd op 13-01-2008 16:09 ]

zondag 13 januari 2008 16:09

Acties:

Bitage

Even naar gekeken en als je het onderstaande doet, zou het netjes moeten zijn:

iehacks.css

Cascading Stylesheet:

ul
{
margin-top:17px;
}

li
{
margin-top:-2px;
}

In de head van de index.html/.php

HTML:

1	<!--[IF IE]><link rel="stylesheet" href="iehacks.css" type="text/css"><![ENDIF]-->

zondag 13 januari 2008 16:27

Acties:

Verwijderd

Topicstarter

Het probleem is dat ik als meerdere malen met die CSS training aan de slag ben geweest. Maar het wil bij mij gewoon niet blijven hangen. Net zoals PHP

Vandaar dat ik er niet uitkom en gewoon DW het laat regelen.
Ik zie wel dat als ik dus die opsom tekens weglaat dat dan de spatiëring beter is geworden in IE.
Hier ben ik eigenlijk al erg blij mee moet ik zeggen.

Ik zal als ik weer eens de tijd heb nog maar een een cursusje CSS moeten opstarten om het uitlijnen in IE onder de knie te krijgen.

zondag 13 januari 2008 16:35

Acties:

roan

Verwijderd schreef op zondag 13 januari 2008 @ 16:27:
Het probleem is dat ik als meerdere malen met die CSS training aan de slag ben geweest. Maar het wil bij mij gewoon niet blijven hangen. Net zoals PHP

Vandaar dat ik er niet uitkom en gewoon DW het laat regelen.
Ik zie wel dat als ik dus die opsom tekens weglaat dat dan de spatiëring beter is geworden in IE.
Hier ben ik eigenlijk al erg blij mee moet ik zeggen.

Ik zal als ik weer eens de tijd heb nog maar een een cursusje CSS moeten opstarten om het uitlijnen in IE onder de knie te krijgen.

vooral opgeven ja

zondag 13 januari 2008 17:27

Acties:

f.v.b

Verwijderd schreef op zondag 13 januari 2008 @ 16:02:
Hier is de volledige pagina dan hoe ik het in wil/is

www.beldekor.nl/test

De vertikale spatiering gaat fout vanwege de margins op de blockquote. Zet je die op:

code:

1	blockquote { margin: 0pt 30pt; }

dan centreert de tekst wel correct. Zowel in IE 7 als in Firefox.

Don't erase all files?
[Yes] [No]

zondag 13 januari 2008 17:46

Acties:

Verwijderd

Topicstarter

f.v.b schreef op zondag 13 januari 2008 @ 17:27:

De vertikale spatiering gaat fout vanwege de margins op de blockquote. Zet je die op:
code:
1
  blockquote { margin: 0pt 30pt; }
dan centreert de tekst wel correct. Zowel in IE 7 als in Firefox.

Yes Thanks, Dit is bij mij de oplossing $_/-\o_$

[ Voor 4% gewijzigd door Verwijderd op 13-01-2008 17:46 ]

zondag 13 januari 2008 18:53

Acties:

f.v.b

Verwijderd schreef op zondag 13 januari 2008 @ 17:46:
[...]

Yes Thanks, Dit is bij mij de oplossing $_/-\o_$

In die laatste pagina worden helemaal geen blockquotes gebruikt dus de blockquote style doet daar niets.

Bij het lijstje linksonder staat nu een verdwaalde <br> in de <ul>. Daardoor wordt het niet correct vertikaal gecentreerd.

Don't erase all files?
[Yes] [No]

zondag 13 januari 2008 20:00

Acties:

Verwijderd

Topicstarter

Klopt dat ben ik pas in de latere versie gaan doen vandaar.

Die <br> staat er om in IE de tekst een stukje baar beneden te krijgen zodat hij tenminste niet door het kader liep.

Maar nu zijn deze 2 tekst tabelletjes wel mooi verticaal uitgelijnd