[XHTML/CSS] Quirksmode bij print (preview) & opera

[cyberstalker]

Ik ben bezig een sudoku pagina te maken, waar je online sudoku kunt spelen.

Om het spelbord te tonen, gebruik ik een combinatie van floats en divs. Dit werkt allemaal prima in Firefox. Zodra ik echter een print preview doe, of de pagina in opera bekijk, gaat het fout.

Het lijkt wel of de stijlaanwijzigingen dan grotendeels genegeerd worden. De blokken passen dan niet meer precies in hun container en worden een regel lager neergezet.

Een stukje relevante code:

HTML:

<div class="nummerblok">
    <!-- regel 1 -->
    <input type="text" name="regel1_kolom1" id="regel1_kolom1" maxlength="1" value="7" readonly="readonly" />
    <input type="text" name="regel1_kolom2" id="regel1_kolom2" maxlength="1" value="6" readonly="readonly" />
    <input type="text" name="regel1_kolom3" id="regel1_kolom3" maxlength="1" value="4" readonly="readonly" />
    <!-- regel 2 -->
    <input type="text" name="regel2_kolom1" id="regel2_kolom1" maxlength="1" value="" />
    <input type="text" name="regel2_kolom2" id="regel2_kolom2" maxlength="1" value="" />
    <input type="text" name="regel2_kolom3" id="regel2_kolom3" maxlength="1" value="2" readonly="readonly" />
    <!-- regel 3 -->
    <input type="text" name="regel3_kolom1" id="regel3_kolom1" maxlength="1" value="" />
    <input type="text" name="regel3_kolom2" id="regel3_kolom2" maxlength="1" value="" />
    <input type="text" name="regel3_kolom3" id="regel3_kolom3" maxlength="1" value="3" readonly="readonly" />
</div>

En de bijbehorende CSS-code:

Cascading Stylesheet:

.nummerblok
{
    border: 2px solid #877d69;
    float: left;
    width: 113px;
    padding-left: 5px;
    margin-right: -3px;
    margin-top: -3px;
}

.nummerblok input
{
    width: 18px;
    height: 18px;
    border: 1px solid #877d69;
    color: #877d69;
    background-color: white;
    margin-left: -5px;
    text-align: center;
    
    padding: 10px;
    font-size: 18px;
}

.nummerblok input[readonly="readonly"]
{
    background-color: #e6f0f2;
}

De velden worden per regio gegroepeerd, en door de breedte van de container-div automatisch gewrapped. Gegeven velden zijn voor de duidelijkheid anders van kleur.

De regios worden door de breedte van het form op zichzelf ook weer automatisch gewrapped. Dit gaat altijd goed, ook bij de print preview en in opera.

Voor de complete pagina kun je kijken op http://sushisoftware.nl/sudoku/

[ZeilDude]

Ok, dit is volgens mijn een voorbeeld van hoe sommigen doorslaan met het niet-gebruiken van tables. Jouw design kun je prima en probleemloos in een tabel afvangen, wat een symantisch correct element daarvoor is. Immers, evenals een tabel bestaat een sudolu uit rijen en klommen van gestructureerde data.

Wat betreft het probleem, dat lijkt 'm in de breedte van de klasse nummerblok te zitten. Door die 1px meer ruimte te geven klopt ie wel. De breedte van het formulier moet je dan met 3x1px aanpassen. Dus zoiets:

Cascading Stylesheet:

#puzzel
{
    width: 369px;
}

.nummerblok
{
    border: 2px solid #877d69;
    float: left;
    width: 116px;
    padding-left: 5px;
    margin-right: -3px;
    margin-top: -3px;
}

Ik snap dat ie er nu niet helemaal netjes uitziet, maar daar moet je dan maar wat mee pielen. Ik vind je css sowieso erg onduidelijk met die negatieve margins. Nogmaals, dit zou ik gewoon in een tabel doen.

Verder:

• De pagina is NIET te bekijken in IE;
• De xml-declaratie dwingt IE in quirksmode, niet handig dus laat die maar weg.

[cyberstalker]

ZeilDude schreef op dinsdag 31 januari 2006 @ 13:55:
Ok, dit is volgens mijn een voorbeeld van hoe sommigen doorslaan met het niet-gebruiken van tables. Jouw design kun je prima en probleemloos in een tabel afvangen, wat een symantisch correct element daarvoor is. Immers, evenals een tabel bestaat een sudolu uit rijen en klommen van gestructureerde data.

Dat ben ik niet met je eens. Wanneer ik met tabellen zou gaan werken, en ik toch de regios (of nummerblokken zoals ik het op de pagina noem) duidelijk wil aangeven, heb ik twee mogelijkheden:

- Verschillende classes maken voor de cellen, denk hierbij aan .regio_top_left e.d.
- Geneste tabellen.

Beide mogelijkheden zijn ongewenst. classes zijn bedoelt om een indicatie te geven van de content van het element, en niet puur en alleen om een visueel effect te geven. Geneste tabellen zijn al helemaal 1998, daar denk ik niet eens over na.

Wat betreft het probleem, dat lijkt 'm in de breedte van de klasse nummerblok te zitten. Door die 1px meer ruimte te geven klopt ie wel. De breedte van het formulier moet je dan met 3x1px aanpassen. Dus zoiets:

Cascading Stylesheet:

#puzzel
{
    width: 369px;
}

.nummerblok
{
    border: 2px solid #877d69;
    float: left;
    width: 116px;
    padding-left: 5px;
    margin-right: -3px;
    margin-top: -3px;
}

Ik snap dat ie er nu niet helemaal netjes uitziet, maar daar moet je dan maar wat mee pielen. Ik vind je css sowieso erg onduidelijk met die negatieve margins. Nogmaals, dit zou ik gewoon in een tabel doen.

Die negatieve margins ben ik zelf ook niet helemaal gelukkig mee, en ik heb ook alles wat ik kan bedenken geprobeerd om het zonder te doen. Om de een of andere reden wordt er bij twee opvolgende input-boxen een margin toegepast die niet is weg te halen met een padding: 0px of margin: 0px. De enige werkende oplossing is dus met negatieve margins.

Je oplossing werkt ook niet helemaal. De tekstboxen worden soms ineens meer naar beneden weergegeven, e.d. Dat los ik wel zelf op, met een aparte stylesheet voor media="print" o.i.d.

Verder:

• De pagina is NIET te bekijken in IE;
• De xml-declaratie dwingt IE in quirksmode, niet handig dus laat die maar weg.

IE kan wat mij betreft doodvallen, ik ontwikkel XHTML, dus dan weet je van tevoren dat dat nooit gaat werken. Waar ik me meer druk om maak is dat opera niet meewerkt. Die negeert alle style info die ik voor de input boxen heb opgegeven volkomen, zelfs de achtergrondkleur werkt niet.

i.i.g. bedankt voor je hulp.

[Verwijderd]

Grappig. Een paar maanden terug probeerde ik precies hetzelfde te doen. Uiteindelijk heb ik toch teruggegrepen naar de TABLEs. Maar mij ging het dan ook meer om de oplos-JavaScript.

http://experiments.mennovanslooten.nl/2005/Sudoku/

Ik ben wel benieuwd naar je PHP om dit server-side op te lossen. Is dat geheim of zou je dat ook willen delen?