Min div boks stikker ud over sitets kanter i mozilla

hmm ... hvorfor bygger i ikke jeres site med almindelige tables i stedet for med div's ? I skaber jo hulens masse ekstra arbejde for jer, når i vælger den mest besværlige måde ...

Tables holder bare ikke... Det er sådan lidt for uddateret :-)

Og nu har vi jo arbejdet med div-classes på dette her site fra starten, så det er for sent at lave det om...

hvorfor "holder det ikke" ? siger hvem ?

tables er stadig det bedste og nemmeste at bruge når man skal lave denne type designs

Ja ja ok, det synes du, men kan du ikke bare hjælpe os med at komme videre? Og hvorfor bruger du ikke selv tabels på din egen hjemmeside?

tja ...det er ikke kun mig der synes dette. tables er nemmest at bruge for at lave "avanceret" sideopdeling. Det bliver en del mere kode, ved at bruge tables, men det er mange gange hurtigere at bruge tables end at bruge divs til grovindeling af sine sider.

hvorfor jeg ikke bruger tables ? læs hvad der står under "site":

"This site is an xperimental site, build using the newest web technologies"

JEg bruger divs som et eksperiment, for at lære mig hvordan man kan bruge divs i stedet for tables. Jeg anbefaler fremdeles tables i 90% af alle tilfælder

at lave dit site om, til at bruge tables istedet for divs, ville nok ikke tage mere end højst 2 timer ... og med tanke på at i nok har brugt adskillig flere timer ved at bruge divs, så bør det være noget at overveje ...

/nute

ok - vi har så ikke lavet det så fedt, fordi vi ikke har brugt tables, men vi vil også gerne være helt fremme, der hvor ingen har været før og bare SLET OVERHOVEDET IKKE bruge tables - sådan lidt ligesom en gimmick for sitet - eller noget...

Kan du hjælpe os med problemet, altså det med at leftmenu stikker ud over sitet?

<ole>

Jamen, I er slet ikke "... helt fremme, der hvor ingen har været før og bare SLET OVERHOVEDET IKKE bruge tables".

Desværre er der en hel del 'kodere', der ikke ved ret meget om web-teknologier og derfor lytter til alle de udokumenterede ammestuehistorier, som florerer på nettet ... herunder al det vrøvl, der ofte siges om tabeller og HTML/XHTML af folk med manglende viden på feltet.
Retter man sig efter den slags, skiller man sig ikke ud som 'cutting edge' ... blot som uvidende  :)

Derudover har I en del uhensigtsmæssigheder i jeres CSS:
1. Her vil 'Franklin Gothic Medium' aldrig blive valgt:
  font-family: Arial, Helvetica, sans-serif, "Franklin Gothic Medium";
da PC'ens generiske sans-serif er foranstillet og derfor altid vil blive valgt som sidste udvej.
2. Brug altid lowercase angivelser i font-angivelser. Visse browsere finder ikke uppercase-angivede fonts i remote stylesheets.
3. Brug altid absolutte stier til baggrundsbilleder i remote stylesheets - ellers kan visse browsere ikke finde dem.

Hvis I insisterer på at bruge divs/CSS, skal siden skrives en hel del om ... det er mere kompliceret end som så. Når I alligevel skal skrive den om, kan I jo ligeså godt gøre som en professionel koder ville gøre: Bruge tabeller til det, tabeller er bedst til - og så bruge divs til det, de er bedst til  :)

/mvh
</bole>

Vi har erkendt, at vi nok skulle have brugt tabeller, men for tredje gang. Kan i hjælpe os med vores problem uden at vi skal lave sitet om til tabeller?

Ikke uden at skrive siden om ... og så kan I ligeså godt selv skrive den om  :)

"men vi vil også gerne være helt fremme" - hmm ... det er jo også fornuftig at forholde sig til den verden man lever i ;o]

anyway ... dét der skaber problemer for jer, er jeres brug af 'float'.

når man 'float'-er et element via CSS, så tager det ikke længer op noget "plads", så derfor vil det omkrandsende element ikke vide hvor meget det fylder. ved at smide

<div class="spacer">
  &nbsp;
</div>

som det allere første div og det allere sidste div, og ved at lægge

div.spacer {
  clear: both;
  }

i jeres stylesheet, så vil i komme udenom problemet

/nute

og hvis i er bange for at få jeres hænder beskidte, så har jeg ladt mine hænder rode lidt rundt i jorden for jer. Dette eksempel er bakset sammen på 10 minutter ... et bevis på at det nok ikke er så svært at skrive jeres site om alligevel ?!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Landsforeningen For Pårørende Til Stofmisbrugere - Kontakt os</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../../css/style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="ramme">
    <table>
        <tr>
            <td colspan="3">
                <div id="top">
                    <img src="../../img/LPStopny.gif" name="topbar" width="777" height="125" border="0" usemap="#topbarMap" id="topbar">
                    <map name="topbarMap">
                          <area shape="circle" coords="60,61,57" href="../../index1.html">

                    </map>
                  </div>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <div id="navi">
                    <a href="../../index1.html" id="first">Forside</a><a href="../../hvemerlps/index.html">Hvem er LPS?</a>
                    <a href="../index.html">Kontakt os</a><a href="../../nyheder/index.html">Nyheder</a>
                    <a href="../../aktiviteter/index.html">Aktiviteter</a>
                    <a href="../../forum/index.html">Forum</a>
                    <a href="../../links/index.html" id="last">Links</a>
                  </div>
            </td>
        </tr>
        <tr>
            <td id="leftmenu">
                <div>
                    <p><strong>Sjælland</strong>
                    <a href="../kbhomegn/index.html">København</a>
                    <a href="../nykoebingf/index.html">Nykøbing F.</a></p>
                    <p><strong>Fyn</strong>
                    <a href="../odenseomegn/index.html">Odense</a>
                    <a href="../svendborg/index.html">Svendborg</a>
                    <a href="../nordfyn/index.html">Nordfyn</a>
                    <a href="../vestfyn/index.html">Vestfyn</a></p>
                    <p><strong>Jylland</strong>
                    <a href="#">&Aring;rhus</a>
                    <a href="../kolding/index.html">Kolding</a>
                    <a href="../horsens/index.html">Horsens</a></p>
                </div>
            </td>
            <td id="midtindhold">
                <div>
                    <h1>&Aring;rhus</h1>

                    <p>Kontaktpersoner: </p>
                    <ul>
                      <li>Jonna Jensen Tlf: 86 37 38 79</li>
                    </ul>
                </div>
            </td>
            <td id="rightmenu">
                <div><img src="../../img/orig/megafon.jpg"></div>
            </td>
        </tr>
    </table>
</div>
</body>

</html>

/nute

Div's kan godt bruges til flotte og komplekse sider - jeg synz personligt at I har gjort det godt - kig evt. på www.csszengarden.com. Men jeg tror ikke problemet for Mozilla ligger i #leftmenu, da jeg ikke ser problemer der. Det er muligt at det er i #ramme, der er noget den ikke kender..
Men prøv at teste jeres CSS her:
http://www.w3schools.com/site/site_validate.asp
/basementjack

www.csszengarden.com er et fortrinligt eksempel på, hvordan det ikke er hensigten, at CSS skal benyttes  :)
Hvis man læser W3C's arbejdspapirer (dem, der senere bliver til rekommendationer), vil man kunne se, det gang på gang præciseres, at hele meningen med CSS er 'nedarvning gennem klasser' - hvilket i øvrigt også ligger i navnet 'Cascading StyleSheets'. Det understreges mange steder, at man bør layout'e gennem nedarvning og ikke via styles sat på enkelt-elementer.

Det har aldrig været meningen med CSS, at man skulle positionere layoutet med id-selectors på stort set alle elementer ... det er en total misforståelse af CSS  :)
/mvh

... og der er i øvrigt ikke noget galt med CSS'en til 'ramme'  :)

Ja ja.. Men det virker.. ;) De skrev jo at de ville bruge de nyeste teknologier.. Og du ved jo at misbrug er oz en slags brug.. :p
Og deres problem var kun med Mozilla, så tænkte jeg bare at så skal de ikke med i krigen mellem div og tables.. :)

Hehe.. Jeg har ikke kigget på ramme.. Jeg mistænkede den bare. ;)

http://www.eksperten.dk/spm/490839 er det jeres spørgsmål, for i så fald fik i svaret dér.

Uden at startet endnu en krig om hvad der er bedst (for dem har der været rigtig mange af) så er det absolut muligt at lave enddog meget avancerede designs vha. div og css, men det kræver at man sætter sig ind i hvilke unoder de forskellige browsere laver. Når man har gjort det, og det kan vel gøres på en dag eller to, så vil jeg vove at påstå at det ikke tager længere tid at lave et design som jeres (der i øvrigt efter min mening ikke er synderligt avanceret) med divs fremfor med tabeller.

At det skulle være nødvendigt at skrive det hele om kan jeg ikke se, der findes lettere måder at gøre det på ja, men det kan nu godt reddes uden de store krumspring (som nute også er inde på) og som undertegnede beskrev i ovenstående spørgsmål.

Man _behøver_ ikke skrive om, men hvis det skal være til at arbejde med ved opdateringer vedligeholdelse, bør det helt klart skrives om.
Hovedtanken med 'de nye teknologier' XML, CSS og ECMA-baseret script er at få bedre overblik ved at adskille data, visning og funktion og skabe logisk sammenhæng mellem de tre bestandele af siden.
CSS's store fordel er netop den høje grad af logik, man kan indbygge - og fjerner man den med små 'custom-hacks', fjerner man den væsentligste grund til at bruge CSS.

Vi har prøvet med nute og swuppes løsningsforslag med <div class=spacer> og det virker - sådan da!
Der opstår et nyt problem, og det er, at #rightmenu og #midtindhold ikke længere er de samme steder. Nu starter de først nedenunder #leftmenu, og det ser heller ikke så godt ud.

Vi er der, hvor vi overvejer at lave skidtet om til tables eller om vi bare finder et eller andet hack, så alt også virker superduper i både Mozilla og IE.

Selve diskussionen omkring CSS og tables er meget interessant, men vi er først lige startet med at bruge begge dele for nylig, så i den forstand er jeg pt. rimelig ligeglad om sitets CSS følger intentionerne mht. arv, bare jeg kan få det til at fungere i browserne. Når jeg så har lært det, så går jeg til næste trin, og det er at bruge CSS på den intenderede facon, men man skal jo lige kravle før man kan gå :-)

simonlei >> du skriver noget, der faktisk bør være argumentet for at skrive om (selv om jeg allerede har gjort det for jer):

"eller om vi bare finder et eller andet hack" - order *hack* er en *klar* indikation på at ting skal laves om. Det er meget bedre at lave en ordentlig løsning, med de hjælpemidler man bør bruge, end at prøve at være "fremme i skoene" uden andre grunde end at være "fremme i skoene" (som olebole så smukt påpeger, er helt misforstået).

i kan prøve at lave jeres 'spacer' class om til:

div.spacer {
  clear: both;
  height:0px;
  overflow:hidden;
  }

og se om det hjælper.

Tid til lukning?