snabb css/div fråga

padding: 5px;

I CSS'en i div'ens klass. :)

om du har fast bredd/höjd får du dra ifrån det du lägger till som padding med. om du använder rätt doctype

padding funka.. tack så mycket

urr, det är inte helt sant... Det beror på vilken browser du tittar på sidan med :)

Ett tips i det läget är att sätta bredden på diven (till t.ex. 500px) och sedan lägga en annan DIV inne i den med padding på 5px.

Annars finns ju alltid css-attributet margin för marginaler ;)

ordell

Så ska iaf paddingen göras :)
w3.org

Vilken webbläsare gör inte så?

layup med div kolla på den i FF.. blir helt cp beror det på att jag har padding då?

Det är internet explorer som hanterar padding fel. Om du tex har en div med fast bredd på 200px, och lägger till 5px padding, så ska ju diven vara 5+200+5=210px bred, men internet explorer ändrar istället divens bredd så det blir 200 inkl. padding, alltså 5+190+5.

etna

Ange en korrekt doctype så ska IE hantera paddingen korrekt.

Sure, IE5 kommer aldrig att rendera korrekt. Så vill man vara riktigt snäll så får man väl specialbygga åt dom stackarna. Men IE5/Mac och IE6+/Win ska rendera korrekt sålänge du anger en korrekt doctype. (vilket man alltid ska) :)

finns det inte något alternativ till padding som funkar i alla webläsare då?

xzon: jo, iexplore från 6 och framåt fixar det i standards mode, men inte quirks mode. ie5 på mac orkar jag inte ens gå in på...sämre browser får man leta efter :)

för er som tycker detta låter som grekiska så är standards = rätt doctype, quirks = fel doctype.

ThomasQuick haha ja där ser man ^^

du kan ju annars göra 2 versioner av sidan(i värsta fall!!!).. sen med hjälp av ett simpelt javascript på en tom sida länkas du till rätt version.

alltså;

i index.html skriver du javascriptet..

sen gör du 2 versioner som sagt, 1 för mozilla och 1 för explorer

när du går in på index.html med FF länkas går den direkt till mozilla och tvärtom.

kanske lite offtopic, men så du vet.. :)

Eller så kan man skita i den där (imo) puckade idén och köra med
IE conditional comments

Man kan lägga nåt i stil med det här innanför head taggarna, och overrida all css som inte funkar med nyare webbläsare:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- CSS fil för allt skit som inte funkar med IE5 -->
<!-->
<link rel="stylesheet" type="text/css" href="ie5-css-fixar.css" >
<!-->
</head>
Alla andra webbläsare uppfattar det som en html kommentar så det kommer inte påverka designen för dem.

Annars om det är småsaker är det bara köra * framför det som ska läsas av IE i CSSen och !important på det som ska läsas av allt annat. Iofs bättre att köra på fuck_this_shit's förslag om det är mycket.

xzon: Det är en renderingsskillnad mellan ie och moz. Om jag inte missminner mig så räknar ie med paddingen i width, men inte moz.

en.wikipedia.org

Kalla det bug, eller skillnad i rendering. Spelar ingen större roll, fel är det :)