Mal wieder Probleme mit dem schönen IE6

Pulli · Post by **Pulli** » Tue Mar 17, 2009 8:36 am

Hallo Zusammen,

bin gerade dabei eine Seite neu zu erstellen und auf CMSms umzustellen.

Hier der Link

soweit so gut.

Allerdings wird die Seite im IE6 nicht korrekt dargestellt. Die rechte Navi rutscht nach unten, und auch der Content steht zu weit rechts.

Leider weiß ich gar nicht genau, wo der Fehler liegt. Eventuell habt ihr ja nen Tip für mich...

hier mal das Template:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{sitename}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{metadata}
{stylesheet}
</head>
</__body>
<div id="container">
  <div id="left_column">
    <div id="title"><img src="uploads/images/karate/logo.jpg" alt="" width="100" height="100" />{sitename}</div>
    <div id="header"  class="headerimage {get_content_props fields="extra1"}">
      <div id="header_slogan"></div>
    </div>
    <div id="left_content">
  <h1>{title}</h1>
  {content}
    </div>
  </div>
  <div id="right_column">
 <div class="domain">
{cms_selflink page='Startseite' text='Startseite'} | {cms_selflink page='Kontakt' text='Kontakt'} | {cms_selflink page='Impressum' text='Impressum'}
</div>  
    <div id="menucolumn">
      <div class="menu_list">
{menu template='karatenavi' number_of_levels='1' collapse='1'}
      </div>
    </div>
    <div id="right_content">
{content block='Extratext'}
    </div>
    <div id="contact">{global_content name='kontakt'}
    </div>
  </div>
  <div id="footer">{global_content name='footer'}</div>
</div>
<__body>
</__html>

Und hier die CSS

Code: Select all

body{
	margin: 0 ;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.4em;
	color: #444444;
	background: #ffffff url(uploads/images/karate/body_bg.jpg)  repeat-x;
}
a:link, a:visited, a:active { color: #848683; text-decoration: none; font-weight: normal;} 
a:hover { color: #848683; text-decoration: underline; font-weight: normal; }

h1 {
	margin:0px;
	font-weight: bold;
	font-size: 22px;
	color:#39433A;
}
h1 span {
	font-size: 14px;
	color: #666666;
	line-height: 1.6em;
}
h2 {
	font-weight: bold;
	margin-bottom: 0px;
	font-size: 14px;
	color:#39433A;
	padding-top: 20px;
}

#container {
	margin: auto;
	width: 770px;
	background: url(uploads/images/karate/container_bg.jpg) repeat-y;
}

#left_column {
	float: left;
	width: 483px;
}
#title {
	float: left;
	padding-top: 10px;
	padding-left: 15px;
	padding-bottom: 10px;
	height: 100px;
	font-size: 24px;
	font-weight: bold;
	color: #39433A;
	line-height: 1.6em;
}

#header {
	float: left;
	clear: left;
	width: 483px;
	height: 210px;
}

.headerimage {
	background: url(uploads/images/karate/header1.jpg) no-repeat;
}

.header2 {
	background: url(uploads/images/karate/header2.jpg) no-repeat;
}

.header3 {
	background: url(uploads/images/karate/header3.jpg) no-repeat;
}

.header4 {
	background: url(uploads/images/karate/header4.jpg) no-repeat;
}

.header5 {
	background: url(uploads/images/karate/header5.jpg) no-repeat;
}

.header6 {
	background: url(uploads/images/karate/header6.jpg) no-repeat;
}

.header7 {
	background: url(uploads/images/karate/header7.jpg) no-repeat;
}

.header8 {
	background: url(uploads/images/karate/header8.jpg) no-repeat;
}

.header9 {
	background: url(uploads/images/karate/header9.jpg) no-repeat;
}

#header_slogan {
	width: 483px;
	float: left;
	margin-top: 162px;
	color: #000;
	font-weight: bold;
	text-align: center;
}
#left_content {
	float: left;
	margin: 30px 30px 30px 30px;
	padding-left: 10px;
	padding-bottom: 10px;
	width: 413px;
	text-align: left;
}

#right_column {
	float: right;
	width: 287px;
}
.domain {
	float: left;
	width: 262px;
	padding-top: 10px;
       padding-bottom: 88px;
	padding-left: 25px;
	background: #FFFFFF;
	color:#006633;
	height: 20px;
}
#menucolumn {
	float: left;
	background: #3a3f3a;
	height: 210px;
	width: 287px;
	border-bottom: solid 3px #ffffff;
	border-top: solid 2px #ffffff;
}
.menu_list {
	float: left;
	width: 230px;
	padding-left: 15px;
}
.menu_list ul {
	list-style-type: none;
	margin: 10px;
	padding: 0;
	width: 213px;
}
.menu_list li a {
	display: block;
	height: 24px;
	padding-top: 4px;
	color: #ffffff;
	padding-left: 5px;
	background: url(uploads/images/karate/menu_button.jpg);
}
.menu_list li a:hover, .menu_list li .selected {
	color: #ffffff;
text-decoration: none;
	background: url(uploads/images/karate/menu_hover.jpg);
}
#right_content {
	float: left;
	width: 200px;
	padding-left: 27px;
	padding-bottom: 20px;
	text-align: left;
}
#right_content ul {
	list-style-type: disc;
}
#right_content a{
	font-weight: normal;
	color: #333333;
	text-decoration: underline;
	line-height: 20px;
}
#right_content a:hover {
	text-decoration: underline;
}
#contact {
	width: 225px;
	padding-left: 30px;
        padding-top: 5px;
        height: 93px;
	float: left;
	color: #fff;	
	border-top: solid 3px #FFFFFF;
	background: url(uploads/images/karate/kontakt.jpg) repeat-x;
}
#contact img {
	float: right;
}

#contact a {
font-weight: normal;
	color: #FFFFFF;
}



#footer {
	clear: both;
	width: 760px;
	height: 32px;
	padding-top: 10px;
        padding-left: 10px;
	text-align: left;
	background: #848683;
	font-weight: normal;
	color: #FFFFFF;
}
#footer a {
	color: #FFFFFF;
}

VIELEN DANK für Eure Hilfe

antibart · Post by **antibart** » Tue Mar 17, 2009 8:45 am

Ohne jetzt die den Code genaustens studiert zu haben:

Das klingt verdächtig nach dem "double-float margin Bug"

Der IE6 erzeugt diesen Bug bei gefloateten Divs: er rechnet die doppelte Pixelmenge zum Abstand zw den Divs hinzu. Also aus "margin-left:50px" wird "margin-left:100px" - dadurch bricht der float natürlich um, wenn ihm der Platz zum floaten fehlt.

Diesen Bug kann man beheben, in dem man in den css ein "display: inline;" in die gefloateten DIVs einfügt.

Möglicherweise behebt das dein Problem.

...

Pulli · Post by **Pulli** » Tue Mar 17, 2009 9:41 am

antibart wrote: Ohne jetzt die den Code genaustens studiert zu haben:

Das klingt verdächtig nach dem "double-float margin Bug"

Der IE6 erzeugt diesen Bug bei gefloateten Divs: er rechnet die doppelte Pixelmenge zum Abstand zw den Divs hinzu. Also aus "margin-left:50px" wird "margin-left:100px" - dadurch bricht der float natürlich um, wenn ihm der Platz zum floaten fehlt.

Diesen Bug kann man beheben, in dem man in den css ein "display: inline;" in die gefloateten DIVs einfügt.

Möglicherweise behebt das dein Problem.

...

oh das war mir nicht bekannt...aber danke das hat geholfen...habe jetzt zwar oben noch einen kleinen versatz drin, aber da muss ich nochmal schauen...

allerdings ist mir jetzt noch etwas aufgefallen...im ie6 werden die angeklickten links des menüs anschließend in einem grau ton dargestellt...sollte jedoch alles in weiß bleiben...kann leider nicht erkennen, woher die andere farbe kommt...

hier nochmal der entsprechende abschnitt in der css:

Code: Select all

#menucolumn {
display: inline;
	float: left;
       color: #ffffff;
	background: #3a3f3a;
	height: 210px;
	width: 287px;
	border-bottom: solid 3px #ffffff;
	border-top: solid 2px #ffffff;
}
.menu_list {
display: inline;
	float: left;
	width: 230px;
	padding-left: 15px;
	color: #ffffff;
}
.menu_list ul {
	list-style-type: none;
	margin: 10px;
	padding: 0;
	width: 213px;
	color: #ffffff;
}
.menu_list li a {
	display: block;
	height: 24px;
	padding-top: 4px;
	color: #ffffff;
	padding-left: 5px;
	background: url(uploads/images/karate/menu_button.jpg);
}
.menu_list li a:hover, .menu_list li .selected{
	color: #ffffff;
text-decoration: none;
	background: url(uploads/images/karate/menu_hover.jpg);
}

antibart · Post by **antibart** » Tue Mar 17, 2009 10:53 am

Das ist der falsche Abschnitt.

Den Grauton hast Du oben selbst definiert....

Code: Select all

a:link, a:visited, a:active { color: #848683; text-decoration: none; font-weight: normal;} 
a:hover { color: #848683; text-decoration: underline; font-weight: normal; }

Ausnahmen von der globalen Regel müssen xplizit angegeben werden.

Du musst die klasse selected auf den Link anwenden, denn die Klasse allein überschreibt die Regel nicht.

also a.selected {color:#fff;}

am besten sogar auf das menu-div bezogen, wenn es noch später weitere Abweichungen gegen sollte (zB Submenus):

#menucolumn a.selected {color:#fff;}

Pulli · Post by **Pulli** » Tue Mar 17, 2009 11:16 am

antibart wrote: Das ist der falsche Abschnitt.

Das grau wird von deinen oberen Link-Styles geerbt....
Code: Select all
a:link, a:visited, a:active { color: #848683; text-decoration: none; font-weight: normal;} 
a:hover { color: #848683; text-decoration: underline; font-weight: normal; }
Ausnahmen von der globalen Regel müssen xplizit angegeben werden.

Du musst die klasse selected auf den Link anwenden, denn die Klasse allein überschreibt die Regel nicht.

also a.selected {color:#fff;}

am besten sogar auf das menu-div bezogen, wenn es noch weitere Abweichungen gegen sollte (zB Submenus):

#menucolumn a.selected {color:#fff;}

auf den link anwenden ? wie meinst du das genau ? im template oder wie ? sorry steh mal wieder auf dem schlauch... $:-\$

hier nochmal die aktuelle css

Code: Select all

#menucolumn {
display: inline;
	float: left;
       color: #ffffff;
	background: #3a3f3a;
	height: 210px;
	width: 287px;
	border-bottom: solid 3px #ffffff;
	border-top: solid 2px #ffffff;
}

#menucolumn a.selected {color:#fff;}

a.selected {color:#fff;}

.menu_list {
display: inline;
	float: left;
	width: 230px;
	padding-left: 15px;
	color: #ffffff;
}
.menu_list ul {
	list-style-type: none;
	margin: 10px;
	padding: 0;
	width: 213px;
	color: #ffffff;
}
.menu_list li a {
	display: block;
	height: 24px;
	padding-top: 4px;
	color: #ffffff;
	padding-left: 5px;
	background: url(uploads/images/karate/menu_button.jpg);
}

.menu_list li a:hover, .menu_list li a.selected, menu_list a:visited {
	color: #ffffff;
text-decoration: none;
	background: url(uploads/images/karate/menu_hover.jpg);
}

antibart · Post by **antibart** » Tue Mar 17, 2009 11:26 am

Code: Select all

#menucolumn a.selected {color:#fff;}

a.selected {color:#fff;}

ist doppelt gemoppelt ...

auf das div brauchts du es nur anwenden, wenn es noch später weitere abweichungen geben könnte. Das war nur ein Tipp,der das handling von mehreren Menüebenen mit verschiedenen Styles vereinfacht

Also, hier hast Du deine globalen LInk styles angeben

Code: Select all

a:link, a:visited, a:active { color: #848683; text-decoration: none; font-weight: normal;} 
a:hover { color: #848683; text-decoration: underline; font-weight: normal; }

D.H. Alle Links und besuchte Links usw haben die Farbe grau, sind nicht unterstrichen und nicht fett.
Ausnahme ist hover, der ist unterstrichen...

Das gilt jetzt grundsatzlich für alle LInks auf deiner Seite ohne eigene Klasse.

Deine Links, während eine Seite betrachtet wird, haben aber eine eigene Klasse.(selected - soll weiß sein)

Wenn du diese Klasse anwenden willst, reicht nicht:

.selected {..}

sondern

a.selected {}

denn die Stile von .selected überschreiben nicht automatisch die stile von a ... sie müssen auch auf a angewendet werden...

Pseudoklasse a:visited würde ich ganz rausnehmen ... brauchst Du nicht...
..

Pulli · Post by **Pulli** » Tue Mar 17, 2009 11:46 am

antibart wrote:
Wenn du diese Klasse anwenden willst, reicht nicht:

.selected {..}

sondern

a.selected {}

denn die Stile von .selected überschreiben nicht automatisch die stile von a ... sie müssen auch auf a angewendet werden...

Pseudoklasse a:visited würde ich ganz rausnehmen ... brauchst Du nicht...
..

Pseudoklasse ist raus. aber was ich nicht versteh ich hab doch jetzt a.selected drin...aber es funzt einfach nicht...lass mich raten ich habs falsch eingebaut oder ?

css lernen steht auch ganz oben auf meiner liste...versprochen

antibart · Post by **antibart** » Tue Mar 17, 2009 12:09 pm

Wenn ich mir deine Seite jetzt in IE6 anschaue, funktioniert es doch ... die menupunkte der aktuellen seite sind weiß ... das wolltest du doch, oder?

Allerdings ist a.selected oben in den css immer noch dreimal drin, was nicht nötig ist...

Hast Du a:visited überall rausgenommen?

Pulli · Post by **Pulli** » Tue Mar 17, 2009 12:13 pm

antibart wrote: Wenn ich mir deine Seite jetzt in IE6 anschaue, funktioniert es doch ... die menupunkte der aktuellen seite sind weiß ... das wolltest du doch, oder?

ja schon, aber hast du mal auf eine seite geklickt ? bei mir erscheint die anschließend, also wenn man auf eine andere seite wechselt im menü nicht weiß, sondern grau...also bei allen seiten, auf denen man dann mal war...und die sollen an sich immer mit weißer schrift dargestellt werden...

antibart · Post by **antibart** » Tue Mar 17, 2009 12:27 pm

Pulli wrote:
..also bei allen seiten, auf denen man dann mal war...

Was 100% bedeutet, dass irgendwo a:visited = grau noch existiert ...

Ich selbst packe sowas immer in IDs statt in Klassen. Evtl hat der IE6 da Probleme mit dem Überschreiben. Das weiß ich leider nicht, weil ich das Problem noch nicht hatte.

Bei mir sähe das so aus und funktionierte bislang immer.

global

Code: Select all

a {....;}

a:hover {...;}

ausnahmen dann auf das Menu-DIV bezogen

Code: Select all

#menu {....;}

#menu ul {....;}

#menu li {....;}

#menu a{....;}

#menu a:hover {:....;}

#menu a.selected {....;}
#menu a.selected:hover {...;}

usw...

CMS Made Simple Forums

Mal wieder Probleme mit dem schönen IE6

Mal wieder Probleme mit dem schönen IE6

Re: Mal wieder Probleme mit dem schönen IE6

Re: Mal wieder Probleme mit dem schönen IE6

Re: Mal wieder Probleme mit dem schönen IE6

Re: Mal wieder Probleme mit dem schönen IE6

Re: Mal wieder Probleme mit dem schönen IE6

Re: Mal wieder Probleme mit dem schönen IE6

Re: Mal wieder Probleme mit dem schönen IE6

Re: Mal wieder Probleme mit dem schönen IE6

Re: Mal wieder Probleme mit dem schönen IE6