• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

IE 7 und 8 korrekt, Firefox/Opera stellt alles falsch dar

Status
Für weitere Antworten geschlossen.
H

htmlE46

Neues Mitglied
Ich habe bei meiner Seite ernste Probleme.
Ich habe mit dem Editor phase 5.3 gearbeitet und mit Tidy genannte Fehler beseitigt um auszuschließen das deswege die Darstellung im Firefox nicht klappt, aber daran liegt es leider nicht.

Meine Seite habe ich folgendermaßen aufgebaut.
Ein großen Container (DIV) indem 8 kleinere gepackt werden.
Oben über die ganze Page der header
Dann DIV-Links( wodrin wiederrum 2 Container untereinander sind), dann der Inhalts-DIV in der Mitte und ein DIV-Rechts( auch wieder 2 DIV untereinander).

Quellcode hierzu:

Code: 
#Container {position:relative; width:1020px;margin: 20px auto;}
#kopfzeile {width: 1010px;height:100px;float:left;padding:20px 0px 0px 10px;text-align:center;background-color:#A40000}
#links{width:200px;height: 518px;float:left;background-color:#A40000}
#login{width: 200px;}
#navigation {width: 200px;}
#inhalt {width:640px; height: 518px;overflow:scroll}
#rechts{width:180px; height: 518px;  float:right;background-color:#A40000}
#info {width:180px;}
#werbung{width:180px;}

Wie man sehen kann, sind oben, rechts und links mit einer rote Farbe ausgetstattet, sodass quasi der inhalt bis auf unten umrandet wird.
Die Darstellung klappt im Internet Explorer auch super ohne Fehler, beim Firefox/Opera hingegen, wird alles untereinander geschrieben und gar nicht auf die rote Farbe eingegangen, sondern einfach der Text untereinander der in den Container ist, geschrieben.

Sieht irgendwie so aus, als wenn auf die CSS Datei gar nicht weiter eingegangen wird?
Hoffe mir kann jemand nen Tipp geben, oder irgendwie nen Validator womit ich das prüfen kann, woran es liegt.
Habe die Suchfunktion auch benutzt, jedoch gab es IE/Firefox Problem halt nicht so eins.
 
Könntest du neben der css vllt noch die html-datei posten und / oder ein Bild welches den fehler zeigt?

Hast du einen Doctype benutzt?
 
Doctype:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "../dtd/xhtml1-strict.dtd">
Der zusehende Home Button beim Fehler war nur ein Test von mir, deswegen ist er in der IE Ansicht auch doppelt. Jedoch wirkt es so, als wenn die CSS nicht richtig geladen wird.

So soll die Seite aussehe, Ansicht im IE 8.0:

Link: http://1.2.3.11/bmi/www.pictureupload.de/originals/pictures/350/270808175004_keinfehlerIE.JPG

270808175004_keinfehlerIE.JPG




So sieht sie im Firefox/Opera aus, Ansicht Opera 9.3:

Link: http://1.2.3.12/bmi/www.pictureupload.de/originals/pictures/350/270808174814_fehlerOpera.JPG
270808174814_fehlerOpera.JPG


Es sieht beim Opera nun so blöd aus, weil halt alles untereinander hingeballert wird.
 
Habe meine CSS Datei mal durch nen Validierer gejagt.
Nun wird es im Firefox auch rot angezeigt, jedoch ist der Inhalts-DiV ganz rechts neben allen und nicht in der Mitte O.o
 
Ich habe nun immer weiter probiert, jedoch bekomme ich es einfach nicht hin, das die DIV Container im Firefox/Opera richtig angeordnet werden, die Styles und Farben scheinen nun zu gehen.
Kann mir da jmd weiterhelfenn bzw ein Tipp geben?
 
Könntest du "immer weiter probiert" bitte mit einem aktuellen Quelltext unterstützen? Sonst kann man den Fehler leider wirklich nicht herausfinden.

EDIT: Die von dir verlinken Bilder kann ich nicht erreichen.

EDIT2: Beitrag Nummer 2.222, muss ich jetzt etwa einen ausgeben? :mrgreen:
 
ingoS schrieb:
EDIT2: Beitrag Nummer 2.222, muss ich jetzt etwa einen ausgeben? :mrgreen:
Zum Vergrößern anklicken....

gratz + JA !!!!!einseins!!!elf!!!!!111 ;)

@topic
wenn du bilder oder ähnliches hast, gibt es zu genüge - sofern du keinen server hast - anbieter im internet die dir diese bilder hochladen. (weiß jetzt nicht ob ich hier "werbung" machen darf..)
 
@ ingoS - ich hätte gern ein Bierchen... aber später bitte, ist noch zu früh :-D

Gratz zur Schnapszahl
thuemmy
 
Meine CSS Datei ist nun komplett valide.
Im IE7/8 sowie Opera ist mein InhaltsDIV in der Mitte, nur im Firefox werd es rechts oben neben die komplette Homepage gepackt, sodass man scrollen muss.

Code: 
#kopfzeile {width: 1010px;height:100px;float:left;padding:20px 0px 0px 10px;text-align:center;background-color:#A40000}
#links{width:200px;height: 518px;float:left;background-color:#A40000}
#login{width: 200px;}
#navigation {width: 200px;}
#inhalt {width:640px; height: 518px;overflow:scroll}
#suche{width: 250px; height: 200px;border-color:#000080; border-style:solid;}
#rechts{width:180px; height: 518px;  float:right;background-color:#A40000}
#info {width:180px;}
#werbung{width:180px;}
#fusszeile {clear:both;}
 
Dann gib uns doch bitte einen Link oder Quelltext deiner Homepage, bei der es falsch angezeigt wird. Aus deinem CSS-Code können wir nicht viel rauslesen..nur..

Code: 
#kopfzeile {width: 1010px;height:100px;float:left;padding:20px 0px 0px 10px;text-align:center;background-color:#A40000[B] -> ;[/B] <- }
#links{width:200px;height: 518px;float:left;background-color:#A40000[B] -> ;[/B] <- }
.
.
#inhalt {width:640px; height: 518px;overflow:scroll[B] -> ;[/B] <- }
#rechts{width:180px; height: 518px;  float:right;background-color:#A40000 -> [B]; <- [/B]}
da fehlen VIER ; sicher das alles valide ist? ;)
 
Laut W3C sollte es valide sein O.o

Page:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "../dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/homepage.css" />
</head>
<body>

     <div id="Container">

     <div id="kopfzeile">
<img src="BILDER/Logo.jpg" width="301" height="79" alt="logo" border="0"/>
     </div>

<div id="links">
<div id="login">
<form action="../HOMEPAGE/SEITEN/login.html" method="post">
<table border=0 summary="login">
<tr>
<td><span class="drei">Benutzer:</span></td>
<td><input type="text" name="user" size="10"/> </td>
</tr>
<tr>
<td><span class="drei">Passwort:</span></td>
<td><input type="password" name="pass" size="10"/></td>
</tr>
<tr>
<td class=content2 noWrap> </td>
<td class=content3 noWrap>
<input type="Submit" name="login" value="" class="login"/>
</td></tr>
</table>
</form>
</div>
<br><br><br>

<div id="navigation">
<ul id="Navigation">
	<li><a class="home" href="#index.html"></a></li>
	<li><a class="reg" href="../Homepage/SEITEN/registrierung.html"></a></li>
	<li><a class="suche" href="../Homepage/SEITEN/suche.html"></a></li>
	<li><a class="bewerten" href="../Homepage/SEITEN/bewertung.html"></a></li>
	<li><a class="kontakt" href="../Homepage/SEITEN/kontakt.html"></a></li>
	<li><a class="impressum" href="../Homepage/SEITEN/impressum.html"></a></li>

</ul>


<br><br><br><br><br><br>
<div align="justify"><p><font size="-2">(c)by Team2</font></p></div>

</div>
</div>


<div id="rechts">
<div id="info">
<p><span class="vier">Top 10:</span></p>
<p><a href="../Homepage/SEITEN/top1.html"><span class="five">1. BMW</span></a></p>
<p><a href="../Homepage/SEITEN/top2.html"><span class="five">2. Mazda</a></span></p>
<p><a href="../Homepage/SEITEN/top3.html"><span class="five">3. Nissan</a></span></p>
<p><a href="../Homepage/SEITEN/top4.html"><span class="five"> 4. Honda</a></span></p>
<p><a href="../Homepage/SEITEN/top5.html"><span class="five">5. Mitsubishi</a></span></p>
<p><a href="../Homepage/SEITEN/top6.html"><span class="five">6. VW</a></span></p>
<p><a href="../Homepage/SEITEN/top7.html"><span class="five">7. Opel </a></span></p>
<p><a href="../Homepage/SEITEN/top8.html"><span class="five">8. Audi</a></span></p>
<p><a href="../Homepage/SEITEN/top9.html"><span class="five">9. Ford</a></span></p>
<p><a href="../Homepage/SEITEN/top10.html"><span class="five">10. Mercedes-Benz</a></span></p>
</ul>
</div>
<br><br>
<div id="werbung">
<p><span class="vier">Werbung: </span></p>
<p><a href="http://www.beispiel.de"><img src="BILDER/werbung1.gif" width="130" height="70" alt="werbung1" border="0"/></a></p>
<p><a href="http://www.beipiel2.de/"><img src="BILDER/werbung2.gif" width="130" height="50" alt="werbung2" border="0"/></a></p>
</div>

</div>

<div id="inhalt">

<h4>Willkommen auf .....</h4>


</p>

</div>

</div>


</body>
</html>
 
Das erste was mir spontan auffällt ist:

1. <br /> statt <br> bei xHTML

2. wenn du etwas mit /> schreibst mache ein Leerzeichen davor.

3. border="0" raus

4. <td class=content2 noWrap> da fehlen die " "

5. <font size="-2"> weg damit ! und wie kann man eine negative schriftgröße haben?

6.
falsch
Code: 
<a href="../Homepage/SEITEN/top2.html"><span class="five">2. Mazda</a></span>
richtig:
Code: 
<a href="../Homepage/SEITEN/top2.html"><span class="five">2. Mazda</span></a>
7.
nach
Code: 
<p><a href="../Homepage/SEITEN/top10.html"><span class="five">10. Mercedes-Benz</a></span></p>
schließt du ein </ul> aber hast KEINS geöffnet..



8.
und:
Code: 
<h4>Willkommen auf .....</h4>


</p>
wo ist da das <p> geöffnet?

Grüßli..
 
Oha- danke
Habe alle Fehler sofort behoben, nur das eigentliche Problem bleibt bestehen.
Im Internet Explorer sowie Opera ist der Inhalts-DIV in der Mitte im Firefox wieder neben der Homepage.
Desweiteren hat der IE nun ein blauen Rand um die Bilder, weil Border=0 weg ist!
 
Nimm bei #kopfzeile das float: left; raus. Das sorgt doch dafür, dass das Element aus dem Textfluss genommen wird und die folgenden Elemente sich nun direkt da dran kleben.

EDIT:
@Loon3y: Bei der letzten Angabe vor der schließenden geschwungenen Klammer muss nicht unbedingt ein Semikolon stehen; das ist schon richtig so.
 
wenn du border tippst, dann am besten so:

Code: 
<td style="border: 0px;">
nur alleine border="0" naja...was? 0 äpfel, birnen, pflaumen oder was? ^^

@ingo
das mag wahr sein, aber lieber vorsicht als nachsicht ;) wenn mans bei allen macht, wieso sollte man es dann nicht auch beim letzen machen? wäre ja doof wenn man dann noch was mit ranhängt u dann fehlt das Semikolon bei der vorletzten position und man merkt das nicht...^^
 
Es lag an dem float:left, danke ;)
Falls ich nun noch irgendwie Probleme finden werde, werd ich mich wieder melden ;)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben