Hallo zusammen,
bei meinem Transparent-Problem konnte mir bisher leider keiner helfen, aber jetzt hab ich noch ein größeres Problem. Im Firefox sehen die Seiten ganz passabel aus, IE7 (in anderen Versionen konnt ich's noch nicht testen) jedoch verschiebt es mir im ContentBereich einfach alles komplett, und die Schrift sieht auch furchtbar aus.
Hier eine Beispielseite:
http://www.thermalbad-restaurant.de/impressum.html
http://www.thermalbad-restaurant.de/...taltungen.html
und hier der code:
Was mach ich falsch? Die Seite sollte Morgen im Netz stehen, ich krieg die Krise...Code:<!-- Put IE into quirks mode --> <!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> </title> <style type="text/css"> html { height:100%; max-height:100%; padding:0; margin:0; border:0; background:rgb(60,-17,10); font-size:90%; font-family:Verdana, Geneva, sans-serif; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } body { height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0; background:rgb(60,-17,10); } #content { display:block; overflow:auto; position:absolute; z-index:3; top:150px; bottom:52px; width:760px; margin-left:-381px; left:50%; border-left:1px solid #900; border-right: 1px solid #900; background:rgb(60,-17,10); background:url(grafiken/liliegross.jpg); } * html #content { top:0; bottom:0; height:100%; width:762px; border-top:154px solid #900; border-bottom:50px solid #900; } #head { position:absolute; margin-left:-381px; left:50%; top:0; width:760px; min-width:760px; height:150px; background:#fff; font-size:1em; z-index:5; border:1px solid #900; } * html #head { top:2px; width:762px; height:148px; } a.nav1, a.nav2, a.nav3, a.nav4, a.nav5 {width:152px; height:150px; display:block; float:left; background:url(veranstaltungen/oben3.jpg); text-align:center; font-size:1em; font-weight:normal; color:#fff; text-decoration:none; font-family:verdana, arial, sans-serif; line-height:25px; overflow:hidden;} #head a .pad {display:block; width:152px; height:125px; background:transparent; border-bottom:1px solid #900;} a.nav1 {background-position:0 150px;} a.nav2 {background-position:-152px 150px;} a.nav3 {background-position:-304px 150px;} a.nav4 {background-position:-456px 150px;} a.nav5 {background-position:-608px 150px;} a.nav1:hover {background-position:0 0;} a.nav1:hover .button {background:#900; color:#fff; cursor:pointer; display:block; width:152px; height:25px; cursor:hand;} a.nav2:hover {background-position:-152px 0;} a.nav2:hover .button {display:block; width:152px; height:25px; background:#900; color:#fff; cursor:pointer; cursor:hand;} a.nav3:hover {background-position:-304px 0;} a.nav3:hover .button {display:block; width:152px; height:25px; background:#900; color:#fff; cursor:pointer; cursor:hand;} a.nav4:hover {background-position:-456px 0;} a.nav4:hover .button {display:block; width:152px; height:25px; background:#900; color:#fff; cursor:pointer; cursor:hand;} a.nav5:hover {background-position:-608px 0;} a.nav5:hover .button {display:block; width:152x; height:25px; background:#900; color:#fff; cursor:pointer; cursor:hand;} #foot { position:absolute; margin-left:-381px; left:50%; bottom:0; width:760px; min-width:760px; height:50px; background:url(grafiken/unten2.jpg); background-position:0 100px; font-size:1em; z-index:5; border:1px solid #900; font-family: Verdana, Geneva, arial, sans-serif; font-weight:bold; color:#000; } * html #foot { bottom:2px; width:762px; height:48px; } #content p { padding:5px; text-align:justify; color:#fff; } .boldhead { font-size:2.5em; font-weight:normal; color:#fff; font-family:Vivaldi, Verdana, Geneva, sans-serif; text-align:center; } .bold {font-weight:bold;} .left {float:left; margin:10px;} .right {float:right; margin:10px;} .lefttext {float:left; width:600x; text-align:justify; color:#fff;} .righttext {float:right; width:300px; text-align:justify;} * html .lefttext {float:left; width:310px; text-align:justify;} * html .righttext {float:right; width:310px; text-align:justify;} </style> </head> <body> <div id="head"><a class="nav1" href="index.html" title="Restaurant Sonnenhoftherme"><span class="pad"></span><span class="button">Restaurant</span></a><a class="nav2" href="veranstaltungen.html" title="Veranstaltungen"><span class="pad"></span><span class="button">Veranstaltungen</span></a><a class="nav3" href="kontakt.html" title="Kontakt"><span class="pad"></span><span class="button">Kontakt</span></a><a class="nav4" href="anfahrt.html" title="Anfahrt"><span class="pad"></span><span class="button">Anfahrt</span></a><a class="nav5" href="impressum.html" title="Impressum"><span class="pad"></span><span class="button">Impressum</span></a></div> <div id="foot"><br /><br /> © 2009 Gustare GmbH</div> <div id="content"> <p class="boldhead">Veranstaltungen</p> <p> Unsere Räumlichkeiten eignen sich für Veranstaltungen aller Art wie z.B.<br /><br /> - Tagungen<br /> - Hochzeiten<br /> - Weihnachtsfeiern<br /> - Geburtstage<br /> - Kommunionen<br /> </p> <img class="left" src="veranstaltungen/saal2.jpg" title="Saal" alt="Weihnachtsfeier im großen Saal" /> <p>Saal:<br /> In unserem Saal, der von den anderen Räumen abgetrennt werden kann, finden bis zu 60*Personen Platz und ist somit hervorragend geeignet für größere Festivitäten oder Veranstaltungen! </p><br /> <img class="right" src="veranstaltungen/saal1.jpg" title="Saal" alt="Saal" /> <p> </p> <p class="lefttext"> <img class="right" src="veranstaltungen/rest3.jpg" title="Restaurant" alt="Restaurant" /> Wintergarten:<br /><br /> In unserem Wintergarten finden ca 40 Gäste Platz. Hier lädt ein schönes Glas Wein, ein gutes Essen und der herrliche Blick auf die Außenbecken zum Verweilen ein!<br /><br /><br /> Terrassen:<br /><br /> Unser Restaurant bietet für unsere Gäste zwei Außenterrassen mit Blick auf die Pools,*abgetrennt nur durch ein schön angelegtes Blumenbeet, fühlt man sich fast wie im Urlaub!<br /><br /> Im Sommer sind unsere Terrassen auch für Gäste in Badebekleidung zugänglich und an den etwas frischeren Sommerabenden ist unsere Terrasse beheizt!<br /><br /> Von Montag bis Sonntag geöffnet von 10*Uhr bis 22 Uhr*und durchgängig warme Küche von 10 Uhr bis 22 Uhr<br /> <br /> An Heiligabend, Silvester und*Neujahr ist unser Restaurant geschlossen. </p> </div> </body> </html>
hmm .. sooo große Unterschiede sehe ich beim IE8 im Vergleich zum Firefox nicht .. der Text ist in einer schmaleren Spalte, ja - aber das ist logisch, müsste durch diese Zeile im css kommen:
* html .lefttext {float:left; width:310px; text-align:justify;}
Hallo Wildmieze,
danke schon mal für den Tipp. Hab mir jetzt gerade mal den IE8 runtergeladen, aber da sieht's genauso schräg aus. Auf der impressum-seite haut's mir den Text immer unter das dritte Bild, und nicht wie im Firefox fließend um/an das Bild. Mit der CSS-Zeile hab ich auch schon rumgetüftelt, aber es der Text bleibt immer unter dem Bild. Und warum stellt der IE die Schrift völlig anders dar? Derselbe Rechner, dieselbe Schriftart, aber beim IE sieht's völlig K.... aus!
Vielleicht seh ich auch den Wald vor lauter Bäumen nicht mehr.
Und zum Thema IE8, ich fürchte, da es sich um ein Thermalbad handelt, sind die Besucher der Seite wohl eher älteren Semesters, die vermutlich nicht unbedingt die neusten Browserversionen haben, und wohl auch nicht die größten Displays, daher auch auch die eher schmal gehaltene Seite...
Aber ich muss auch gestehen, ich hab zu meiner aktiven Zeit nicht viel mit CSS gemacht, ich wurschtel mich da grad so durch...
Moin chan
Ich finde keinen Grund den IE in den Quirksmodus zu hauenHTML-Code:<!-- Put IE into quirks mode -->
Pack das mal weg, lass den IE seine Arbeit machen und dann siehts im IE8,7 und 6 vlt. schon ein bisschen besser aus
btw: Da du das ältere Semester ansprichst: Glaubst du die erkennen auch nur einen einzigen Pixel im Logo? Spätestens bei der Subline wirds doch zur Rumraterei...Ebenso der schwarze Text im Content und die blauen Links. Da solltest du nochmal ran.
Hey Master,
super, vielen Dank, der Tipp mit dem Quirks-Mode war goldrichtig! Zumindest im IE8 sieht's jetzt so aus wie es aussehen soll! Nur im IE6 ist es die totale Katastrophe, also wer sich die Seite damit anschaut kriegt 'nen Lachkrampf
Woran kann das liegen?
Mit dem Logo hast Du natürlich recht, aber das ist so gewollt. Es war zuerst gar nicht vorgesehen es überhaupt in die Bilder zu packen und wird später noch irgendwo ins Impressum gepackt. Ist wohl eh nur eine provisorische Seite bis ich mal Zeit habe, eine ordentliche zu bauen!
Aber das mit der Transparenz wäre trotzdem schön gewesen, vielleicht findet da doch noch jemand den Fehler???
An erster Stelle am IE6 selbst, an zweiter Stelle auch an deinem CSS, denn es ist machbar: http://www.cssplay.co.uk/layouts/body5.htmlZitat von chan
btw: Auf den Starhack im finalen Entwurf bitte verzichtn, der wird dir in Zukunft Probleme machen. Nimm Conditional Comments
Das Logo nur im Impressum sichtbar? Na herzlichen Glühstrumpf
Ich wünsche dir die Zeit so schnell wie möglich, da muss was gemacht werden
Von welcher Transparenz reden wir?
hmmm, den code hab ich doch von stu nicholls!An erster Stelle am IE6 selbst, an zweiter Stelle auch an deinem CSS, denn es ist machbar: http://www.cssplay.co.uk/layouts/body5.html
btw: Auf den Starhack im finalen Entwurf bitte verzichtn, der wird dir in Zukunft Probleme machen. Nimm Conditional Comments
Das Logo wollte ich zuerst auf eine Startseite und anstelle der Lilie im Hintergrund einbauen, wollten meine Schwestern aber nicht...
Na ja, für das dass ich erst vor zwei Wochen wieder angefangen habe, und nur am Feierabend Zeit hatte daran zu arbeiten, find ich sie jetzt nich soooo misslungen! Nich so einfach wenn man 180 Fotos bekommt und einem dann gesagt wird, du hast 14 Tage zeit. Den Text und das Logo hab ich vor zwei Tagen erst bekommenIch wünsche dir die Zeit so schnell wie möglich, da muss was gemacht werden
Mit Transparenz meinte ich diesen Effekt hier :
http://www.cssplay.co.uk/layouts/bodyfix.html
Allerdings hätte ich es lieber umgekehrt gehabt, also normal sichtbar, und beim MouseOver dann halbtransparent.
Stimmt, dann würde ich den IE6 in den Quirksmodus schicken, aber nur den. Das machst du dann, indem du anstelle eines Kommentars vor dem Doctype den XML-Prolog setzt.
Damit schickst du den IE6 in den Quirksmode, den IE7 und 8 die bleiben im Standardmodus. Dann dürfte das Klappen.
Nachteil: Der IE interpretiert das Boxmodell falsch, evtl. musst du dann für den IE6 mehr Spezial-Definitionen einbauen.
Vorteil: Dein Scrollbalken funktioniert im IE6 und die Fehldarstllung im IE7 und 8 halten sich sehr in Grenzen
Schau dir mal die heading.jpg bei Stu an. Er arbeitet dort mit Bildern und einem Sprite-Menu
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
LinkBack URL
About LinkBacks
Zitieren
