nicht angemeldet
Opera und span selector... problem!
Hello again!
Folgendes Problem habe ich mit dem Opera (v9.25):
Website ist xhtml1.0 strict. Über einen mehrere <span> Selectoren wähle ich aus einem Absatz <p></p> bestimmte Teile aus um den Font in Größe und Farbe zu via externes Sylesheet zu stylen.
Dies ist alles wunderbar... IE 6, Firefox und Seamonkey zeigen die Seite korrekt an. Opera jedoch unterschlägt die Color Werte und zeigt den Font in Schwarz an, was im gesamten Stylesheet nicht vorkommt. Zudem versetzt er ein <div> das zentriert in einem anderen <div> liegt welches ebenfalls zentriert im <body> befindet um einige pixel nach unten. Eigentlich ist das Problem in dieser website nicht so ausschlaggebend, da es sich hierbei nur um eine forwarding seite handeln soll, ich aber das selbe bzw. ähnliches Problem mit dem Opera dann in der Hauptseite habe.
Zunächst der html 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">
<head>
<title>boutique for designer sarees, wedding sarees, salwar kameez and more</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./style.css" title=" blog style" media="screen,projection" />
</head>
<body>
<div id="wrap">
<div id="contentWrap">
<div id="content">
<p><br />You are getting forwarded to<br />
<br />
<span class="urlName">www.dulari-collection.com</span><br />
<br />
If not, press<br />
<span class="bracket">[</span><span class="link"><a href="http://www.dulari-collection.com/dulari-collection/index.htm">
E N T E R </a></span><span class="bracket">]</span></p>
</div>
</div>
</div>
</body>
</html>
============================
und hier das zugehörige CSS:
/******** General tags ********/
* {margin:0; padding:0;}
body{
background:#202020;
font-family:verdana,tahoma,arial,sans-serif;
font-size:13px;
color:#707070;
margin:0 auto;
padding:0;
}
a{text-decoration:none; color:#ffffff;}
a:hover{text-decoration:none; color:#f45900;}
a:active{text-decoration:none; color:#f45900;}
/******** Main wrap ********/
#wrap{
background:#fcebcd;
position:absolute; top:50%; left:50%;
width:800px;
height:380px;
margin:-190px 0 0 -400px;
padding:0px;
border:3px double #870b00;
}
/******** Content ********/
#contentWrap{
background:#e2cda8;
position:absolute; top:50%; left:50%;
width:780px;
height:360px;
float: left;
padding:0px 0px 0px 0px;
margin:-180px 0px 0px -390px;
}
#content{
text-align:center;
padding:0px 0px 0px 0px;
margin:0px;
}
#content p{
text-align:center;
line-height:3.2em;
margin:0px;
}
p span.link{
font-size:1.4em;
font-weight:900;
letter-spacing:3px;
text-align:center;
}
p span.urlName{
font-size:3em;
font-weight:900;
color: #ffffff;
letter-spacing:3px;
text-align:center;
}
p span.bracket{
font-size:2.4em;
font-weight:100;
color:#fcebcd;
text-align:center;
}
===============================
Wäre schön wenn mir da jemand einen konstruktive(n) Tip(s) bez. Opera geben könnte.
Thanx@all
-
Hi,
Folgendes Problem habe ich mit dem Opera (v9.25):
Ich habe 9.24 unter Vista - und kann damit dein Problem nicht nachvollziehen.
Muesste also dann vermutlich ein in der letzten Version neu hinzugekommener Bug sein.Ich nehme an, die von dir als Homepage-URL angegebene Seite http://dulari-collection.com/ stellt das Online-Beispiel dar?
Dass sieht bei mir in erwaehnter Opera-Version genauso aus wie im IE 7.Website ist xhtml1.0 strict. Über einen mehrere <span> Selectoren wähle ich aus einem Absatz <p></p> bestimmte Teile aus um den Font in Größe und Farbe zu via externes Sylesheet zu stylen.
Dies ist alles wunderbar... IE 6, Firefox und Seamonkey zeigen die Seite korrekt an. Opera jedoch unterschlägt die Color Werte und zeigt den Font in Schwarz an, was im gesamten Stylesheet nicht vorkommt.Ich sehe hellen Text, und dunkelgrauen Text - aber schwarz ist der nun wirklich nicht.
Zudem versetzt er ein <div> das zentriert in einem anderen <div> liegt welches ebenfalls zentriert im <body> befindet um einige pixel nach unten.
OK, den Effekt kann ich nachvollziehen.
Dein CSS allerdings weniger.
Warum du bspw. #contentWrap innerhalb seines bereits absolute positionierten Elternelements noch mal absolut positionierst, leuchtet mir nicht ein.Und dass du <br /> und zur Erzeugung von Abstaenden nutzt, noch weniger.
MfG ChrisB
-
Danke für die schnelle Antwort:
Ich habe 9.24 unter Vista - und kann damit dein Problem nicht nachvollziehen.
Muesste also dann vermutlich ein in der letzten Version neu hinzugekommener Bug sein.War bei v9.24 ebenfalls der Fall hab nur mal schnell noch upgedatet.
Ich nehme an, die von dir als Homepage-URL angegebene Seite http://dulari-collection.com/ stellt das Online-Beispiel dar?
Dass sieht bei mir in erwaehnter Opera-Version genauso aus wie im IE 7.Stimmt genau dies ist die Beispiel Site, habe leider keinen IE 7 (WinXP +IE 6)
Ich sehe hellen Text, und dunkelgrauen Text - aber schwarz ist der nun wirklich nicht.
Das stimmt mich nat. erfreulich! Vielleicht sollte ich den Opera mal neu installieren... hab da vielleicht irgenwo was eingestellt/verstellt!
Zudem versetzt er ein <div> das zentriert in einem anderen <div> liegt welches ebenfalls zentriert im <body> befindet um einige pixel nach unten.
OK, den Effekt kann ich nachvollziehen.
Dein CSS allerdings weniger.
Warum du bspw. #contentWrap innerhalb eines bereits absolute positionierten Elternelements noch mal absolut positionierst, leuchtet mir nicht ein.Das zweite div ist aus der Mitte zentriert, absolute ... (dies müsste aber vielleicht auch nicht sein) da der IE 6 und FF, mir denen ich hier arbeite den Wert der Border vollständig unterschiedlich bewerten. Somit bekam ich eine akzeptable Darstellung in beiden Browsern. Die Umrandung des inneren Divs ist im FF um einige Pixel größer.
Und dass du <br /> und zur Erzeugung von Abstaenden nutzt, noch weniger.
Alternative zu <br /> fällt mir nur line-height ein, bestimmt auch die sauberere Lösung.
Alternative zu wäre?.... word-spacing vielleicht!
Anyway .... Thanx ChrisB & Grets von Poona-
Hi,
Alternative zu <br /> fällt mir nur line-height ein, bestimmt auch die sauberere Lösung.
Alternative zu wäre?.... word-spacing vielleicht!Nutze margin und padding sinnvoll.
MfG ChrisB
-
Hi,
Nutze margin und padding sinnvoll.
Danke für den Tip... stehe nur ein wenig mit den beiden wg. Browserkompatibiltät auf Kriegsfuss, werds nat. trotzdem weiterhin versuchen.
Habe den Opera schnell runtergeschmiessen und neu installiert... und die Seite nochmals aufgerufen und alles was ich mit <span class> selektiere zeigt er im schwarzen Font... komischerweise funktioniert der Hover in angegebener Farbe.
Wieso der Opera auf deinem Vista diese Selektoren korrekt anzeigt ist mir dann doch irgendwie ein Rätsel!
Bei der eigentlich Hauptseite bestehen ähnliche Probleme wo ich unterschiedliche Fontgrößen in der Topnavigation und der Footer- navigation habe.... dies betrifft wie gesagt nur Opera! FF und Seamonkey, IE 6 zeigen den Font richtig an.
mykel-
Hi,
Nutze margin und padding sinnvoll.
Danke für den Tip... stehe nur ein wenig mit den beiden wg. Browserkompatibiltät auf Kriegsfuss
Welche Probleme siehst du mit beiden Eigenschaften in Bezug auf Browserkompabilitaet?
{Von uralten IEs mit ihrer fehlerhaften Interpretation des Box Model, die aber auch nur zum tragen kommt, wenn width/height noch gleichzeitig zum Einsatz kommen, mal abgesehen.)
MfG ChrisB
-
Hello again
Welche Probleme siehst du mit beiden Eigenschaften in Bezug auf Browserkompabilitaet?
{Von uralten IEs mit ihrer fehlerhaften Interpretation des Box Model, die aber auch nur zum tragen kommt, wenn width/height noch gleichzeitig zum Einsatz kommen, mal abgesehen.)
Kann ich dir ehrlich gesagt gar nicht sagen, da ich noch recht frisch auf dem Gebiet bin und noch vieles dazulernen muss. Da ich mit padding schon einige böse Überaschungen erlebt habe liegt wohl auch zum Einen, das ich 'immer noch' den IE 6 verwende und ich dann erstaunt bin wenn Dinge im anderen Browser völlig anderst dargestellt werden. Inzwischen bin ich nat. auch schlauer und versuche die Seiten im FF ansehnlich hinzubekommen um dann später die bugs für IE zu neutralisieren. Leider habe ich keinen IE 7 und bekomme ihn auch nicht so schnell installiert... bez wga!
Anyway... setzte gerade deine Ratschläge um und habe die </br> durch margin attribute ersetzt.... sicher sauberer und die .htm wird auch noch ein wenig kleiner.
... aber leider wurde mein eigentliches Problem bisher nicht beantwortet!Grets!
-
Moin!
Kann ich dir ehrlich gesagt gar nicht sagen, da ich noch recht frisch auf dem Gebiet bin und noch vieles dazulernen muss. Da ich mit padding schon einige böse Überaschungen erlebt habe liegt wohl auch zum Einen, das ich 'immer noch' den IE 6 verwende und ich dann erstaunt bin wenn Dinge im anderen Browser völlig anderst dargestellt werden.
IE hat einen Fehler bei der Berechnung der Abmessungen. Das läßt sich durch einen entsprechenden Doctype aber beheben, der von dir im Beispiel genannte XHTML-Strict-Doctype läßt auch den IE6 "ordentlich" rechnen.
Zu deinem Problem, du meinst damit die Unterschiede A / B in diesem Bild? Ich schau morgen mal drüber.
Cü,
Kai
--
What is the difference between Scientology and Microsoft? One is an
evil cult bent on world domination and the other was begun by L. Ron
Hubbard.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|-
Moin!
Zu deinem Problem, du meinst damit die Unterschiede A / B in diesem Bild? Ich schau morgen mal drüber.
Ach was, geht auch jetzt:
Du kannst den innere Container auch ganz ohne Positionierung zentrieren:
#contentWrap{ background:#e2cda8; margin: 10px; width:780px; height:360px; padding:0; }Cü,
Kai
--
What is the difference between Scientology and Microsoft? One is an
evil cult bent on world domination and the other was begun by L. Ron
Hubbard.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|-
Immer noch wach!!
Du kannst den innere Container auch ganz ohne Positionierung zentrieren:
#contentWrap{
background:#e2cda8;
margin: 10px;
width:780px;
height:360px;
padding:0;
}Geht leider nicht, hatte ich Anfangs so.... IE 6 sieht gut aus(der gute böse IE 6)... FF, 0pera sehr versetzt nach unten... liegt an der Border mit 3 px! Grets aus Poona (7:52 AM)-
Noch eine kurze Anmerkung:
Dies war der eigentliche Grund, wieso ich überhaupt einen weiteres Div (#contentWrap) eingefügt habe, das ich dann aus dem Zentrum heraus platzieren konnte. Habe etliche Varianten probiert... diese hat dann im IE6 als im FF funktioniert... im Opera entsteht leider einen mysteriösen Versatz von 2 oder 3 Pixeln... ? Woher der auch kommt!?-
Moin!
Noch eine kurze Anmerkung:
Dies war der eigentliche Grund, wieso ich überhaupt einen weiteres Div (#contentWrap) eingefügt habe, das ich dann aus dem Zentrum heraus platzieren konnte. Habe etliche Varianten probiert... diese hat dann im IE6 als im FF funktioniert... im Opera entsteht leider einen mysteriösen Versatz von 2 oder 3 Pixeln... ? Woher der auch kommt!?vom float:left in #contentWrap
Kommentiere ich das aus, setzt Opera das div mittig.
Cü,
Kai
--
What is the difference between Scientology and Microsoft? One is an
evil cult bent on world domination and the other was begun by L. Ron
Hubbard.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|-
vom float:left in #contentWrap
Kommentiere ich das aus, setzt Opera das div mittig.
Thanx Kai... das wars...
Das unnötige float Element, das ich nur so mal aus Sicherheit eingefügt habe. Sieht jetzt überall gut auch im IE, FF, Seamonkey.
Grets mykel
-
-
Moin!
Noch eine kurze Anmerkung:
Dies war der eigentliche Grund, wieso ich überhaupt einen weiteres Div (#contentWrap) eingefügt habe,Brauchst du ja nun nicht mehr
Ohne contentWrap nach deiner Positioniermethode
Ohne contentWrap nach meiner PositioniermethodeCü,
Kai
--
What is the difference between Scientology and Microsoft? One is an
evil cult bent on world domination and the other was begun by L. Ron
Hubbard.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
-
-
Moin!
Geht leider nicht, hatte ich Anfangs so.... IE 6 sieht gut aus(der gute böse IE 6)... FF, 0pera sehr versetzt nach unten... liegt an der Border mit 3 px!
Hier geht es. Ich habe es mit IE6 FF2 und Opera getestet
Cü,
Kai
--
What is the difference between Scientology and Microsoft? One is an
evil cult bent on world domination and the other was begun by L. Ron
Hubbard.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
-
-
-
Moin Kai...
Zu deinem Problem, du meinst damit die Unterschiede A / B in diesem Bild? Ich schau morgen mal drüber.
Genau diesen Unterschied mein ich... ist wohl Opera spezifisch, denn in allen anderen sieht gut aus!
Thanxmykel
p.s. mit dem schwarzen Font ist übrigens gelöst.... shame on me... da gibst unter Opera Extras/Einstellungen/Webseiten neben dem Seitenzoomfaktor (100%) eine Tick Box die da heißt an Breite anpassen... diese war aktiviert und der Verursacher dieses Phanomäns!!! sorry...
-
-
-
-
-
-
-
