[css] Breedte van DIV gaat fout in IE - Softwareontwikkeling

zaterdag 13 september 2003 11:04

Acties:

Dat dus.

Topicstarter

Ik ben de layout van mijn site van tables aan het omzetten naar DIV's. Dat gaat op zich prima, maar er gaat 1 ding mis in Internet Explorer en ik kom er maar niet achter waarom en natuurlijk nog belangrijker: Hoe het op te lossen is.

Eerst eventjes wat code, zodat het duidelijk is waarom het gaat:

De stylesheet die ik gebruik ziet er als volgt uit:

Cascading Stylesheet:

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #000000;
    background-color: #FFFFFF;
    padding: 0px;
    margin: 0px;
}

div {
  position: absolute;
  margin: 0;
}

div.header {
  position: absolute;
  background-attachment: scroll;
  width: 100%;
  height: 27px;
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  background-color: FF00FF;
  z-index: 999;
  overflow: hidden;
}
div.logo {
  position: absolute;
  width: 133px;
  height: 73px;
  left: auto;
  right: 0;
  top: 0;
  bottom: auto;
  background-color: 0FF00F;
  z-index: 1000;
}
div.search {
  position: absolute;
  left: 180;
  right: 133;
  width: auto;
  height: 46px;
  top: 27;
  bottom: auto;
  background-color: FFF00F;
  z-index: 1000;
  overflow: hidden;
}
div.layoutimage {
  position: absolute;
  width: 180px;
  height: 120px;
  left: 0;
  right: auto;
  top: 27;
  bottom: auto;
  background-color: 000FF0;
}
div.leftbar {
  position: absolute;
  width: 180px;
  height: auto;
  left: 0;
  right: auto;
  top: 147;
  bottom: auto;
  background-color: 00FFFF;
}
div.rightbar {
  position: absolute;
  width: 180px;
  height: auto;
  left: auto;
  right: 0;
  top: 73;
  bottom: auto;
  background-color: 00FFFF;
}
div.content {
  position: absolute;
  width: auto;
  height: auto;
  left: 180;
  right: 180;
  top: 73;
  bottom: auto;
  background-color: F0F0F0;
}

De HTML-code is alsvolgt:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>div</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel=stylesheet href="div.css" type="text/css" media="screen">
  </head>
  <body>
    <div class="header">Header</div>
    <div class="logo">Logo</div>
    <div class="layoutimage">Layoutimage</div>
    <div class="leftbar">Leftbar</div>
    <div class="rightbar">Rightbar</div>
    <div class="search">Search</div>
    <div class="content">Content</div>
  </body>
</html>

Wat er misgaat is dat de search- en de contentdiv in IE niet de complete breedte krijgen als er niet genoeg tekst instaat om 1 regel te vullen, terwijl wanneer er wel veel tekst instaat de DIV wel de juiste breedte is. Dat wil ik dus ook wanneer de DIV leeg is. Mozilla en Opera tonen het wel zoals ik bedoel.

Heeft iemand enig idee hoe dit op te lossen is? Ik kom er echt niet meer uit...

Tenslotte nog wat URLs waar alles te bewonderen is:
Zoals hierboven geschetst: http://cglabbee.speed.planet.nl/test/div1.html
Met meer tekst in de DIV: http://cglabbee.speed.planet.nl/test/div2.html
De stylesheet: http://cglabbee.speed.planet.nl/test/div1.css

Voor alle duidelijkheid: het gaat dus om het gele en het grijze vlak.

[ Voor 17% gewijzigd door Glabbeek op 13-09-2003 11:12 . Reden: URL's iets aangepast ]

En zo is het maar net.

zaterdag 13 september 2003 11:22

Acties:

IschaGast

Misschien een leuke vraag voor op www.css-discuss.org. Ikzelf kom er ook niet echt uit.

Ow ja trouwens nog iets ik zie dat jij al je div's een class hebt meegegeven. Werkt het niet lekkerder als je voor je page lay-out je div's een #id geeft en al je tekst elementen een class?

www.stopdesign.com van douglas bowman heeft het vind ik persoonlijk heel netjes opgelost. Moet je maar eens kijken.

http://stopdesign.com/css/screen.css

[ Voor 67% gewijzigd door IschaGast op 13-09-2003 11:25 . Reden: nog iets toegevoegd ]

zaterdag 13 september 2003 11:24

Acties:

Glabbeek

Dat dus.

Topicstarter

Die site kende ik nog niet, daar zal ik het ook eens proberen. Dank je voor de tip.

En zo is het maar net.

zaterdag 13 september 2003 13:36

Acties:

crisp

Devver

Pixelated

Dit is gewoon iets waar IE nog schromelijk tekort schiet als het gaat om CSS-ondersteuning:

Cascading Stylesheet:

  position: absolute;
  left: 180px;
  right: 133px;
  width: auto;

Gewoon puur gebrekkig dus.
Wat me wel opvalt is dat je niet consequent overal een maataanduiding bij zet.

Netjes oplossen is er dus niet bij, je zult moeten gaan klooien met containers, floats (hoewel IE zich daar ook regelmatig in verslikt) of javascriptjes...

Intentionally left blank

zaterdag 13 september 2003 13:46

Acties:

Clay

cookie erbij?

Is het wel zo handig om div in z'n algemeen position:absolute te geven? Juist de combinatie van gewoon, absolute en relative, en het nesten van elementen, maakt het opmaken van je html met css makkelijker. Je maakt het jezelf best lastig door alle divs los in de body te zetten.
Ook zou ik me afvragen of je wel zoveel divjes nodig hebt. Waar je met een table misschien alles in een eigen td stopt hoef je dat niet 1 op 1 zo om te bouwen naar divjes. Zo zou die layout image gewoon als <img> in de leftbar kunnen.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

zaterdag 13 september 2003 14:25

Acties:

Glabbeek

Dat dus.

Topicstarter

Crips en Clay, bedankt voor de tips. Ik heb het nu werkend, door inderdaad zowel absolute als relative divs te gebruiken.

Clay, ik wil juist voor elk onderdeel een andere div gebruiken, om eenvoudig dynamisch de data in de verschillende delen van de pagina te vervangen.

En zo is het maar net.