PHP Forum

PHP Forum (http://www.selfphp.de/forum/index.php)
-   HTML, CSS und JavaScript Help! (http://www.selfphp.de/forum/forumdisplay.php?f=24)
-   -   IExplorer <-> Firefox + CSS (http://www.selfphp.de/forum/showthread.php?t=14633)

rsciw 21.09.2006 19:52:33

IExplorer <-> Firefox + CSS
 
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 22.09.2006 10:05:46

AW: IExplorer <-> Firefox + CSS
 
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 22.09.2006 10:06:13

AW: IExplorer <-> Firefox + CSS
 
dieses thema ist nicht so ganz trivial. ne ganz gute übersicht zu den einzelnen css-attributen findest du unter www.css4you.de

rsciw 22.09.2006 12:11:49

AW: IExplorer <-> Firefox + CSS
 
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 22.09.2006 12:21:21

AW: IExplorer <-> Firefox + CSS
 
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 22.09.2006 12:51:26

AW: IExplorer <-> Firefox + CSS
 
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 22.09.2006 13:22:04

AW: IExplorer <-> Firefox + CSS
 
Zitat:

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 22.09.2006 13:37:31

AW: IExplorer <-> Firefox + CSS
 
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:
Code:

<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...

Code:

/* 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 23.09.2006 01:25:46

AW: IExplorer <-> Firefox + CSS
 
Code:

<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 23.09.2006 10:32:39

AW: IExplorer <-> Firefox + CSS
 
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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:02:05 Uhr.

Powered by vBulletin® Version 3.8.3 (Deutsch)
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.