Div's tonen verticale ruimte terwijl padding / margin = 0px - Softwareontwikkeling

vrijdag 6 oktober 2006 11:56

Acties:

Powerball @ 12.582

Topicstarter

De volgende sitelayout:

http://www.xs4all.nl/~ecv2004/index.html

Geeft in IE 6.0.2900.2180 het volgende probleem:

Afbeeldingslocatie: http://www.xs4all.nl/~ecv2004/space_in_ie.png

Afbeeldingslocatie: http://www.xs4all.nl/~ecv2004/space_in_ie.png

Terwijl ik in de CSS alle padding en margin op 0px heb gezet.

Tevens als ik in de CSS de overflow uitzet op de DIV PageContent, loopt in Opera 9.02 build 8537 het grijze vlak van PageContent door onder het VerticaleMenu:

Afbeeldingslocatie: http://www.xs4all.nl/~ecv2004/overflow_in_opera.png

Afbeeldingslocatie: http://www.xs4all.nl/~ecv2004/overflow_in_opera.png

Nu lost een overflow:auto in PageContent dat wel op, maar is dat wel de juiste oplossing ervoor?

PS Tips cq. commentaar om de DIVs ed beter in te delen in de HTML zijn altijd welkom.

PSS De HTML code en de CSS code:

HTML:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
  <head>
    <title>
      Vaarties.nl | Portaal
    </title>
    <link rel=stylesheet href='layout.css' type='text/css'>
  </head>
  <body>
    <div class='PageContainer' name='PageContainer'>
      <div class='Header' name='Header'>
        HEADER
      </div>
      <div class='HorizontalMenu' name='HorizontalMenu'>
        HORIZONTAL MENU
      </div>
      <div class='VerticalMenu' name='VerticalMenu'>
        VERTICAL MENU
      </div>
      <div class='PageContent' name='PageContent'>
        PAGECONTENT
      </div>
      <div class='Footer' name='Footer'>
        FOOTER
      </div>
    </div>
  </body>
</html>

Cascading Stylesheet:

/* Make every DIV, SPAN and the BODY the same in all browsers. */
DIV,
SPAN,
BODY,
P {
  margin: 0px;
  padding: 0px;
}

BODY {
  overflow: auto;
}

DIV {
  border: 1px;
  border-style: solid;
}

.PageContainer {
}

.Header {
  height: 4em;
}

.HorizontalMenu {
  height: 1.5em;
}

.VerticalMenu {
  width: 10em;
  float: left;
  background: #dddddd;
}

.PageContent {
  overflow: auto; /* Added so the pagecontent won't go behind the vertical menu in Opera, remove this to see what happens. */
  min-height: 33em;
  _height: 33em; /* Hack so IE makes the height also 33em. */
  background: #dddddd;
}

.Footer {
}

vrijdag 6 oktober 2006 12:21

Acties:

crisp

Devver

Pixelated

IE's 3-pixel floatbug

Intentionally left blank

vrijdag 6 oktober 2006 12:44

Acties:

evaarties

Powerball @ 12.582

Topicstarter

Goh. altijd leuk die IE bugs

.

Nu nog uitzoeken waar ik het dan moet oplossen in mijn code

.. nog niet gelukt nl.

Ah het is gelukt,

aan de .VerticalMenu het volgende toegevoegd:

Cascading Stylesheet:

1	margin-right: 0px !important; margin-right: -3px; /* Hack to prevent the IE 3 pixel bug. */

PS Het andere verhaal dat in Opera de hele pagina grijs wordt, dat is dus ook een bug in IE, Opera doet het wel correct.

[ Voor 113% gewijzigd door evaarties op 06-10-2006 12:58 ]

vrijdag 6 oktober 2006 13:30

Acties:

Boelie-Boelie

Ik zou die hacks weghalen en een apart stylesheet voor IE maken waarin je de afwijkende regels zet. Om alleen IE dat stylesheet te laten lezen, gebruik je conditional comments. Daarmee voorkom je problemen in de toekomst (bijv. met IE7).

Cogito ergo dubito

vrijdag 6 oktober 2006 13:37

Acties:

evaarties

Powerball @ 12.582

Topicstarter

Ah, dat zal ik eens bekijken. De aanpassingen staan nu ook online : http://www.xs4all.nl/~ecv2004/index.html .