IExplorer <-> Firefox + CSS

[rsciw]

Gruesse,

gibt es eine Liste irgendwo wo man sehen kann was Internet Explorer unterstuetzt und was nicht, wohingegen was FF unterstuetzt und was nicht, bzgl. Interpretation von HTML/CSS etc.

Eine Seite sieht bei mir im FireFox super gut aus, im Internet Explorer jedoch total aus dem Ruder, gehe davon aus dass es aufgrund der CSS Einbindung ist. Wenn ich den CSS Link rausnehm, sieht die Seite im FF dann aus wie im IE nun.

Wenn noetig, kopier ich die CSS hier rein, ist aber a bisserl gross ;)

thx

[KTB]

Eine Liste der Unterstützten Parameter findest du hier.
Es wird wohl eine Sache der Interpretation sein, denn jeder Browser denkt auf diesem Gebiet etwas anders.

[feuervogel]

dieses thema ist nicht so ganz trivial. ne ganz gute übersicht zu den einzelnen css-attributen findest du unter www.css4you.de

[rsciw]

Sauber, danke.
Interessante Seite.

Und daemliches IE, macht einen ja nur Probleme... :|

Frag mich immer wieder was die Leute bei M$ sich eigentlich denken...

[KTB]

Sach das nicht...wenn ich eine Seite erstmal nur mit dem IE aufbaue dann wunder ich mich auch warum es im FiFo so anders aussieht.

[rsciw]

hm, FF hat aber weniger bis gar nicht (afaik!) eigene tags, die nur FF interpretieren kann, wohingegen MS IE ja mehrere so sachen hat, drum sieht es oefters ja beim IE leider anders aus :|

aehnlich wie mein neulicher Fall, wo IE einfach jedes JPeg image als
image/pjpeg
ausgibt im image header...
und sonstige solcher Sachen :|

[xlb]

Zitat von rsciw

FF hat aber weniger bis gar nicht (afaik!) eigene tags, die nur FF interpretieren kann, wohingegen MS IE ja mehrere so sachen hat, drum sieht es öfters ja beim IE leider anders aus

Das hat mit "Tags" (HTML) aber nix zu tun. Welche sollen das sein ?

Meiner Erfahrung nach ist zumindest "das HTML des IE" konform zu den Vorgaben des W3C. Wohingegen FF/Mozilla z.B. mit <embed> daherkommt, welches einem Bestreben nach validem Quellcode nicht unbedingt entgegenkommt.
Ferner sollte man hier drauf achten, welches Doctype "zum Zuge kommt".

Bei älteren IE Versionen wurden z.B. Zeilenumbrüche im Quellcode "mitgeparst" und sorgten im (Tabellen-)Layout für "Lücken", wo keine sein sollten.
Ansonsten hat der IE ein verkorkstes Boxmodell, was beim CSS-Layout zu Problemen führt (was in der Regel auch dafür verantwortlich ist, dass es im IE "anders" aussieht).
Mozilla(s), wie auch der IE unterstützen jeweils eine Menge proprietärem CSS-Zeugs. (Wobei der IE mit seinen Filtern und farbigen Scrollbalken die Nase deutlich vorne hat).

[rsciw]

brummt der kopf vom durchschauen und suchen...

Das ist nun ne ganze Menge, sach ja auch nicht dass es jemand durchschauen soll, wenn jedoch jemand was findet warum IE es verhaut, waer ich sehr dankbar :)

das is die html einbindung von divs:

<link href="css/wa_css.css" rel="stylesheet" type="text/css" />

<title>page.com > <? echo $page_title ?> </title><div id="main_top_nav">

<? include ('inc/topnav.php'); ?> </div>
<div id="ads_area">
<? include ('inc/ads.php'); ?> </div> 

<div id="hp_main_project"><? echo $featured_proj; ?>
<img src="new_html_templates/layout_graphics/images/featuredflag.gif" width="171" height="16" class="feature_flag1"></div>
<div id="hp_com"></div>
<div id="hp_jobs"></div>
<div id="hp_jobs_list"><img src="new_html_templates/layout_graphics/images/jobs-header.gif" width="163" height="135"></div>
<div id="hp_rec"></div>

<div id="new_items">

<div id="new_item"><img src="new_html_templates/layout_graphics/images/wa_10_2_39.jpg" width="39" height="13" class="immtitle"><? echo $recent_prac[1]; ?></div>

<div id="new_item"><img src="new_html_templates/layout_graphics/images/wa_10_2_39.jpg" width="39" height="13" class="immtitle"><? echo $recent_prac[2]; ?></div>

<div id="new_item"><img src="new_html_templates/layout_graphics/images/wa_10_2_45.jpg" width="112" height="13" class="immtitle"><? echo $recent_proj[1]; ?></div>

<div id="new_item"><img src="new_html_templates/layout_graphics/images/wa_10_2_45.jpg" width="112" height="13" class="immtitle"><? echo $recent_proj[2]; ?></div>

</div>

<div id="latest_prac"><? echo $newest_pracs; ?></div>
<div id="latest_pro"><? echo $newest_projs; ?></div>

so sieht z.B eine der in den html tags eingebundene PHP variable aus:

PHP-Code:

$recent_prac[$pracno] .= "<div id = 'new_itema'><img src = '/content/".$a_id."/size_c/".$files."' class='corner_bl'/></div>"; 


und die CSS datei...

/* CSS Document */

body {
	background-color:#E0E2E1;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
}
#main_top_nav {
	float: left;
	width: 163px;
	left: 10;
	top: 10;
	height: 63px;
	position: absolute;
}
#ads_area {
	float: left;
	width: 163px;
	left: 699;
	top: 118;
	height: 63px;
	position: absolute;
}#main_logo {
	float: left;
	width: 163px;
	left: 0px;
	top: 0px;
	height: 63px;
	position: absolute;
}#maindiv {
	top: 18px;
	left: 18px;
	position: relative;
	height: auto;
	background-color: #FFFFFF;
}
.footer {
	float: left;
	top: 100%;
	left: 0px;
	padding-bottom: 9px;
}
#main_nav {
	width: 507px;
	left: 172px;
	top: 0px;
	height: 63px;
	position: absolute;
	background-image: url(../new_html_templates/layout_graphics/images/main-nav.gif);
	background-repeat: no-repeat;
}
#nav_bar {
	width: 851px;
	left: 0px;
	top: 72px;
	height: 27px;
	position: absolute;
	background-image: url(../new_html_templates/layout_graphics/images/nav-bar.gif);
	background-repeat: no-repeat;
	padding-top: 9px;
	padding-left: 9px;
	font-size: 10px;
}
#login {
	float: right;
	width: 163px;
	left:688px;
	top: 0px;
	height: 63px;
	position: absolute;
	background-image: url(../new_html_templates/layout_graphics/images/login.gif);
	background-repeat: no-repeat;
}
#ad_mr {
	width: 163px;
	height: 279px;
	background-image: url(../new_html_templates/layout_graphics/images/pa1.gif);
	background-repeat: no-repeat;
	margin-bottom: 10px;
}
#ad_br {
	width: 163px;
	height: 135px;
	background-image: url(../new_html_templates/layout_graphics/images/pa2.jpg);
	background-repeat: no-repeat;
	margin-bottom: 10px;
}
#ad_brb {
	width: 163px;
	height: 135px;
	background-image: url(../new_html_templates/layout_graphics/images/pa2.jpg);
	background-repeat: no-repeat;
}
#hp_main_project {
	background-color:#38ab2b;
	float: left;
	width: 335px;
	height: 279px;
	left:10px;
	top: 118px;
	position: absolute;
	background-image: url(../new_html_templates/layout_graphics/images/green-tab-2columns.jpg);
	background-repeat: no-repeat;
	background-position: top;
}
#hp_main_project_ins {
	background-color:#38ab2b;
	float: left;
	width: 335px;
	height: 223px;
	left:0px;
	top: 56px;
	position: absolute;
}
#proj_images {
	float: left;
	width: 507px;
	height: 32px;
	left:344px;
	top: 108px;
	position: absolute;
	background-color: #FFFFFF;
}
#proj_image {
	float: left;
	width: 507px;
	height: 32px;
	left:344px;
	top: 138px;
	position: absolute;
	background-color: #FFFFFF;
}
.subtext {
	position: absolute;
	float: right;
	padding-top: 15px;
	right: 9px;
	font-size: 9px;
}
#proj_typology {
	float: left;
	width: 507px;
	height: 63px;
	left:344px;
	top: 108px;
	position: absolute;
	background-color: #FFFFFF;
}
#thumblist{
	width:300px;
	margin-bottom: 9px;
	height:50px;
}
#thumblistim{
	float: left;
}
#thumblistima{
	position: relative;
	float: right'
	left:9px
	width:200px;
}
#thumblistimb{
	position: relative;
	float: left;
	left:9px;
	width:200px;
}
#prac_projects{
	float: none;
	position: absolute;
	width: 516px;
	left:344px;
	top:180px;
}
#practice_proj_stack{
	background-image: url(../new_html_templates/layout_graphics/images/white-tag-1col.jpg);
	background-repeat: no-repeat;
	background-position: top;
	float: left;
	background-color: #FFFFFF;
	float: left;
	width: 163px;
	height: 135px;
	position: relative;
	margin-right: 9px;
	margin-bottom: 9px;
}
#proj_thumbs{
	position: absolute;
	width:515px;
	left:344px;
	top:655px;
}
#proj_info {
	position: absolute;
	width: 335px;
	height:auto;
	left:0px;
	top: 108px;
	background-color: #FFFFFF;
	padding-bottom: 18px;
}
#hp_jobs_list {
	float: left;
	width: 163px;
	height: 135px;
	left:526px;
	top: 262px;
	position: absolute;
}
#hp_jobs {
	background-image: url(../new_html_templates/layout_graphics/images/jobs.gif);
	background-repeat: no-repeat;
	background-position: top;
	float: left;
	width: 163px;
	height: 135px;
	left:526px;
	top: 118px;
	position: absolute;
	background-color: #4E96D4;
}
#hp_com {
	background-image: url(../new_html_templates/layout_graphics/images/commun.gif);
	background-repeat: no-repeat;
	float: left;
	background-color: #FFFFFF;
	width: 163px;
	height: 135px;
	left:354px;
	top: 118px;
	position: absolute;
}
#hp_rec {
	float: left;
	width: 163px;
	height: 135px;
	left:354px;
	top: 262px;
	position: absolute;
	background-image: url(../new_html_templates/layout_graphics/images/com-header.gif);
	background-repeat: no-repeat;
}
#latest_prac {
	float: left;
	width: 335px;
	height: 335px;
	left:10px;
	top: 550px;
	position: absolute;
	background-image: url(../new_html_templates/layout_graphics/images/latest-pras.gif);
	background-repeat: no-repeat;
	padding-top: 27px;
	padding-left: 9px;
}
#latest_pro {
	float: left;
	width: 335px;
	height: 335px;
	left:354px;
	top: 550px;
	position: absolute;
	background-image: url(../new_html_templates/layout_graphics/images/latest-pros.gif);
	background-repeat: no-repeat;
	padding-top: 27px;
	padding-left: 9px;
}
#new_item {
	width: 163px;
	height: 135px;
	background-image: url(../new_html_templates/layout_graphics/images/white-tag-1col.jpg);
	background-repeat: no-repeat;
	background-position: top;
	background-color: #FFFFFF;
	float: left;
	margin-right: 9px;
}
#new_itema {
 	padding-top: 13px;
}
#new_items {
	float: left;
	left:10;
	top: 406px;
	position: absolute;
	width: 705;
	height: 135px;
	vertical-align: top;
}
#new_pro_1 {
	float: left;
	width: 163px;
	height: 135px;
	left:344px;
	top: 406px;
	position: absolute;
 	background-image: url(../new_html_templates/layout_graphics/images/white-tag-1col.jpg);
	background-repeat: no-repeat;
	background-position: top;float: left;
	background-color: #FFFFFF;
}
#new_pro_2 {
	float: left;
	width: 163px;
	height: 135px;
	left:516px;
	top: 396px;
	position: absolute;
 	background-image: url(../new_html_templates/layout_graphics/images/white-tag-1col.jpg);
	background-repeat: no-repeat;
	background-position: top;float: left;
	background-color: #FFFFFF;
}
img.hp {
	float: right;
	position: absolute;
	bottom: 0%;
}
#info_text {
	position: relative;
	top: 9px;
	left: 9px;
	width: 90%;
}
img.feature_flag1 {
	float: right;
	position: absolute;
	bottom: 18px;
	left: 18px;
}
img.corner_bl {
	position: absolute;
	bottom: 0%;
	left: 0px;
}
img.alignbtm {
	position: absolute;
	bottom: 0%;
	left: 0px;
	background-color:#E0E2E1;
	padding-bottom:18px;
}
img.corner_tl {
	top: 0px;
	position: absolute;
	left: 0px;
}
img.corner_br {
	float: right;
	position: absolute;
	right: 0px;
	bottom: 0px;
}
img.corner_tr {
	position: absolute;
	float: right;
	right: 0px;
}
img.immtitle {
	position: relative;
	left: 7px;
	top: 7px;

}
img.practitle {
	position: relative;
	left: 9px;
	top: 9px;
}
img.big_immtitle {
	position: relative;
	left: 7px;
	top: 7px;
}
#bigestim {
	float: left;
	width: 163px;
	height: 135px;
	left:344px;
	top: 252px;
	position: absolute;
}
img.small_thumbs {
	margin-right: 9px;
	margin-bottom: 9px;
}
#main_nav #navcol_1 {
	left: 178px;
	position: relative;
	width: 132px;
	height: 50px;
	top: 8;
	float: left;
}
#main_nav #navcol_2 {
	left: 200px;
	position: relative;
	width: 132px;
	height: 50px;
	top: 8;
	float: left;
}

[Andes]

<link href="css/wa_css.css" rel="stylesheet" type="text/css" />

<title>page.com > <? echo $page_title ?> </title><div id="main_top_nav">

<? include ('inc/topnav.php'); ?> </div>
<div id="ads_area">
<? include ('inc/ads.php'); ?> </div> 

<div id="hp_main_project"><? echo $featured_proj; ?>
<img src="new_html_templates/layout_graphics/images/featuredflag.gif" width="171" height="16" class="feature_flag1"></div>
<div id="hp_com"></div>
<div id="hp_jobs"></div>
<div id="hp_jobs_list"><img src="new_html_templates/layout_graphics/images/jobs-header.gif" width="163" height="135"></div>
<div id="hp_rec"></div>

<div id="new_items">

<div id="new_item"><img src="new_html_templates/layout_graphics/images/wa_10_2_39.jpg" width="39" height="13" class="immtitle"><? echo $recent_prac[1]; ?></div>

<div id="new_item"><img src="new_html_templates/layout_graphics/images/wa_10_2_39.jpg" width="39" height="13" class="immtitle"><? echo $recent_prac[2]; ?></div>

<div id="new_item"><img src="new_html_templates/layout_graphics/images/wa_10_2_45.jpg" width="112" height="13" class="immtitle"><? echo $recent_proj[1]; ?></div>

<div id="new_item"><img src="new_html_templates/layout_graphics/images/wa_10_2_45.jpg" width="112" height="13" class="immtitle"><? echo $recent_proj[2]; ?></div>

</div>

<div id="latest_prac"><? echo $newest_pracs; ?></div>
<div id="latest_pro"><? echo $newest_projs; ?></div>

Was soll das sein? Deine ganze HTML--Seite oder nur ein Teil? Was hat das Title-Tag dort zu suchen?
Wie soll man dir hierzu etwas sagen, wenn man nicht den ganzen HTML-Code kennt. Wichtig z.Bsp. ist die Doctype-Definition.

Ließ dir mal auf SelfHTML das Boxmodell durch, das kann schon sehr Hilfreich sein, warum der IE und Gecko-Browser zu unterschiedlichen Darstellungen kommen.
Boxmodell

[feuervogel]

zudem du gerne deinen code auf ein minimum reduzieren darfst, so dass das problem immer noch da ist, aber nicht so viel (überflüssiger) code.