css padding werkt niet bij het plaatsen van DOCTYPE [Archief]

Volledige versie bekijken : css padding werkt niet bij het plaatsen van DOCTYPE

dijklarg

%Europe/Berlin %872 %2009, 21:55

Hey,

Ik heb een raar probleem wanneer ik mijn regel van de DOCTYPE erbij plaats.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Waneer ik deze weghaal, krijg ik namelijk wel mooi mijn padding te zien, plaatst ik de doctype erbij, dan is al dat mooi weg :-).

Iemand een idee wat er mis in in onderstaande code:

home.php

-----
<LINK href="css/style.css" type="text/css" rel="stylesheet" />

<div class="Teasersubmenu1"><br />
<img src="images/logo_envelop.jpg" width="57" height="51" align="left" class="padding"/>
<p>test</p><br />
<br />
<a href="index.php?pagina=contact">lees meer... </a><br />
</div>
<div class="Teasersubmenu1"><br />
<img src="images/logo_cv.jpg" width="57" height="51" align="left" class="padding" />
<p>test</p><br />
<br />
<a href="index.php?pagina=contact">lees meer... </a><br />
</div>

<div class="Teasersubmenu1"><br />
<img src="images/logo_lamp.jpg" width="57" height="51" align="left" class="padding"/>
<p>test</p><br />
<br />
<a href="index.php?pagina=contact">lees meer... </a>
</div>

en de css

body, html {
background-image: url(../images/bg.jpg);
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
background-repeat: repeat-x;
background-color: #f1f3f2;
}
.Frame {
WIDTH: 875px;
margin: auto;
position: relative;
height: 400px;
}
.Logo {
WIDTH: 334px;
HEIGHT: 78px;
text-align: right;
margin: 0 auto;
position: absolute;
float: left;
left: 32px;
top: 29px;
}
.navigatie {
background-image: url(../images/button_bg.jpg);
background-repeat: no-repeat;
color: #000000;
width: 470px;
position: absolute;
float: left;
top: 315px;
height: 30px;
}
.navigatie a:link,.navigatie a:visited {
text-decoration: none;
color: #605746;
}
.navigatie a:hover,.navigatie a:active {
text-decoration: underline;
color: #FF0099;
}
.tabel {
width: 48%;
float: left;
height: 60px;
padding-top: 5px;
padding-bottom: 5px;
}
.tabelformulier {
width: 50%;
float: left;
height: 10px;
padding-top: 2px;
padding-bottom: 2px;
border: 1;
border-color: #000;
}
.tabelformulierenkel {
width: 90%;
float: left;
height: 10px;
padding-top: 1px;
padding-bottom: 1px;
border: 1;
border-color: #000;
}

.ContentFrame {
WIDTH: 845px;
margin: auto;
position: relative;
font-size: 10px;
color: #000000;
width: 845px;
background-image: url(../images/content-Main.jpg);
background-position: right;
height: 566px;
background-repeat: no-repeat;
}
.Contact {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
width: 214px;
background-position: left;
background-repeat: no-repeat;
background-image: url(../images/contact.jpg);
position: absolute;
float: left;
height: 188px;
top: 311px;
left: 4px;
text-align: right;
}

.Content {
WIDTH: 875px;
margin: auto;
height: 40px;
}
.clearfix:unknown {
CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "."
}
img.padding {
padding: 5;
}

.verborgen
{
display:none;
font-size:11px;
padding:4px;
}

.formulier {
font-size: 10px;
background-color: #FCF;
border: 1px solid #666666;
margin-left: 5px;
}
.Teaser {
WIDTH: 845px;
width: 845px;
background-image: url(../images/bg%20content%20main.jpg);
height: 279px;
background-repeat: no-repeat;
}
.Teasersubmenu1 {
WIDTH: 845px;
position: relative;
font-size: 12px;
color: #000000;
width: 33%;
height: 279px;
float: left;
left: 10px;
top: 2px;
padding: 10;
margin: 1;
}
.Teasersubmenu1 P{
font-weight: bolder;
font-size: 11px;

}

.eyecather {
background-image: url(../images/button_bg.jpg);
background-repeat: no-repeat;
color: #000000;
width: 414px;
position: absolute;
float: left;
top: 126px;
height: 30px;
left: 430px;
}

.Teasersubmenu1 A:link {
COLOR: #C9006B;
text-decoration: none;
}

.Teasersubmenu1 A:hover {
COLOR: #000000;
}
.Teasersubmenu1 A:visited {
COLOR: #FF99CC;
text-decoration: none;
}
.Teasersubmenu {
WIDTH: 845px;
position: absolute;
font-size: 10px;
color: #000000;
width: 817px;
height: 272px;
float: left;
left: 14px;
top: 3px;
}
.footer {
WIDTH: 875px;
margin: auto;
position: relative;
height: 40px;
text-align: center;
font-size: 10px;
padding: 10;
padding-top: 10px;
}

-----
-----
-----

dcm360

%Europe/Berlin %885 %2009, 22:15

Ik denk zomaar (of weet wel zeker) dat je html niet voldoet aan de xhtml-strict. Deze validator (http://validator.w3.org/) van het W3C kan je denk ik wel op weg helpen. Maar je zou ook eens kunnen kijken of je transitional ipv strict kan gebruiken. Scheelt toch weer iets.

Alfrеdo

%Europe/Berlin %780 %2009, 19:44

Ik kan die lap tekst zo echt niet debuggen. Toon de website zelf eens, of liever nog het probleem in uitgeklede vorm.

De reden waarom de padding niet getoond wordt met het doctype, is waarschijnlijk omdat je gewoon iets fout doet, en die fout enkel in quirksmode (zonder doctype) gerenderd wordt.
Het verwijderen van de doctype is in ieder geval niet de oplossing, evenmin als hem transitional te maken.

sander1

%Europe/Berlin %713 %2009, 18:07

Tom.

%Europe/Berlin %819 %2009, 20:40

Het is sowieso niet handig debuggen op deze manier:

WIDTH: 875px;
margin: auto;
position: relative;
height: 400px;

Het box-model in je achterhoofd houden, en die volgorde aanhouden, of zelf een duidelijke volgorde bedenken en die aanhouden is voor jezelf (en voor anderen in zo'n geval als dit) veel prettiger.

Beginnen met de position, dan de margin, de padding en dan de width/height, met daarna dingen als font-family, text-align enzo maakt het veel duidelijker.

Alfrеdo

%Europe/Berlin %908 %2009, 22:48

Het online ergens kunnen bekijken zou erg prettig zijn. Ik zie in elk geval wel dat je op sommige plaatsen in je CSS geen eenheid opgeeft. Nu weet ik niet zeker of een browser dan standaard pixels of ems gebruikt, of dat dit de oorzaak is van je probleem. O.a. hier missen eenheden:.Teasersubmenu1 {
[...]
padding: 10;
margin: 1;
}
Ah kijk, daar zit je probleem. Zonder eenheid (uitgezonderd bij 0) heb je geen geldige css en doet je browser er dus niets mee, toch zeker niet als de pagina standards compliant wordt weergegeven.

dijklarg

%Europe/Berlin %424 %2009, 11:10

Ik heb een en ander geprobeerd, maar er zit nog geen oplossing bij...

Neem maar gerust eens een kijkje op het probeersel (http://www.studio1980.nl/mm/home.php)

dijklarg

%Europe/Berlin %428 %2009, 11:16

Het was toch inderdaad de eenheid. ik was vergeten deze bij de img.padding aan te geven! Great! bedankt jongens!

william morren

%Europe/Berlin %169 %2009, 05:04

Kleine opmerking misschien maar ik zie dat je nog veel de br tag gebruikt om je pagina te stijlen kwa witruimte. Dit kan je best weglaten en wat spelen met je padding/margin in css zelf.