pichia

På den sidan öppnar du en div mellan container-diven och img-container-diven:

<div class='container'>

<img src="/files/allanlogo.jpg" height="64" alt="logo"></img>
<div style='width: 800px;'>
<div style='float: left; width: 450px; margin-right: 30px;'>
Allan är ...</div>
Klicka på bilderna för att se dem i stort format!<br/><br/>
<div class='cl'></div>
<div id='img-container'>

som du inte har på sidorna som spottar ut ett fel. Eftersom den diven har en funktion här (fast inte dess inline-styling (funkar lika bra om man struntar i den), så är kanske lösningen att lägga in en extra div-öppning mellan dessa två (container och img-container) på de sidor som felar, isf att ta bort en av de tre div-stängningarna.

Du har flera sådana eller <h11>-taggar (se främst sidorna under info) . Det hösta tillåtna är <h6> (som är den lägsta rubriknivån, h1 är högsta nivån). Använder du det som sidans huvudrubrik (om mig) skall du ha h1. Under Curriculum har du det innanför en <a>-tag: egentligen skall man inte ha block element (tex h1-h6) innanför inline element (tex a), men här har den ingen som helst roll som rubrik, så du kan skippa den helt.

hur ser det i " .../ndxz-studio/site/thecentered_theme/index.php"?

Ganska långt ner i filen skall det se ut så här (enligt den versionen av thecentered_theme jag laddade ner):

<plug:front_exhibit />

</div>
</div>

<div class='clear-both'></div>

Men enligt vad matas ut på dina sidor är det tre div-taggar som stängs på raden (och det är en för mycket enl valideringen).
Obs! se även mitt tredje inlägg nedan...

Nej det var visst inte så stabilt. Det ballade ur för mig också efter en stund.
Tittar man på wobblewebb.net så funkar det fint.

Du har sen gammalt en div-missmatch på dessa sidor med bildgallerier (tex Fotografi : Klara Nilsson). Det _kan_ definitivt vara en källa till oberäkneligt beteende. Det behöver inte vara fel pä själva css-en. Jag tycker du skall försöka luska ut och rätta till det felet först.

Jag kunde snabbt titta igenom din sida från svärföräldrarnas IE 8. Allt så Ok ut tyckte jag. Bildvisningen med wobblebox fungerade som väntat. Möjligen ett problem: det gick inte att bläddra från bild till bild i visningsläge. "close" var enda alternativet, för att sedan öppna nästa.
Kan kolla i IE 7 först på måndag.

vad är wobblebox?
Edit: Nu hittade jag det, det är just den uppdaterade varianten av thickbox som du har kvar på din site...

Nästa steg: använda fancybox på en sida, tex
Tidningsomslag : Kristoffer Nilsson

Bildlistan ser ut så här:

<div style='float: left; width: 900px; margin-right: 0px;'>

<div class="imagecontainer" style='float: left; width: 100px; margin-right: 15px;'>
<a class="thickbox" href="/files/gimgs/faste.jpg">
<img src="/files/gimgs/faste.jpg" height="150" alt="Fastighetsfolket"></img></a></div>

<div class="imagecontainer" style='float: left; width: 100px; margin-right: 15px;'>
<a class="thickbox" href="/files/gimgs/arbets.jpg">
<img src="/files/gimgs/arbets.jpg" height="150" alt="Arbetsterapeuten"></img></a></div>
...
</div>

Man skulle vilja ha det så här:

<div class="galleri">
<a href="/files/gimgs/faste.jpg" rel="galleri1">
<img src="/files/gimgs/faste.jpg" height="150" alt="Fastighetsfolket"/>
</a>
<a href="/files/gimgs/arbets.jpg" rel="galleri1">
<img src="/files/gimgs/arbets.jpg" height="150" alt="Arbetsterapeuten"/>
</a>
...
</div>

Då räcker det att lägga till:
$(".galleri a").fancybox();
på lämplig plats, tex i expandingMenus.js eller i slutet av själva sidan (inom script-taggar).
har du dessutom följande i css-en:

.galleri a{
 float: left;
}

så slipper du en massa element-style som du har idag.

Ett par kommentarer till den gallerian du har idag:

Det är samma bilder som används som tummisar som i full storlek: den första laddningen av sidan blir rätt tung då samtliga bilder måste laddas ner.

Varför är texten ovanför och diven med bilderna stylade som floats? De är efter varandra i sidflödet och borde klara sig utmärkt som vanliga block-element.

Så här ser det ut på din pappas sida just nu:

css:
1. <style type='text/css'> @import url(http://www.kristoffernilsson.se/ndxz-studio/site/css/jquery.thickbox.css); </style>
2. <style type='text/css'>
a.thickbox { border: none; }
a.thickbox img { border: 3px solid #fff; margin: 0 6px 9px 0; }
</style>
3. <link rel='stylesheet' href='http://www.kristoffernilsson.se/ndxz-studio/s...' type='text/css' />

där rad 1 innehåller css för fancybox (vet du varför den är skriven som en import isf en länkad fil?), rad 2 thickbox-specifik css och rad 3 sajtens css.

js:
1 . <script type='text/javascript' src='http://www.kristoffernilsson.se/ndxz-studio/s...'></script>
2 . <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1..."></script>
3. <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
4. <script type='text/javascript' src='http://www.kristoffernilsson.se/ndxz-studio/s...'></script>
5. <script type='text/javascript' src='http://www.kristoffernilsson.se/ndxz-studio/s...'></script>
6. <script type='text/javascript' src='http://www.kristoffernilsson.se/ndxz-studio/s...'></script>

Rad 1 o 2 gör exakt samma sak, laddar in jquery 1.4.2 (packad). Välj en av dem.
Rad 3 har fel sökväg och ger ett fel 404.
Rad 6 innehåller numera fancybox (ej packad).
Om rad 3 blir rätt, så behövs inte rad 6. Det är bättre om fancybox laddas i rad 3 för då kan du utnyttja expandingMenus.js-filen för att haka på fancybox på lämpliga element (bildlistor).

lämpligen skulle jag sätta js-filen för fancybox så här:
<script type='text/javascript' src='http://www.kristoffernilsson.se/ndxz-studio/s...'></script>

isf rad 3, och rad 6 blir överflödig (i js-blocket)

och css-mappen (css-fil + tillhörande bilder) med länk så här:

<link rel='stylesheet' href='http://www.kristoffernilsson.se/ndxz-studio/s...' type='text/css' />

isf rad 1 och 2 i css-blocket.

Kan man stänga av thickbox-pluginen i indexhibit? (då skulle rad 1 och 2 i css-blocket samt rad 6 i js-blocket ovan antagligen vara borta per automatik).

Den enda skillnaden mellan dessa två är att "pack"-varianten är packad/komprimerad för att laddas ner snabbare när besökare kommer till sidan. Det är svårare att läsa och förstå koden i packat utförande, men det är väl inte aktuellt just nu.

Jag ser inte på vilken sida du har lagt till filerna, så jag har svårt att avgöra vad som gick rätt eller fel till.

Går man till thickbox's hemsida ser man att pluginen är nerlagd sen ett par år tillbaka, men när jag tittade in i din thickbox-plugin-fil såg jag att den plugin för indexhibit har visst fått sig en översyn senast i år.
Är det säkert att den inte funkar som den skall för IE (nu när du har rättat till ett par andra problem)?

Jo, för så var det inte tidigare i morse. Html validator säger också att #wrapper diven inte är stängd. (men det kan vara en annan div innanför som felar)

Jag tycker du även skall "ifrågasätta" innehållet i din ie.css som har bara följt med. Den var egentligen riktad till IE 5.5 och lägre och kanske bara ställer till det mer än den gör nytta. Ta bort allt (förutom dagens övning) och kolla om det funkar ändå.

i synnerhet den här:

* html div#menu {
width: 20%;
}

låter som en bov som kan förklara menyn is skrollytan till vänster.

Lägg inte hela sitens css i den filen, bara de ändringar som behövs för att få till det. IE använder den vanliga filen också. Det blir bara dubbelt jobb och svårt att underhålla.

Jag hinner nog inte fördjuppa mig i indexhibit för ögonblicket. Du skulle kunna köra samma fulknep som med exandingMenu, dvs ersätta innehållet i filen jquery.thickbox.js med fancybox-plugginen. Du behöver även en js-fil för att skriva de rader som behövs för att haka på fancybox på dina bildgallerier och i princip skulle du kunna göra det i expandingMenu.js, men den skulle behöva laddas efter jquery.thickbox.js i headen.

Alternativt är om du kan lägga in en script-tag i slutet på det filer som använder thickbox/fancybox, och skriver in fancybox-haket där, så är det nog minst bäddat för strul.

Och, ifall du hade missat det, skall du använda bilden som den är i full skala så behöver du inte ange någon dimension alls.

Nu har jag tittat lite snabbt i IE 7och konstaterat att det var samma problem med min lilla horizontal-menu demo som jag länkade till i ett tidigare inlägg.
lösningen blev ett separat stylesheet för ie:
I sidans head, efter länken till den vanliga css:

Stilmallen är då riktad till alla IE.

För menyn, den enda innehållet som behövs är:

#menu ul li ul {
     top: 20px;
}

Jag drog till med 20px. Du får jämföra och tycka hur mycket det egentligen behövs.

Obs att du fortfarande har bilder med width="*" i din kod, i synnerhet titelbilden, som inte syns i IE.

Angående bakgrundsfärg i menyn. Klart det går att fixa. Kanske måste man se över lite padding vs margin på sina håll för att få det sammanhängande, men jag tycker att det är en dålig idé överhuvudtaget. Du har en väldig minimalistisk sida utan kanter och gränser förutom bilderna själva. Menyn skall egentligen inte göra så mycket väsen av sig. Det kommer att se galet ut med en kantig färgpalett i menyn mitt i allt det vita. Då är det bättre att leka med textfärgen: tex tona ner de andra huvudmenyer som inte är aktiva, kanske använda färgen i din titelbild för att markera den aktiva sidan... Min åsikt bara.

Det bästa sättet att tackla problem med IE är att ha en separat css till IE. Låt det som fungerar i Safari FireFox och Opera vara orörd i huvudmallen och ändra endast nödvändiga regler i IE-mallen, som laddas efter endast i IE och därmed får prioritet i css-tolkningen. (FYI, du har redan en sådan: http://www.klaranilsson.com/ndxz-studio/site/thecentered_theme/ie.css men skall den gälla för alla IE, bör den villkorade kommenteringen vara <!--[if IE]> isf <!--[if lte IE 6="6"]> - i princip bör du kunna strunta i IE 6 och lägre).
Kolla däri att den css-en finns där idag inte sabbar mer än den tillför.

position: inside; existerar inte och borde inte vara "lösningen". list-style-position:inside; existerar däremot men är nog inte aktuellt heller.

skall se om jag hinner titta lite snabbt på det i morgon bitti...