[css] Problemen met layers layout in IE5.5 en 6.0 - Softwareontwikkeling

woensdag 24 september 2008 16:11

Acties:

Verwijderd

Topicstarter

Ik heb al op verschillende manieren mijn ontwerp in IE5.5 t/m 8 werkende proberen te krijgen, maar het wil nog steeds niet lukken. Ondertussen heb ik het ontwerp enorm versimpeld. Geen verschillende kolommen meer en alle plaatjes als 1 achtergrond geplaatst om vervolgens de links als blocks eroverheen te positioneren. Het ontwerp begint erop te lijken in IE, maar 5.5, 6 en 7 hebben nog steeds problemen, zoals jullie hieronder kunnen zien.

Het Ontwerp Online

Allereerst mijn code:

HTML

HTML:

<!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" xml:lang="en" lang="en">
<head>
<title>Marten Minkema Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<link href="css/my_layout2.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="css/patches/patch_my_layout.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
  <div id="page_margins">
    <a href="/" title="Marten Minkema" class="clickbox" id="voorpagina">&nbsp;</a>
    <a href="/radio" title="Radio" class="clickbox" id="radio">&nbsp;</a>
    <a href="/televisie" title="Televisie" class="clickbox" id="televisie">&nbsp;</a>
    <a href="/publicaties" title="Publicaties" class="clickbox" id="publicaties">&nbsp;</a>
    <a href="/gedachten" title="Gedachten" class="clickbox" id="gedachten">&nbsp;</a>
    <a href="/personalia" title="Personalia" class="clickbox" id="personalia">&nbsp;</a>
    <div id="page">
      <div id="main" class="transparent">&nbsp;</div>
    </div>
  </div>
</body>
</html>

content2.css

Cascading Stylesheet:

  body { background: #303434 url("images/heelalachtergrond.gif") repeat-x; }
  
  #page_margins { background: url("images/Aardbolhome.jpg") no-repeat 50% 0px; }
  
  #main { background: url("images/Achtergrondpixel.png"); }
  
  a.clickbox { display: block; position: absolute; text-decoration: none; }
  
  a#voorpagina { width: 264px; height: 116px; top: 7px; left: 348px; }
  a#radio { width: 196px; height: 288px; left: 0px; top: 142px; }
  a#televisie { width: 180px; height: 189px; top: 19px; left: 204px; }
  a#publicaties { width: 222px; height: 263px; top: 440px; left: 55px; }
  a#gedachten { width: 281px; height: 432px; top: 4px; left: 678px; }
  a#personalia { width: 136px; height: 235px; top: 458px; left: 683px; }

basemod2.css

Cascading Stylesheet:

@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) stylesheet for screen layout
 * (de) Stylesheet für das Bildschirm-Layout
 *
 * @creator     YAML Builder V1.0.2b (http://builder.yaml.de)
 * @file        basemod.css
 */

@media screen, projection
{
  /*-------------------------------------------------------------------------*/

  /* (en) Marginal areas & page background */
  /* (de) Randbereiche & Seitenhintergrund */
  body, #page { width: 100%; height: 100%; }

  /* Layout Alignment | Layout-Ausrichtung */
  #page_margins, #main { margin: 0 auto; position: relative; }

  /* Layout Properties | Layout-Eigenschaften */
  #page_margins { width: 960px; height: 800px; }

  /*-------------------------------------------------------------------------*/

  /**
   * (en) Formatting content container
   * (de) Formatierung der Inhalts-Container
   *
   */

  #main { padding: 0px 20px; top: 170px; width: 350px; height: 480px; }
    
  /*-------------------------------------------------------------------------*/
}

my_layout2.css:

Cascading Stylesheet:

@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) central stylesheet
 * (de) zentrales Stylesheet
 *
 * @creator     YAML Builder V1.0.2b (http://builder.yaml.de)
 * @file        my_layout.css
 */

/* import core styles | Basis-Stylesheets einbinden */
@import url(../yaml/core/base.css);

/* import screen layout | Screen-Layout einbinden */

@import url(screen/basemod2.css);
@import url(screen/content2.css);

/* import print layout | Druck-Layout einbinden */
/* @import url(../yaml/print/print_003_draft.css); */

Ik gebruik het YAML Framework. De hiermee samenhangende css is niet relevant

Problemen:

IE7 (klikbaar):

Afbeeldingslocatie: http://api.browsershots.org/png/512/1e/1eb700a75f7a6ffcf37f0f9545a750e0.png

- De achtergrond wordt onderaan afgebroken. Terwijl #page_margins op 800px hoog is gezet en body 100% x 100%.

IE5.5 (klikbaar):

Afbeeldingslocatie: http://api.browsershots.org/png/512/10/109d5c200e61f2148e01145b2058add4.png

- De achtergrond wordt onderaan afgebroken. Terwijl #page_margins op 800px hoog is gezet en body 100% x 100%.
- De doorzichtige content-layer wordt niet weergegeven

IE6 (clickable):

Afbeeldingslocatie: http://api.browsershots.org/png/512/04/04943a33b0431a2d99d4b6fd6681f630.png

- De achtergrond wordt onderaan afgebroken. Terwijl #page_margins op 800px hoog is gezet en body 100% x 100%.
- De doorzichtige content-layer wordt niet weergegeven

Iemand die me kan helpen?

En zoja: is er iemand die kan checken of alle links in zoveel mogelijk verschillende versies van Internet Explorer netjes over de plaatjes heenvallen?

tnx

woensdag 24 september 2008 16:14

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Even zonder er verder te diep op in te gaan (druk druk druk

): Waarom maak je je in hemelsnaam nog zorgen over IE5.5? 6.0 kan ik in komen, maar IE 5.5... die is vervangen door 6.0 in 2001

Support dan meteen ook IE 3.0

[ Voor 8% gewijzigd door RobIII op 24-09-2008 16:18 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 24 september 2008 16:15

Acties:

Sebazzz

3dp

Uhm... IE6 is al bijna uitgefaseerd bij de burger, laat staan uberbrakke IE 5.5.
Waarom ontwikkel je in hemelsnaam voor IE5.5?

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

woensdag 24 september 2008 16:18

Acties:

Verwijderd

Topicstarter

Daar ben ik me van bewust en ook word het door een kleine minderheid gebruikt, ik wil de website graag voor een zo groot mogelijk publiek beschikbaar maken. Daarbij zijn dit denk ik twee problemen die relatief eenvoudig op te lossen zijn, alleen ben ik er zelf nog niet achter hoe

En daarbij: je gelooft het of niet: bij mij op m'n werk (een groot bedrijf) en m'n universiteit (de UvA) word nog steeds 5.5 gebruikt.

En ik vind het ook een mooie uitdaging

3.0 en 4.0 ga ik niet aan beginnen.

Ik heb deze website vanaf het begin ontworpen met IE5.5 of hoger in gedachten en maak daarom ook gebruik van YAML en IEPNGFix, twee technieken die ervoor zorgen dat de website ook in oudere browsers werkt. Al kan ik in jullie argumenten inkomen, heb me er nu op vastgebeten en het zal me lukken ook. Maar goed, dit is in feite niet echt relevant meer voor m'n oorspronkelijke vraag.

Laatste argument: de mensen die deze site bezoeken zijn niet echt relevant voor de gemiddelde internetgebruiker. Het publiek wat op deze website op af zal komen zijn denk ik gemiddeld wat minder bekend met computers, laat staan dat ze weten wat een browser is en dat je er verschillende versies van hebt.

[ Voor 40% gewijzigd door Verwijderd op 24-09-2008 16:21 ]

woensdag 24 september 2008 16:28

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Het is ook een heel nobel streven, daar niet van; ik zou er alleen niet teveel moeite in steken en me eerst richten op de zaken die er toe doen

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 24 september 2008 16:30

Acties:

Verwijderd

Topicstarter

maar dat is het nou net: dit zijn de laatste loodjes. De rest van de site is min of meer af en werkt prima in alle browsers (behalve 3 en 4). Alleen de voorpagina is net anders en het enige wat mankeert is het bovenstaande. Ik vind het zonde als deze niet werkt, terwijl de rest van de site helemaal geoptimaliseerd is (laat staan gezien de tijd die ik er al in heb ingestoken)

woensdag 24 september 2008 17:20

Acties:

Bosmonster

*zucht*

Sebazzz schreef op woensdag 24 september 2008 @ 16:15:
Uhm... IE6 is al bijna uitgefaseerd bij de burger, laat staan uberbrakke IE 5.5.
Waarom ontwikkel je in hemelsnaam voor IE5.5?

IE6 gebruik ligt gemiddeld nog tussen de 20 - 50%. Bijna uitgefaseerd zou ik dus niet te snel zeggen.

IE5.x is verwaarloosbaar (komt meestal niet eens in de statistieken terug).

Ik heb een hoop browsers hier geinstalleerd staan, maar IE6 is toch wel de laagste IE versie. Kan je dus helaas wat dat betreft niet helpen.

Verwijderd schreef op woensdag 24 september 2008 @ 16:18:
Ik heb deze website vanaf het begin ontworpen met IE5.5 of hoger in gedachten en maak daarom ook gebruik van YAML en IEPNGFix, twee technieken die ervoor zorgen dat de website ook in oudere browsers werkt.

Als je de site daadwerkelijk had ONTWORPEN met zulke oude browsers in gedachten, dan had je natuurlijk helemaal geen 32bit PNG nodig gehad. Want nu heb je een 'modern' ontwerp en probeer je het met allerlei trucs werkbaar te krijgen onder oude browsers, en dat is toch heel wat anders.

[ Voor 59% gewijzigd door Bosmonster op 24-09-2008 17:25 ]

woensdag 24 september 2008 17:27

Acties:

Verwijderd

Topicstarter

Fair enough, maar ik heb de site niet zelf ontworpen (verkeerde woordkeuze, sorry), maar de layout geimplementeerd aan de hand van een ontwerp wat iemand anders gemaakt heeft.

Maar goed, we dwalen af. Als je IE6 of hoger hebt, zou je me wellicht kunnen helpen met de problemen in 6 en 7?

woensdag 24 september 2008 17:45

Acties:

Bosmonster

*zucht*

Verwijderd schreef op woensdag 24 september 2008 @ 17:27:
Fair enough, maar ik heb de site niet zelf ontworpen (verkeerde woordkeuze, sorry), maar de layout geimplementeerd aan de hand van een ontwerp wat iemand anders gemaakt heeft.

Maar goed, we dwalen af. Als je IE6 of hoger hebt, zou je me wellicht kunnen helpen met de problemen in 6 en 7?

Dat zou ik kunnen doen, alleen heb ik een probleem met YAML, want ik snap het gewoon niet.

Even naar je code gekeken, maar je gebruikt ook bijna niks van YAML

Je hebt de CSS geinclude en dat is het ongeveer.

Als ik je een tip mag geven: Knikker eerst eens alles van YAML eruit, dat maakt het al een stuk overzichtelijker.

[ Voor 8% gewijzigd door Bosmonster op 24-09-2008 17:49 ]

woensdag 24 september 2008 17:52

Acties:

Verwijderd

Topicstarter

YAML is juist enorm handig, het is een raamwerk waarmee je binnen no-time een cross-browser implementatie kan opzetten. Alleen in dit geval kom ik er niet uit, maar het heeft bij de rest van m'n site enorm geholpen. Je kan in principe alle yaml referenties negeren, want die hebben geen invloed op de layout van m'n site, ze verhelpen alleen mogelijke problemen met andere browsers middels hacks.

check bijv. http://builder.yaml.de

woensdag 24 september 2008 17:55

Acties:

Bosmonster

*zucht*

Ik ken YAML

En alle andere zogenaamde CSS frameworks. Imho maken ze het bouwen van een site alleen maar ingewikkelder. Ik word niet vrolijk van dit soort dingen iig:

Cascading Stylesheet:

  .subcolumns_oldgecko { width: 100%; float:left; }

  .c50l, .c25l, .c33l, .c38l, .c66l, .c75l, .c62l {float: left; }
  .c50r, .c25r, .c33r, .c38r, .c66r, .c75r, .c62r {float: right; margin-left: -5px; }

  .c25l, .c25r { width: 25%; }
  .c33l, .c33r { width: 33.333%; }
  .c50l, .c50r { width: 50%; }
  .c66l, .c66r { width: 66.666%; }
  .c75l, .c75r { width: 75%; }
  .c38l, .c38r { width: 38.2%; }
  .c62l, .c62r { width: 61.8%; }

  .subc  { padding: 0 0.5em; }
  .subcl { padding: 0 1em 0 0; }
  .subcr { padding: 0 0 0 1em; }

woensdag 24 september 2008 18:20

Acties:

Verwijderd

Topicstarter

Ik heb eerlijk gezegd andere ervaringen. Met de rest van de layout van de site had ik dankzij YAML binnen no-time een layout ontworpen die in alle browsers goed werkte, en het was best een ingewikkelde opzet.

Dat voorbeeld dat jij aanhaalt is een optionele mogelijkheid om een gridlayout te implementeren, van een ingewikkelde combinatie van kolommen. Ik snap je bedenken hierbij denk ik, erg semantisch is het niet, maar het is dan ook geboren uit het feit dat veel browsers (lees: ie) zo inconsistent omgaan met html/css die wel semantisch is. Je moet het denk ik zien als een gedwongen manier om hiermee om te gaan. Ik maak zelf van die kolomstructuur dan ook geen gebruik (ook omdat ik het niet nodig heb). Maar dan nog: het werkt in feite feilloos. Waarom het wiel opnieuw uitvinden? Yaml zorgt er imo voor dat je je veel moeite en frustratie bespaart. Ok, in dit geval gaat het niet helemaal op

. Het is mooi modulair opgezet, waardoor je het kan upgraden naar een nieuwere versie zonder dat je eigen css verloren gaat.

Maar goed, nogmaals: hier kom ik natuurlijk niet verder mee

[ Voor 12% gewijzigd door Verwijderd op 24-09-2008 18:22 ]

woensdag 24 september 2008 19:56

Acties:

Bosmonster

*zucht*

Verwijderd schreef op woensdag 24 september 2008 @ 18:20:

Maar goed, nogmaals: hier kom ik natuurlijk niet verder mee

Nee das waar, mijn excuses.

donderdag 25 september 2008 09:33

Acties:

Bosmonster

*zucht*

Een van de dingen die ik kan bedenken is dat de background-shorttag niet zo best gesupport is in oudere browsers. Het beste is om die helemaal uit te schrijven:

Cascading Stylesheet:

body {
   background-color: #303434;
   background-image: url(images/heelalachtergrond.gif);
   background-repeat: repeat-x;
}
  
#page_margins {
   background-image: url(images/Aardbolhome.jpg);
   background-repeat: no-repeat;
   background-position: 50% 0px;
}
  
#main {
   background-image: url(images/Achtergrondpixel.png);
}

Ik zou ook die pngfix eruitknikkeren. Die levert meestal meer problemen op dan dat ie oplost. Wat je beter kunt doen is een replacement css in je <IE7 stylesheet zetten, bijvoorbeeld met een achtergrondkleur of niet-png background.

Hij doet het bij mij prima in IE6 zonder die pngfix (of eigenlijk zonder de hele <IE7 stylesheet). Zullen wel wat gare handige YAML hacks in zitten.

[ Voor 43% gewijzigd door Bosmonster op 25-09-2008 09:46 ]

dinsdag 7 oktober 2008 11:12

Acties:

Verwijderd

Topicstarter

Het is me toch gelukt