zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Bitte testen mit Firefox und IE (Vergleich!)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.09.2004, 00:05
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 58
Spider befindet sich auf einem aufstrebenden Ast
Standard Bitte testen mit Firefox und IE (Vergleich!)

Hi, also ich hab bisher immer mit dem IE gesurft und heut vom Release des FireFox 1.0 gelesen und gedacht ich probier ihn doch mal, obwohl ich bisher nur gehört hatte, dass der IE zwar schlecht sei, aber die anderen was CSS usw angeht auch nicht besser, eher schlechter wären.

Hab ihn also drauf gemacht und dann mein derzeitiges Projekt angeschaut und da fiel ich schon aus allen Wolken

also, anschauen könnt ihr die seite hier.
Am besten is es natürlich wenn ihr nen IE und nen FireFox drauf habt, also beim IE siehts so aus wies aussehen soll, die Höhe der <div> container ist niedrig bis gar nicht angesetzt, bei mehr text vergößert sich der div automatisch nach unten und mit ihm auch das hintergrund bild (beim IE).
Beim FireFox hab ich hingegen festgestellt (mit border) das sich da die div's nicht (zumindest nicht einfach so) vergrößern, der text ging dann weiter, aber der begrenzungsrahmen von dem div in dem der text steht (mitte) is da wo er auch bei gar keinem text wäre
ich hab mal nen weißen rahmen eingeblendet, da sieht mans sehr gut.
Außerdem is mir noch aufgefallen das der FireFox mit padding anders umgeht als der IE. Beim IE hats so geklappt wie ich mir padding immer vorgestellt hab (als innenabstand), dh der div ist gleich groß geblieben nur der text hat weiter "innen" angefangen, aber beim FireFox scheints andersrum zu sein (außenabstand?), der text is wo er war und der rahmen is weiter nach außen
Deshalb is beim IE auch ein größerer Abstand zwischen den 2 Rahmen, sonst häts nämlich beim firefox nimmer neben einander gepasst (is mit float gemacht)
Der dicke weiße Rahmen ist von dem Div in dem die anderen (außer footer) alle drin sin und sich beim IE auch richtig vergrößert

Desweiteren: Vergleicht mal die "Menü Titel", da nimmt der firefox des text-align:center; nich an und macht die hintergrundfarbe auch nicht über die ganze breite

Kann mir da jemand helfen wie ich des alles auch beim FireFox richtig hinbekomm? (hoffe mein text is einigermaßen verständlich)

achso, hier noch der css code, hab ich ja extern:
(Sowohl der CSS Code als auch der HTML Code is validiert und CSS2.0 bzw. xHMTL 1.0 Strict)
Code:
* {
	font-family:verdana;
	color:#fff;
}
h1 {
	font-size:16px;
	text-align:center;
}
p {
	color:#000;
	font-size:12px;
}
a:link {
	color:#fff;
	text-decoration:none;
}
a:visited {
	color:#fff; 
	text-decoration:none;
}
a:hover {
	color:#aecaea; 
	text-decoration:none;
}
a:active {
	color:#fff; 
	text-decoration:none;
}
body {
	background-color:#aaa;
}
div.all {
	width:950px;	
	background-image:url("images/background.gif");
	background-repeat:repeat-y;
	min-height:300px;
        border:3px solid #fff;
}
div.header {
	background-image:url("images/header.gif");
	background-position:bottom;
	height:235px;
}
div.menu {	
	float:left;
	width:200px;
	margin-left:5px;
	border:1px solid #fff;
}
div.in_menu {
	position:relative;

	font-size:12px;
	left:30px;
	width:170px;
}
div.main {	
	float:right;
	height:50px;
	width:700px;
	padding:18px;
	border:1px solid #fff;
}
div.footer {
	font-size:12px;
	font-weight:bold;
	background-image:url("images/footer.gif");
	height:55px;
	width:950px;
	text-align:center;
}
.border {
	border:1px solid #000;
}
span.menu {
	text-align:center;
	font-size:14px;
	font-weight:bold;
	background-color:#aecaea;
	width:180px;
}
a.submenu {
	font-size:10px;
}
div.in_menu span {
	visibility:hidden;
	font-size:8px;
}
div.in_menu a:hover span {
	visibility:visible;
	text-decoration:none;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.09.2004, 01:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard Re: Bitte testen mit Firefox und IE (Vergleich!)

Zitat:
Zitat von Spider
Hi, also ich hab bisher immer mit dem IE gesurft und heut vom Release des FireFox 1.0 gelesen und gedacht ich probier ihn doch mal, obwohl ich bisher nur gehört hatte, dass der IE zwar schlecht sei, aber die anderen was CSS usw angeht auch nicht besser, eher schlechter wären.
Die anderen sind alle wesentlich besser!

Dass der Mozilla/Firefox die Container nicht mitzieht, hat einen einfachen Grund. Du floatest die Innencontainer, und nimmst sie damit aus der normalen Position raus. Damit der äußere Container mitkommt, mußt Du clear benutzen, um das floaten wieder aufzuheben. Dann kommt der Container auch mit runter. Das der IE das auch so macht, liegt an seiner falschen CSS-Interpretation. Der behandelt divs eher wie Tabellenzellen.

Zitat:
Beim IE hats so geklappt wie ich mir padding immer vorgestellt hab (als innenabstand), dh der div ist gleich groß geblieben nur der text hat weiter "innen" angefangen, aber beim FireFox scheints andersrum zu sein (außenabstand?), der text is wo er war und der rahmen is weiter nach außen
Boxmodellbug des IE! - Durch den XML-Prolog schickst Du den IE6 in den Quirksmode, in dem er das Boxmodell genauso falsch berechnet, wie sein Vorgänger, der IE5! Der zieht padding und border immer vom Inhalt ab, laut W3C soll padding und border aber hinzuberechnet werden!

Die Feinheiten im Code schau ich mir jetzt nicht mehr an.

Tipp fürs Entwickeln mit CSS: immer erst mit einem Browser entwickeln, der CSS kann (Mozilla/Firefox oder Opera z.B.). Danach erst für den IE anpassen.....(der IE hängt 4 Jahre in der Entwicklung hinterher - ist so!)
Und halt CSS lernen. Boxmodell, Positionierungsarten und die Sache mit dem Doctype und den Rendermodi sind Pflicht.

Und wenn Du das verstanden hast, wirst Du den IE mit seinen Bugs hassen - verspreche ich Dir.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.09.2004, 20:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 58
Spider befindet sich auf einem aufstrebenden Ast
Standard

aaah.
Hab mich jetzt mal über die Modi usw über css4you informiert und ich beginne zu verstehen was du meinst *g*

Das mit float hab ich hinbekommen, danke dafür, hab mir sowas in der richtung schon gedacht, wusste nur nich was ich dagegen tun soll.


zum Quirks-Modus:
Hab mir mal ein paar Workarounds angeschaut, aber die sin ja letztendlich auch nich so des wahre, am simpelsten wäre ja natürlich die <?xml ?> zeile zu entfernen, dann würde ja auch der IE 6 im Standards-Mode bleiben, die 5.5er hätten dann ja immer noch die probleme...
oder natürlich ich lass es einfach so und die IE user müssen sich dann damit begnügen, wobei die meisten die "lücke" die entsteht, vermutlich nichmal bemerken werden...
Mit Zitat antworten
  #4 (permalink)  
Alt 15.09.2004, 21:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Wow - sieht ja schon ganz anders aus. Herzlichen Glückwunsch!

Zitat:
Zitat von Spider
Hab mir mal ein paar Workarounds angeschaut, aber die sin ja letztendlich auch nich so des wahre, am simpelsten wäre ja natürlich die <?xml ?> zeile zu entfernen, dann würde ja auch der IE 6 im Standards-Mode bleiben, die 5.5er hätten dann ja immer noch die probleme...
Das machen die meisten - auch die CSS-Gurus. Ist auch erlaubt.


Zitat:
oder natürlich ich lass es einfach so und die IE user müssen sich dann damit begnügen, wobei die meisten die "lücke" die entsteht, vermutlich nichmal bemerken werden...
Bei Dir siehts jetzt im IE eigentlich ganz vernünftig aus. Kann man so lassen. Auch den IE5 darf man ja nie ganz vergessen, und der berechnet immer falsch. Es gibt da allerlei Tricks und Workarounds für den IE - aber wenn die nicht nötig sind, umso besser.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.09.2004, 19:51
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 58
Spider befindet sich auf einem aufstrebenden Ast
Standard

hmm, ich hab schon wieder ein problem mit IE vs. Rest (Netscape, Opera, FireFox), diesmal gehts um <img /> tags...


so wie rechts siehts im IE aus, eigentlich optimal und wie ichs will, links siehts so aus wie in den anderen, zwischen jedem bild is da ein abstand, border margin und padding hab ich mal vorsichtshalber auf 0 gesetzt, bringt aber auch nichts, was muss ich denn ins css schreiben damit auch bei opera & co. kein abstand zwischen den bildern is?

der css code:
Code:
a img {
	border:0px solid #fff;
	margin:0px;
	padding:0px;
}
div.login {
	padding-top:8px;
	padding-left:8px;
}
img.login_right {
	margin-left:24px;
}
und der betreffende html code:
Code:
<div class="login">
			[img]images/nologin_feld1.gif[/img]
			[img]images/nologin_feld2.gif[/img]

			[img]images/nologin_feld3.gif[/img]

			[img]images/nologin_feld4.gif[/img]
		</div>
Mit Zitat antworten
  #6 (permalink)  
Alt 20.09.2004, 23:53
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

ohne es ausprobiert zu haben:

"class="img" ist nicht definiert! das bringt den ie meiner erfahrung nach aus dem takt!

probiers mal mit "a.img {...}, vielleicht gehts dann

kadees
Mit Zitat antworten
  #7 (permalink)  
Alt 21.09.2004, 00:06
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 58
Spider befindet sich auf einem aufstrebenden Ast
Standard

ach, ähm, hab nur vergessen class="img" wieder raus zu tun, habs damit mal probiert, hat aber auch nichs geholfen
Mit Zitat antworten
  #8 (permalink)  
Alt 23.09.2004, 23:29
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.06.2004
Beiträge: 172
beeviz befindet sich auf einem aufstrebenden Ast
Standard

mach mal da wo die Bilder sind ins css: line-height: 1px;

rein spekulativ könnte das helfen. Allerdings sollteste das nur machen wenn da nirgendwo text ist.
Mit Zitat antworten
  #9 (permalink)  
Alt 23.09.2004, 23:38
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 58
Spider befindet sich auf einem aufstrebenden Ast
Standard

habs inzwischen anders gelöst:
die 4 Bilder sind jetzt alle absolut in einem relativ positionierten <div>-Container positioniert und es funktioniert in allen gängigen Browser (FireFox, Opera, Netscape und IE)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Synchroner XMLHttpRequest und Firefox reagiert nicht mehr kristian Javascript & Ajax 3 05.08.2008 17:10
bitte seite testen IE kleiner 6, opera und firefox + code verbessern dexta² Site- und Layoutcheck 3 09.03.2007 09:54
Firefox 1.5 Beta 1 Pablo Offtopic 19 13.09.2005 19:56
Float-Problem Firefox: Bitte mal ansehen und testen kati CSS 2 14.07.2005 19:43
Bitte mal mit Firefox testen villain Site- und Layoutcheck 9 29.09.2004 17:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:39 Uhr.