IPB

Willkommen, Gast ( Anmelden | Registrierung )

> unterschiedliche darstellung css navi (ff und ie)
claudettina
Beitrag 06.09.2006 - 10:01
Beitrag #1


is getting harder


Gruppe: User
Beiträge: 13
Mitglied seit: 06.09.2006
Mitglieds-Nr.: 6.258



Hallo, ich bin neu hier. Ich heiße Claudia, bin 41 und seit 1999 beschäftige ich mich mehr oder weniger intensiv mit Webseiten. Seit einiger Zeit mit Phase 5 (und ich habe jetzt erst entdeckt, dass es hier ein Forum gibt!)

Ich pfriemel schon eine ganze Weile mit einer Seite herum, ich hoffe, ich werde hier eine Lösung finden. Ich habe dieses Menü benutzt (http://css.maxdesign.com.au/listamatic/horizontal05.htm) und farblich angepasst. Aber im IE wird der obere Rand der Buttons nicht angezeigt, ich kann machen, was ich will. Zur Veranschaulichung habe ich mal die Dateien in ein Testverzeichnis hochgeladen. http://www.claudiafinke.de/can06.html (ist die Originaldatei) ist so, wie es online ist, bei http://www.claudiafinke.de/test/index.html ist die Tabellenzeile höher, sodass man den fehlenden Rand besser sieht und bei http://www.claudiafinke.de/test/index_tes.html habe ich einen dicken Rand oben definiert, der aber im IE auch nicht angezeigt wird! Ich habe *keine* Ahnung, was hier passiert - hat irgendjemand eine Idee?

Danke...
Claudia
Go to the top of the page
 
+Quote Post
 
Start new topic
Antworten
Thomas
Beitrag 06.09.2006 - 10:22
Beitrag #2


Nachschlagewerk des Orakels
Gruppensymbol

Gruppe: Mods
Beiträge: 955
Mitglied seit: 29.08.2006
Wohnort: Frankfurt am Main
Mitglieds-Nr.: 6.217



Hallo Claudia, willkommen im Forum.

Zuallererst: Deine Originalseite ist doch recht umfangreich. Grundsätzlich würde ich empfehlen, nicht ganz so viele Thumbnails auf eine Seite zu stellen, ich hab (und einige andere wahrscheinlich auch wink.gif) zwar DSL, aber dennoch - aber das war ja nicht die Frage.
Im IE klatschen auf der Originalseite die Registerreiter direkt oben an den Rand, während im FF da noch einiges an Platz ist. Zudem fällt mir im IE noch auf, dass bei der Scroll-Leiste für die Thumbnails Vorder- und Hintergrundfarbe wohl identisch sind - ich sehe da zumindest nicht, wo ich mich gerade befinde (im FF, der das Einfärben nicht erlaubt, ist alles sichtbar).

Ich sehe aber dein Problem auf den Testseiten und guck es mir mal an ...
Go to the top of the page
 
+Quote Post
Thomas
Beitrag 06.09.2006 - 11:04
Beitrag #3


Nachschlagewerk des Orakels
Gruppensymbol

Gruppe: Mods
Beiträge: 955
Mitglied seit: 29.08.2006
Wohnort: Frankfurt am Main
Mitglieds-Nr.: 6.217



Meine Reduktion ergab folgenden HTML-Code
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
/* Main Style Sheet */
body {
padding: 10;
}
#navlist {
padding: 3px;
}
#navlist li {
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
border: 1px solid #bda584;
}
-->
</style>
</head>
<body>
<div>
<ul id="navlist">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>

</body>
</html>
Damit lässt sich das Problem des verschwindenden oberen Randes prüfen: Im FF ist er da, im IE nicht. Auslöser scheint dass Padding des A-Tags zu sein. Ändere ich das nämlich auf
HTML
#navlist li a {
padding: 1px 0.5em;
border: 1px solid #bda584;
}
ist auch der Rand da. Und verwende ich dann einen breiteren Rand
HTML
#navlist li a {
padding: 1px 0.5em;
border: 5px solid #bda584;
}
sehe ich auch, was der IE macht: Er schneidet den Rand vom A-Tag oben ab (anscheinend vergrößert sich das LI-Tag nicht entsprechend). Keine Ahnung, ob's am Box-Border-Modell liegt oder an etwas anderem, aber vielleicht kannst du damit ja schon mal arbeiten, ich finde, es sieht auch mit einem Padding von 1px noch gut aus.



Zusatz für Interessierte: Beim unteren Rand gibt es das Problem nicht
HTML
#navlist li a {
padding: 1px 0.5em 10px 0.5em;
border: 5px solid #bda584;
}
macht unten brav ein Padding von 10px ohne irgendwo am unteren Rand etwas abzuschneiden.

Würde mich freuen, wenn jemand noch mehr zu des Rätsels Lösung beitragen kann.
Go to the top of the page
 
+Quote Post
Thomas
Beitrag 06.09.2006 - 14:10
Beitrag #4


Nachschlagewerk des Orakels
Gruppensymbol

Gruppe: Mods
Beiträge: 955
Mitglied seit: 29.08.2006
Wohnort: Frankfurt am Main
Mitglieds-Nr.: 6.217



Noch ein Tipp: Wenn du im obersten Quellcode von mir die Liste mehrfach untereinander setzt
HTML
<div>
<ul id="navlist">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
<div>
<ul id="navlist">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
<div>
<ul id="navlist">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
wird nur bei der obersten der obere Rand gekappt. Die unteren beiden erscheinen komplett mit Rand. Vielleicht kommst du ja auch damit auf eine Lösung des Problems. Sag mir bitte mal, wie es ausgegangen ist.


Und mit
HTML
#navcontainer {
padding: 1px 0px;
}
sollte es auch für die erste Liste funktionieren.


Sofern du die Liste so
HTML
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
formatierst.


Und dann noch
HTML
#navlist {
margin: 0px;
}
dann sollte es sich einigermaßen perfekt in den Rest der Seite einfügen.
Go to the top of the page
 
+Quote Post

Beiträge in diesem Thema
- claudettina   unterschiedliche darstellung css navi (ff und ie)   06.09.2006 - 10:01
- - Thomas   Hallo Claudia, willkommen im Forum. Zuallererst: ...   06.09.2006 - 10:22
|- - Thomas   Meine Reduktion ergab folgenden HTML-CodeHTML<...   06.09.2006 - 11:04
|- - Thomas   Noch ein Tipp: Wenn du im obersten Quellcode von m...   06.09.2006 - 14:10
|- - Thomas   Und nach einem letzten Test nochmal in einem ganze...   06.09.2006 - 16:01
|- - claudettina   Boh. Vielen Dank für diese superschnelle Antwort, ...   06.09.2006 - 19:06
|- - claudettina   So, ich hab jetzt mal lokal ein bisschen rumgespie...   07.09.2006 - 7:10
|- - Thomas   Jepp, für deine Liste war wie geschrieben nur dasH...   07.09.2006 - 7:36
- - Conny   Moin, es ist halt mühsam sich (im Quelltext) durc...   07.09.2006 - 8:23
|- - Thomas   ZITAT(Conny @ 07.09.2006 - 9:23) es ...   07.09.2006 - 8:37
|- - claudettina   Das war mir fast klar, dass hier eine Tab vs Div-D...   07.09.2006 - 8:44
||- - Thomas   ZITAT(claudettina @ 07.09.2006 - 9:4...   07.09.2006 - 9:00
|- - Conny   Hallo, ZITAT(Thomas @ 07.09.2006 - 7...   07.09.2006 - 11:16
|- - claudettina   Huppsala! Jetzt habe ich eine Seite mal spaßes...   07.09.2006 - 18:00
- - Conny   Hi Claudia, abhilfe für FF, direkt nach dem body-T...   07.09.2006 - 21:34
|- - Thomas   Naja, CENTER ist ja deprecated. Ein allgemeines Ve...   08.09.2006 - 9:49
|- - Conny   Hallo, ZITAT(Thomas @ 08.09.2006 - 8...   08.09.2006 - 16:19
|- - Thomas   ZITAT(Conny @ 08.09.2006 - 17:19) Im...   08.09.2006 - 19:19
- - Auge   Hallo Standardkonform ist das zentrierte Anze...   09.09.2006 - 0:37


Reply to this topicStart new topic
4 Besucher lesen dieses Thema (Gäste: 4 | Anonyme Besucher: 0)
0 Mitglieder:

 



RSS Vereinfachte Darstellung Aktuelles Datum: 25.05.2025 - 6:56

taschenkalender
expertise-panel IPS Driver Error

IPS Driver Error

There appears to be an error with the database.
You can try to refresh the page by clicking here