[CSS] Krijg overbodige ruimte niet weg

[AtleX]

Ik ben bezig met een nieuw design voor mijn site, en nu zit ik met het probleem dat er in IE6 een randje verschijnt waar het niet zo moeten:

Tussen het contentvak en de zwarte balk eronder komt er op deze pagina dat lijntje. Op de andere pagina's van de site heb ik het niet. Nu heb ik als test dat news-divje weggehaald (zie deze pagina) en dan is het probleem ook weg.

De content-div heeft al een 2px brede border gekregen zodat duidelijk is dat niet de content-div groter wordt, maar dat de footer opschuift.

Als ik IE in de quirks mode dwing door een comment boven het doctype te plaatsen blijft het probleem ook bestaan.

Als ik de webdevelopers toolbar van Firefox gebruik zie ik ook dat de news-div geen rare grootte heeft:


Relevante CSS code:
-http://www.atlex.nl/dev/css/layout.css voor de plaatsing van de verschillende divjes.
-http://www.atlex.nl/dev/css/class.css voor de layout van de news-div.

Ik heb al vanalles geprobeerd met de margin's en padding's, helaas heeft dat niet mogen baten. Als iemand er nog een oplossing voor heeft ben ik hem/haar bijzonder dankbaar .

edit:
Paint gif-jes

[RwD]

Allereerst, ik zet zelf in mn css altijd alle padding en margins op 0 om de verschillen tussen IE en FF hierin op te heffen. Misschien helpt dat...

Cascading Stylesheet:

* {
  padding : 0;
  margin : 0;
}

Stomme suggestie, maar probeer de ruimte eens groter te maken? als je nu een manier vindt waarmee je in firefox wel een grotere ruimte maakt maar in IE wordt ie niet groter heb je de dader misschien te pakken.

Misschien is het wel een bug in IE. Ik heb van bugs gelezen waardoor er extra ruimte tussen elementen zat die niet weg te halen was

[AtleX]

Hmm, ik kan het ook oplossen door de page-div een zwarte achtergrond te geven. Alleen is er dan wel een kleine verspringing zichtbaar als er naar een pagina gegaan wordt die dit probleem niet heeft.

[crisp]

Vaak komt het ook door whitespace tussen verschillende (block)-elementen. Ik wil nog wel eens een container een font-size: 0px; meegeven en vervolgens de juiste fontsize op de elementen daarbinnen zetten.

[AtleX]

Ik ben gisteren nog bezig geweest met andere dingen, en nu lijk ik het probleem niet meer te hebben Ik heb alleen nog maar CSS-files van de site in mijn versiemap van na het probleem, ik kan dus niet meer nakijken wat er nou anders is vergeleken met eerst .

[RwD]

id.css

Cascading Stylesheet:

/*De opmaak van de verschillende ID's: */

#page {
  text-align: left;
  border: 2px solid #000000;
}

#header {
  background-color:#F9F9F9;
}

#content-container {
  background-image: url(../images/layout/bg_tree.jpg);
  background-repeat: no-repeat;
  border: 2px solid #000000;
  border-width: 2px 0;
}

#content-text {
  color: #000000;
}

#menu {
  text-align: justify;
  background-color:#FFFFFF;
  color: #000000;
  font-family: Tahoma, verdana, sans-serif;
  font-size: 1.1em;
  font-weight: bolder;
}

#menu a {
  color: #000000;
  text-decoration: none;
  padding-right: 3px;
}

#menu a:hover {
  background-color: #ABD02A;
}

#footer {
  font-family: Tahoma, verdana, sans-serif;
  font-size: 0.8em;
  background-color: #000000;
  margin: 0px;
}

#footer-top {
  margin: 0px;
}

#footer-bottom {
  color: #000000;
  background-color: #FFFFFF;
}

#footer a {
  color: #ABD02A;
  text-decoration: none;
  font-weight: bold;
  padding: 1px;
}

#footer a:hover {
  color: #000000;
}

#footer img {
  border: none;
}

layout.css

Cascading Stylesheet:

body {
  padding: 0px;
  margin: 20px;
}

#page { 
  vertical-align: middle;
  margin: 0px auto;
  width: 600px;
}

#header {
  margin: 0px;
} 

#menu {
  padding: 10px;
}

#content-container {
  width: 600px;
  height: 400px;
}

#content-text {
  vertical-align: middle;
  padding: 5px;
  margin: 10px;
  overflow: auto;
  height: 370px;
  width: 570px;
}

#footer {
  margin: 0px;
}

#footer-top {
  text-align: center;
  margin: 0px;
  padding-top: 1px;
}

#footer-bottom {
  text-align: right;
  padding-right: 10px;
}

tag.css

Cascading Stylesheet:

body {
  background-color: #e1ddd9;
  font-size: 12px;
  color: #F9F9F9;
  text-align: center;
  font-family: Tahoma, Verdana, sans-serif;
}

p {
  color: #000000;
  font-size: 1em;
}

h1 {
  color: #000000;
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 1.6em;
  padding-left: 5px;
}

acronym, abbr {
  cursor: help;
  border-bottom: thin dotted;
}

a {
 color: #000000;
 text-decoration: underline;
}

a:hover {
 color: #ABD02A;
}

ul {
  list-style: square;
}

class.css

Cascading Stylesheet:

.bold {
  font-weight: bold;
}

.news_date {
  font-weight: bold;
  padding-left: 3px;
}

.code {
  margin: 15px;
  overflow: auto;
  padding: 4px;
  border: 1px solid #000000;
}

.form-style {
  border: 1px solid #000000;
  background-color: transparent;
  font-family: Tahoma, Verdana, sans-serif;
}

.news {
  padding: 2px;
  border: 1px solid #ABD02A;
}

Zo, wat was het probleem??