Avatar billede zyxep Nybegynder
14. september 2006 - 09:26 Der er 30 kommentarer og
1 løsning

Postion i FF & IE

Hey gutter..

jeg har et stort dilemma.

jeg har et design som ikke vil det samme i FF og IE. den virker 100% rigtigt i FF.

her er min kilde til HELE skidtet :)

<INDEX>


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ByensGuf.dk &raquo; Den Bediste Side Med Party Billeder Fra Hele Landet &laquo;</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
        <link rel="stylesheet"
              href="IEstyle.css"
              media="all" />
<![endif]-->
<meta name="Author" content="Editone studio 06/07" />
</head>
<body>
<div>
<div id="headerwrap">
    <div id="header"></div>
    <div id="menu">
        <div id="button1"><a href="index.php" class="menu">Sj&aelig;lland</a></div>
        <div id="button2"><a href="fynoerene.php" class="menu">Fyn/&Oslash;rene</a></div>
        <div id="button3"><a href="jylland.php" class="menu">Jylland</a></div>
    </div>
</div>
<div id="content">
    <div id="frame">Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br /></div>

</div>
<div id="footerwrap">Copyright (C) ByensGuf.dk 2006. All Right Reserved. Design By: Cosmo-Design</div>
</div>
</body>
</html>


</INDEX>


<CSS>
/* CSS Document */
body{
  margin:0 0 0 0;
  border:0;
  padding:0;
  height:100%;
  max-height:100%;
  background-color: #AC7C27;
  font-family:arial, verdana, sans-serif;
  font-size:76%;
}
#headerwrap{
  position:fixed;
  width:990px;
  top:0;
  left:50%;
  height:206px;
  margin-left:-495px;
  background-color: #000000;
  border:1px solid #000000;
}
div#header{
  height:142px;
  overflow:auto;
  background:url("images/logo.gif");
}
div#menu{
  width:990px;
  top:142px;
  height:44px;
  overflow:auto;
  background:url("images/menu_bg.gif");
}
div#menu div#button1{
  position:relative;
  float:left;
  margin-left:293px;
  width:131px;
  height:44px;
  text-align:center;
  background:url("images/menu_1.gif");
}
div#menu div#button2{
  float:left;
  width:132px;
  height:44px;
  text-align:center;
  background:url("images/menu_2.gif");
}
div#menu div#button3{
  float:left;
  width:118px;
  height:44px;
  text-align:center;
  background:url("images/menu_3.gif");
}
#content{
  position:absolute;
  top:206px;
  bottom:20px;
  left:50%;
  padding:15px;
  margin-left:-495px;
  width:960px;
  background:#fbc970;
  border-left:1px solid #000000;
  border-right:1px solid #000000;
  overflow:hidden;
}
div#frame{
  height:100%;
  background:#cc8a15;
  border:1px solid #000000;
  overflow:auto;
}
#footerwrap{
  position:fixed;
  width:992px;
  bottom:0;
  left:50%;
  height:20px;
  margin-left:-495px;
  text-align:center;
  color:#FFFFFF;
  background:#000000;
}
</CSS>

<IE CSS>

html {
    overflow:hidden;
    }
body {
    height:100%;
    overflow:auto;
    }
#footerwrap {
    bottom:-1px;
    }

</IE CSS>


nogen som kan et hack så det både virker i IE og i FF :)
Avatar billede zyxep Nybegynder
14. september 2006 - 09:26 #1
i kan se det på http://zyxep.net/exp
Avatar billede stenger Nybegynder
14. september 2006 - 17:02 #2
Du kunne jo benytter Conditional Comments i din CSS.

http://www.quirksmode.org/css/condcom.html

Ret i de elementer, som driller i IE
Avatar billede stenger Nybegynder
14. september 2006 - 17:02 #3
Og jeg kan bare ikke stave lige for tiden... :)
Avatar billede mclemens Nybegynder
14. september 2006 - 17:35 #4
Problemet er at IE ikke kan beregne højden af elementet med denne her:

#content{
  position:absolute;
  top:206px;
  bottom:20px;

... Ligesom Firefox kan - ved ikke om det bliver forbedret i IE 7 ...
Jeg tror derfor ikke, at man kan løse problemet via et css hack alene (jeg kan ikke).

... Og den med position:fixed; har IE <7 det ikke for godt med ...

- Jeg ved dog (næsten helt sikker) at problemet kan løses via. en height
100% løsning ... (hvis det er kigger jeg på det senere - måske først i løbet
af imorgen ... vil ikke gå igang med at lave en anden struktur opbygning med
andre css defineringer medmindre at en sådan løsning på problemet kan bruges ? )

...

...

Stenger >> Lige et lille p.s.
her er en snip fra hans kode:

[ <!--[if IE]>
        <link rel="stylesheet"
              href="IEstyle.css"
              media="all" />
<![endif]--> ]

... Han har en specifik IE kode, men
det med height skal tweakes en del ...
(så meget at jeg tror en markup struktur
ændring er nødvendig - hvis det skal virke
under IE 7 ... ved ikke om det p.t. virker i IE 7)
Avatar billede zyxep Nybegynder
14. september 2006 - 20:11 #5
mclemens >>

hvis du kan lave det så det både virker i IE og FF så gør det.

er ligeglad hvordan  css koden ser ud :P bare det virker! heh
Avatar billede stenger Nybegynder
14. september 2006 - 20:17 #6
Ups...så ikke lige at der allerede var IE comments... my bad!
Avatar billede mclemens Nybegynder
14. september 2006 - 21:06 #7
Nitte, jeg var også kun næsten sikker :/



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

<title>ByensGuf.dk &raquo; Den Bediste Side Med Party Billeder Fra Hele Landet &laquo;</title>

<style type="text/css">
html,body{
  margin:0px;
  padding:0px;
  height:100%;
  overflow:hidden;
}


body{
  background: #AC7C27;
  font: 76% arial, verdana, sans-serif;
}


#wrap{
  width:990px;
  height:100%;
  margin:0px auto;
  position:relative;
  border:1px solid #000;
}


#headerwrap{
  position:absolute;
  top:0px;left:0px;
  width:100%;
  height:206px;
  background: #000;
}


div#header{
  height:142px;
  overflow:hidden;
  background:url("images/logo.gif");
}


div#menu{
  position:relative;
  height:44px;
  overflow:auto;
  background:url("images/menu_bg.gif");
  padding-left:292px;
}


div#menu div#button1{
  float:left;
  width:131px;
  height:44px;
  text-align:center;
  background:url("images/menu_1.gif");
}


div#menu div#button2{
  float:left;
  width:132px;
  height:44px;
  text-align:center;
  background:url("images/menu_2.gif");
}


div#menu div#button3{
  float:left;
  width:118px;
  height:44px;
  text-align:center;
  background:url("images/menu_3.gif");
}



#content{
  position:absolute;
  top:206px;
  bottom:20px;
  left:0px;
  padding:15px 14px;
  width:960px;
  background:#fbc970;
  border:1px solid #000;
  border-width:0px 1px;
  overflow:hidden;
}
div#frame{
  height:100%;
  background:#cc8a15;
  border:1px solid #000000;
  overflow:auto;
}
#footerwrap{
  position:absolute;
  width:100%;
  bottom:0px;
  left:0px;
  height:20px;
  text-align:center;
  color:#FFFFFF;
  background:#000000;
}
</style></head><body><div id="wrap">

<div id="headerwrap">
    <div id="header"></div>
    <div id="menu">

        <div id="button1"><a href="index.php" class="menu">Sj&aelig;lland</a></div>
        <div id="button2"><a href="fynoerene.php" class="menu">Fyn/&Oslash;rene</a></div>
        <div id="button3"><a href="jylland.php" class="menu">Jylland</a></div>
    </div>
</div>







<div id="content">
    <div id="frame">aaaContent here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br />Content here lots of crap here!!!! please!!!!<br /></div>

</div>

<div id="footerwrap">Copyright (C) ByensGuf.dk 2006. All Right Reserved. Design By: Cosmo-Design</div>
</div>

</div></body></html>
Avatar billede zyxep Nybegynder
14. september 2006 - 21:11 #8
jep :D

godt nok tæt på
Avatar billede mclemens Nybegynder
14. september 2006 - 21:12 #9
... Men jeg kan igen måske placere den indvendige
scrollbar helt ovre i højre side istedet ?
(ligesom den almindelige scrollbar ... )
(( ala http://www.eksperten.dk/spm/726088#rid6383422 ))


Problemet var som jeg tænkte at IE ikke vel
definere top og bund på elementet udfra ...

#content{
  position:absolute;
  top:206px;
  bottom:20px;
Avatar billede mclemens Nybegynder
14. september 2006 - 21:16 #10
Men jeg kan ikke få den til at scrolle
med mousewheel overalt så den scroller på
den scrollbar ... Prøv f.eks. linket i ovenstående
og scroll med mousewheel nede i bund div'en der
følger vinduet ... Hvis vi var et par måneder længe
fremme og alle havde opdateret (75%+) til IE 7 ville
det måske hjælpe på problemet med højde defineringen :/
Avatar billede zyxep Nybegynder
14. september 2006 - 21:17 #11
den skal være som den er i FF :P

så den er lidt drilsk :P
Avatar billede mclemens Nybegynder
14. september 2006 - 21:21 #12
Javascript er nok den sidste ting jeg kan komme
i tanke om, men vi mangler kun boxen så jeg
prøver lige at surfe lidt rundt om lidt ...
Dog har IE jo ikke de css funktioner FF har
så det er nok svært at høvle det til uden js :/
Avatar billede mclemens Nybegynder
14. september 2006 - 22:17 #13
Nitte, jeg kan ikke finde noget workaround
og har også selv testet på det ... så enten
er det at vente på IE 7 eller køre
med almindelige frames ...

Eller et javascript til IE ...

<script type="text/javascript">
if(window.addEventListener)window.addEventListener("load", function(){wload(false);}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload(true);});

function wload(ie){
  if(ie)document.getElementById("frame").style.height=parseInt(document.documentElement.clientHeight)-(206+30+20+2)+"px";
}
</script>
Avatar billede mclemens Nybegynder
14. september 2006 - 22:19 #14
... Javascriptet er jo selvfølgelig nok kun nødvendigt til IE 7 kommer derefter
kan man fjerne det eller lade det være afhængig af om man skal tage hensyn til IE 6 ...
- Men, ulempen er jo at siden ikke virker uden javascript ... men der er selvfølgelig
heller ikke mange der surfer uden javascript idag - men man får jp lige et lille blink
indtil scrolleren popper på plads ...
Avatar billede mclemens Nybegynder
14. september 2006 - 22:27 #15
((( Scriptet bør dog nok have været:

<script type="text/javascript">
if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(ie){
document.getElementById("frame").style.height=parseInt(document.documentElement.clientHeight)-(206+30+20+2)+"px";
}
</script>

... såfremt man ikke har andet behov for window onload handler på siden
(i det tilfælde er der intet behov for at FF skal lave kaldet til window onload funktionen) )))
Avatar billede zyxep Nybegynder
15. september 2006 - 08:24 #16
hmmm.. oka jeg prøver lige..

men det der javascript det vil kun virke i IE ik?
Avatar billede mclemens Nybegynder
15. september 2006 - 09:09 #17
Ja :)
Avatar billede mclemens Nybegynder
15. september 2006 - 09:16 #18
( hvis du vil have det til at virke i begge skal du bruge 14/09-2006 22:17:18
... men da det kun er et problem i IE er 14/09-2006 22:27:43 nok )
Avatar billede mclemens Nybegynder
15. september 2006 - 13:58 #19
^ - Sikke noget vrøvl jeg skriver, javascriptet til højde beregningen virker kun i IE
da det er IE der bruger document.documentElement.clientHeight hvorimod FF vist bruger
window.innerHeight ...
Avatar billede mclemens Nybegynder
15. september 2006 - 14:13 #20
Jep, det bør ikke være nødvendigt, men hvis javascriptet
ønskes til både og ikke IE kan den laves sådan her:

<script type="text/javascript">
if(window.attachEvent)window.attachEvent("onload", function(){wload(true);});
else if(window.addEventListener)window.addEventListener("load", function(){wload(false);}, false);

function wload(ie){
  if(ie)document.getElementById("frame").style.height=parseInt(document.documentElement.clientHeight)-(206+30+20+2)+"px";
  else document.getElementById("frame").style.height=parseInt(window.innerHeight)-(206+30+20+2)+"px";
}
</script>


... men, den til IE i 14/09-2006 22:17:18 bør som sagt være nok ... da det
kun er IE der har problemer ... Kaster lige et svar hvis du kunne bruge det ...
Avatar billede zyxep Nybegynder
16. september 2006 - 10:52 #21
takker mange gange :D det virker fint..

får lige testet det i IE 7 osv :D
Avatar billede mclemens Nybegynder
16. september 2006 - 11:22 #22
Velbekom, og tak for point :o)
Avatar billede zyxep Nybegynder
16. september 2006 - 16:47 #23
mclemens >>

kan du lige hurtig fortælle mig hvordan jeg får menu punkterne i midten vertical.. ? nu er den jo align center men hvordan laver jeg valign middle.. den vil ik med "vertical-align: middle;"
Avatar billede mclemens Nybegynder
16. september 2006 - 17:06 #24
line-height?

div#menu div#button1{
  float:left;
  width:131px;
  height:44px;
  text-align:center;line-height:44px;
  background:url("images/menu_1.gif");
}


div#menu div#button2{
  float:left;
  width:132px;
  height:44px;
  text-align:center;line-height:44px;
  background:url("images/menu_2.gif");
}


div#menu div#button3{
  float:left;
  width:118px;
  height:44px;
  text-align:center;line-height:44px;
  background:url("images/menu_3.gif");
}
Avatar billede mclemens Nybegynder
16. september 2006 - 17:11 #25
evt. kan du lave et hover billede til dem og lege med denne:

a#button1,a#button2,a#button3{
  float:left;
  height:44px;
  text-align:center;line-height:44px;
}

a#button1{
  width:131px;
  background:url("images/menu_1.gif");
}

a#button1:hover{
  background:url("images/menu_1hover.gif");
}


a#button2{
  width:132px;
  background:url("images/menu_2.gif");
}

a#button2:hover{
  background:url("images/menu_2hover.gif");
}


a#button3{
  width:118px;
  background:url("images/menu_3.gif");
}

a#button3:hover{
  background:url("images/menu_3hover.gif");
}


samt html rettelsen:

<div id="headerwrap">
    <div id="header"></div>
    <div id="menu">

        <a href="index.php" class="menu" id="button1">Sj&aelig;lland</a>
        <a href="fynoerene.php" class="menu" id="button2">Fyn/&Oslash;rene</a>
        <a href="jylland.php" class="menu" id="button3">Jylland</a>
    </div>
</div>


... på den måde er der link i hele boksen ...
Avatar billede mclemens Nybegynder
16. september 2006 - 17:24 #26
((( vertical-align: middle virker forresten vist kun
inde i elementer der fungerer som table cells eksempel:

div#menu div#button1{
  width:131px;
  height:44px;display:table-cell;
  text-align:center;vertical-align:middle;
  background:url("images/menu_1.gif");
}


div#menu div#button2{
  width:132px;
  height:44px;display:table-cell;
  text-align:center;vertical-align:middle;
  background:url("images/menu_2.gif");
}


div#menu div#button3{
  width:118px;
  height:44px;display:table-cell;
  text-align:center;vertical-align:middle;
  background:url("images/menu_3.gif");
}

- virker i Firefox, men IE halter som sagt i css ... brug
derfor 16/09-2006 17:06:12 eller 16/09-2006 17:11:55 istedet )))
Avatar billede zyxep Nybegynder
18. september 2006 - 16:16 #27
mclemens >>

jeg har fået testet den i IE 7 der virker den os godt :)

men så når jeg kommer over i safari @ Mac så fucker den op :/
Avatar billede mclemens Nybegynder
18. september 2006 - 21:53 #28
Hvilket backup javascript til IE < 7 bruger du?

<script type="text/javascript">
if(window.attachEvent)window.attachEvent("onload", function(){wload(true);});

function wload(ie){  if(ie)document.getElementById("frame").style.height=parseInt(document.documentElement.clientHeight)-(206+30+20+2)+"px";
}
</script>

- Ovenstående burde umiddelbart kun ramme IE ...
Eller er det en fejl m.h.t. placeringen af teksten ?
Screenshot kan måske hjælpe, men ikke med sikkerhed da jeg kun
kan teste i browsere der er tilgængelig til pc (jeg har ingen mac).
Avatar billede mclemens Nybegynder
18. september 2006 - 22:51 #29
Hvilket backup javascript <- Med backup mente jeg scriptet
der hjalp på den div's højde i IE6 (f.eks. scriptet i ovenstående)
Avatar billede zyxep Nybegynder
19. september 2006 - 08:27 #30
<script type="text/javascript">
if(window.addEventListener)window.addEventListener("load", function(){wload(false);}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload(true);});

function wload(ie){
  if(ie)document.getElementById("frame").style.height=parseInt(document.documentElement.clientHeight)-(206+30+20+2)+"px";
}
</script>

bruger jeg :D
Avatar billede mclemens Nybegynder
19. september 2006 - 08:55 #31
Ok, det er ikke den der giver Safari problemer så :)
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