✔ CSS-Formatierungen gehen beim rumklicken verloren

Silverboy · 9. November 2006

Hallo Leute.

Ich hoffe ihr könnt mir helfen. Folgendes Problem:
Ich habe mir eine Seite mit CSS aufgebaut. Die Dateien(3 Stück) mit den CSS-Formatierungen habe ich mit @import url direkt in die jeweilige Seite eingebunden.
Navigiere ich mich jetzt durch die Seiten, geht bei manchen Klicks die Schriftformtierung verloren. Ich habe keine Ahnung woran das liegen könnte. Es ist auch nicht so, dass das immer bei der gleichen Seite passiert und aktualisiere ich die Seite, werden die Klassen auch wieder korrekt gezogen. Jemand ne Idee was das sein könnte?

Kann es vielleicht daran liegen, dass ich mehrere CSS-Dateien verwende und die direkt in die HTML-Seite einbinde? Hab schon mal gesehen das in die HTML-Datei nur eine CSS-Datei eingebunden wird in der dann aber mehrere weitere CSS-Dateien eingebunden werden.
Ach ja, sollte vielleicht noch erwähnen, dass ich das Problem bis jetzt lediglich beim Firefox beobachten konnte...

Grüße
Marco

damonn · 9. November 2006

du kannst deine Stylesheets ruhig auf mehrere Dateien verteilen, wenn es deiner Übersichtlichkeit dient...

nur musst du halt die css-file(s) in den <head>-tag jeder html folgendermaßen einbinden:

Code:

<link rel="stylesheet" type="text/css" href="Beispiel1.css">
<link rel="stylesheet" type="text/css" href="Beispiel2.css">
<link rel="stylesheet" type="text/css" href="Beispiel3.css">
usw.

die kannst du auch mit einer php-funktion ausgeben lassen...

Silverboy · 9. November 2006

Hi damonn.

Danke für Deine Antwort aber leider ist das nit die Lösung meines Problems(wäre auch zu schön gewesen...). Ich habe jetzt mal probehalber die CSS-Dateien mit <link eingebunden aber dennoch gehen die Schriftformatierungen beim navigieren verloren. Bin echt am verzweifeln

Grüße
Marco

Gumbo · 9. November 2006

Sind die Dokumente denn alle valid?

Maik · 9. November 2006

Ein Blick in den Quelltext der Seite

wäre hilfreich, um der Ursache auf den Grund gehen zu können.

Oder gibt es evtl. eine Online-Version der Seite, um sie direkt betrachten zu können?

Silverboy · 11. November 2006

Hi.

Ich hab hier mal den Quellcode einer dieser Seiten bei denen die Formatierung im FireFox manchmal verloren geht. Hab jetzt erstmal nur den per PHP erzeugten HTML-Code. Falls gewünscht poste ich auch noch die CSS-Dateien.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<title></title>
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="" />
<script language="JavaScript1.3" type="text/javascript" src="./js/tools.js"></script>
<style type="text/css">
<!--
@import url(./css/attribs.css);
@import url(./freizeit/css/freizeit.css);
@import url(./freizeit/css/topsite.css);
-->
</style>
</head>

<body>
<div id="page-container">
    <div id="seitennavigation_main">
        <a href="index.php?seite=index&bereich=sonstiges&PHPSESSID=b511121937c791a21b574add026d801d" title="Sonstiges"><img src="./images/bereich_sonstiges_off.gif" onMouseOver="this.src='./images/bereich_sonstiges_on.gif';" onMouseOut="this.src='./images/bereich_sonstiges_off.gif';" border="0" style="position:absolute; top:0px; left:-35px;"></a><br>
        <a href="index.php?seite=index&bereich=lifestyle&PHPSESSID=b511121937c791a21b574add026d801d" title="Lifestyle"><img src="./images/bereich_lifestyle_off.gif" border="0" onMouseOver="this.src='./images/bereich_lifestyle_on.gif';" onMouseOut="this.src='./images/bereich_lifestyle_off.gif';" style="position:absolute; top:39px; left:-35px;"></a><br>
        <img src="./images/bereich_freizeit_on.gif" border="0" style="position:absolute; top:78px; left:-35px;">
    </div>
    <div id="header">
    	<div id="logo">
    	    <a href="index.php?PHPSESSID=b511121937c791a21b574add026d801d"><img src="./images/logo.gif" width="283" height="46" alt="" border="0"></a>

    	</div>
    	<div id="information">
            <div id="login">
    <form name="login_form" style="margin:0px;" method="post" action="index.php?seite=login&bereich=sonstiges&PHPSESSID=b511121937c791a21b574add026d801d">
        <table border="0" cellspacing="2" cellpadding="0">
            <tr>
                <td valign="bottom"><b>Login</b></td>
                <td valign="bottom" colspan="3"><b>Passwort</b></td>

            </tr>
            <tr>
                <td valign="bottom"><input type="text" class="itext1" name="nickname" size="10"></td>
                <td valign="bottom"><input type="password" class="itext1" name="passwort" size="10"></td>
                <td valign="bottom"><input type="submit" class="ibutton1" style="margin-top:3px;" value=" Go! "></td>
                <td valign="bottom"><a href="" class="link_7pt">Passwort vergessen?</a></td>
            </tr>
        </table>

    </form>
            </div>
    	</div>
    </div>
    <div id="line">
    </div>
    <div id="content">
        <div id="contentarea">
            <div id="menue">

                <ul>
                    <li style="width:150px;"><a class="deactive" title="Zu den Freizeitangeboten" href="index.php?seite=suche&bereich=freizeit&sub=0&PHPSESSID=b511121937c791a21b574add026d801d">Freizeit & Hobby</a></li>
                    <li style="width:90px;"><a class="active" title="Interessante Vereine kennenlernen" href="index.php?seite=vereine&bereich=freizeit&sub=3&PHPSESSID=b511121937c791a21b574add026d801d">Vereine</a></li>
                </ul>

            </div>
            <div id="submenue">
                    <a class="deactive" title="" href="index.php?seite=bars&bereich=freizeit&sub=1&subid=0&PHPSESSID=b511121937c791a21b574add026d801d">Bars &amp; Kneipen</a>&nbsp;&nbsp;&nbsp;|
                    <a class="deactive" title="" href="index.php?seite=suche&bereich=freizeit&sub=1&subid=1&PHPSESSID=b511121937c791a21b574add026d801d">Club</a>
            </div>
            <div id="siteheadline" class="text9"><h1>Clubbing</h1></div>
            <div id="content-left">

                <div class="boxtitle"></div>
                <div class="box"></div>
            </div>
            <div id="content-right">
                <div style="float:left; width:252px; height:223px; padding:0px; margin:0px; position:relative;">
                    <div style="height:20px; width:249px; background: #99CC33 url(./freizeit/images/hg_freizeitnav.gif); padding:3px 0 0 3px;"><h3>Bars & Kniepen</h3></div>
                    <div style="height:100px; width:100%; background: #FFFFFF; float:left;"><img src="./freizeit/images/box_bars_kneipen.jpg" border="0" alt="Bars & Kneipen"></div>
                    <div style="height:4px; width:170px; background: #99CC33; float:left; font-size:1px;"></div>

                    <div style="padding:5px; height:63px; width:242px; background: #FFFFFF; float:left;">
                        <span class="text_norm"><strong>Wenns ein bissl gem&uuml;tlicher sein soll</strong></span><br>
                    </div>
                    <div style="padding:0 5px 0 0; height:19px; width:247px; text-align:right; float:left; border-bottom:4px solid #99CC33;">
                        <a class="link5_b" href="index.php?seite=vereine_tanz&bereich=freizeit&sub=3&subid=0&PHPSESSID=b511121937c791a21b574add026d801d"><img src="../images/icons/arrow_fz.gif" border="0"> mehr Infos</a>

                    </div>
                </div>
                <div style="float:left; width:252px; height:223px; padding:0px; margin:0 0 0 20px; position:relative;">
                    <div style="height:20px; width:249px; background: #99CC33 url(./freizeit/images/hg_freizeitnav.gif); padding:3px 0 0 3px;"><h3>Clubs</h3></div>
                    <div style="height:100px; width:100%; background: #FFFFFF; float:left;"><img src="./freizeit/images/box_clubs2.jpg" border="0" alt="Clubs"></div>
                    <div style="height:4px; width:170px; background: #99CC33; float:left; font-size:1px;"></div>
                    <div style="padding:5px; height:63px; width:242px; background: #FFFFFF; float:left;">
                        <span class="text_norm"><strong>Party auf dem Dancefloor</strong></span><br>
                    </div>
                    <div style="padding:0 5px 0 0; height:19px; width:247px; text-align:right; float:left; border-bottom:4px solid #99CC33;">
                        <a class="link5_b" href="index.php?seite=vereine_tanz&bereich=freizeit&sub=3&subid=1&PHPSESSID=b511121937c791a21b574add026d801d"><img src="../images/icons/arrow_fz.gif" border="0"> mehr Infos</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
<div id="footer"><a class="footer" href="index.php?PHPSESSID=b511121937c791a21b574add026d801d">Home</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;<a class="footer" href="index.php?seite=impressum&bereich=main&PHPSESSID=b511121937c791a21b574add026d801d">Kontakt/Impressum</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;<a class="footer" href="index.php?seite=agbs&bereich=main&PHPSESSID=b511121937c791a21b574add026d801d">AGB</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;<a class="footer" href="#">Presse</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;<a class="footer" href="#">Jobs</a></div></div>
</body>
</html>

Grüße
Marco

Gumbo · 11. November 2006

Dann validiere das Dokument mal bitte.

Silverboy · 11. November 2006

Bin gerade dabei

Aber vielleicht kannst Du mir helfen. Habe ne ganze Menge Fehler ausgebessert und der Code sieht jetzt folgendermaßen aus:

Code:

<!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" xml:lang="de">
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<title></title>
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="" />
<style type="text/css">
<!--
@import url(./attribs.css);
@import url(./freizeit.css);
@import url(./topsite.css);
-->
</style>
</head>

<body>
<div id="page-container">
    <div id="seitennavigation_main">
        <a href="index.php?seite=index&amp;bereich=flirt&amp;PHPSESSID=b511121937c791a21b574add026d801d" title="Zum Single-Portal"><img src="./images/bereich_single_off.gif" onMouseOver="this.src='./images/bereich_single_on.gif';" onMouseOut="this.src='./images/bereich_single_off.gif';" style="position:absolute; top:0px; left:-35px;" alt="" /></a><br />
        <a href="index.php?seite=index&amp;bereich=lifestyle&amp;PHPSESSID=b511121937c791a21b574add026d801d" title="Zur lifestyle-Area"><img src="./images/bereich_lifestyle_off.gif" onMouseOver="this.src='./images/bereich_lifestyle_on.gif';" onMouseOut="this.src='./images/bereich_lifestyle_off.gif';" style="position:absolute; top:39px; left:-35px;" alt="" /></a><br />
        <img src="./images/bereich_freizeit_on.gif" alt="" style="position:absolute; top:78px; left:-35px;" />
    </div>
    <div id="header">
    	<div id="logo">
    	    <a href="index.php?PHPSESSID=b511121937c791a21b574add026d801d"><img src="./images/logo.gif" width="283" height="46" alt="" /></a>

    	</div>
    	<div id="information">
            <div id="login">
    <form name="login_form" style="margin:0px;" method="post" action="index.php?seite=login&amp;bereich=flirt&amp;PHPSESSID=b511121937c791a21b574add026d801d">
        <table border="0" cellspacing="2" cellpadding="0">
            <tr>
                <td valign="bottom"><b>Login</b></td>
                <td valign="bottom" colspan="3"><b>Passwort</b></td>

            </tr>
            <tr>
                <td valign="bottom"><input type="text" class="itext1" name="nickname" size="10" /></td>
                <td valign="bottom"><input type="password" class="itext1" name="passwort" size="10" /></td>
                <td valign="bottom"><input type="submit" class="ibutton1" style="margin-top:3px;" value=" Go! " /></td>
                <td valign="bottom"><a href="" class="link_7pt">Passwort vergessen?</a></td>
            </tr>
        </table>

    </form>
            </div>
    	</div>
    </div>
    <div id="line">
    </div>
    <div id="content">
        <div id="contentarea">
            <div id="menue">

                <ul>
                    <li style="width:150px;"><a class="deactive" title="Zu den Freizeitangeboten" href="index.php?seite=suche&amp;bereich=freizeit&amp;sub=0&amp;PHPSESSID=b511121937c791a21b574add026d801d">Freizeit &amp; Hobby</a></li>
                    <li style="width:110px;"><a class="active" title="Bars und Clubs in deiner Region" href="index.php?seite=clubbing&amp;bereich=freizeit&amp;sub=1&amp;PHPSESSID=b511121937c791a21b574add026d801d">Clubbing</a></li>
                    <li style="width:110px;"><a class="deactive" title="Zum ReiseBoard" href="index.php?seite=mitreise&amp;bereich=freizeit&amp;sub=2&amp;PHPSESSID=b511121937c791a21b574add026d801d">ReiseBoard</a></li>
                    <li style="width:90px;"><a class="deactive" title="Interessante Vereine kennenlernen" href="index.php?seite=vereine&amp;bereich=freizeit&amp;sub=3&amp;PHPSESSID=b511121937c791a21b574add026d801d">Vereine</a></li>
                </ul>

            </div>
            <div id="submenue">
                    <a class="deactive" title="Reiseziele in der Nähe" href="index.php?seite=wellness&amp;bereich=freizeit&amp;sub=1&amp;subid=0&amp;PHPSESSID=b511121937c791a21b574add026d801d">Bars &amp; Kneipen</a>&nbsp;&nbsp;&nbsp;|
                    <a class="deactive" title="Weiterentfernte Reiseziele" href="index.php?seite=suche&amp;bereich=freizeit&amp;sub=1&amp;subid=1&amp;PHPSESSID=b511121937c791a21b574add026d801d">Club</a>
            </div>
            <div id="siteheadline" class="text9"><h1>Clubbing</h1></div>
            <div id="content-left">

                <div class="boxtitle"></div>
                <div class="box"></div>
            </div>
            <div id="content-right">
                <div style="float:left; width:252px; height:223px; padding:0px; margin:0px; position:relative;">
                    <div style="height:20px; width:249px; background: #99CC33 url(./freizeit/images/hg_freizeitnav.gif); padding:3px 0 0 3px;"><h3>Bars &amp; Kniepen</h3></div>
                    <div style="height:100px; width:100%; background: #FFFFFF; float:left;"><img src="./freizeit/images/box_bars_kneipen.jpg" alt="Bars &amp; Kneipen" /></div>
                    <div style="height:4px; width:170px; background: #99CC33; float:left; font-size:1px;"></div>

                    <div style="padding:5px; height:63px; width:242px; background: #FFFFFF; float:left;">
                        <span class="text_norm"><strong>Wenns ein bissl gem&uuml;tlicher sein soll</strong></span><br />
                        Ihr wollt gem&uuml;tlich einen Cocktail schl&uuml;rfen? Wir haben die besten Locations f&uuml;r euch ausgesucht!
                    </div>
                    <div style="padding:0 5px 0 0; height:19px; width:247px; text-align:right; float:left; border-bottom:4px solid #99CC33;">
                        <a class="link5_b" href="index.php?seite=vereine_tanz&amp;bereich=freizeit&amp;sub=3&amp;subid=0&amp;PHPSESSID=b511121937c791a21b574add026d801d"><img src="../images/icons/arrow_fz.gif" alt="" /> mehr Infos</a>

                    </div>
                </div>
                <div style="float:left; width:252px; height:223px; padding:0px; margin:0 0 0 20px; position:relative;">
                    <div style="height:20px; width:249px; background: #99CC33 url(./freizeit/images/hg_freizeitnav.gif); padding:3px 0 0 3px;"><h3>Clubs</h3></div>
                    <div style="height:100px; width:100%; background: #FFFFFF; float:left;"><img src="./freizeit/images/box_clubs2.jpg" alt="Clubs" /></div>
                    <div style="height:4px; width:170px; background: #99CC33; float:left; font-size:1px;"></div>
                    <div style="padding:5px; height:63px; width:242px; background: #FFFFFF; float:left;">
                        <span class="text_norm"><strong>Party auf dem Dancefloor</strong></span><br />

                        Ob Salsa, HipHop. Ob Alleine oder als Paar. Tanzen macht Spaß und verbindet.
                    </div>
                    <div style="padding:0 5px 0 0; height:19px; width:247px; text-align:right; float:left; border-bottom:4px solid #99CC33;">
                        <a class="link5_b" href="index.php?seite=vereine_tanz&amp;bereich=freizeit&amp;sub=3&amp;subid=1&amp;PHPSESSID=b511121937c791a21b574add026d801d"><img src="../images/icons/arrow_fz.gif" alt="" /> mehr Infos</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
<div id="footer"><a class="footer" href="index.php?PHPSESSID=b511121937c791a21b574add026d801d">Home</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;<a class="footer" href="index.php?seite=impressum&amp;bereich=main&amp;PHPSESSID=b511121937c791a21b574add026d801d">Kontakt/Impressum</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;<a class="footer" href="index.php?seite=agbs&amp;bereich=main&amp;PHPSESSID=b511121937c791a21b574add026d801d">AGB</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;<a class="footer" href="#">Presse</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;<a class="footer" href="#">Jobs</a></div></div>
</body>
</html>

Dennoch bekomme ich vom Validator folgende Meldungen angezeigt:

Line 25 column 186: there is no attribute "onMouseOver".
.../bereich_single_off.gif" onMouseOver="this.src='./images/bereich_single_on.gi

Line 25 column 242: there is no attribute "onMouseOut".
.../bereich_single_on.gif';" onMouseOut="this.src='./images/bereich_single_off.g

Line 36 column 15: there is no attribute "name".
<form name="login_form" style="margin:0px;" method="post" action="index.php?

Kannst Du mir sagen was ich hier noch verbessern muss? Bin grad bissl überfordert...
Besten Dank!

Gumbo · 11. November 2006

In XHTML werden alle Attributbezeichner klein geschrieben. Und das name-Attribut wurde beim form-Attribut gestrichen, da es überflüssig ist.

Silverboy · 11. November 2006

Super! Vielen Dank! Jetzt ist es wenigstens mal valide. Werde jetzt mal beobachten, ob die Formatierungen immer noch verloren gehen wenn ich navigiere. Muss jetzt aber erstmal alle Seite nochmal anpacken

✔ CSS-Formatierungen gehen beim rumklicken verloren

Silverboy

Grünschnabel

damonn

Grünschnabel

Silverboy

Grünschnabel

Gumbo

Erfahrenes Mitglied

Maik

Silverboy

Grünschnabel

Gumbo

Erfahrenes Mitglied

Silverboy

Grünschnabel

Gumbo

Erfahrenes Mitglied

Silverboy

Grünschnabel

Neue Beiträge