Avatar billede gider_ikke_mere Nybegynder
17. december 2006 - 20:14 Der er 37 kommentarer og
1 løsning

Div med lige stor bredde i IE og FF

Hvordan får jeg angivet en div til at have samme bredde i IE hhv. FF?
Avatar billede jowii Nybegynder
17. december 2006 - 20:27 #1
Hvad mener du helt præcist?
Kan du ikke bare angive en %-bredde?

<div style="width:20%;">
Indhold
</div>
Avatar billede gider_ikke_mere Nybegynder
17. december 2006 - 20:41 #2
Jeg har en div med en bredde på 160px. I denne har jeg nogle divs vertikalt med en bredde på 150px. Disse er ikke lige bredde i IE og FF, da FF registrerer bredden som værende incl. margin, padding og borders, Derfor er mine divs ikke lige bredde i IE og FF.
Avatar billede gider_ikke_mere Nybegynder
17. december 2006 - 20:48 #3
Mit oprindelige problem er egentlig at IE ikke forstår overflow:hidden
http://www.racingcar.dk/eksperten/gtest/
Avatar billede notes2c Nybegynder
17. december 2006 - 23:24 #4
Det er fordi du har en html comment stående før din doctype. Det gør at ei går i quirkmode. Doctype er det allerførste ie skal læse ellers går det galt.

Så slet den

<!-- Væk med denne -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Avatar billede gider_ikke_mere Nybegynder
17. december 2006 - 23:50 #5
Den kommer fra Norton Internet Seq. Det er fordi jeg kopierede den originale side fra det originale site via kopiering af kildekoden ved højreklik. IE opfatter bredden på en div som værende det inderste område, altså fra inderkant af border til inderkant af border. FF gør det rigtige efter css standarden og regner alt med. Når man så har en padding på 3px, en margin på 5px og en border på 1px. bliver mine divs i IE 6 & 7 på 150px og i FF på 150+3+3+5+5+1+1 = 168px. En ret væsentlig forskel!
Avatar billede notes2c Nybegynder
18. december 2006 - 00:03 #6
Efter hvad jeg sådan lige kan se burde være rette i IE 7. Kan ikke lige teste det i IE 6. Men det her at ens i både IE og FF

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

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}
.test {
border: 1px solid red;
width: 150px;
height: 150px;
padding: 5px;
margin: 5px;
}
-->
</style>
</head>

<body>
<div style="border: 1px solid blue; float: left;"><div class="test"></div></div>
</body>
</html>
Avatar billede notes2c Nybegynder
18. december 2006 - 00:06 #7
Og overflow hidden virke også:

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

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}
.test {
border: 1px solid red;
width: 150px;
height: 150px;
padding: 5px;
margin: 5px;
overflow:hidden;
}
-->
</style>
</head>

<body>
<div style="border: 1px solid blue; float: left;"><div class="test">Info om nye virksomheder/butikker/foreninger i vaammuu</div></div>


</body>
</html>
Avatar billede gider_ikke_mere Nybegynder
18. december 2006 - 00:22 #8
Sv: 18/12-2006 00:03:26

Det kan jeg umiddelbart godt se, men hvorfor virker det så ikke her: http://www.racingcar.dk/eksperten/gtest/
Avatar billede gider_ikke_mere Nybegynder
18. december 2006 - 00:29 #9
Jeg ved at overflow virker når der er sat fast bredde. Det virker bare ikke når width er sat til auto. Det var derfor jeg ønskede at angive fast bredde og løb ind i problemer med bredden.
Avatar billede notes2c Nybegynder
18. december 2006 - 00:56 #10
Måske noget i denne stil:

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

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}
.v_og_h {
width: 150px;
padding: 5px;
background-color:#43A42B;
}
.boxtop {
    height: 16px;
    background-color:#FFFFC9;
    border: 1px solid #000000;
    border-bottom: 0;
    overflow: hidden;
    margin: 0 5px 0 4px;
    font: bold 0.8em Arial, Helvetica, sans-serif;
    padding:3px;
    color: #336600;
}

.box {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    overflow: hidden;
    margin: 0 5px 10px 4px;
    font: normal 0.8em Arial, Helvetica, sans-serif;
    padding:3px;
}
-->
</style>
</head>

<body style="background: lightgreen;">
<div id="h__div" class="v_og_h">
<div class="boxtop">
Job</div>

<div class="box">
Ledige jobs:
<div><a title="" href="/Gtest.php?id=jobannoncer&amp;add=jobannoncer">Historikere</a>
</div>


</div>
   

<div class="boxtop">
Det sker </div>

<div class="box">
   
 
  <div style="margin-bottom: 6px;"><a href="http://www.vaammuu-info.dk/index.php?id=events&amp;add=nyheder&amp;m=2&amp;p=2#evid1">Kom med på www.vaammuu-info.dk</a></div>
</div>

<div class="boxtop">
Nye virksomheder</div>

<div class="box">

  <p>Info om nye virksomheder/butikker/foreninger i vaammuu </p>
  <p>&nbsp;</p>
</div>
<div class="box">
  <p>Din firmareklame her?</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</div><!-- Slut på h__div -->


</body>
</html>
Avatar billede notes2c Nybegynder
18. december 2006 - 00:58 #11
Havde lige taste forkert margin:

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

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}
.v_og_h {
width: 150px;
padding: 5px;
background-color:#43A42B;
}
.boxtop {
    height: 16px;
    background-color:#FFFFC9;
    border: 1px solid #000000;
    border-bottom: 0;
    overflow: hidden;
    margin: 0 4px 0 4px;
    font: bold 0.8em Arial, Helvetica, sans-serif;
    padding:3px;
    color: #336600;
}

.box {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    overflow: hidden;
    margin: 0 4px 10px 4px;
    font: normal 0.8em Arial, Helvetica, sans-serif;
    padding:3px;
}
-->
</style>
</head>

<body style="background: lightgreen;">
<div id="h__div" class="v_og_h">
<div class="boxtop">
Job</div>

<div class="box">
Ledige jobs:
<div><a title="" href="/Gtest.php?id=jobannoncer&amp;add=jobannoncer">Historikere</a>
</div>


</div>
   

<div class="boxtop">
Det sker </div>

<div class="box">
   
 
  <div style="margin-bottom: 6px;"><a href="http://www.vaammuu-info.dk/index.php?id=events&amp;add=nyheder&amp;m=2&amp;p=2#evid1">Kom med på www.vaammuu-info.dk</a></div>
</div>

<div class="boxtop">
Nye virksomheder</div>

<div class="box">

  <p>Info om nye virksomheder/butikker/foreninger i vaammuu </p>
  <p>&nbsp;</p>
</div>
<div class="box">
  <p>Din firmareklame her?</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</div><!-- Slut på h__div -->


</body>
</html>
Avatar billede gider_ikke_mere Nybegynder
18. december 2006 - 02:19 #12
Det virker desværre ikke bedre :-(
Avatar billede gider_ikke_mere Nybegynder
18. december 2006 - 03:29 #13
Det passer ikke for mig at din oprindelige kode virker. Når DIV'en der ydergrænser får en fast bredde, går det galt:

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

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}

.test {
border: 6px solid red;
width: 150px;
padding: 5px;
overflow:hidden;
}

.ydre {
    width: 160px;
}
-->
</style>
</head>

<body>
<div class="ydre" style="border: 1px solid blue; float: left;">

<div class="test">Info om nye virksomheder/butikker/foreninger i vaammuu</div>

</div>
</body>
</html>
Avatar billede notes2c Nybegynder
18. december 2006 - 07:32 #14
Heller ikke hvis du laver overflow hidden på ydre:

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

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}

.test {
border: 6px solid red;
width: 150px;
padding: 5px;
overflow:hidden;
}

.ydre {
width: 160px;
overflow:hidden;
}
-->
</style>
</head>

<body>
<div class="ydre" style="border: 1px solid blue; float: left;">

<div class="test">Info om nye virksomheder/butikker/foreninger i vaammuu</div>

</div>
</body>
</html>
Avatar billede gider_ikke_mere Nybegynder
18. december 2006 - 12:05 #15
Indtil videre er jeg kommet frem til følgende: IE overholder CSS standarderne med hensyn til at regne margin, padding og border med i den angivne bredde. D.v.s layoutet er ens i alle browsere, så længe der er plads nok!
Når den pågældende DIV er inden for en anden DIV, bryder layoutet ud i FF og Opera. I IE tilpasser den indre DIV sig efter den ydre. Spørgsmålet er så om der er en css kode der forhindrer at en div kan bryde ud af en anden, eller om jeg skal ud i noget JavaScript der checker for browser.

Det er i øvrigt af samme årsager jeg ikke har bygget sitet som alle andre steder jeg har set det, hvor man positionerer med pos. absolut, en top og left værdi pr. DIV. Da jeg har en baggrundsdiv der centrerer hele sitet, bliver bredden på de tre sidestillede DIVs ikke lige bredde i FF og IE. Dermed bryder layoutet i FF af disse 3 ud og bliver bredere end mine topdivs.

I lørdags fandt jeg dog en midlertidig løsning af hele problemet. Jeg putter alt indhold i de små hvide DIVs ind i en span med overflow:hidden. Det løser problemet i alle tre kendte browsere. Dette giver mig dog stadig ikke svar på mit oprindelige spørgsmål: Hvordan får jeg angivet en div til at have samme bredde i IE hhv. FF?
Avatar billede olebole Juniormester
18. december 2006 - 13:10 #16
<ole>

Din (tomme) kommentar før DTD'en disabler bl.a. CSS' box-model i IE6. Dvs, at padding, margin og border opfører sig væsentligt anderledes end CSS foreskriver. Der må _intet_ stå før DTD'en, hvis du vil bruge CSS i IE - og forventer, at version 6 også viser det korrekt  ;o)

/mvh
</bole>
Avatar billede gider_ikke_mere Nybegynder
18. december 2006 - 13:18 #17
Jeg skal gerne fjerne den, fra NIS, indsatte kode, men det hjælper intet!
Avatar billede gider_ikke_mere Nybegynder
18. december 2006 - 13:27 #18
Koden her 18/12-2006 03:29:22 fejler i FF, hvis det puttes ind i FF.
Avatar billede notes2c Nybegynder
18. december 2006 - 21:41 #19
Jeg tænker vi måske lige har overset noget i forbi farten. Hvorfor er det lige så vigtigt at angive bredden på den indre div. Det er der jo ikke behov for og når det kommer til stykket sættes der jo padding, margin og måske en border, som til samme kan fylde 10px. Det giver jo en rest plads som den indre div vil fylde ud.

Og det giver et lidt andet resultat på

Kommentar: 18/12-2006 03:29:22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}

.test {
border: 6px solid red;
padding: 5px;
overflow:hidden;
}

.ydre {
    width: 160px;
}
-->
</style>
</head>

<body>
<div class="ydre" style="border: 1px solid blue;">

<div class="test">Info om nye virksomheder/butikker/foreninger i vaammuu</div>

</div>
</body>
</html>

Og kommentar: 18/12-2006 00:58:04 og har fjernet en overflødig padding
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}
.v_og_h {
width: 160px;
background-color:#43A42B;
}
.boxtop {
    height: 16px;
    background-color:#FFFFC9;
    border: 1px solid #000000;
    border-bottom: 0;
    overflow: hidden;
    margin: 0 4px 0 4px;
    font: bold 0.8em Arial, Helvetica, sans-serif;
    padding:3px;
    color: #336600;
}

.box {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    overflow: hidden;
    margin: 0 4px 10px 4px;
    font: normal 0.8em Arial, Helvetica, sans-serif;
    padding:3px;
}
-->
</style>
</head>

<body style="background: lightgreen;">
<div id="h__div" class="v_og_h">
<div class="boxtop">
Job</div>

<div class="box">
Ledige jobs:
<div><a title="" href="/Gtest.php?id=jobannoncer&amp;add=jobannoncer">Historikere</a>
</div>


</div>
   

<div class="boxtop">
Det sker </div>

<div class="box">
   
 
  <div style="margin-bottom: 6px;"><a href="http://www.vaammuu-info.dk/index.php?id=events&amp;add=nyheder&amp;m=2&amp;p=2#evid1">Kom med på www.vaammuu-info.dk</a></div>
</div>

<div class="boxtop">
Nye virksomheder</div>

<div class="box">

  <p>Info om nye virksomheder/butikker/foreninger i vaammuu </p>
  <p>&nbsp;</p>
</div>
<div class="box">
  <p>Din firmareklame her?</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</div><!-- Slut på h__div -->


</body>
</html>

Måske kunne der være vejen frem for dig, og begge eks er ens i både IE7 og FF
Avatar billede gider_ikke_mere Nybegynder
18. december 2006 - 22:50 #20
Hej igen.

Desværre hjælper dine forslag ikke det store. I IE bryder layoutet stadig ud, når der er en tekst der er for bred til den indre div.
Avatar billede notes2c Nybegynder
18. december 2006 - 23:11 #21
Nå det er jo ærgeligt. Så tror ikke jeg kan komme på andre gode forslag lige nu...
Avatar billede gider_ikke_mere Nybegynder
20. december 2006 - 23:47 #22
Jeg ved ikke om det er det der driller, men jeg bruger NIS popupblocker. Denne indsætter følgende kode i hvert dokument:

Denne før Doc declaration:
<!--  -->

... og denne efter </body>:

<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
  window.open = SymWinOpen;
  if(SymRealOnUnload != null)
    SymRealOnUnload();
}

function SymOnLoad()
{
  if(SymRealOnLoad != null)
    SymRealOnLoad();
  window.open = SymRealWinOpen;
  SymRealOnUnload = window.onunload;
  window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

Men selvom jeg deaktiverer popupblockeren, kommer denne der fortsat:

<!--  -->

... så indtil videre kan jeg ikke undgå at denne linie kommer før doc deklarationen, selvom jeg deaktiverer NIS komplet. Under alle omstændigheder er jeg i et eller andet omfang nødt til at tage hensyn til problemet, da jeg ikke kan vide hvad brugeren har af popupkillere, men hvad?
Avatar billede olebole Juniormester
21. december 2006 - 11:29 #23
Afinstaller NIS  =)
Avatar billede gider_ikke_mere Nybegynder
21. december 2006 - 17:54 #24
Det hjælper jo ikke for andre besøgende på siden.
Avatar billede gider_ikke_mere Nybegynder
24. december 2006 - 10:00 #25
Er der virkelig ingen der kan hjælpe mig med mit oprindelige spørgsmål, eller er det fordi vi skal have hævet pointene?
Avatar billede notes2c Nybegynder
24. december 2006 - 10:39 #26
Jeg ville mene at det spm er besvaret. Det kan man godt (18/12-2006 21:41:09). Men i den contekst du har, giver det problemer med lange linier som jeg opfatter det. Dit site ser ens ud for mig i både IE og FF. Så lige nu ved jeg ikke hvad jeg skal kigge efter.
Avatar billede gider_ikke_mere Nybegynder
24. december 2006 - 14:39 #27
Her er linket til den endelige side: http://www.vamdrup-info.dk/

Som du kan se er min venstre menudiv, containerdiv og højre menudiv ikke lige høje i IE. Det skyldes akkurat samme problemstilling. Tilsyneladende regnes margin, padding og border ikke med i IE 6 og 7 for alle de divs der er i menuerne. Derfor laver scriptet der justerer højden på disse ikke den rigtige højde i IE.
Avatar billede notes2c Nybegynder
25. december 2006 - 17:19 #28
Du startede med at snakke om bredden, og nu snakker du om højden. Lidt forvirret er jeg. Og nu er <!-- --> tilbage som det allerførste element i din html. Det gør at IE går i quirkmode. Og en egenligt sammenligning mellem IE og FF ikke er muligt. Højden er vel bestemt af det indhold som skal vises. Og jeg blev ikke klogere på problemstillingen.
Når en fuld doctype er specifiseret burde IE6 følge standarden og blive ens med FF. Se evt http://www.washington.edu/webinfo/snippets/css/boxmodel.html
Ved godt det måske ikke hjælper dig lige her. Men ved simpelhen ikke hvad jeg skal kigge efter og så længe IE går i quirkmode er det umuligt at få til at passe sammen.
Avatar billede gider_ikke_mere Nybegynder
26. december 2006 - 00:53 #29
Nå, jeg troede højden skyldtes et og samme problem. Det gør det ikke fejlen i højden skyldtes en kommentar skrevet efter en div. Se evt. her: http://www.eksperten.dk/spm/752118#rid6563388

<!-- --> er jeg indtil videre ikke herre over, og den har tilsyneladende været der hele tiden. Jeg ved ikke hvad den kommer af. Jeg har ingen popupkiller installeret, udover den i NIS, og selvom jeg deaktiverer både NIS og NAV, kommer den alligevel.

Jeg har flere steder på E læst at browsercheck er en løsning på dårlig kodning, men når jeg ikke kan få løst så simpelt problem som udregningen af bredden på en række divs, kan det jo gå hen og blive sidste udvej.
Avatar billede roenving Novice
26. december 2006 - 00:55 #30
Men når vi alle, uanset installation af whatever sikringsværktøj, får denne ingest med, må den jo stamme fra noget der generereres server-side, og det må du få afklaret !-)
Avatar billede roenving Novice
26. december 2006 - 00:55 #31
*tingest ...
Avatar billede gider_ikke_mere Nybegynder
26. december 2006 - 02:03 #32
Komplet afinstallering af NIS, samt upload via LeechFTP hjælper ikke en dyt - linien kommer stadig, så nu venter jeg på svar fra min udbyder af webhotellet.
Avatar billede gider_ikke_mere Nybegynder
26. december 2006 - 14:45 #33
Jeg fandt fejlen. IE vil ikke acceptere at jeg inkluderer nogle PHP filer før doc declaration. Dette resulterer i den pågældende linie. Alt andet php script der ligger før, laver ingen kuk - som det heller ikke burde. Heldigvis kan jeg i dette tilfælde rokere rundt på scriptene, så jeg stadig får de funktioner jeg ønsker.

Dette har dog stadig ikke ændret på at IE misfortolker bredden på mine DIVs.
Avatar billede notes2c Nybegynder
26. december 2006 - 16:54 #34
Hvis du ændre din style box til at have bredden 143px, i stedet for auto så kan IE finde ud af overflow hidden. Den kan åbenbart ikke finde ud af ovorflow: hidden når bredden er sat til auto.
Avatar billede gider_ikke_mere Nybegynder
26. december 2006 - 18:32 #35
Jamen jeg kan jo ikke have en fast bredde på mine bokse. Det er jo det der er problemet!!! De bliver ikke lige bredde i IE hhv. FF.
Avatar billede notes2c Nybegynder
26. december 2006 - 20:03 #36
Jeg synes ellers at det pænt ens ud hos mig... Hvad tester du dit site med. Hvilke versioner og hvad er dimensioner for boksene. For synes vi køre lidt rundt i det... Måske skulle du kigge lidt på kode... Du benytter meget inline styles, hvilket ikke burde være nødvendigt...
Avatar billede gider_ikke_mere Nybegynder
27. december 2006 - 02:25 #37
Jamen jeg har heller ikke mere problemer på siden, siden jeg gik over til at sætte en span i mine divs. Derfor ser du ingen fejl. Som skrevet 18/12-2006 12:05:31 var dette en midlertidig løsning. Nu fik jeg løst problemet med Jeres mistillid til min mystiske linie før doc typen, så nu kan jeg gå videre med mit oprindelige problem.

Jeg er dog sikker på at mine problemer ikke er løst, da den side jeg henviste til 17/12-2006 20:48:15: http://www.racingcar.dk/eksperten/gtest/ var en side af et "snapshot" fra browseren - altså uden PHP scripts. Der hjalp det ikke at fjerne den irriterende linie, som jeg skrev til olebole 18/12-2006 13:18:19. Men der er lavet så mange ændringer at jeg nu igen prøver at tage problemet op: Div med lige stor bredde i IE og FF.

I øvrigt bruger jeg kun inline på mine menuers LI. Det er jo nødvendigt for at få disse til at gå horisontalt.
Avatar billede gider_ikke_mere Nybegynder
05. januar 2007 - 01:00 #38
Jeg må indrømme at jeg ingen problemer har haft, siden jeg fik rettet fejlen. Det lader til at IE nu forstår hvad jeg programmerer ;-)
Point til notes2c.
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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