[css] divs sluiten niet aan - Softwareontwikkeling

vrijdag 18 april 2008 12:21

Acties:

Topicstarter

Heb een raar probleem met twee divs die in FF goed op elkaar aansluiten, maar in IE6 niet. (IE7 kan ik even niet testen). Ik heb de volgende code:

HTML:

<HTML>

<HEAD>
  <TITLE>Test</TITLE>
  <STYLE type="text/css">
  <!--
      BODY {
          TEXT-ALIGN: center;
      }

      DIV.application-page {
          WIDTH: 774px;
          HEIGHT: 100%;
          POSITION: relative;
          PADDING: 0px;
          MARGIN: 0px auto;
      }

      DIV.page-shade-up {
          POSITION: relative;
          HEIGHT: 9px;
          WIDTH: 774px;
          BACKGROUND: url( "shade-up.png" ) repeat-x;
          MARGIN: 0px;
          PADDING: 0px;
      }

      DIV.page-footer {
          POSITION: relative;
          WIDTH: 774px;
          HEIGHT: 20px;
          BACKGROUND-COLOR: #000000;
      }
  -->
  </STYLE>
</HEAD>

<BODY>

  <DIV id="application-page" class="application-page">
    <DIV id="page-shade-up" class="page-shade-up"></DIV>
    <DIV id="page-footer" class="page-footer"></DIV>
  </DIV>

</BODY>

</HTML>

Hier staat een screenshot waar duidelijk te zien is dat er nog witruimte is tussen eerste "shade" div en de tweede "footer" div. Ik vermoed dat dit met een soort van minimale hoogte van de div te maken heeft. Als ik een 1 pixel transparante clear.png binnen de shade div plaats, dan sluit deze wel gewoon netjes aan. Maar ik denk dat het ook anders op te lossen is. Iemand een idee? Het achtergrond shade plaatje is uiteraard 1x9

vrijdag 18 april 2008 12:46

Acties:

DoubleJ

Een ninjja!

Ik zie niet direct waar specifiek het probleem ligt maar probeer eens te spelen met:

Cascading Stylesheet:

.stijl
{
display: /*block of inline*/;
}

En waarom heb je alles relatief gepositioneerd?

[ Voor 39% gewijzigd door DoubleJ op 18-04-2008 12:47 ]

vrijdag 18 april 2008 12:46

Acties:

TeeDee

CQB 241

Kijk uit dat je geen table-based layout 1 op 1 omzet naar een div based layout.

De shade-up kan je ook als background image van je application page maken. Heb je geen extra element nodig.

Nb. net als in je andere topic: Gebruik je überhaupt een doctype?

[ Voor 14% gewijzigd door TeeDee op 18-04-2008 12:52 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 18 april 2008 13:08

Acties:

Krooswijk.com

Topicstarter

Yep, ik gebruik:

code:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Achtergrond van application-page is ook niet gewenst, omdat er hier oorspronkelijk nog een aantal divs boven komen.

[ Voor 31% gewijzigd door Krooswijk.com op 18-04-2008 13:10 ]

vrijdag 18 april 2008 13:18

Acties:

TeeDee

CQB 241

Zet line-height eens op 1(% of px) 9px; of overflow:hidden.

[ Voor 32% gewijzigd door TeeDee op 18-04-2008 13:27 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 18 april 2008 13:25

Acties:

Krooswijk.com

Topicstarter

Die line-height had ik ook al mee zitten spelen, maar die overflow doet wat ik wil.
Al vraag ik me alleen af waarom die nodig is.. Tnx.

vrijdag 18 april 2008 13:28

Acties:

TeeDee

CQB 241

Waarom? Dat kan je volgens mij gewoon opzoeken.

Bij een leeg element zal IE6 (wat de andere doen weet ik niet precies) een minimale hoogte van 18 / 20px; nemen. Dit is ongeveer de lijnhoogte van de default fontsize. Vandaar. font-size:0 had ook misschien kunnen helpen.

Heart..pumps blood.Has nothing to do with emotion! Bored