Avatar billede websam Nybegynder
07. april 2006 - 20:26 Der er 135 kommentarer og
1 løsning

Kant i FF vs. IE

Hejsa,

Hvordan omgåes jeg det med at en border ikke vises i FF, men i IE :

#container
{
    width:760px;
    margin: 20px auto;
    border: 1px solid #999999;
}

i FF får jeg kun vist den øverste line og ikke højre, venstre og nederst ?

/Websam
Avatar billede erikjacobsen Ekspert
07. april 2006 - 20:31 #1
Mon ikke det er noget andet? Har du et lille eksempel hvor det ikke virker?
Avatar billede michael_stim Ekspert
07. april 2006 - 20:33 #2
Det har nok noget at göre med at ff tager fra indersiden af borderen og ie fra ydersiden. Har du dem helt op til en anden div så ses de ikke i ff. Pröv at lave den en px mindre.
Avatar billede steen_hansen Forsker
07. april 2006 - 20:33 #3
Måske dette?

#container
{
    width:760px;
    margin: 20px auto;
    border: 1px solid #999999;
    border-collapse: collapse;
}


At der ikke er logik i borders kan skyldes, at det hele bliver forskubet af dét, som du ligger inde i - hvis du forstår :o) Hvis det stadig gør det efter det ovenstående forslag, kan du måske lægge hele tabellen herind?
Avatar billede steen_hansen Forsker
07. april 2006 - 20:34 #4
som du ligger inde i = som det ligger inde i
Avatar billede websam Nybegynder
07. april 2006 - 20:34 #5
Du kan få det hele fra min css som så ikke virker med de kanter som beskrevet ovenfor :

html,body
{
  font-family:Verdana;
  font-size:12pt;
  color: #000000;
  margin:0px;
  padding:0px;
}

#container{
  width:760px;
  margin: 20px auto;
  border: 1px solid #999999;
}

#index{
  float:left;
  width:199px;
  height:100%;
}

#main{
  float:right;
  width:561px;
  height:100%;
}

#logo
{
  width:199px;
  height:120px;
  background-image:url(../Image/icedance_1.gif)
}

#top
{
  width:561px;
  height:59px;
  background-image:url(../Image/icedance_4.gif)
}

#top-image
{
  width:561px;
  height:275px;
  background-image:url(../Image/icedance_5.gif)
}

#top-image-bg
{
  width:561px;
  height:275px;
  background-image:url(../Image/icedance_5.gif)
}
Avatar billede michael_stim Ekspert
07. april 2006 - 20:37 #6
Pröv at lave den 2 px större
Avatar billede michael_stim Ekspert
07. april 2006 - 20:37 #7
Eller de andre mindre
Avatar billede steen_hansen Forsker
07. april 2006 - 20:37 #8
Det ville være en hjælp at se tabellen også.
Avatar billede websam Nybegynder
07. april 2006 - 20:38 #9
border-collapse gav ingen forskel

2px større virker heller ikke for så går det galt med mine billeder i IE
Avatar billede websam Nybegynder
07. april 2006 - 20:39 #10
<!--Body container start-->
    <div id="container">
        <!--Index container start-->
        <div id="index">
            <div id="logo"></div>
        </div>
        <!--Main site container start-->
        <div id="main">
            <div id="top"></div>
            <div id="top-image-bg"></div>
        </div>
    </div>
Avatar billede steen_hansen Forsker
07. april 2006 - 20:43 #11
Jeg vil tro det er fordi du ikke har sat padding: 0px;. Hvis intet angives, afsættes som standard 2px;
Avatar billede websam Nybegynder
07. april 2006 - 20:44 #12
og det hjælper heller ikke at gøre de andre mindre :o(

steen_hansen >> hvad er det for en tabel du tænker på ?
Avatar billede websam Nybegynder
07. april 2006 - 20:45 #13
padding i min #container ?
Avatar billede steen_hansen Forsker
07. april 2006 - 20:46 #14
Jeg troede først du havde opbygget det i tabeller, ikke i divs. Har du prøvet at sætte padding: 0px; på alle sammen?
Avatar billede steen_hansen Forsker
07. april 2006 - 20:47 #15
Ja, i alt hvad du foretager dig. Du skal regne de 2px med, når du lægger det hele sammen.
Avatar billede websam Nybegynder
07. april 2006 - 20:48 #16
padding:0px sat i alle giver heller ingen forskel :o(
Avatar billede steen_hansen Forsker
07. april 2006 - 20:59 #17
Lidt spredt fægtning:

html,body
{
  font-family: Verdana;
  font-size: 12pt;
  color: #000;
  margin: 1px 0px 0px 0px;
  padding: 0px;
}
Avatar billede steen_hansen Forsker
07. april 2006 - 21:00 #18
Du har angivet DOCTYPE?
Avatar billede steen_hansen Forsker
07. april 2006 - 21:04 #19
Jeg er overbevist om, at det er noget med, at du mangler border-collapse: collapse; på dine divs. Kunne du prøve at copy paste det ind i dit CSS?
Avatar billede websam Nybegynder
07. april 2006 - 21:09 #20
jeg tester det lige af, men jeg tror snarre det er fordi FF og IE måler forskeligt yderst/inderst fra kant til kant
Avatar billede websam Nybegynder
07. april 2006 - 21:10 #21
og doctype er :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Avatar billede steen_hansen Forsker
07. april 2006 - 21:18 #22
container er 762px inkl. kant, og de øvrige divs er de angivne mål, medmindre du undlader at sætte padding: 0px; og border-collapse: collapse ind.

Jeg har nu ikke problemer med at få størrelserne rigtige i hhv. MSIE og FF. Og tro mig, er der nogen, der haft problemer med at få det nøjagtigt, så er det mig :o)

Hvor henne står der, at FF og IE måler hhv. yderst/indest? Du har sikkert ret, hvis du siger det. Jeg har bare ikke problemer med at få det ens i de 2 browsere.
Avatar billede steen_hansen Forsker
07. april 2006 - 21:24 #23
Så skulle det forh¨åbentlig virke:

#container {
width: 760px;
margin: 0px auto;
border: 1px solid #999;
padding: 20px;
border-collapse: collapse;
}
Avatar billede mclemens Nybegynder
07. april 2006 - 21:30 #24
kigger lige på det - skovt nok så virker det uden doctypen???
- det virker ligesom om at den ikke overholder css ordentligt med doctypen???
Avatar billede mclemens Nybegynder
07. april 2006 - 21:30 #25
skovt = sjovt :)
Avatar billede steen_hansen Forsker
07. april 2006 - 21:34 #26
Nu bruger jeg ikke divs, men tabeller, så jeg prøver lige at lave en test selv :)
Avatar billede mclemens Nybegynder
07. april 2006 - 21:39 #27
Den vil bare ikke doctypen skal ud før den vil...
Jeg må indrømme at jeg aldrig har set det her før...
Avatar billede mclemens Nybegynder
07. april 2006 - 21:42 #28
#container{
  width:760px;
  margin: 20px auto;
  border: 1px solid #999999;
  height:500px;
}

^ så vil den godt med det er jo ikke optimalt :P
Avatar billede steen_hansen Forsker
07. april 2006 - 21:43 #29
YO, mclemens :o)

Jeg har også svært ved at få det til at makke ret. Det burde (i teorien) virke:

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

<html>

<head>
<style type="text/css">
html,body {
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-size: 12pt;
color: #000;
margin: 0px;
padding: 0px;
}
#container {
width: 760px;
margin: 0px auto;
border: 1px solid #999;
padding: 20px;
border-collapse: collapse;
}
#index {
float: left;
width: 199px;
height: 100%;
padding: 0px;
border-collapse: collapse;
}
#main {
float: right;
width: 561px;
height: 100%;
padding: 0px;
border-collapse: collapse;
background-color: #e7e7e7;
}
#logo {
width: 199px;
height: 120px;
/* background-image: url('../Image/icedance_1.gif');*/
padding: 0px;
border-collapse: collapse;
background-color: #e8e8e8;
}
#top {
width: 561px;
height: 59px;
/* background-image: url('../Image/icedance_4.gif');*/
padding: 0px;
border-collapse: collapse;
background-color: #a8a8a8;
}
#top-image {
width: 561px;
height: 275px;
/* background-image: url('../Image/icedance_5.gif');*/
padding: 0px;
border-collapse: collapse;
background-color: #a7a7a7;
}
#top-image-bg {
width: 561px;
height: 275px;
/* background-image: url('../Image/icedance_5.gif');*/
padding: 0px;
border-collapse: collapse;
}
</style>
<META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 08:20:00 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" content="no">
<META HTTP-EQUIV="Content-language" content="dan">
<META NAME="robots" content="all">
<title></title>
</head>

<body>

<div id="container">
    <div id="index">
        <div id="logo">logo</div>
    </div>
    <div id="main">
        <div id="top">top</div>
        <div id="top-image-bg">top-image-bg</div>
    </div>
</div>

</body>

</html>


Men der er nok et eller andet dumt, som jeg har overset :/
Avatar billede steen_hansen Forsker
07. april 2006 - 21:45 #30
Ah, det går da galt, når index sættes til 100% i højden, og container ikke er det. Der skal rettes op på det, prøver lige ...
Avatar billede steen_hansen Forsker
07. april 2006 - 21:47 #31
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<style type="text/css">
html,body {
height: 100%;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-size: 12pt;
color: #000;
margin: 0px;
padding: 0px;
}
#container {
width: 760px;
height: 100%;
margin: 0px auto;
border: 1px solid #999;
padding: 20px;
border-collapse: collapse;
}
#index {
float: left;
width: 199px;
height: 100%;
padding: 0px;
border-collapse: collapse;
}
#main {
float: right;
width: 561px;
height: 100%;
padding: 0px;
border-collapse: collapse;
background-color: #e7e7e7;
}
#logo {
width: 199px;
height: 120px;
/* background-image: url('../Image/icedance_1.gif');*/
padding: 0px;
border-collapse: collapse;
background-color: #e8e8e8;
}
#top {
width: 561px;
height: 59px;
/* background-image: url('../Image/icedance_4.gif');*/
padding: 0px;
border-collapse: collapse;
background-color: #a8a8a8;
}
#top-image {
width: 561px;
height: 275px;
/* background-image: url('../Image/icedance_5.gif');*/
padding: 0px;
border-collapse: collapse;
background-color: #a7a7a7;
}
#top-image-bg {
width: 561px;
height: 275px;
/* background-image: url('../Image/icedance_5.gif');*/
padding: 0px;
border-collapse: collapse;
}
</style>
<META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 08:20:00 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" content="no">
<META HTTP-EQUIV="Content-language" content="dan">
<META NAME="robots" content="all">
<title></title>
</head>

<body>

<div id="container">
    <div id="index">
        <div id="logo">logo</div>
    </div>
    <div id="main">
        <div id="top">top</div>
        <div id="top-image-bg">top-image-bg</div>
    </div>
</div>

</body>

</html>
Avatar billede steen_hansen Forsker
07. april 2006 - 21:51 #32
Skal du sætte noget til 100% i højden, skal det være i forhold til det omkransende element. Derfor startes html, body med at blive sat til 100%, dernæst container. Ellers kan index ikke sættes til 100% i højden. Ser det rigtigt ud?
Avatar billede mclemens Nybegynder
07. april 2006 - 22:10 #33
selvfølgelig, men hvad med margin og centrering ;)
Avatar billede steen_hansen Forsker
07. april 2006 - 22:14 #34
Ups, den skulle lige rettes til :)

#container {
width: 760px;
height: 100%;
margin: 20px auto;
border: 1px solid #999;
padding: 0px;
border-collapse: collapse;
}
Avatar billede steen_hansen Forsker
07. april 2006 - 22:23 #35
Og det hele rettet tilbage:

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

<html>

<head>
<style type="text/css">
html,body {
height: 100%;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-size: 12pt;
color: #000;
margin: 0px;
padding: 0px;
}
#container {
width: 760px;
height: 100%;
margin: 20px auto;
border: 1px solid #999;
padding: 0px;
border-collapse: collapse;
}
#index {
float: left;
width: 199px;
height: 100%;
padding: 0px;
border-collapse: collapse;
}
#main {
float: right;
width: 561px;
height: 100%;
padding: 0px;
border-collapse: collapse;
background-color: #e7e7e7;
}
#logo {
width: 199px;
height: 120px;
background-image: url(../Image/icedance_1.gif);
padding: 0px;
border-collapse: collapse;
}
#top {
width: 561px;
height: 59px;
background-image: url(../Image/icedance_4.gif);
padding: 0px;
border-collapse: collapse;
}
#top-image {
width: 561px;
height: 275px;
background-image: url(../Image/icedance_5.gif);
padding: 0px;
border-collapse: collapse;
}
#top-image-bg {
width: 561px;
height: 275px;
background-image: url(../Image/icedance_5.gif);
padding: 0px;
border-collapse: collapse;
}
</style>
<META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 08:20:00 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" content="no">
<META HTTP-EQUIV="Content-language" content="dan">
<META NAME="robots" content="all">
<title></title>
</head>

<body>

<div id="container">
    <div id="index">
        <div id="logo"></div>
    </div>
    <div id="main">
        <div id="top"></div>
        <div id="top-image-bg"></div>
    </div>
</div>

</body>

</html>



Håber det virker.
Avatar billede mclemens Nybegynder
07. april 2006 - 22:47 #36
Det gør det... ;)

OT: Dog synes jeg stadig det er et problem at man "skal" køre den i height 100% for at få rammen rundt og at man ikke kan få rammen til at tilpasse sig indholdet som i IE... se eksemplet her:

<!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
{
  font-family:Verdana;
  font-size:12pt;
  color: #000000;
  margin:0px;
  padding:0px;
}

#container{
  width:760px;
  margin: 20px auto;
  border: 1px solid #999999;
}

#index{
  float:left;
  width:199px;
background-color:red;
}

#main{
  float:right;
  width:561px;
background-color:green;
}

</style><body>

<div id="container">
  <div id="index">a<br>a<br>a<br></div>
  <div id="main">b</div>
</div>

</body></html>
Avatar billede mclemens Nybegynder
07. april 2006 - 22:50 #37
Skal huske at sige at jeg tænker på at border udvider sig automatisk ved flere <br>'s
Avatar billede steen_hansen Forsker
07. april 2006 - 22:56 #38
Mig bekendt skal man ikke sætte #container til at være 100% i højden. Det må skyldes, at de andre divs i venstre side har en given højde (hhv. 59px, 120px og 275px). Eller hva', retter en div sig altid i højden afhængigt af indholdet? :o)

Jeg er ikke så vant til at arbejde med divs. Jeg bruger dem faktisk kun, når jeg skal, ved nærmere eftertanke. Jeg ved hvad jeg har med at gøre, når jeg arbejder med tabeller.
Avatar billede mclemens Nybegynder
07. april 2006 - 23:32 #39
Mig bekendt skal man ikke sætte #container til at være 100% i højden.>
- nej så skal html,body også være 100% som du selv formulerede det :)

Eller hva', retter en div sig altid i højden afhængigt af indholdet? :o)>
- Den retter sig altid i højden i forhold til den indhold ligesom de div's div'en
ligger i også retter højden opad automatisk... Firefox gør det også når man fjerner doctypen så css box modellen ikke overholdes???

Jeg er ikke så vant til at arbejde med divs. Jeg bruger dem faktisk kun, når jeg skal, ved nærmere eftertanke. Jeg ved hvad jeg har med at gøre, når jeg arbejder med tabeller.>
- Jeg bruger altid div men aldrig border :)

p.s.: border-collapse er til tables
http://www.w3schools.com/css/css_reference.asp#table
Avatar billede steen_hansen Forsker
07. april 2006 - 23:35 #40
Ok, tak for info :)
Avatar billede mclemens Nybegynder
08. april 2006 - 00:03 #41
Det er åbenbart float'en på divs der ødelægger border'en i firefox :/
Avatar billede mclemens Nybegynder
08. april 2006 - 00:05 #42
edit: syntes det hjalp af fjene doctypen tidligere... men det var åbenbart float jeg rørte ved der også...
Avatar billede websam Nybegynder
08. april 2006 - 00:06 #43
Hold da op som i har fået skrevet havde fået lukket min mail box så havde ikke set alle disse mails. Jeg har så imellemtiden fundet frem til helt at droppe border og så lave det på denne måde :

html,body
{
    font-family:Verdana;
    font-size:12pt;
    color: #000000;
   
}

#container
{
    position: relative;
    margin: 0px auto 0px auto;
    top: 0px;
    width: 762px;
    height:500px;
    background-color: #999999;
}

#index
{
    position: absolute;
    top:1px;
    left:1px;
    float:left;
    width:199px;
    height:100px;
    background-color: #FFFFFF;
}

#main
{
    position: absolute;
    top:1px;
    left:200px;
    float:right;
    width:561px;
    height:150px;
    background-color: #FFFFFF;
}

Og Jubiiiiii det virker i både FF og IE så skal jeg bare lige have testet de øvrige browsere af om det oxo spiller max der, men mon ikke ;o)

Og til det med at placere et layout i tabeller så har det aldrig været tiltænkt tabeller. Mange (incl. ham selv) gør det, men der er sq så mage flere muligheder med CSS og så er det langt mere søgemaskine venligt, så det er bare om at komme i gang med CSS til layout ;o)

/Websam
Avatar billede mclemens Nybegynder
08. april 2006 - 00:06 #44
fjene -> fjerne
Avatar billede websam Nybegynder
08. april 2006 - 00:17 #45
Men sjovt nok vil FF ikke acceptere % som angivelse af højde hvorimod det virker fint i IE ?
Avatar billede steen_hansen Forsker
08. april 2006 - 00:18 #46
Fedt nok, at det virker. Nu har du også sat en højde på #container, den har du manglet.

Din kommentar mht. layout og tabeller, den forstår jeg ikke. Hvorfor har layout aldrig været tiltænkt tabeller?

<table style="width: 760px; border: 1px solid #999; margin: 0px auto; border-collapse: collapse;">
    <tr>
        <td style="width: 760px; padding: 0px;">&nbsp;</td>
    </tr>
</table>
Avatar billede steen_hansen Forsker
08. april 2006 - 00:19 #47
MSIE godtager stort set hvad som helst, men prøv at læse 07/04-2006 21:51:43
Avatar billede websam Nybegynder
08. april 2006 - 00:22 #48
Det jeg mener med layout er brugen af tabeller til at arrangere sin grafik ;o)

Og jeg prøver lige at sætte % på mine index og main ;o)

/Websam
Avatar billede steen_hansen Forsker
08. april 2006 - 00:23 #49
Og søgemaskinevenligt? Jeg er ikke helt med på hvad du mener :)
Avatar billede mclemens Nybegynder
08. april 2006 - 00:24 #50
hvis bare alle browsere bare var ens, men ja når højden er defineret som jeg nævnte i 07/04-2006 21:42:20 - så virker det ;)
Avatar billede mclemens Nybegynder
08. april 2006 - 00:25 #51
Og søgemaskinevenligt? Jeg er ikke helt med på hvad du mener :)
- det fylder mindre :) normalt min. ½ så meget mere besparelse hvis du bruger tables i tables
Avatar billede mclemens Nybegynder
08. april 2006 - 00:27 #52
Hold da op som i har fået skrevet havde fået lukket min mail box så havde ikke set alle disse mails.>
- jeg får ingen mails om opdateringer :D
Avatar billede steen_hansen Forsker
08. april 2006 - 00:29 #53
Ok, held og lykke med det :)
Avatar billede mclemens Nybegynder
08. april 2006 - 00:32 #54
det samme herfra ;)
Avatar billede steen_hansen Forsker
08. april 2006 - 00:33 #55
Ok, mclemens, hvis index skal være 100% i højden, kan det jo ikke lade sig gøre, hvis ikke de ydre rammer er til det. Det var det jeg mente med 07/04-2006 21:51:43.
Avatar billede websam Nybegynder
08. april 2006 - 00:33 #56
steen_hansen >> Dine sider bliver bedre listet hvis de er lavet med div's til at håndtere layouts, såmen ikke andet ;o)

mclemens >> Selvom jeg laver height:100% i alle body, container, index og main så virker det ikke i FF men fint i IE, prøvat køre denne css :

html,body
{
    font-family:Verdana;
    font-size:12pt;
    color: #000000;
    height:100%
   
}

#container
{
    position: relative;
    margin: 0px auto 0px auto;
    top: 0px;
    width: 762px;
    background-color: #999999;
    height:100%
}

#index
{
    position: absolute;
    top:1px;
    left:1px;
    float:left;
    width:199px;
    background-color: #FFFFFF;
    height:100%
}

#main
{
    position: absolute;
    top:1px;
    left:200px;
    float:right;
    width:561px;
    background-color: #FFFFFF;
    height:100%
}

<!--Body container start-->
<div id="container">
    <!--Index container start-->
    <div id="index">
    </div>
    <!--Main site container start-->
    <div id="main">
        lhdlsdhflsh<br />
        dsfsdfhsdfh<br />
        sdfhsdfhdsfh<br />
        sdfhsdfhsdfh<br />
        sdfhsdfhsdfh<br />
        Sdfhsdhsdfh</div>
    </div>
</div>

de er ikke ens her ?!?

/Websam
Avatar billede steen_hansen Forsker
08. april 2006 - 00:35 #57
Held og lykke, jeg smutter :)
Avatar billede websam Nybegynder
08. april 2006 - 00:38 #58
ja mon ikke det lykkedes på et tidspunkt *GGG*
Avatar billede steen_hansen Forsker
08. april 2006 - 00:39 #59
07/04-2006 22:23:16
Avatar billede mclemens Nybegynder
08. april 2006 - 00:40 #60
Så der de ens ud, men jeg sagde dog ikke det virkede...
- jeg sagde at man godt kunne sætte højden til 100% ikke andet :)

html,body
{
font-family:Verdana;
font-size:12pt;
color: #000000;
height:100%;
    padding:5px;
    margin:0px;
}
Avatar billede mclemens Nybegynder
08. april 2006 - 00:40 #61
Ok, mclemens, hvis index skal være 100% i højden, kan det jo ikke lade sig gøre, hvis ikke de ydre rammer er til det. Det var det jeg mente med 07/04-2006 21:51:43.>
- jeps gav dig også kun ret :)
Avatar billede mclemens Nybegynder
08. april 2006 - 00:41 #62
07/04-2006 22:23:16
- nemlig ;)
Avatar billede steen_hansen Forsker
08. april 2006 - 00:42 #63
NU er jeg smuttet, der bliver kørt en del frem og tilbage, synes jeg :)

Kan I hygge!
Avatar billede mclemens Nybegynder
08. april 2006 - 00:42 #64
08/04-2006 00:40:32... Så der de ens ud -> Så ser de ens ud...
Ja, og så var det vist nok fejl for i aften godnatter :D
Avatar billede websam Nybegynder
08. april 2006 - 00:46 #65
Det ser ud til kun at virke når jeg sætter en fast højde på min container, men vil det så følge med når sidens indhold overskrider den max højde div'en er sat til ?

/Websam
Avatar billede mclemens Nybegynder
08. april 2006 - 01:22 #66
<!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
{
  font:12pt Verdana;
  color: #000000;
  margin:0px;
  padding:0px;
}

#container{
  width:760px;
  margin:20px auto;
  position:relative;
}

#inner{
position:absolute;left:0px;
width:100%;
  border: 1px solid #999999;
}


#index{
  float:left;
  width:199px;
}

#main{
  float:right;
  width:561px;
}

#logo
{
  width:199px;
  height:120px;
  background-image:url(../Image/icedance_1.gif)
}

#top
{
  width:561px;
  height:59px;
  background-image:url(../Image/icedance_4.gif)
}

#top-image
{
  width:561px;
  height:275px;
  background-image:url(../Image/icedance_5.gif)
}

#top-image-bg
{
  width:561px;
  height:275px;
  background-image:url(../Image/icedance_5.gif)
}

</style><body>


<!--Body container start-->
<div id="container">
<div id="inner">

        <!--Index container start-->
        <div id="index">
            <div id="logo">a</div>
        </div>
        <!--Main site container start-->
        <div id="main">
            <div id="top">a</div>
            <div id="top-image-bg">a</div>
        </div>
    </div>
</div>
</div>
</body></html>
Avatar billede mclemens Nybegynder
08. april 2006 - 01:27 #67
nej virkede ikke med mere indhold... :/
(har givet op -> websam opretter lige en tråd med de 60 point
jeg fik før - havde ikke set problemet med borderen før)
Avatar billede mclemens Nybegynder
08. april 2006 - 01:33 #68
Avatar billede websam Nybegynder
08. april 2006 - 01:38 #69
Nu er jeg ikke med, hvorfor skal jeg have point tilbage ???

Jeg dropper den border og laver min grafik med en tynd streg rundt om det hele så må det blive sådan indtil jeg har lært noget mere om CSS ;o)
Avatar billede stich Nybegynder
08. april 2006 - 01:38 #70
Jeg må tilstå jeg kun lige har skimmet tråden, men jeg lagde mærke til at der var lidt problemer/undren over hvordan container-div'en opførte sig ift. de indre floatede elementer. Så hvis det kan være til nogen hjælp:
IEs opførsel er forkert, den bør ikke udvide containeren efter størrelsen af floatede child-elementer. Eric Meyer har skrevet en artikel omkring emnet: http://www.complexspiral.com/publications/containing-floats/

I korte træk er den pæneste løsning som regel at floate containeren og angive en bredde på den.
Avatar billede mclemens Nybegynder
08. april 2006 - 01:52 #71
Problemet er ikke at vi ikke kan finde ud af at floate en div og angive bredden på dem det har vi begge dele gjort... Problemet er at borderen forsvinder i firefox...

Prøv mit eksempel i 07/04-2006 22:47:43 (hvis den floater inde i et absolute placeret elementet som jeg fik den til i 08/04-2006 01:22:43 forsvinder borderen ikke - dog så har den sidst nævnte istedet et problem med overflow'en)
Avatar billede mclemens Nybegynder
08. april 2006 - 01:53 #72
Nu er jeg ikke med, hvorfor skal jeg have point tilbage ???
Jeg dropper den border...>

- ok så ligger jeg selv et svar derinde ;)
Avatar billede websam Nybegynder
08. april 2006 - 01:54 #73
Ja den sidste du lavede var fame tæt på ;o)
Avatar billede mclemens Nybegynder
08. april 2006 - 01:56 #74
I korte træk er den pæneste løsning som regel at floate containeren og angive en bredde på den.>
Kunne ikke være mere enig med dig og gør det også altid.
Avatar billede mclemens Nybegynder
08. april 2006 - 01:57 #75
[Ja den sidste du lavede var fame tæt på ;o)]
- ja ... den var næsten i vinkel, men kun næsten :/
Avatar billede websam Nybegynder
08. april 2006 - 02:00 #76
og hvordan skulle det så se ud hvis containeren skal floates ?

/Websam
Avatar billede mclemens Nybegynder
08. april 2006 - 02:03 #77
(min besked 08/04-2006 01:56:26 indeholdte en quote fra stich)
Avatar billede mclemens Nybegynder
08. april 2006 - 02:04 #78
- men så da gerne en løsning også stich... jeg føler jeg er blank :/
Avatar billede mclemens Nybegynder
08. april 2006 - 02:14 #79
jeg prøver og fuske :P
Avatar billede mclemens Nybegynder
08. april 2006 - 02:15 #80
virkede ikke...
Avatar billede mclemens Nybegynder
08. april 2006 - 02:25 #81
poster dog lige mit fusk... grunden til det ikke virker er at det gør det betinget at folk har javascript aktiveret (overfører højden fra det absolute placerede element og bruger det til at angive højden i den relativt placerede div...men som sagt: FUSK - baseret på 08/04-2006 01:56:26 der næsten var i vinkel)


<!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>

<script type="text/javascript">
<!--
window.onload=function(){
document.getElementById("container").style.height=document.getElementById("inner").offsetHeight;
}
//-->
</script>

<style type="text/css">

html,body
{
  font:12pt Verdana;
  color: #000000;
  margin:0px;
  padding:0px;
}

#container{
  width:760px;
  margin:20px auto;
  position:relative;
}

#inner{
position:absolute;left:0px;
width:100%;
  border: 1px solid #999999;
}


#index{
  float:left;
  width:199px;
}

#main{
  float:right;
  width:561px;
}

#logo
{
  width:199px;
  height:120px;
  background-image:url(../Image/icedance_1.gif)
}

#top
{
  width:561px;
  height:59px;
  background-image:url(../Image/icedance_4.gif)
}

#top-image
{
  width:561px;
  height:275px;
  background-image:url(../Image/icedance_5.gif)
}

#top-image-bg
{
  width:561px;
  height:275px;
  background-image:url(../Image/icedance_5.gif)
}

</style><body>


<!--Body container start-->
<div id="container">
<div id="inner">

        <!--Index container start-->
        <div id="index">
            <div id="logo">a</div>
        </div>
        <!--Main site container start-->
        <div id="main">
            <div id="top">a</div>
            <div id="top-image-bg">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>v</div>
        </div>
    </div>
</div>
</div>
</body></html>
Avatar billede mclemens Nybegynder
08. april 2006 - 02:30 #82
og så virkede det ikke i firefox
Avatar billede mclemens Nybegynder
08. april 2006 - 02:41 #83
Så bruger vi bare (det oprindelige html og css) sammen
med et javascript (for at vise det fuskede 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>

<script type="text/javascript">
<!--
window.onload=function(){

ah=document.getElementById("main").offsetHeight;
bh=document.getElementById("index").offsetHeight

document.getElementById("container").style.height=(ah>bh)?ah+"px":bh+"px";

}
//-->
</script>

<style type="text/css">

html,body
{
  font-family:Verdana;
  font-size:12pt;
  color: #000000;
  margin:0px;
  padding:0px;
}

#container{
  width:760px;
  margin: 20px auto;
  border: 1px solid #999999;
}

#index{
  float:left;
  width:199px;
  height:100%;
}

#main{
  float:right;
  width:561px;
  height:100%;
}

#logo
{
  width:199px;
  height:120px;
  background-image:url(../Image/icedance_1.gif)
}

#top
{
  width:561px;
  height:59px;
  background-image:url(../Image/icedance_4.gif)
}

#top-image
{
  width:561px;
  height:275px;
  background-image:url(../Image/icedance_5.gif)
}

#top-image-bg
{
  width:561px;
  height:275px;
  background-image:url(../Image/icedance_5.gif)
}

</style><body>


<!--Body container start-->
    <div id="container">
        <!--Index container start-->
        <div id="index">
            <div id="logo"></div>
        </div>
        <!--Main site container start-->
        <div id="main">
            <div id="top"></div>
            <div id="top-image-bg"></div>
        </div>
    </div>
</body></html>
Avatar billede stich Nybegynder
08. april 2006 - 02:44 #84
Oki, jeg beklager larmen så.

Jeg er stadigvæk ikke helt med på hvad problemet så egentlig er nu, for I havde jo fået det til at fungere, fandt jeg ud af ved en bedre skimning. Undervejs faldt jeg dog over indlægget 23:32:55 http://www.eksperten.dk/spm/701400#rid6196291
<<<
Eller hva', retter en div sig altid i højden afhængigt af indholdet? :o)>
- Den retter sig altid i højden i forhold til den indhold ligesom de div's div'en
ligger i også retter højden opad automatisk... Firefox gør det også når man fjerner doctypen så css box modellen ikke overholdes???
>>>
Og containeren i det eksempel du efterfølgende kommer med, udvider sig jo netop ikke (i FF) pga. de indre elementer er floatede. Så gider du komme med en minimal testcase der illustrerer problemet?
Avatar billede stich Nybegynder
08. april 2006 - 02:49 #85
Jeg må nok også hellere lige tilføje, at en ydre div jo altså ikke altid bør udvide sig efter indholdet, netop i de tilfælde hvor indholdet er taget udenfor det alm. flow, dvs. når de floates eller positioneres absolut.
Avatar billede mclemens Nybegynder
08. april 2006 - 02:53 #86
der skal lige siges at firefox går i ged hvis man udvider f.eks. top-image-bg så den bliver mere end 275px i højden som den er angivet til... man skal så vælge at slette højde angivelsen fra den hvis den skal være højere... prøv evt. at slette height defineringen inden der fyldes op med<br>

og denne css rettelse gør så margin bliver ens i bund og top ved både IE og FF
html,body
{
  font-family:Verdana;
  font-size:12pt;
  color: #000000;
  margin:0px;
  padding:0px;
}
body{margin:20px 0px;}

#container{
  width:760px;
  margin: 0px auto;
  border: 1px solid #999999;
}
Avatar billede mclemens Nybegynder
08. april 2006 - 03:01 #87
[Og containeren i det eksempel du efterfølgende kommer med, udvider sig jo netop ikke (i FF) pga. de indre elementer er floatede. Så gider du komme med en minimal testcase der illustrerer problemet?]
problemet er borderen der forsvinder ... som jeg skrev så brug 07/04-2006 22:47:43 til test case


[<<<
Eller hva', retter en div sig altid i højden afhængigt af indholdet? :o)>
- Den retter sig altid i højden i forhold til den indhold ligesom de div's div'en
ligger i også retter højden opad automatisk... Firefox gør det også når man fjerner doctypen så css box modellen ikke overholdes???
>>>]
Ja, det var noget rent vrøvl ...
forstår egentlig slet ikke selv hvad jeg har skrevet...

Den retter sig altid i højden i forhold til det indhold den har.
- de divs der så indeholder dette div retter sig efter dette divs størrelse såfremt de ikke er placeret absolute..... IE retter så også en ydre div efter højden på en indre div der er floatet --- men det gør FF åbenbart "desværre ikke" derfor problemet med borderen der går i stykker)


[Jeg må nok også hellere lige tilføje, at en ydre div jo altså ikke altid bør udvide sig efter indholdet, netop i de tilfælde hvor indholdet er taget udenfor det alm. flow, dvs. når de floates eller positioneres absolut.]
- nemlig ellers er der jo ingen ide i position absolute... dog ville jeg gerne have haft at den var blevet udvidet baseret på indre floatede div's også det er åbenbart tilfældet med IE men ikke FF - - derfor problemerne.
Avatar billede mclemens Nybegynder
08. april 2006 - 03:03 #88
takker for dit input stich - jeg er ikke vant til at bruge borders og har aldrig set dem blive ødelagt i firefox ved brug af float i divs indentil den omsluttende div - troede float var det samme som relativt bare placeres højre eller venstre selvfølgelig :P
Avatar billede mclemens Nybegynder
08. april 2006 - 03:04 #89
Det er for sent nu...
Jeg har for mange fejl i
min tekst er tilbage imorgen ;D
Avatar billede stich Nybegynder
08. april 2006 - 03:07 #90
>>>der skal lige siges at firefox går i ged hvis man udvider f.eks. top-image-bg så den bliver mere end 275px i højden som den er angivet til... man skal så vælge at slette højde angivelsen fra den hvis den skal være højere...<<<
Yep, når man angiver en højde er det jo meningen at elementet netop skal have den højde; hvis den skulle udvide sig efter indholdet ville man bruge min-height i stedet. (At IE < v.7 så har 'misforstået' height som min-height er en anden sag).

>>>og denne css rettelse gør så margin bliver ens i bund og top ved både IE og FF<<<
Ja IE er uenig med Opera, Firefox etc. om hvilket element der er root når det kommer til viewporten (http://www.quirksmode.org/viewport/intro.html).

>>>troede float var det samme som relativt bare placeres højre eller venstre selvfølgelig<<<
Okay, ja det er desværre en udbredt misforståelse, specielt pga. IEs rendering af det.
Avatar billede mclemens Nybegynder
08. april 2006 - 03:12 #91
[Jeg er stadigvæk ikke helt med på hvad problemet så egentlig er nu, for I havde jo fået det til at fungere, fandt jeg ud af ved en bedre skimning. Undervejs faldt jeg dog over indlægget 23:32:55 http://www.eksperten.dk/spm/701400#rid6196291]
prøv at fylde indhold i så der er mere indhold end den angivne højde ;)


[[[Og containeren i det eksempel du efterfølgende kommer med, udvider sig jo netop ikke (i FF) pga. de indre elementer er floatede. Så gider du komme med en minimal testcase der illustrerer problemet?]
problemet er borderen der forsvinder ... som jeg skrev så brug 07/04-2006 22:47:43 til test case]]
- Hov, fik ikke læst det hele... men, nej som jeg skrev i starten af det nævnte eksempel så er det - det der skabte problemerne...

Kan du se en løsning på det så post away... tags til at lave originalen står i
http://www.eksperten.dk/spm/701400#rid6196070
http://www.eksperten.dk/spm/701400#rid6196058
Avatar billede mclemens Nybegynder
08. april 2006 - 03:13 #92
hov update :P
Avatar billede mclemens Nybegynder
08. april 2006 - 03:16 #93
mit bedste bud p.t. er javascript men så gerne
en løsning der virkede uden js :) har prøvet relative
position, men det optager jo plads det sted man flytter
det fra (og igen afhængig af ovenstående indhold hvor meget
top:-ypx den skal have) og ved absolute udvides scrollbaren
ikke ordentligt ved mere indhold :/
Avatar billede mclemens Nybegynder
08. april 2006 - 03:22 #94
http://www.eksperten.dk/spm/701400#rid6196291]
prøv at fylde indhold i så der er mere indhold end den angivne højde ;)
- hov, troede du mente indlægget lidt længere nede... løsning med height:100% er ikke ideel da rammen skal stå et stykke væk fra kanterne... og centreres midt på siden i alle opløsninger
Avatar billede stich Nybegynder
08. april 2006 - 03:37 #95
Jeg er ikke helt sikker, men jeg tror du muligvis misforstår noget, mclemens. Måske du rent faktisk burde læse Eric Meyers artikel en ekstra gang?

Er følgende ikke noget der opnår det du gerne vil?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Containing floats</title>
        <style type="text/css" media="screen">
#foo {
    width:600px;
    border:1px solid;
    margin:0 auto;
}
#bar {
    float:left;
    border:1px solid red;
}
.clearer {
    clear:both;
}
        </style>
    </head>
    <body>
        <div id="foo">
            <div id="bar">
                <p>a</p>
                <p>a</p>
                <p>a</p>
                <p>a</p>
                <p>a</p>
                <p>a</p>
                <p>a</p>
                <p>a</p>
                <p>a</p>
            </div>
            <div class="clearer"></div>
        </div>
    </body>
</html>
Avatar billede mclemens Nybegynder
08. april 2006 - 04:05 #96
Jeg er ikke helt sikker, men jeg tror du muligvis misforstår noget, mclemens. Måske du rent faktisk burde læse Eric Meyers artikel en ekstra gang?>
- joh, det var det ... og det tror jeg også jeg gør :)

... det var åbentbart den clear: both der skulle til ;)
- så fik jeg også det lært... se man lærer noget herinde hver dag 8)
Avatar billede stich Nybegynder
08. april 2006 - 04:05 #97
Tilføjelse: Da den skal være centreret kan man ikke anvende tricket med at floate parent div'en, så må man bruge et clearer-element (eller height:100%; som I også var kommet frem til, men det er ikke altid ønskværdigt).

@steen_hansen: I fald du kigger med endnu, så en lille kommentar til "Hvorfor har layout aldrig været tiltænkt tabeller?": Fordi tabeller har en semantisk betydning. Når man anvender tabeller til andet end tabulære data, er det i realiteten misbrug. At det er muligt, og at det endda kan være mere belejligt til at løse visse layoutmæssige problemstillinger, end det er vha. at style de semantisk korrekte elementer, ændrer ikke noget ved det.
Avatar billede mclemens Nybegynder
08. april 2006 - 04:05 #98
sejt nok stich ;)
Avatar billede stich Nybegynder
08. april 2006 - 04:08 #99
@mclemens: Hehe, godt nok. Forresten var clear:left; nok i det eksempel, men med clear:both; kan klassen anvendes i de tilfælde hvor der (også?) er højre-floatede elementer.
Avatar billede mclemens Nybegynder
08. april 2006 - 04:09 #100
jeps laver lige eksemplet færdigt, med de to kolonner og css'en
og så kaster du svaret når det er accepteret ;)
Avatar billede mclemens Nybegynder
08. april 2006 - 04:17 #101
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Containing floats</title>
  <style type="text/css">
html,body{
  font:16px Verdana;
  color: #000000;
  margin:0px;
  padding:0px;
}

#container{
  width:760px;
  margin: 20px auto;
  border: 1px solid #999999;
}

#index{
  float:left;
  width:199px;
}

#main{
  float:right;
  width:561px;
}

#logo
{
  width:199px;
  height:120px;
  background-image:url(../Image/icedance_1.gif)
}

#top
{
  width:561px;
  height:59px;
  background-image:url(../Image/icedance_4.gif)
}

#top-image
{
  width:561px;
  height:275px;
  background-image:url(../Image/icedance_5.gif)
}

#top-image-bg
{
  width:561px;
  height:275px;
  background-image:url(../Image/icedance_5.gif)
}

.clearer{clear:both;}
  </style>
</head>
<body>

<!--Body container start-->
    <div id="container">
        <!--Index container start-->
        <div id="index">
            <div id="logo"></div>
        </div>

        <!--Main site container start-->
        <div id="main">
            <div id="top"></div>
            <div id="top-image-bg"></div>
        </div>
<div class="clearer"></div>
    </div>

</body></html>
Avatar billede mclemens Nybegynder
08. april 2006 - 04:19 #102
Nåh, nu går jeg i seng (gab)
Mange tak for viden stich :)
Avatar billede stich Nybegynder
08. april 2006 - 04:23 #103
Hold da op som vi spammer i den her tråd, der kommer et nyt indlæg hver gang man sidder og skriver et! :-D

@mclemens: Jeg smed faktisk et svar tidligere, men nu hvor jeg har fået læst tråden lidt bedre, ser jeg steen_hansen (og du!?) allerede havde fået løst problemet på en tilfredsstillende måde for websam, så dem bør jeg egentlig ikke få nogen af. Jeg har dog heller intet at bruge dem til, og roder alligevel ikke rundt herinde længere; blev træt af en vis person, og kom kun lige forbi pga. der var en der skrev i en gaaammel tråd. :-)
Men godnat, og selv tak, det var faktisk fornøjeligt, dit gode humør smitter af!
Avatar billede websam Nybegynder
08. april 2006 - 08:14 #104
Ja jeg måtte altså hoppe i kassen, men det ser ud til at virke med den clearer du fik lavet "mclemens" og det er tjekket i FireFox, IE 6.0, Opera og netscape, så skulle jeg vist være dækket ind med de fleste browsere.

Om det så virker på mac maskiner ved jeg ikke da jeg ikke har en sådan stående, men mon ikke ;o)

stich >> Det er da kedeligt at du ikke gidder komme her mere "bare" pga. en person, det burde da ikke kunne gøre udfaldet ???

Og så skal vi vist også have delt nogle point ud ;o)

/Websam
Avatar billede websam Nybegynder
08. april 2006 - 08:36 #105
Når nu alt dette virker, så mangler jeg bare en idé til hvordan jeg jeg får min index til at bevæge sig ned i takt med at main bliver større, er dette muligt ?

/Websam
Avatar billede stich Nybegynder
08. april 2006 - 08:46 #106
Hov, det passer jo slet ikke det jeg skrev i nat, man kan godt opnå det ønskede resultat ved at floate containeren, netop hvis man angiver position:absolute; på den (samme ide som I havde I går), og så left:50%; margin-left:-<halvdelen af elementets bredde>. Godmorgen. :-s

@websam: Naa, men det skal være sjovt at hjælpe, og der er rigeligt med steder man kan gøre det. :-) So nevermind.

Mht. index og main, så nej, ikke med den struktur, det kræver javascript. Men http://www.alistapart.com/articles/fauxcolumns/ kan måske bruges?
Avatar billede steen_hansen Forsker
08. april 2006 - 09:46 #107
Hold da k..., I er gået til den i nat :D

Hvad blev enden på det? Smider du det endelige resultat, websam?
Avatar billede websam Nybegynder
08. april 2006 - 10:13 #108
stich >> Det var så oxo det jeg havde fundet ud af i mellemtiden et bg billede klare skærene for mig i denne omgang så alt er helt i hvinkel ;o)

steen_hansen >> Det er faktisk den løsning som mclemens lavede her 08/04-2006 04:17:23 det er selvfølgelig kun skitsen, men jeg skal nok lige smide et link til det færdige layout når jeg kommer så langt ;o)

/Websam
Avatar billede stich Nybegynder
08. april 2006 - 10:21 #109
@websam: Fino.
Det er dog faktisk klart pænere at fjerne den clearer-div, og så ændre i CSS'en, som jeg forsøgte at fortælle i indlægget kl. 8:46. Fx:

#container {
  float:left;
  position:absolute;
  left:50%;
  margin:20px auto 20px -380px;
  width:760px;
  border:1px solid #999;
}
Avatar billede websam Nybegynder
08. april 2006 - 10:43 #110
Jamen det virker jo oxo, kanon ;o)

Hvor mange browsere mener du jeg skal tjekke det i ?

/Websam
Avatar billede stich Nybegynder
08. april 2006 - 10:53 #111
Ikke nogen! :-) Det bør virke i alle moderne browsere, og jeg har faktisk tjekket i nogle gamle IE versioner; den var gangbar ned til og med 5.01 (ved ikke med 4.x, for den crasher konsekvent på min comp). Så det bør være ok!? ;-)
Avatar billede websam Nybegynder
08. april 2006 - 10:57 #112
cool jeg har som sagt tjekket i FireFox, IE 6.0, Opera og netscape og hvis det så også virker i 5.01 og 5.5 så er jeg vist godt dækket ind ;o)

Mange tak for hjælpen.

/Websam
Avatar billede websam Nybegynder
08. april 2006 - 11:01 #113
Og som lovet kan i se et midlertidig resultat af det hele her :

http://www.icedance.dk/a-master/default.aspx

/websam
Avatar billede websam Nybegynder
08. april 2006 - 11:03 #114
Men jeg kan lige se at den bund margin på 20px ikke helt virker efter hensigten hvad kan dette skyldes ?

/Websam
Avatar billede stich Nybegynder
08. april 2006 - 11:21 #115
Den kommer fra:
#container { ... margin:20px auto 20px -380px; ... }
I den kode mclemens skrev, stod der margin:20px auto;, det er en shorthand for margin:20px auto 20px auto;, der igen er en shorthand for margin-top:20px, margin-right:auto; margin-bottom:20px; margin-left:auto; -- i den rækkefølge. Og det var bare den kode jeg tilpassede. Men du kan bare ændre den til fx margin:20px auto 0 -380px;.

Og velbekomme. Ser umiddelbart pænt ud, god fornøjelse med den fortsatte udvikling.
Avatar billede mclemens Nybegynder
08. april 2006 - 12:43 #116
her er lige et javascript så de har samme højde hvis det er:
<script type="text/javascript" src="heightequal.js"></script> (ind i head)

og heightequal.js:
<!--
window.onload=function(){
ah=document.getElementById("main");
bh=document.getElementById("index");
if(ah.offsetHeight>bh.offsetHeight)bh.style.height=ah.offsetHeight;
else ah.style.height=bh.offsetHeight;
}
//-->

... hvis index main altid er den største kan heightequal.js forkortes til dette:
<!--
window.onload=function(){
document.getElementById("index").style.height=document.getElementById("main").offsetHeight;
}
//-->
Avatar billede mclemens Nybegynder
08. april 2006 - 12:46 #117
og så et lille bug i FF test :/
<!--
window.onload=function(){
ah=document.getElementById("main");
bh=document.getElementById("index");
if(ah.offsetHeight>bh.offsetHeight)bh.style.height=ah.offsetHeight+"px";
else ah.style.height=bh.offsetHeight+"px";
}
//-->

eller

<!--
window.onload=function(){
document.getElementById("index").style.height=document.getElementById("main").offsetHeight+"px";
}
//-->
Avatar billede mclemens Nybegynder
08. april 2006 - 12:46 #118
("px" tilføjet)
Avatar billede mclemens Nybegynder
08. april 2006 - 12:52 #119
i 08/04-2006 12:43:10 skulle teksten
... hvis index main altid er den største
have været ... hvis main altid er den største


@stich: Trist at en trals bruger (eler måske flere)
gør at du ikke er herinde mere :/
... du er jo til stor hjælp :)

M.h.t. placeringen af den absolutte container jeg
nåede frem til igår så tænkte jeg ikke over at
angive en negativ margin ... smart nok :)
Avatar billede websam Nybegynder
08. april 2006 - 15:28 #120
stich >> jeg er med på hvor den kommer fra, problemet er at bund margin ikke er tilstede når jeg ser siden i IE ?

mclemens >> generelt er jeg i mod javascript da denne jo kan være slået fra i browseren og da designet så er afhænnigt af et givent javascript så duer det ikke.

/Websam
Avatar billede mclemens Nybegynder
08. april 2006 - 15:46 #121
[mclemens >> generelt er jeg i mod javascript da denne jo kan være slået fra i browseren og da designet så er afhænnigt af et givent javascript så duer det ikke.]
- Jeg er af den samme mening ;) http://www.eksperten.dk/spm/701400#rid6196485
Avatar billede stich Nybegynder
08. april 2006 - 16:54 #122
@websam: Aha, sorry. Umiddelbart tror jeg den pæneste løsning er at gå tilbage til at anvende et clearer-element igen, i stedet for at indsætte endnu et wrapper-element (problemet ligger formentlig i at #container er positioneret absolut), men om det virker uden videre er jeg ikke 100% sikker på. Forresten ser jeg heller ikke nogen forskel på renderingen i hhv. IE 6 og FF 1.5!? Det ligner dog en kommerciel side (penge i at lave den), så hvis jeg skal kigge mere på den del af det, må du nok selv lave en testcase der er til at arbejde videre med...

@mclemens: Tak! Men der er nu også rigeligt med andre sjove ting at give sig til, og jeg tror I er mange flere herinde der er betydeligt mere interesserede i at hjælpe end jeg er, så jeg tvivler ikke på I nok skal få spørgsmålene besvaret. And 'nuff about that now. ;-)
Avatar billede websam Nybegynder
08. april 2006 - 19:32 #123
@stich
1. Clearer-elementet virker så det benytter jeg.

2. Det er til min fætter og hans is danse partner, så ingen penge denne gang, men en familie tjeneste ;o)

Men er der mulighed for at træffe dig på et senere tidspunkt hvis der skulle være noget jeg skulle bruge hjælp til kommerciel ? Er du selvstændig ? Email, hjemmeside ?

Så lukker vi og dem der skal have point må smide et svar.

/Websam
Avatar billede mclemens Nybegynder
08. april 2006 - 20:03 #124
stich har lagt et svar: http://www.eksperten.dk/spm/701400#rid6196435
og da det var ham der kom med løsningen clear:both; så kast dem efter ham ;)
Jeg er bare glad for at jeg kender clear attributen nu
- så bliver tråde med samme problem en del kortere :)
Avatar billede mclemens Nybegynder
08. april 2006 - 20:04 #125
Ved ikke om Steen vil have noget?
Avatar billede stich Nybegynder
09. april 2006 - 02:33 #126
@websam:
1) Fint!
2) Ah okay. :-)

Ja da. Jeg er blot studerende, så lidt freelance ville passe mig glimrende! http://allanrasmussen.com/ - der kan du også finde min email m.m., skriv bare hvis det har interesse, så kan vi snakke om det.

God fornøjelse med projektet.
Avatar billede steen_hansen Forsker
09. april 2006 - 18:54 #127
Nej tak, mit bidrag rakte ikke til noget, kan jeg se - men det er da rart, at I fik løst det :)
Avatar billede websam Nybegynder
13. april 2006 - 10:42 #128
Jeg har lige testet det i IE 5.01 sp2 og IE 5.5 sp2 og der virker det ikke.

1. Layoutet centreres ikke på siden
2. Højre kolonne som skal indeholde selve sidens indhold kommer først i forlængelse af venstre kolonne

Så helt godt er det ikke :o(

/Websam
Avatar billede stich Nybegynder
13. april 2006 - 10:50 #129
1) Prøv at servere #container { text-align:center; } til dem.

Hvorfor har du forresten wrappet det hele i et form element?
Avatar billede stich Nybegynder
13. april 2006 - 10:59 #130
Og 2) Må skyldes der er for lidt plads i containeren til at have dem side ved side, prøv dig frem og se hvor meget der skal til; måske det skyldes en bug der fordobler margin eller padding på et element.
Avatar billede roenving Novice
13. april 2006 - 19:26 #131
-- det sidste er en velkendt bug i IE !-)
Avatar billede stich Nybegynder
13. april 2006 - 19:44 #132
Hvilken, dobbel margin? -for der var, og er, ikke nogen margin på nogen af de floatede elementer, så er ikke klar over hvad fejlen præcist bundede i. Men det er fikset nu, ser jeg dog.
Avatar billede mclemens Nybegynder
13. april 2006 - 19:47 #133
Hvis man bruger procent defineringer - så er der også problemer med
evt. afrundinger af pixels... hvis man f.eks. definerer 2 kolonner
af 50% og bredden på ydreboks er 433 pixels får man 2 bokse á 217 px
og de vil derfor stå under hinanden...
Avatar billede mclemens Nybegynder
13. april 2006 - 19:49 #134
[ Hvis man ... stå under hinanden... ]
- det er dog ikke tilfældet i dette eksempel...
Avatar billede websam Nybegynder
13. april 2006 - 20:45 #135
Det er lykkedes mig at få det til at virke med at lave et hack der ser således ud :

\width: 762px;
w\idth: 760px;

Dette laves så i en extra #container og vupti det hele står ved siden af hinanden i IE 5.01 og IE 5.5.

Men den vil stadigt ikke centreres midt på siden uanset hvad jeg gør, nogle ideer ?

/Websam
Avatar billede websam Nybegynder
13. april 2006 - 21:28 #136
Og så fik jeg oxo centreret i IE 5.XX det gøres ved at lave en text-align:center; i min body og en text-align:left; i min container.

Så det hele spiller max ;o)

/Websam
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