webForumDet fria alternativet

Varför visas denna sida rätt i IE men fel i Opera och Firefox?

HTML & CSS

5 svar · 696 visningar · startad av lbs129

Medlem sedan apr. 200899 inlägg
Frågan#1

Hej!

Är det någon som vet varför denna sida visas rätt i Internet Explorer men fel i Opera och Firefox?

http://www.hjortensbergskyrkan.se/viewNavMenu.do?menuID=101

Källkod för innehållsdelen:

<H1>Ledarpresentation</H1>
<H2>Miniorscout</H2>
<P><STRONG><IMG height=113 alt="" hspace=10 src="/bilder/verksamhet/scout/gunilla.jpg" width=85 align=left vspace=5 border=0>Namn:</STRONG> Gunilla Johansson<BR><STRONG>Ålder:</STRONG> 58 år<BR><STRONG>Har varit scout i:</STRONG> 45 år<BR><STRONG>Senaste läger:</STRONG> Skogsröj -05<BR><STRONG>Valspråk:</STRONG> Allting går utom små barn.</P>
<P>&nbsp;</P>
<P><STRONG><IMG height=113 alt="" hspace=10 src="/bilder/verksamhet/scout/soren.jpg" width=85 align=left vspace=5 border=0>Namn:</STRONG> Sören Källström<BR><STRONG>Ålder:</STRONG> 49 år<BR><STRONG>Har varit scout i:</STRONG> 10 år<BR><STRONG>Senaste läger:</STRONG> <BR><STRONG>Valspråk:</STRONG> Luftmadrass är nödvändigt!</P>
<P>&nbsp;</P>
<P><STRONG><IMG height=113 alt="" hspace=10 src="../bilder/verksamhet/scout/julia2.jpg" width=85 align=left vspace=5 border=0>Namn:</STRONG> Julia Seger<BR><STRONG>Ålder:</STRONG>&nbsp;16 år<BR><STRONG>Har varit scout i:</STRONG>&nbsp;9 år<BR><STRONG>Senaste läger:</STRONG> Adventure -08<BR><STRONG>Valspråk:</STRONG> Feel the rain on your skin, no one else can do it for you.</P>
<P>&nbsp;</P>
<HR>

<H2>Scout</H2>
<P><STRONG><IMG height=113 alt="" hspace=10 src="/bilder/verksamhet/scout/erland.jpg" width=85 align=left vspace=5 border=0>Namn: </STRONG>Erland Strandås<BR><STRONG>Ålder:&nbsp;</STRONG>53 år<BR><STRONG>Har varit scout i:&nbsp;</STRONG>11 år<BR><STRONG>Senaste läger: </STRONG>Knott -07<BR><STRONG>Valspråk: </STRONG>Man är inte äldre än man känner sig.</P>
<P>&nbsp;</P>
<P><STRONG><IMG height=113 alt="" hspace=10 src="../bilder/verksamhet/scout/magnus.jpg" width=85 align=left vspace=5 border=0>Namn: </STRONG>Magnus Salomonsson<BR><STRONG>Ålder: </STRONG><BR><STRONG>Har varit scout i:</STRONG> <BR><STRONG>Senaste läger:</STRONG> <BR><STRONG>Valspråk:</STRONG> </P>
<P>&nbsp;</P>
<P><STRONG><IMG height=113 alt="" hspace=10 src="../bilder/verksamhet/scout/fredrika.jpg" width=85 align=left vspace=5 border=0>Namn: </STRONG>Fredrika Källström<BR><STRONG>Ålder:</STRONG> 21 år<BR><STRONG>Har varit scout i:</STRONG> 14 år<BR><STRONG>Senaste läger:</STRONG> Jorden Runt -06<BR><STRONG>Valspråk:</STRONG> Ett gott skratt förlänger livet.</P>
<P>&nbsp;</P>
<HR>

<H2>Tonårscout</H2>
<P><STRONG><IMG height=113 alt="" hspace=10 src="/bilder/verksamhet/scout/mathias.jpg" width=85 align=left vspace=5 border=0>Namn: </STRONG>Mathias Lindqvist<BR><STRONG>Ålder:</STRONG> 39 år<BR><STRONG>Har varit scout i:</STRONG>&nbsp;10 år<BR><STRONG>Senaste läger: </STRONG>Adventure -08<BR><STRONG>Valspråk: </STRONG>Lev med naturen.</P>
<P>&nbsp;</P>
<P><STRONG><IMG height=113 alt="" hspace=10 src="/bilder/verksamhet/scout/kenneth.jpg" width=85 align=left vspace=5 border=0>Namn:&nbsp;</STRONG>Kenneth Larsson<BR><STRONG>Ålder:</STRONG> <BR><STRONG>Har varit scout i:&nbsp;</STRONG><BR><STRONG>Senaste läger:&nbsp;</STRONG>Knott -07<BR><STRONG>Valspråk:&nbsp;</STRONG>Kör så det ryker! Ryker det inte så kör ändå!</P>
<P>&nbsp;</P>
<P><STRONG><IMG height=113 alt="" hspace=10 src="/bilder/verksamhet/scout/julia.jpg" width=85 align=left vspace=5 border=0>Namn: </STRONG>Julia Svensson<BR><STRONG>Ålder:</STRONG> 19 år<BR><STRONG>Har varit scout i:</STRONG>&nbsp;13-14 år<BR><STRONG>Senaste läger: </STRONG>Adventure -08<BR><STRONG>Valspråk: </STRONG></P>
<P>&nbsp;</P>

Mvh Johan

Medlem sedan dec. 19998 277 inlägg
#2

Alla rader är felaktiga där. Du har angett en doctype för XHTML men koden ser ut som från 90-talet.

http://validator.w3.org/check?uri=http://www.hjortensbergskyrkan.se/viewNavMenu.do?menuID=101

Du får skippa alla versaler i taggarna till en början. Sen får du placera texter och bilder med css, inte som nu med föråldrad html.

Medlem sedan juli 20013 378 inlägg
#3

Hmm...

Förutom det att koden, som Tengblad påpekar, är lite - ehm - mindre välskriven (vilket gör den svår att analysera) så har fenomenet en rätt konkret orsak som går att lösa...

Olika webbläsare får till olika höjd på <p>-styckena inne i din .wrap_textContent (förmodligen pga olika defaultvärden nånstans - det är ganska många värden som inte ställs in alls i din CSS ;) ) vilket gör att de "flytande" porträttbilderna är högre än varje <p> i .wrap_textContent för de webbläsare som upvisar problemet.

Testa

.wrap_textContent > p {clear: left}

inlagd i colour_stylesheet.css - den kodsnutten löser problemet för just den sidan (men du kan också se över line-height, padding och margin för p och experimentera med att ställa in dina egna värden för dem istället för att lita på defaultinställningar om du vill ha en totalt sett "bättre" lösning ;)

Inspiration:
Att börja utifrån t.ex. http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ (med motivering här: http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/ ) och bygg upp dina egna utseenden istället för att lita på defaultinställningar kan kännas motigt, men är sällan fel ;)

Medlem sedan apr. 200899 inlägg
#4

Tack för era svar! :)

Jag har inte kodat detta. Hela sidan bygger på ramverket Unity från Crossnet. Den koden som jag tog med i första inlägget är skapad av Unitys WYSIWYG-editor och är den enda koden som jag kan ändra. Allt görs via ett adminitrationssystem i webbläsaren.

Finns det något sätt att lösa problemet genom att bara ändra koden i första inlägget?

Mvh Johan

Medlem sedan juli 20013 378 inlägg
#5

Oj oj oj....

Visst, ändra varje

<P>&nbsp;</P>

till

<p style="clear:left">&nbsp;</p>

MEN

Det är extremt dålig kodningsstil att blanda utseendemanipulering och innehåll på det sättet och ingenting jag rekommenderar som en permanent lösning !!!!

För mig är förfarandet systemet tvingar fram alltså i princip likvärdigt med att svära i kyrkan samtidigt som det åkallar mörksens makter över webbsidans underhållsmässighet under överskådlig framtid (med andra och mer profana ord: har man ett mallbaserat publiceringssystem i botten är det ren och skär idioti att lägga in utseendemanipulerande kod i innehållet på det sättet systemet som beskrivs tvingar fram eftersom man då blir tvungen att redigera om innehållet vid framtida malländringar, vilket blir både knöligt och dyrt)

Bättre lösning: Gå på upphovsmannen och påpeka konstruktionsfelet på webbplatsen istället så att du slipper blanda innehåll och utseende på det där viset. :bire

Medlem sedan apr. 200899 inlägg
#6

jarvklo skrev:

Visst, ändra varje

<P>&nbsp;</P>

till

<p style="clear:left">&nbsp;</p>

MEN

Det är extremt dålig kodningsstil att blanda utseendemanipulering och innehåll på det sättet och ingenting jag rekommenderar som en permanent lösning !!!!

För mig är förfarandet systemet tvingar fram alltså i princip likvärdigt med att svära i kyrkan samtidigt som det åkallar mörksens makter över webbsidans underhållsmässighet under överskådlig framtid (med andra och mer profana ord: har man ett mallbaserat publiceringssystem i botten är det ren och skär idioti att lägga in utseendemanipulerande kod i innehållet på det sättet systemet som beskrivs tvingar fram eftersom man då blir tvungen att redigera om innehållet vid framtida malländringar, vilket blir både knöligt och dyrt)

Bättre lösning: Gå på upphovsmannen och påpeka konstruktionsfelet på webbplatsen istället så att du slipper blanda innehåll och utseende på det där viset. :bire

Tack för ditt svar! :)

Tyvärr blev det väldigt stora mellanrum mellan bilderna när jag gjorde som du föreslog. Jag lyckades dock lösa problemet genom att ta bort detta från varje paragraf som innehåller bild och text:

vspace=5

Dessutom ersatte jag:

<P>&nbsp;</P>

med:

<BR><BR>

Jag vet att det inte är korrekt att göra på det här sättet men nu visas sidan både lika och rätt i IE, Firefox och Opera.

Mvh Johan

EDIT: Tråden är löst, men vilket inlägg ska jag acceptera som slutgiltigt svar? :q

272 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
132 ms — deklarationer (db)
0 ms — hämta statistik (cache)
138 ms — hämta tråd, inlägg och bilagor (db)
131 ms — ändringar (db)