✔ Welche Methode ist die bessere?

Okay, falls es sich z.B. um das Hintergrundbild handelt, heißt die erweiterte Regel so:

CSS: 
#Menu ul li ul li
{
   ...
    background-image:none;
}
 
Wenn man mit der Maus auf "Wiki" zeigt, öffnet sich das Untermenü. Dort wird das CSS von "#Menu_Inline ul li" mitgeladen. Denn es wird die "nav_separator.png" geladen. Ein Blick mit Firebug zeigt leider das alle CSS (davor) mitgeladen werden. Es fällt optisch nur nicht sofort auf, weil z.B. "#Menu ul li ul li" eine höhere Stellung als "#Menu ul li" hat. Schwer zu erklären.

http://jsfiddle.net/F96Ph/

Ist jetzt etwas provisorisch aber man sieht den Fehler. Daher habe ich mich damals auch für Kindselektoren entschieden, weil dann keine "Verwechslungen" vorkommen können. Aber der IE6 unterstützt dies nicht.
 
Bezüglich des Hintergrundbildes habe ich ja schon eben die Lösung gepostet ;)

Siehe hierzu http://jsfiddle.net/F96Ph/1/

Falls z.B. auch die height:30px-Regel dort nicht gelten soll, würde sie dann height:auto lauten.

Ergo: Alle unerwünscht vererbten Regeln müssten auf diese Weise überschrieben werden.

Naja, und wenn du es dann doch lieber beim Kind-Selektor belassen und IE6 mit ins Boot nehmen willst, greifst du eben auf meinen Tipp in Post #4 zurück:

spicelab hat gesagt.:
Wenn tatsächlich noch seine Vorgänger (IE5 / IE6) berücksichtigt werden sollen, wäre hier ie7-js das Hilfsmittel.
Zum Vergrößern anklicken....

Was bzgl. von li:hover ul {display:block} zum Anzeigen der versteckten Submenüebene sowieso vonnöten wäre, da er die :hover-Pseudoklasse von Natur aus ausschließlich auf das <a>-Element anwendet.

Fertitsch :)
 
Zuletzt bearbeitet:
Es wird nur eines davon ins Dokument geladen - am besten gleich IE9.js ;)

https://code.google.com/p/ie7-js/ hat gesagt.:
Usage

IE7.js

Upgrade MSIE5.5-6 to be compatible with MSIE7.
HTML: 
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->

IE8.js

Upgrade MSIE5.5-7 to be compatible with MSIE8.
HTML: 
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
You do not need to include IE7.js if you are using IE8.js

IE9.js

Upgrade MSIE5.5-8 to be compatible with modern browsers.
HTML: 
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
You do not need to include IE7/IE8.js if you are using IE9.js
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Ich hätte noch eine Frage. :)

HTML: 
      <div id="Logo">
         <div>
            <div>
               <a href="index.php" title="Startseite"></a>
            </div>
            <div>
               <h1>Webseite</h1>
            </div>
            <div>
               <span><a href="impressum.html">Impressum</a></span>
               <span><a href="impressum.html">Impressum</a></span>
               <span><a href="impressum.html">Impressum</a></span>
               <span><a href="impressum.html">Impressum</a></span>
            </div>
         </div>
      </div>

CSS: 
#Logo
{
	border-width: 0px 1px 0px 1px;
	border-style: solid;
	border-color: #1D3B57;
}

#Logo > Div
{
	width: 100%;
	height: 105px;
	display: block;
	position: relative;
	background-color: #325D8C;
}

#Logo > Div > Div:nth-child(1)
{
	background-image: url("Sprites.png");
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-color: rgba(0, 0, 0, 0);
	display: inline-block;
	width: 320px;
	height: 105px;
}

#Logo > Div > Div:nth-child(1)
{
	background-position: 0px -95px;
}

#Logo > Div > Div:nth-child(1) a:link
{
	display: block;
	width: 320px;
	height: 105px;
}

#Logo > Div > Div:nth-child(2)
{
	position: absolute;
	top: 2px;
	right: 2px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

#Logo > Div > Div:nth-child(2) h1
{
	padding: 2px 5px 0px 0px;
	margin: 0px 0px 0px 0px;
	color: #FFFFFF;
	text-decoration: none;
	font: 600 8pt 'Open Sans';
}

#Logo > Div > Div:nth-child(3)
{
	position: absolute;
	bottom: 2px;
	right: 5px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

#Logo > Div > Div:nth-child(3) a:link,
#Logo > Div > Div:nth-child(3) a:visited,
#Logo > Div > Div:nth-child(3) a:active,
#Logo > Div > Div:nth-child(3) a:focus
{
	color: #FFFFFF;
	text-decoration: none;
	font: 600 8pt 'Open Sans';
}

#Logo > Div > Div:nth-child(3) a:hover
{
	color: #FFFFFF;
	text-decoration: underline;
	font: 600 8pt 'Open Sans';
}

#Logo > Div > Div:nth-child(3) > span
{
	margin-left: 10px;
}

Mache ich das so richtig? Das System gefällt mir SEHR!
 
Ist es denn Empfehlenswert? Was hällst Du davon?

Wenn ich mir jetzt die Arbeit machen (neues Design) dann möchte ich es a) richtig b) modern und c) Seo technisch gestalten.
 
Nun, wenn mehrere gleiche Elemente unterschiedliche Formatierungen erhalten sollen, ist das die zu empfehlende Technik, die das Hinzufügen von zusätzlichen ID- oder Klassen-Bezeichnern erspart :)
 
Können denn Pseudoklassen zu Fehlern führen? Für mich ist das alles Neuland. :D Vom Gefühl: Geil! Aber da ich nur Hobby-Programmierer bin, weiss ich nicht genau was ich eigentlich tuhe...

CSS: 
#Sidebar > div:nth-child(2) span
{
	line-height: 50%;
	vertical-align: middle;
}

#Sidebar > div:nth-child(2) span:nth-child(1) a:link,
#Sidebar > div:nth-child(2) span:nth-child(1) a:visited,
#Sidebar > div:nth-child(2) span:nth-child(1) a:active,
#Sidebar > div:nth-child(2) span:nth-child(1) a:focus
{
	color: #2C5687;
	text-decoration: none;
	font: 10pt 'Open Sans';
	font-weight: 600;
}

#Sidebar > div:nth-child(2) span:nth-child(1) a:hover
{
	color: #2C5687;
	text-decoration: underline;
	font: 10pt 'Open Sans';
	font-weight: 600;
}

Es funktioniert! Aber mein Gefühl sagt das nicht jeder Browser damit umgehen kann. Muss ein Browser CSS3-Fähig sein?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück