Søg
Avatar billede the_edge Nybegynder
27. oktober 2006 - 15:50 Der er 15 kommentarer og
2 løsninger

har problemmer med div passer i firefox og i internet explore

Jeg har lavet et design til min hjemmeside men virker kun i internet explore ser forkert ud i firefox. nogen der har nogen gode ider ?


min css fil
#center  {
    width: 90%;
    height:    80%;
   
    background: green;
    float: center;
   
   
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
   
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
}   


#venstre  {

    width: 10%;
    height:    100%;
    float: left;
    background: #6666FF;

    margin-right:0px;
    margin-left:0px;
    margin-top: 0px;
    margin-bottom: 0px;

    border-left: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}



#top {
   
    width: 90%;
    height:    10%;

    background: #6666FF;
    float: center;
   

   
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;   


    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
   
   
}


#bund {
   
    width: 90%;
    height:    10%;
   
    background:white;
    float: red;
   
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;   

    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
   
   
}


min html forside
<html>
<head>
    <link rel="stylesheet" type="text/css" href="design2.css"/>
</head>
<body>


<div id="venstre">
<p>en boks</p>
</div>


<div id="top">
<p>top</p>
</div>

<div id="center">
<p>center</p>
</div>

<div id="bund">
<p>bund</p>

</div>

</body>
</html>
Avatar billede notes2c Nybegynder
27. oktober 2006 - 16:49 #1
Problemet er at IE ikke kan finde ud af at beregne bredden når man også har border og denne er angivet i px så går det galt for IE...

Uden border virker det fint:

<!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">
<!--
html, body {
width: 100%;
height: 100%;
}
body {
padding: 0;
margin: 0;
}
#center  {
    width: 90%;
    height:80%;
    float: left;
    background: green;
}
#venstre  {
    width: 10%;
    height: 100%;
    float: left;
    background: #6666FF;
}
#top {
    width: 90%;
    height: 10%;
    float: left;
    background: #6666FF;
}
#bund {
    width: 90%;
    height: 10%;
    float: left;
    background:white;
}
-->
</style>

<script type="text/javascript">
<!--
// -->
</script>

</head>

<body>

<div id="venstre">
<p>en boks</p>
</div>

<div id="top">
<p>top</p>
</div>

<div id="center">
<p>center</p>
</div>

<div id="bund">
<p>bund</p>
</div>

</body>
</html>
Avatar billede the_edge Nybegynder
27. oktober 2006 - 17:02 #2
super tak.. så jeg kan altså ikke sætte border på hvis det skal køre i begge browser ?
Avatar billede notes2c Nybegynder
27. oktober 2006 - 17:20 #3
Istedet for 90% kunne du jo nøjes med 89%:

<!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">
<!--
html, body {
width: 100%;
height: 100%;
}
body {
padding: 0;
margin: 0;
border: 1px solid black;
}
#center  {
    width: 89%;
    height:80%;
    float: left;
    background: green;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
}
#venstre  {
    width: 10%;
    height: 100%;
    float: left;
    background: #6666FF;
    border-top: 1px solid #6666FF;
    border-bottom: 1px solid #6666FF;
}
#top {
    width: 89%;
    height: 10%;
    float: left;
    background: #6666FF;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    cborder-top: 1px solid black;
    border-left: 1px solid #6666FF;
}
#bund {
    width: 89%;
    height: 10%;
    float: left;
    background:white;
    border-right: 1px solid black;
    border-left: 1px solid black;

}
-->
</style>

<script type="text/javascript">
<!--
// -->
</script>

</head>

<body>

<div id="venstre">
<p>en boks</p>
</div>

<div id="top">
<p>top</p>
</div>

<div id="center">
<p>center</p>
</div>

<div id="bund">
<p>bund</p>
</div>

</body>
</html>
Avatar billede notes2c Nybegynder
27. oktober 2006 - 17:22 #4
cborder-top: 1px solid black; i #top skal bare slettes...
Avatar billede mclemens Nybegynder
27. oktober 2006 - 21:02 #5
Et par ting der måske lige bør nævnes:

float:center; findes ikke ... left eller right

p {margin:0px;} ind i css vil hjælpe med at nulstille margin
på elementet, samme problemer kan man opleve ved h og form elementer
(ul / li vist også, men bruger ikke selv så mange forskellige elementer)
Avatar billede mclemens Nybegynder
27. oktober 2006 - 21:44 #6
Et eksempel på problemet med det border:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta  http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

p {margin:0px;}

.bord, .bordbut {height:1px;background:#000;overflow:hidden;width:100%;}
.bordbut {position:absolute;bottom:0px;}

#center, #venstre, #top, #bund {position:relative;}

#center {
  height: 80%;
  width: 90%;
  float:left;
  background: #000;
}

#c2 {
  height: 100%;
  margin: 0px 1px;
  background: #008000;
}

#venstre {
  height: 100%;
  width: 10%;
  float:left;
  background: #000;
}

#v2 {
  height: 100%;
  margin-left:1px;
  background: #66f;
}

#top {
  height:10%;
  width: 90%;
  float:left;
  background: #000;
}

#t2 {
  height: 100%;
  margin-right:1px;
  background: #66f;
}


#bund {
  height:10%;
  width: 90%;
  float:left;
  background: #000;
}

#b2 {
  height: 100%;
  margin: 0px 1px;
  background: #fff;
}

</style></head>

<body>

<div id="venstre"><div id="v2">
<div class="bord"></div><div class="bordbut"></div>
<p>en boks</p>
</div></div>

<div id="top"><div id="t2">
<div class="bord"></div><div class="bordbut"></div>
<p>top</p>
</div></div>

<div id="center"><div id="c2">
<div class="bordbut"></div>
<p>center</p>
</div></div>

<div id="bund"><div id="b2">
<div class="bordbut"></div>
<p>bund</p>
</div></div>

</body></html>


... hvis man har muligheden for at skjule scrollers
kan man rette det lidt op ved at tilføje denne i css:



html {
  overflow:hidden;
  border: 0px;
}

... evt. kombineret med noget overflow som i dette eksempel:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

html {
  overflow:hidden;
  border: 0px;
}

p {margin:0px;}

.bord, .bordbut {height:1px;background:#000;overflow:hidden;width:100%;}
.bordbut {position:absolute;bottom:0px;}

#center, #venstre, #top, #bund {position:relative;}

#center {
  height: 80%;
  width: 90%;
  float:left;
  background: #000;
}

#c2 {
  height: 100%;
  margin: 0px 1px;
  background: #008000;
  overflow:auto;
}

#venstre {
  height: 100%;
  width: 10%;
  float:left;
  background: #000;
}

#v2 {
  height: 100%;
  margin-left:1px;
  background: #66f;
}

#top {
  height:10%;
  width: 90%;
  float:left;
  background: #000;
}

#t2 {
  height: 100%;
  margin-right:1px;
  background: #66f;
}


#bund {
  height:10%;
  width: 90%;
  float:left;
  background: #000;
}

#b2 {
  height: 100%;
  margin: 0px 1px;
  background: #fff;
}

</style></head>

<body>

<div id="venstre"><div id="v2">
<div class="bord"></div><div class="bordbut"></div>
<p>en boks</p>
</div></div>

<div id="top"><div id="t2">
<div class="bord"></div><div class="bordbut"></div>
<p>top</p>
</div></div>

<div id="center"><div id="c2">
<div class="bordbut"></div>
<p>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br></p>
</div></div>

<div id="bund"><div id="b2">
<div class="bordbut"></div>
<p>bund</p>
</div></div>

</body></html>
Avatar billede mclemens Nybegynder
27. oktober 2006 - 21:45 #7
( måske skal border: 0px; inde i html { } lige fjernes ... )
Avatar billede the_edge Nybegynder
29. oktober 2006 - 11:16 #8
jeg kan godt lide det eksemple mclemens kommer med, men forstår hvorfor du giver de samme elementer 2 id'ere ?
hvordan har du fået centret delen til at lave scroll.
hvis jeg bruger det eks fra notes2c så bliver centret boksen bare støre og ødelægger designet. hvordan forhindre jeg dettet ?
Avatar billede mclemens Nybegynder
29. oktober 2006 - 12:40 #9
[ jeg kan godt lide det eksemple mclemens kommer med, men forstår hvorfor du giver de samme elementer 2 id'ere ? ] For at komme omkring problemet med borders ... lidt fusket, men det er jo et bud på problemet ...



[ hvordan har du fået centret delen til at lave scroll. ]
#c2 {
  height: 100%; // <- højde defineret til 100% ud af de 80%
  margin: 0px 1px;
  background: #008000;
  overflow:auto; // <- overflow:auto;
}


[ hvis jeg bruger det eks fra notes2c så bliver centret boksen bare støre og ødelægger designet. hvordan forhindre jeg dettet ? ] Javascript eller css fusk som i mit ?
Avatar billede the_edge Nybegynder
29. oktober 2006 - 16:49 #10
men hvor står det i dit css hvor at center ikke må ikke blive større. men der kommer en scroll bar i stedet for ?

kan du lave det uden borders dit eksemple mclemens ?
Avatar billede the_edge Nybegynder
29. oktober 2006 - 17:48 #11
hvis du kan lave dit eks uden borders mclemens vil jeg give dig pointen.... (er det fordi at du bestemmer postioner på boksene at de ikke bliver større ?)
Avatar billede mclemens Nybegynder
29. oktober 2006 - 18:07 #12
Egentlig er det ligesom notes2c, hvis det skal være uden border...
- med undtagelserne: p margin definering samt en overflow:auto; sat
på elementer som ikke må udvides så den laver en scroller istedet ...
(og så en overflow:auto; på html elementet for at skjule / vise hovedscrolleren i IE)

#center {
  height: 80%;
  width: 90%;
  float:left;
  background: #008000;
  overflow:auto; // <- Giver scrolleren ved mere end den definerede højde og bredde ...
}

... Jeg har reduceret css og elementer igen,
det var kun for at lave det trick med borderen ...


[ (er det fordi at du bestemmer postioner på boksene at de ikke bliver større ?) ]
Yes, og en overflow:auto; i css'en til elementerne gør så at den laver en scroller ved overflow istedet for at ødelægge designet ... overflow:auto; skal så nok tilføjes til flere af elementerne afhængig af behovet ...





<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

html {
  overflow:auto;
}

p {margin:0px;}

#center {
  height: 80%;
  width: 90%;
  float:left;
  background: #008000;
  overflow:auto;
}

#venstre {
  height: 100%;
  width: 10%;
  float:left;
  background: #66f;
}

#top {
  height:10%;
  width: 90%;
  float:left;
  background: #66f;
}

#bund {
  height:10%;
  width: 90%;
  float:left;
  background: #fff;
}

</style></head>

<body>

<div id="venstre">
<p>en boks</p>
</div>

<div id="top">
<p>top</p>
</div>

<div id="center">
<p>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br></p>
</div>

<div id="bund">
<p>bund</p>
</div>

</body></html>
Avatar billede the_edge Nybegynder
29. oktober 2006 - 20:28 #13
tak skal du have :) så har jeg forstået det lidt bedre :) hvis du lægger et svar vil jeg giver point... eller vil i dele ? i gav begge svar men har brugt mcelmens eksemple
Avatar billede mclemens Nybegynder
29. oktober 2006 - 20:42 #14
Giv størstedelen til notes2c :)
- min var blot en uddybning / justering,
når behovet for border ikke eksisterede :)
Avatar billede mclemens Nybegynder
29. oktober 2006 - 20:51 #15
(125+ til notes2c og 25- til mig lyder fair, når jeg kigger
på det ønskede slutresulstet vs. notes2c's oprindelige
i 27/10-2006 16:49:26 ... but you're the boss ...)
Avatar billede the_edge Nybegynder
29. oktober 2006 - 20:55 #16
:d men mange tak for hjælpen begge 2...
Avatar billede mclemens Nybegynder
29. oktober 2006 - 21:25 #17
(edit: slutresulstet -> slutresultat)

Velbekom, og tak for point :o)
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
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
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
25/0713:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
23/0715:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
22/0720:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
White papers
Flere white papers »