hjælp til layout i Firefox og Safari

Du har:

<div id="container">
<div ...
<div ...
<div ...
...
Tilføj så et:
<div style="clear:both">
</div>

Ellers kender den omkringliggende container ikke sin højde

<div id="container">
<div ...
<div ...
<div ...
...
Tilføj så et:
<div style="clear:both"></div>
</div>

Alternativt, måske smukkere.

Kan du give din <div id="container" class=".clearFix">

og smide det her i css:

.clearfix{    display: inline-table;/* Hides from IE-mac \*/    height: 1%;    display: block;/* End hide from IE-mac */} html>body .clearfix{    height: auto;} .clearfix:after{    content: ".";     display: block;     height: 0;     clear: both;     visibility: hidden;}

Nå css fuckede op :

http://snipplr.com/view/86/clear-floats-without-structural-markup/

og der skal ikke være punktum i class attributten for #container.

jeg er altså ikke helt med!
Hvad holder - og hvad holder ikke længere af dine forslag?
Fortæl mig også gerne, hvor informationerne skal lægges ind - indeni en i forvejen eksisterende div-tag, eller...?
Jeg er slet ikke stiv i hverken teorie elle praksis omkring dette emne. If you please.. ;o)

jeg har skrevet hh
<div id="container" class=".clearFix">

og

.clearfix{   
display: inline-table;/* Hides from IE-mac \*/   
height: 1%;   
display: block;/* End hide from IE-mac */
}
html>body .clearfix{   
height: auto;
}
.clearfix:after{   
content: ".";   
display: block;   
height: 0;   
clear: both;   
visibility: hidden;
}

ind, men det lader ikke til at virke!

Se selv: http://www.yes-yes.dk/daisyhill/

altså i firefox eller safari

class=".clearFix">
skal være:
class="clearFix">

min personlige overbevising er, og den får jeg tit høvl for her på exp.dk, at jeg 1000x hellere vil have 10 linier's css, og spare alle de grimme unødvendige tags.. Men teknisk set er det vil et css hack, som kan komme til at drille ved nye kommende versioner..

/JJ

tak w3 jeg har lagt rettelser ind, forstår i øvrigt ikek hvornår man skal bruge '.' (punktum) og hvornår ikke.
Nu har jeg så også slettet dem fra css'en, men det var måske forkert?

jokke jensen: dit forslag virker ikke! Har du selv afprøvet det på min fil?

okay, nej, så virker et af de højeste rangerede css hacks ikke inde på snippler.

Brug den med

<div style="clear:both"></div>

neders i de divs hvor du har flydende elementer.

/JJ

Når du definere en klasse som attribut på et elemenet, så skal det være uden punktum.

<a href="#" class="klasse" />

i css filen, for at indikere det er en klasse og ikke et tag du referer til, skal du benytte . foran. referere du til et id i css skal du bruge #..

Altså
<div id="Links">
<a href="" class="klasse" />
</div>

Her kan jeg ramme <a/> på følgende måder:
psuedo:

div a{}
a{}
#Links a{}
.minklasse

Håber det giver forståelse.

/J

jo tak.. det skal lige bundfælde sig. det er jo noget med at lære nogle regler og huske hvordan reglerne er ;o) - ikke min stærke side

Mht startspørsmålet<.

Er der nogen der kan hjælpe med hvordan siden http://www.yes-yes.dk/daisyhill/ set i Firefox og Safari bliver fejlfrit, og kommer til at ligne layout'et i IExpl..?

Hvad hvis du retter:

</div><!-- end godkendt -->

til:

<div style="clear:both"></div>
</div><!-- end godkendt -->

?

Det var det, som Jokkejensen også foreslog, men jeg ved ikke, om det blev sat rigtigt..

jeg har lagt den ind nu, og det hjalp i nogen grad, men lavede også et par nye problemer.

Mener I at

<div style="clear:both"></div>
skal lægges ind (altså som jeg læser det) i godkendt tag'en?

Er dety for meget at spørge om en af jer kan få det tril at se godt ud. I svarer jo som at  ved det, men prøv selv! Løsningen er ikke kommet på bordet... altså med mindre jeg helt skulle have overset den.

Noget tekst forsvandt og

Det løste da en del af problemet. Resten af fejlene har jeg ikke lige fået kigget på endnu.

Det er ret svært, når der er så meget kode på siden, især i stylesheetet.

Men jeg ville nok bare lave grundstrukturen således (ved godt, den minder meget om din nuværende):

<div> //BEHOLDER

  <div></div> //LOGO

  <div></div> //MENU

  <div></div> //INDHOLD

  <div style="clear:both"></div> //FIKSER PROBLEMET MED FF OG Safari, HVOR DESIGNET KLASKER SAMMEN

</div>

Hov, sådan her:

<div> //BEHOLDER

  <div></div> //LOGO

  <div></div> //MENU

  <div></div> //INDHOLD

  <div></div> //GUL TEKSTBOKS I BUNDEN

  <div style="clear:both"></div> //FIKSER PROBLEMET MED FF OG Safari, HVOR DESIGNET KLASKER SAMMEN

</div>

<div></div> //GRØN TEKSTBOKS I BUNDEN

Well... den fejl der er opstået, er dog så alvorlig at siden/løsningen? ikke kan bruges - uden at de tilkomne fejl repareres.... Jeg kan sagtens lægge flere points ind. Ville det hjælpe?

Tiens.. 20 ekstra!

Nederst står der i IE en tekst på gul baggrund med oplysninger om diverse udmærkelser. Den er i sidste forsøg, slået til pindebrænde og kan slet ikke læses.
Så summa summarum, no cigar!

Nogen der kan hjælpe?

ups w13, du nåede at svare før mig.. jeg læser lige!

hvad med wraps'ene, vil du ikke bruge dem?

Jeg har haft en underviser, der for kort tid siden, har fortalt om hvor vigtigt det er - netop af hensyn til FF og Safari at floate sine kolonner(andre div's) i wraps, for at holde dem på plads.

Er du enig w13?

.. det ene udelukker selvfølgelig ikke det andet. jeg kan godt se at du opstiller et eksempel, der i praksis sagtens kunne indeholde wraps også. Og det er vel sådan (og ikke bogstaveligt) jeg skulle forstå det?

w13: du må også skrive 'svar'.. skal nok give points til jer begge ;o) - når det kommer til det!

Jeg har aldrig brugt wraps. Med de rette koder, kan det sagtens undgåes.

Måske kan jeg lave dig et eksempel i aften.

:)

whauu.. det kunne være skønt, hvis og hvis!

Lad os se hvem der først får tid, jeg har heller ikke de næste timer..!

Her er mit bud på dit design, som ser ens ud i Internet Explorer, FireFox, Safari, Opera, Netscape, Seamonkey, Flock og Avant Browser. ;)
----------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Beagle Opdræt</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body{
    height:100%;
    margin:25px;
    font-family:arial, helvetica, sans-serif;
    font-size:12px;
    background-color:#000
}
#container{
    width:905px;
    margin:auto;
    padding:25px 10px 10px 10px;
    background-color:#fff
}
#logo{
    width:100%;
    height:140px;
    margin-bottom:10px;
    background-color:#c0c0c0
}
#menu{
    width:100%;
    background-color:#91bb45
}
#menu ul{margin:0;    padding:0;list-style:none}
#menu li{
    float:left;
    padding:2px 10px;
    border-right:1px solid #fff
}
#menu li a{
    text-decoration:none;
    color:#333
}
#content{
    padding-top:15px
}
#bottomyellow{
    padding:15px;
    background-color:#fc3;
    text-align:center;
    font-size:13px;
    font-weight:bold
}
#bottomgreen{
    width:925px;
    margin:auto;
    padding:0 0 10px 0;
    background-color:#91bb45;
    text-align:center;
    font-weight:bold
}
h2{
    font-size:12px;
    font-weight:bold
}
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body>

<div id="container">

    <div id="logo"></div>

    <div id="menu">
        <ul><li><a href="index.html" class="aktiv">Aktuelt</a></li>
        <li><a href="hunde.html">Hunde</a></li>
        <li><a href="historie.html">Historie</a></li>
        <li><a href="feedback.html">Feedback</a></li></ul>
        <div style="clear:both"></div>
    </div>

    <div id="content">
        <h2>Aktuelt</h2>

        <p>Noget om hvad der sker - eller er i støbeskeen for tiden.</p>

        <div style="float:right;width:100px;height:100px;padding:130px 30px 10px 25px"><img style="width:100px;height:100px;border:0" src="/images/hvid-eske.jpg" alt="Har gennemgået DKKs opdrætteruddannelse"></div>

        <img style="float:right;width:200px;height:200px;padding-right:60px;border:0" src="/images/hvid-eske.jpg" alt="Hund">

        <div style="clear:both"></div>
    </div>

    <div id="bottomyellow">Beagle opdræt siden 1971 - Guldopdrætter 2 gange - Sølvopdrætter 9 gange - Bronzeopdrætter 5 gange</div>

    <div style="clear:both"></div>

</div>

<div id="bottomgreen">
    DAISYHILL v. Nina og Finn Vinther - <span style="cursor:pointer" onclick="MM_openBrWindow('http://www.krak.dk/Person/Kort.aspx?Who=vinther&amp;Area=topasvej&amp;PersonId=1148061&amp;amp;BackLink=V2hvPXZpbnRoZXImQXJlYT10b3Bhc3ZlaiZXaG9Pbmx5U2VhcmNoPWZhbHNlJkV4dGVuZFNlYXJjaD1mYWxzZQ==','krak','width=900,height=900')">Topasvej 20 - 2730 Herlev</span> - telefon: 44 94 88 45 - mobil: 29 40 88 45 - email: <a title="Send e-mail" href="mailto:nina@daisyhill.dk">nina@daisyhill.dk</a>
</div>

</body>
</html>

Bemærk at det så også er muligt at køre i en STRICT-doctype, som i mit eksempel.

tusind tak w13.
Jeg har ikke tid desværre til at kigge på det lige nu, men jeg har et spørgsmål til vedr. strict, nemlig om jeg ville kunne åbne krak.dk kortet i footeren i et nyt browserbillede. Det er nemlig en af de ting jeg har hørt at man ikke kan lave, hvis man bruger strict. Jeg kender ikke rigtigt forskellen på de to. Det lyder bare som at transitional er mere tolerent, så hvorfor bruge strict?

Du vil sagtens kunne åbne det i et nyt browserbillede.

Forskellen på transitional og strict er, som du påpeger, at der kan bruges lidt flere koder under transitional.
Det kan jo virke som en god ting, men netop i strict er de tilgængelige koder så heller ikke nogen, som browserne tolker meget forskelligt.

Pointen: hvis man bruger strict har man kun adgang til de koder, som med mindst sandsynlighed vil ødelægge designet i forskellige browsere. :)

Du kan se listen her: http://www.w3.org/TR/REC-html40/index/elements.html

Under punktet "DTD" står der "L" ved dem, som kun dur i transitional.
Det er altså tags'ene applet, basefont, center, dir, font, iframe, isindex, menu, s, strike og u.

Og i kolonnen ved siden af (kaldet "Deprecated") er det kun iframe, som ikke er betegnet som forældet.

Så det korte af det lange: jeg tror ikke, du mister noget synderligt på at bruge strict, udover at browserne muligvis kommer til at opføre sig lidt mere ens. ;)