Mehr als nur ein einfaches CSS Problem

[Delayne]

Hallo zusammen

Vor etwa 6 Wochen habe ich mit einer Ausbildung zur Fachinformatikerin für Anwendungsentwicklung begonnen. Mittlerweile habe ich ein eigenes Projekt bekommen, worüber ich mich ja durchaus freue, welches mich nur leider in den Wahnsinn treibt.

Ich soll eine bisher angefangene Webseite (eines ehemaligen Mitarbeiters) komplett neu Designen, an IE 7, IE8 und Firefox anpassen und später dann diverse Applikationen sowie Content einbauen.

Meine Kenntnisse über Webdesign sind bescheiden, bisher habe ich viel mit CMS gearbeitet, da die Webseiten meist für andere gemacht wurden. HTML-, CSS- und XML-Grundkenntnisse sind aber vorhanden. ASP.net und C# hatte ich bisher nicht gelernt aber mache täglich Fortschritte.

Das Problem an der Seite besteht nun darin, dass der IE 7 beim testen plötzlich Schriften ändert, die eigentlich auf der Masterpage und dem dazugehörigen Stylesheet festgelegt sind. Dies passiert aber nur wenn ich beim durchklicken der Seite die Sprache ändere.

In der Firma wo ich arbeite gibt es leider niemanden, der mehr CSS-Kenntnisse hat als ich. Und da die Seite in Asp.net und C# geschrieben ist, ist es leider auch absolut unmöglich einen Codeausschnitt zu posten, da ja alles ineinander verschachtelt ist und voneinander abhängig.

Ich suche nun jemanden, der sich mit mir über Messenger, Remote, Office Live Meeting oder was auch immer, evtl. gemeinsam diesem Problem widmen kann und mir zumindest bei der Fehlersuche und evtl. Lösungsansätzen helfen kann.

Ich weiß, das ist viel verlangt, aber momentan weiß ich mir nicht anders zu helfen.

Wer mehr infos braucht (bisherige Lösungsversuche etc) kann mir gerne ne PM schreiben oder mich im MSN-Messenger anschreiben.

Gruß

Evelyn

[Guybrush Threepwood]

Das einfachste in solchen Fällen ist die Webseite mit einem entsprechendem Tool im Browser zu analysieren und genau am entsprechenden Element nachzuschauen welcher Style sich da ändert, welche Dateien alle geladen wurden usw.

Für den IE gibst da die Internet Explorer Developer Toolbar welche im IE 8 aber schon direkt integriert ist (einfach F12 drücken).

Für den FireFox gibt es den Firebug der das Selbe bietet.

[Delayne]

Hi,

mit WebDeveloper, IE Developer Toolbar, Firebug und allem was man sonst so als tipp im Netz findet habe ich mich da schon durchgearbeitet. Es hat auch in vielen Punkten gut geholfen, leider nicht bei diesem Problem.

Ich vermute ja, dass es was mit der Vererbung bzw. den teilweise zuviel verschachtelten CSS Styles (vor allem innerhalb der ASP Anweisungen) zusammenhängt. Nur, abgesehen von 3 Seiten wird ja alles korrekt angezeigt. Und auch die 3 Problemseiten hängen an den gleichen Stylesheets. Ich häng mal 2 Screenshots an. Ich weiß, das man darüber keine Codefehler sehen kann, aber schaden kanns ja nicht.

Am liebsten würde ich ja sämtliche Styles aus den Seiten nehmen und sie nochmal ordentlich neu zusammenschreiben, aber das würde mein Quartalsziel sprengen, da es schlicht zuviele Seiten in der Solution gibt.

[Guybrush Threepwood]

Am liebsten würde ich ja sämtliche Styles aus den Seiten nehmen und sie nochmal ordentlich neu zusammenschreiben, aber das würde mein Quartalsziel sprengen, da es schlicht zuviele Seiten in der Solution gibt.

Aber so wie sich das anhört wird das das einzig vernünftige sein was du machen kannst. Wir haben hier schon einige ziemlich komplexe Webapplikationen geschrieben aber nirgendwo gab es bisher sovuiel CSS wie sich das bei dir anhört, also scheint da von Anfang an nicht vernünftig an das Projekt rangegangen zu sein.

[Delayne]

OMG

dann noch eine Frage, gibt es irgendein Tool oder eine Option bei Visual Studio (damit soll ich nämlich arbeiten) das automatisch sämtliche styles (id, class etc) entfernt?

Dann würd ich nämlich doch versuchen die Seite so zu retten, (aber vorher ein Backup sonst kann ich mich gleich :old). Angst hab ich allerdings vor den verschachtelten style angaben, die teilweise so aussehen.

<asp:ObjectDataSource ID="odsBestProduct" runat="server" EnableViewState="false"

                                            SelectMethod="GetBestProduct" TypeName="Product">

                                            <SelectParameters>

                                                <asp:Parameter Name="langID" Type="String" DefaultValue="EN" />

                                            </SelectParameters>

                                        </asp:ObjectDataSource>

                                        <asp:Repeater ID="rptBestProduct" runat="server">

                                            <ItemTemplate>

                                                <div style="margin-top: 7px; width: 160px;">

                                                    <div style="float: left; width: 120px; font-size: 11px;">

                                                        <img alt="" src="images/best.gif" width="52px" height="34px" style="float: left" />

                                                        <center style="clear: both">

                                                            <a style="color: #980000; line-height: 9px;" runat="server" href='<%# "~/default.aspx?i=" + Convert.ToString(Eval("ProduktId")) %>'>

                                                                <%# Eval("Produktbeschreibung").ToString()%></a>

                                                        </center>

  <asp:Repeater ID="rptNews" runat="server" EnableViewState="false">

                                    <ItemTemplate>

                                        <li style="border-bottom: 1px dotted gray; margin-bottom: 5px; <%--text-align: left;

                                            --%>">

                                            <asp:HyperLink ID="HyperLink4" Font-Underline="false" NavigateUrl='<%# "~/default.aspx?n=" + Convert.ToString(Eval("NewsID")) %>'

                                                ForeColor="#980000" Style="margin: 10px; color: #980000" runat="server">

                                    <%# Eval("Title")%>

                                            </asp:HyperLink>

                                        </li>

                                    </ItemTemplate>

                                </asp:Repeater>

Ist ja nicht so, dass man alles einfach der Übersicht halber in ein Stylesheet geschrieben hat. Sondern auf 50 Seiten verteilt ein Mischmasch gemacht hat, welches nun gerettet werden soll.

[Guybrush Threepwood]

Nein so eine Option kenne ich leider nicht. Du könntest höchstens versuchen mit der automatischen Textersetzung zu arbeiten.

Was meinst du jetzt genau mit verschachtelten Styles?

Also wir haben das auch immer so gemacht das Styles die nur zu einem Element gehören und nicht Themeabhängig sind direkt am Element dran stehen und alles was sich bei einem Themewechsel ändern soll oder von mehreren Elementen genutzt wird in einer CSS Datei steht.

[Delayne]

Uff, das zu erklären ist nun recht schwer.

Ich weiß nur, dass die 2 Codeschnipsel die ich oben gepostet habe, im gesamtbild dann nicht nur den eingebundenen style annehmen sondern zusätzlich noch andere, im Firebug hab ich das immer recht gut sehen können.

Grundsätzlich würde ich auch, einem einzelnen div z.B. statt der gewohnten Content Schriften die auf allen Seiten gleich sind, z.B. über einen direkten Style Befehl sagt, dass dieser bereich anders aussehen soll. Soweit ja auch kein Problem.

Aber ich hab auch schon erlebt, dass ein Bereich so aussah

 <ul class="list" style="list-style-type:none; font-family:Verdana; color:Blue;">

                                <li style="border-bottom: 1px dotted gray; height: 40px; width: 150px;">

                                    <img alt="Solutions" runat="server" src="~/images/solutions.gif" style="float: left;

                                        width: 40px;" />

                                    <span style="font-size: 13px;">

                                        <br />

                                        <a href="#" style="color: #980000;">Solutions</a>            </span>

                                </li>

                                <li style="border-bottom: 1px dotted gray; height: 40px; width: 150px;">

                                    <img alt="Sales" runat="server" src="~/images/sales.gif" style="float: left; width: 40px;" />

                                    <span style="font-size: 13px;">

                                        <br />

                                        <a href="#" style="color: #980000;">Service & Support</a></span> </li>

                                <li style="border-bottom: 1px dotted gray; height: 40px; width: 150px;">

                                    <img alt="Customer Service" runat="server" src="~/images/customer.gif" style="float: left;

                                        width: 40px;" />

                                    <span style="font-size: 13px;">

                                        <br />

                                        <a href="#" style="color: #980000;">Customer Center</a></span> </li>

                                <li style="border-bottom: 1px dotted gray; height: 40px; width: 150px;">

                                    <img alt="products" runat="server" src="~/images/forum.gif" style="float: left; width: 40px;" />

                                    <span style="font-size: 13px;">

                                        <br />

                                        <a href="#" style="color: #980000;">Forum</a>             </span>

                                </li>

                            </ul>

und das dazugehörige stylesheet:

.class ul {

height : 5px;

background : #29a4e1;

list-style : none;

}

.class li {

display : inline;

list-style : none;

}

.list{

list-style-type:circle;

color:navy;

font-family:Verdana;

}

Was im IE zu einigen lustigen Erscheinungen führte. Und meines erachtens völlig unsinnig war. Mittlerweile sieht der Bereich ja wie man auf dem einen Screenshot sehen kann ganz gut aus, leider hält sich das eben nicht auf allen Seiten.

[Guybrush Threepwood]

Ich weiß nur, dass die 2 Codeschnipsel die ich oben gepostet habe, im gesamtbild dann nicht nur den eingebundenen style annehmen sondern zusätzlich noch andere, im Firebug hab ich das immer recht gut sehen können.

Ja das ist normal ein Element erbt auch immer Styles von seinem ParentElement.