Problem med automatisk resizer med CSS i IE-browser /2

Velbekom, her er lige et svar ;)

[ Jeg fjernede DOCTYPE declaratioenen: ]
Sæt lige doctype og html ind igen de skal være der...
det burde ikke være nødvendigt at fjerne dem så IE er
i quirks (jeg har dog ikke testet det) ... jeg skrev
blot at årsagen til fejlen ikke var manglende doctype
- derfor bør doctypen stadig være der ... men fejlen
synes jeg ikke kunne bestå i doctype mangel...

- Hvis vi så skal følge ekspertens regler (det skal vi)
skal du bede notes2c om at tilbageføre de 200 point til
dig med henvisning til skæv fordeling ... ellers så skal
du måske afvise mit svar istedet ...  vent lige med at
acceptere til en mod siger at det er ok medmindre du
vælger den med at bede om tilbageførsel af point.

2.1.15# udlove mere end 200 point for et spørgsmål ved at dele det over flere spørgsmål.

2.1.16# stille spørgsmål specifikt til én eller flere bestemte personer, med mindre spørgsmålet er på 0 point eller hvis der er tale om lovlig pointoverførsel.

Har lige anmeldt tråden også så mods
kan sige hvad der er bedst :)
Og tak for ros igen :o)

ok - jeg er ny mht til points og alt det - afventer så en vejleding fra en mod.

Selv tak :-)

Prøver lige at genindsætte DOCTYPE'n

Hov, nu bliver jeg lige lidt lost ...
Jeg troede lige at det var din tråd derovre eller ?
- du skriver som sqm ... det er farhangs spørgsmål ?

farhang hjalp mig fordi jeg er så grøn .. men nu har jeg så oprettet mig selv - jeg beklager meget, hvis jeg skaber forvirring eller gør noget forkert.

Helt ok så :D ... jeg tror at en overførsel fra notes2c
er det mest korrekte, men vi venter lige på mods ;o)
(alternativet er bare at lukke tråden ved at du selv
lægger et svar og accepterer det (afviser mit)- jeg overlever
nok også uden de 200 point. Det var også rart med ros i sig selv.)

(Du gør ikke noget forkert, men problemet er at tildelingen af pointene måske konflikter med reglerne da point allerede er tildelt i henvisningen. Eksempel: http://www.eksperten.dk/spm/706630 ... dog ikke helt identisk - da der her er tale om to forskellige brugere - men mods er har lidt mere styr på hvad de foretrækker / anbefaler)

Nu har jeg lagt DOCTYPE'n ind på www.hjemmetester.dk/faq.html og www.hjemmetester.dk/index.html - på førstnævnte arter billedet sig, men på index.html vises det enten helt fint eller med for bred margen i højre side; dette problem har også været der på andre sider, men forsvandt da jeg fjernede DOCTYPE. Hvorfor skal den være der - sitet fungerer jo fint uden?

.. jeg forstår nu pointreglerne lidt bedre .. fjelen bliver ikke gentaget :o)

Jeg har fundet denne kodestump: "img {display: block}" på http://www.quirksmode.org/css/quirksmode.html som skulle gøre det muligt at have DOCTYPE'n samtidig med at billeder vises korrekt - spørgsmålet er blot - hvor skal kodestumpen sætten ind henne? Det stylesheed, der styrer billederne indeholder:

.image-left {
    width: 40%;
    height: auto;
}


.image-right {
    width: 40%;
    height: auto;
}

.imageStyle {
    width: 100%;
}

.. er det her et sted stumpen skal ind?

... nu har jeg jo fundet en måde, at få mit site til at fungere på, så du skal altså kun fortsætte med mig, hvis det ikke dig til besvær!

Den del skal bare indsættes for sig selv, nu har jeg ikke testet om det hjælper (er lidt online - offline mellem 9:00 - ca. 17:00 men ellers høvler vi løs på den iaften.

ergo css filen:

img {display: block;}

.image-left {
    width: 40%;
    height: auto;
}


.image-right {
    width: 40%;
    height: auto;
}

.imageStyle {
    width: 100%;
}


eller du kan evt. tildele den til din class istedet,
hvis det er de billeder der giver problemer.



.image-left {
    width: 40%;
    height: auto;
}


.image-right {
    width: 40%;
    height: auto;
}

.imageStyle {
    width: 100%;
    display: block;
}

... men ved ikke om den skal på flere af de classes - jeg skal lige have kigget på siden så her iaften hvis det ikke hjælper ... man kan også vælge at floate billedet istedet ved at bruger float:left; eller float:right; men det virker ikke i alle tilfælde så optimalt som at give den display:block;

En anden mulighed kan være at mellemrum blot skal fjernes:

        <div id="content_text">
          <img class="imageStyle"
              alt="sommer63"
              src="kropsterapi_files/page2_1.jpg" />
          <br />

til:


        <div id="content_text"><img class="imageStyle" alt="sommer63" src="kropsterapi_files/page2_1.jpg" /><br />


... med rettelse af src afhængig af siden selvfølgelig men altså slettelse af mellemrum (heller ikke testet)...

[ så du skal altså kun fortsætte med mig,
hvis det ikke dig til besvær! ]
Du er ikke spor til besvær ;)

Det er mellemrummet :)
java script:tn=document.getElementById("content_text");tn.removeChild(tn.childNodes[1]);void(0);

^ - indsæt linjen i adresselinjen og tryk enter når du er på siden - det simulerer fjernelse af mellemrummet der giver problemer ... løsningen på problemet er derfor 04/08-2006 12:16:07 :o)

Endnu engang: tusind tak fordi du vil hjælpe!

Jeg har nu forstået, at DOCTYPE er vigtig, fordi man risikerer at ens site ikke virker mere, når denne verdens browsere helt dropper quirk-mode (..rigtigt?)

Jeg har afprøvet 12:12:19 og 12:16:07, desværre uden det ønsket resultat, øv bøv.

Jeg har fundet denne box-i-box hack specielt for IE (fra http://css-discuss.incutio.com/?page=BoxModelHack)

div { width: 100px; }
div .i { padding: 1em; }

<div>
<div class="i">
  Text
</div>
</div>

... som måske er en mulighed - ved dog ikke lige, hvor det er, jeg skal sætte den ind.

Et spøjst aspekt er, at billedet bliver vist korrekt første gang - det er kun når man opdaterer eller klikker igen, at billedet får den ekstra margen.

På http://www.quirksmode.org/css/quirksmode.html forklares det, at problemet er, at IE opfatter billedet som "inline" og afsætter plads til "possible descender characters".

"In the early days, experiments with strict mode invariably raised the comment that images suddenly got an odd bottom margin that couldn't be removed. The cause was that in strict mode <img /> is an inline element, which means that some space should be reserved for possible descender characters like g, j, or q. Of course an image doesn't have descender characters, so the space was never used, but it still was there.

The solution was to explicitly declare images block level elements: img {display: block}."

Det kan være, der er noget årsag her? (selvom "img {display: block}." jo desværre ikke virkede)

Jeg er offline fra ca. 15 til 20.15 - hvis du har tid så sent, er jeg meget taknemmelig, men det er bestemt ikke noget jeg forventer.

java script:tn=document.getElementById("content_text");tn.removeChild(tn.childNodes[1]);void(0);

virker fint .. det er altså afgjort noget med noget ekstra afstand IE bare vil putte ind .. det hele bliver noget lettere med IE7, har jeg forstået.

Prøver lige 04/08-2006 12:16:07 igen!

[ Det kan være, der er noget årsag her? (selvom "img {display: block}." jo desværre ikke virkede) ] - Ok den er så udelukket ...

[ Jeg er offline fra ca. 15 til 20.15 - hvis du har tid så sent, er jeg meget taknemmelig, men det er bestemt ikke noget jeg forventer. ] - Ok, jeg kigger på det iaften ...

Prøvede lige 04/08-2006 12:16:07 igen - alene og sammen med 04/08-2006 12:12:19 - men ak og ve.

Iagttagelser: billedet på hjemmetester.dk/index.html vises fint ved load og ved reload - det er kun, når jeg klikker ind på forside/index via navigationsknapperne, at problemet optræder.

Der også en anden pudsighed, som måske har betydning (?) Billedet på www.hjemmetester.dk/faq.html arter sig ligesom forside/index - men bredden fastholdes i forhold til den kasse, det ligger i, der bliver ikke justeret i forhold til scrollbaren (sammenlign fx med www.hjemmetester.dk/praktisk_info.html).

Damn, jeg er vandt til at bruge nettet, for det er så nemt .. opdager nu pludselig hvor meget teknik, der ligger nedenunder...

:-) sgm

... og mange tak fordi du også vil være på i aften :-))

... det var i øvrigt et meget imponerende javascript - er det sådan noget, du bare lige kan ryste ud ærmet?

Er det en løsning?

Jeg fandt denne kode: <!--Quirk on--> på www.hjemmesideskolen.dk/html/testsider/fixed.asp

den får billedet til at opføre sig helt fint, samtidig med DOCTYPE'n bibeholdes :-) Sådan er indledningen nu lyder:

<!--Quirk on-->
<!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">

... men måske er det så alle browsere, der går i quirk?

Nu fandt jeg lige på at indlede med:

<!--[if IE]>
<!--Quirk on-->
<![endif]-->

.. er det en holdbar løsning? Eller noget lappe noget?

:-)

Jeg kørte den lige på http://www.htmlhelp.com/tools/validator/ og har rettet syntaksen til:

<!-- [if IE] -->
<!-- Quirk on -->
<!-- [endif] -->

... og fik "no errors" .. hm :-)

04/08-2006 14:41:16, 04/08-2006 14:44:45, 04/08-2006 16:09:30
3x Nej, Du skal ikke have IE i quirks og det får du ved at have en kommentar eller andet foran din doctype - quirks mode er en indstilling IE hopper i hvis doctypen ikke er det første på siden ... så overholder IE ikke css ordentligt...

Den behøver ikke stå quirks on eller andet i kommentaren man kan bare skrive
<!-- test --><!DOCTYPE ... så er IE i quirks - jeg kigger på css filerne i kombi med html filen ... men som sagt der er rimelig mange css filer så det tager nok noget tid ... og jeg skal jo også lige se om jeg kan teste det istedet for at poste løs med forslag (skal lige downloade lidt fra siden)...

[ .. er det en holdbar løsning? ] Nej, det går måske galt i IE 7 da den måske ikke går i quirks med en kommentar før doctypen...

[ ... det var i øvrigt et meget imponerende javascript - er det sådan noget, du bare lige kan ryste ud ærmet? ] Ikke specielt - det kan de fleste js "nørder"...

Forresten m.h.t. point så afvis mit svar
- læg selv et svar og accepter det ...
Skidt med de point det er bedre være
sikker på at vi er indenfor ekspertens
regler istedet. Tanken tæller jo også :o)

Lidt rod p.t. men prøv det her:


automatic.css (den til billederne)

.image-left {
    width: 40%;
    height: auto;
}


.image-right {
    width: 40%;
    height: auto;
}

.imageStyle {
    width: 100%;
}

.imgStylediv {
    width: 90%;
        margin:0px auto;
}







og så forsiden her:



<!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>
  <title>Gestaltterapeutisk Klinik - Forside</title>
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href="rw_common/themes/camilo/styles.css" />
  <link rel="stylesheet"
        type="text/css"
        media="print"
        href="rw_common/themes/camilo/print.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/camilo/css/layout/sh_content_big.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/camilo/css/layout/size/width/80pc.css" />
       
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/camilo/css/layout/size/height/80pc.css" />
       
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/camilo/css/colors/body/olive_green.css" />
       
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/camilo/css/colors/header/white.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/camilo/css/colors/sidebar/grey_dark.css" />
       
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/camilo/css/colors/mainContent/grey_neutral.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/camilo/css/colors/content/grey_light.css" />
       
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/camilo/css/image_size/automatic.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/camilo/css/font/family/verdana.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/camilo/css/content_border/show.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href="rw_common/themes/camilo/css/logo/size/auto.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/camilo/css/logo/placement/bottom.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href="rw_common/themes/camilo/css/header/both.css" />
<script type="text/javascript"
      src="rw_common/themes/camilo/javascript.js">
</script>
  <meta name="robots"
        content="no index,no follow" />
  <meta name="distribution"
        content="global" />
  <meta name="keywords"
        content="samtaleterapi, kropsterapi, gestaltterapi" />
  <meta name="description"
        content=
        "Forside af www.gestaltterapi.info ved Stefan Green Meinel" />
       
  <meta name="author"
        content="Stefan Green Meinel" />
  <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-1" />
  <meta name="generator"
        content="RapidWeaver" />
  <meta name="generatorversion"
        content="3.5 Public Beta 3 (Build 131)" />
  <link rel="icon"
        href="http://hjemmetester.dk/favicon.ico"
        type="image/x-icon" />
  <link rel="shortcut icon"
        href="http://hjemmetester.dk/favicon.ico"
        type="image/x-icon" />
        <!-- compliance patch for microsoft browsers -->
  <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" media="screen" href="rw_common/themes/camilo/css/ie7fix.css" />

<![endif]-->
  <!--[if lt IE 7.]>
                <link rel="stylesheet" type="text/css" media="screen" href="rw_common/themes/camilo/css/iefix.css" />
                <script defer type="text/javascript" src="rw_common/themes/camilo/pngfix.js"></script>
<![endif]-->
  <!-- This page was created with the camilo theme from Rapid Ideas. http://www.rapid-ideas.com -->
</head>

<body>
  <div id="container">
    <div id="pageHeader_top">
      <h1>Gestaltterapeutisk Klinik</h1>
    </div>

    <div id="pageHeader">
      <h1>Gestaltterapeutisk Klinik</h1>









      <div id="logo"><img src="index_files/sitelogo1.jpg" alt="Site logo" /></div>
<!-- ___________________ Mellemrum i logo div fjernet (gav et par få px forskel ie vs. ff) ______________________ -->
    </div>

    <div id="mainContent">
      <div id="sidebar">
        <div id="sidecontainer">
          <div id="navcontainer">
            <ul>
              <li><a href="index.html"
                rel="self"
                id="current"
                name="current">Forside</a></li>

              <li><a href="samtaleterapi.html"
                rel="self">Samtaleterapi</a></li>

              <li><a href="kropsterapi.html"
                rel="self">Kropsterapi</a></li>

              <li><a href="speciale.html"
                rel="self">Mit speciale</a></li>

              <li><a href="kontakt.html"
                rel="self">Kontakt</a></li>

              <li><a href="praktisk_info.html"
                rel="self">Praktisk info</a></li>

              <li><a href="baggrund.html"
                rel="self">Min baggrund</a></li>

              <li><a href="links.html"
                rel="self">Links</a></li>

              <li><a href="faq.html"
                rel="self">FAQ</a></li>

              <li><a href="english.html"
                rel="self">In English</a></li>

              <li><a href="artikler.html"
                rel="self">Artikler</a></li>
            </ul>
          </div>

          <div id="side_plus"></div>
        </div>
      </div>

      <div id="content">
        <div id="breadcrumbcontainer">
          <ul>
            <li><a href="index.html">Forside</a>&nbsp;::&nbsp;</li>
          </ul>
        </div>











<div class="imgStylediv"><img class="imageStyle" alt="sommer30" src="index_files/page0_1.jpg" /></div>
<!-- ___________________________ Rykket ud af content_text og ind i sin egen div ________________________ -->

        <div id="content_text">
          <h2>Velkommen til Gestaltterapeutisk Klinik</h2>
          <br />
          Her kan du læse om, hvordan jeg arbejder med
          samtaleterapi og kropsterapi.
          <br />
          <br />
          Helt kort under FAQ, lidt længere under Samtaleterapi og
          Kropsterapi, mest uddybende under Artikler.
          <br />
          <br />
          Du er velkommen til at skrive eller ringe med spørgsmål
          eller kommentarer.
          <br />
          <br />
          Jeg skriver en ny artikel hver anden måned, læs mere
          under <a href="artikler.html"
              rel="self">Artikler</a>.
          <br />
          <br />
          Jeg arbejder lige gerne med unge som voksne, mænd som
          kvinder.
          <br />
          <br />
          <br />
          <strong>Stefan Green Meinel</strong>
          <br />
          <br />
          eksam. gestaltterapeut - touching dialogue therapist
          <br />
        </div>
      </div>
      <br style="clear: both;" />
    </div>

    <div id="footer">
      © 2006 Stefan Green Meinel
    </div>
  </div>
</body>
</html>

Hov den css del skal lige rette, du vil sikkert
have den til at flugte med teksten...

.image-left {
    width: 40%;
    height: auto;
}


.image-right {
    width: 40%;
    height: auto;
}

.imageStyle {
    width: 100%;
}

.imgStylediv {
    width: 84%;
        margin:0px auto;
}

... width 84% sammen med istedet for den anden css rammer nok lidt mere præcis, men hvorfor den lige rammer ind i problemer når den er i den anden div skal jeg lige have analyseret de 17 css filer for at se...

[ Damn, jeg er vandt til at bruge nettet, for det er så nemt .. opdager nu pludselig hvor meget teknik, der ligger nedenunder... ] Det plejer ikke at være svært, heller ikke med width % orienterede billeder heller ikke selvom der rodes med javascript og css (eks: http://www.eksperten.dk/spm/723347 ) - men der er åbenbart noget på siden der driller ie (css styling på et element måske) ... og så er det man skal ud at pløje for at finde det ... og det kan så godt tage noget tid...

Arg har pløjet i en time nu ... Jeg anbefaler ovenstående css med den ekstra div som i 04/08-2006 17:45:23 - hvis det virker ... Det tyder på at det er flere absolute placerede elementer med padding og margin der giver en påvirkning til IE men ikke FF. ... og så kommer selvfølgelig problemet med at IE og FF ikke håndtere scrollbar reservation ens (eks: http://www.eksperten.dk/spm/724010#rid6365418 / ...)

... Håber ovenstående virker?

... hold da op, det var en ordentlig masse :-) .. tak! ..  jeg prøver css'en først!

Husk html rettelsen også... Den i 04/08-2006 17:50:10
var blot istedet for css'en i 04/08-2006 17:45:23
... html rettelsen skal stadig bruges ...

Så har jeg lagt følgende ind:

<div id="logo"><img src="index_files/sitelogo1.jpg" alt="Site logo" /></div>

samt

<div class="imgStylediv"><img class="imageStyle" alt="sommer30" src="index_files/page0_1.jpg" /></div>

samt

.imgStylediv {
    width: 84%;
        margin:0px auto;
}

... jeg vil insistere på point .. no matter what

css'en gav det flotteste resultat, da den stod alene. Da jeg lagde div'erne på blev billedet lidt for "højt"

css'en alene virkede næsten perfekt - på nær billedet ikke tilpasser sig ift scrollbaren og at højremargen af og til bliver bred. Men i det store hele - ret godt :-)

Ok, tror desværre ikke jeg kan komme den nærmere ...
det med scrollbaren er lidt generalt :/

.imgStylediv {
    width: 84%;
        margin:0px auto;
}

... jeg ved ikke om der skal noget padding-top:20px;
mere eller mindre eller noget margin top på ?


.imgStylediv {
    width: 84%;
padding-top:20px;
        margin:0px auto;
}


eller


.imgStylediv {
    width: 84%;
        margin:20px auto 0px auto;
}



... du kan selvfølgelig sænke width % satsen hvis det er og prøve noget padding-right hvis den skal flugte med teksten til højre så vidt muligt ... eksempel:


.imgStylediv {
    width: 80%;
        margin:0px auto;
padding-right:4%;
}


... evt. stadig med noget top afstand hvis det er...


Mvh, Clemme :o)

Tusind tak for indsatsen, Clemme :-)

Jeg har desværre ikke forstået hvordan man afgiver point :(

Jeg afviste dit første indlæg, fordi jeg ville ned til 04/08-2006 17:50:10, som 95% løste problemet (sammen med dine råd om at fjerne  "height: auto;" fra css'en og "height" + "width" fra kildekoden i http://www.eksperten.dk/spm/723102).

Er der en måde hvorpå, jeg kan ændre "afvist 04/08-2006 10:52:29" til "accepteret 04/08-2006 17:50:10"

Har jeg i øvrigt forstået det rigtigt - af du sidder og giver denne slags hjælp på frivillig basis?

I så fald har du virkelig fortjent din gode karma :-)

Bedste hilsner

SGM

[ Er der en måde hvorpå, jeg kan ændre "afvist 04/08-2006 10:52:29" til "accepteret 04/08-2006 17:50:10" ]

Ikke helt, jeg skal først kaste et nyt svar så :o)
Takker for karma, jeg lægger lige et svar her.
(tryk på navn i boksen og accepter - javascript
og cookies kræves vist - så vidt jeg husker)

- Jeg ved ikke helt ...
Jeg anmeldte tråden kl 10:58 til mods
- der er dog ikke kommet den store reaktion
(de er selvfølgelig også frivillige og
gør et kanon arbejde så de skal
lige have et stykke tid)



... Har lige kastet en besked til Roenving
i en tråd jeg deltog i - håber derfor at
han eller en anden mod så senere vil sige om
jeg skal føre point tilbage hvis det er ... ?



[ Har jeg i øvrigt forstået det rigtigt - af du
sidder og giver denne slags hjælp på frivillig basis? ]
- Kører en internet forretning og har fiflet med px i ca.
5 år - dog er jeg først begyndt på php og css sidste år...
og her i år tilmeldte jeg mig for at få træning i javascript
(løsning af udfordringer - fejlløsning kan give lidt træning)
... Og så lærer man jo lidt af f.eks. Roenving og Olebole ...
(ved at kigge dem lidt over skulderen og få lidt
råd af dem normalt indenfor javascript)

(... stort set er jeg selvlært med læsning i 4 bøger samt
legning med frontpage - så et skifte til notesblok istedet...
og læsning inde på w3c.org samt w3schools.com)

... jeg har dog fået kontanter for en enkelt ting herinde
( http://www.eksperten.dk/spm/702912 ) - og det var jo en
lækker bonus ... lagt oveni træningen af js-dom håndtering.

uddyber lige dem med at markere et bestemt indlæg som
svar man kan kun acceptere et lagt svar og ikke vælge
hvilket indlæg man føler var det mest korrekte svar ...

Jeg troede ikke man kunne blive selvlært på så tekniske områder - godt gået.
Og meget inspirerende :-)

Held og lykke med din forretning!!

Og super mange tak for hjælpen :-))

Velbekom, og tak for point :o)

Retur point til sgm http://www.eksperten.dk/spm/724994