CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

cr2000 Nybegynder

07. september 2006 - 14:05 Der er 10 kommentarer og
1 løsning

Enkelt div vil gerne blive større end angivet med doctype XHTML

Hey :)

Jeg er løbet ind i noget irreterende.

Jeg har et simpelt div.

<div id="chatheader" class="chatheader">
blah blah
</div>

Div'et indeholder KUN en linje tekst. Meget kort tekst.
Men alligevel vælger det at fylde ud over kanten af browseren i højre side selvom CSS'en for div'en angiver at den skal være 100%

Her er lige CSS'en for den:

.chatheader
{
width: 100%;
height: 16px;
border-right: black 1px solid;
padding-right: 2px;
border-top: black 1px solid;
padding-left: 2px;
padding-bottom: 2px;
border-left: black 1px solid;
padding-top: 2px;
border-bottom: black 1px solid;
background-color: #4499FF;
}

Det kom så til min opmærksom at det kun er et problem hvis jeg har denne fine linje i dokumentet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Men jeg vil meget gerne have at min side overholder standarten af andre grunde på siden. Så jeg vil ikke fjerne den.

Nogle der har en løsning på problemet?

Synes godt om

kinderaeg Nybegynder

07. september 2006 - 14:43 #1

Problemet ligger i håndteringen af elementer. Du siger at det interne div skal være 100% af bredden, dertil lægges border og padding (afhængigt af, om du ser det i IE eller FireFox). Det er jo rart med hver vores standard, hvor den ene går på ydre mål mens den anden mener der er tale om indre mål. Det er altså browser-afhængigt, om borders, padding mv tilføjes på indersiden eller ydersiden af elementer.

Et forfærdeligt rod, at komme til at sidde med :(

Synes godt om

cr2000 Nybegynder

07. september 2006 - 17:30 #2

Den viser det ens i begge browsere... For bredt :)

Nogle foreslag på en løsning? (Har ikke tænkt mig at skrive 99% i brede )

Synes godt om

stenger Nybegynder

07. september 2006 - 18:17 #3

Har desværre ingen løsning til dig, men har før selv haft problemer med dette. En anden ting er nemlig at der ved 100% også er en tendens til at man får en scrollbar frem. Det kan afhjælpes ved at bruge 99%...

Synes godt om

mclemens Nybegynder

07. september 2006 - 19:13 #4

Er det ikke bare at slette width:100%; ?

Synes godt om

mclemens Nybegynder

07. september 2006 - 19:14 #5

(da det er et block element er den jo 100% i bredden med forbehold for evt. margin / padding og border ... så længe du ikke direkte definerer den til width:100%; ...)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-language" content="da" /><title>:P</title>

<style type="text/css">

.chatheader
{
/* width:100%; */
height: 16px;
border-right: black 1px solid;
padding-right: 2px;
border-top: black 1px solid;
padding-left: 2px;
padding-bottom: 2px;
border-left: black 1px solid;
padding-top: 2px;
border-bottom: black 1px solid;
background-color: #4499FF;
}

</style>

</head><body>
<div id="chatheader" class="chatheader">
blah blah
</div>
</body></html>

Synes godt om

mclemens Nybegynder

07. september 2006 - 19:16 #6

^ - Forskellen fra IE til FF er at IE pr. standard i ovenstående altid viser vertical scrollbar - mens FF viser/skjuler den afhængig af behovet ... den del kan selvfølgelig fixes med overflow:auto; på html elementet (men det er nok ikke det resultat man ønsker) - alternativet var overflow-y:scroll; , men det er jo ikke helt ok css mæssigt ...

Synes godt om

mclemens Nybegynder

07. september 2006 - 19:23 #7

kinderaeg's kommentar har jeg oftest set i forbindelse med en ikke fuld doctype eller med noget foran doctype (med IE i quirks mode - det kan også ske i andre tilfælde, men har ikke testet) ... kan dog ikke se effekten i dette test eksempel - den eneste årsag til at IE vs. FF renderer lidt forskelligt i oplægget er at den ene har overflow:auto; og der er forskellig margin på html,body ... eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-language" content="da" /><title>:P</title>

<style type="text/css">

html{overflow:auto;}
html,body{margin:0px;padding:0px;}

.chatheader
{
width:100%;
height: 16px;
border-right: black 1px solid;
padding-right: 2px;
border-top: black 1px solid;
padding-left: 2px;
padding-bottom: 2px;
border-left: black 1px solid;
padding-top: 2px;
border-bottom: black 1px solid;
background-color: #4499FF;
}

</style>

</head><body>
<div id="chatheader" class="chatheader">
blah blah
</div>
</body></html>

... Håber eksemplet i 07/09-2006 19:14:56 hjalp :)

Synes godt om

mclemens Nybegynder

07. september 2006 - 19:32 #8

Med hensynet til at sænke width istedet til f.eks. 99% kan det løse problemet ... med en minimering af vinduet kan det stadig gå galt (men en så stor minimering er måske lettere usandsynlig) ... Men i en del tilfælde kan det hjælpe, jeg har selv været ude i et lignende problem i http://www.eksperten.dk/spm/728614#rid6401330 hvor jeg var nødt til at køre med 98% width ... det fik jeg dog fixet i http://www.eksperten.dk/spm/728614#rid6401693 ...

Synes godt om

cr2000 Nybegynder

08. september 2006 - 10:43 #9

Clemme... Du må lige smide et svar så du kan få points :)

Dit øverste eksempel hjalp mig igennem :)

Synes godt om

mclemens Nybegynder

08. september 2006 - 10:54 #10

Ok :)

Synes godt om

mclemens Nybegynder

08. september 2006 - 13:45 #11

Og tak for point :o)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS