[CSS] CSS Anzeigefehler IE

Dieses Thema im Forum "Webdesign" wurde erstellt von mySQL, 30. September 2010 .

Schlagworte:
  1. 30. September 2010
    CSS Anzeigefehler IE

    Moin moin

    Ein Kumpel hat sich an mich gewandt. Er hat mit irgend nem Homepage-Maker
    eine Seite erstellt. Schlicht, aber sieht dennoch gut aus.

    Firefox und Opera stellen die Seite top dar, der Internet explorer verfälscht jedoch
    die Menüschrift sowie den Hover!

    Hat jemand ne idee? Der Style ist direkt in die HTML-Dateien eingebunden:

    Code:
    <style type="text/css">html, body {
 height: 100%;
 margin: 0px;
 padding: 0px;
}

body {
 background-image: url(./userfiles/tplImages/bg.jpg);
 background-color: #8b8b8b;
 background-repeat: repeat-x;
 background-position: top;
}

body,td,div {
 font-family: Verdana, Arial, Helvetica, Tahoma, sans_serif;
 font-size: 12px;
 color: #333333;
}

#p3_tplSiteArea {
 width: 100%;
 height: 100%;
}

#p3_tplHead {
 height: 81px;
 padding-top: 0px;
 vertical-align: top;
}

#p3_tplNav {
 height: 32px;
}

#p3_tplMain {
 vertical-align: top;
 padding-top: 5px;
 padding-right: 5px;
}

#p3_tplSubL {
 vertical-align: top;
 text-align: center;
 width: 250px;
 padding-top: 50px;
}

#p3_tplSubR {
 vertical-align: top;
 width: 200px;
 border-left: 1px dashed #666666;
 padding-top: 5px;
 padding-left: 5px;
}

#p3_tplFooter {
 height: 31px;
 vertical-align: bottom;
}

.p3_navFrameStyle_19 {
}
.p3_navSubFrameStyle_19 {
 text-align: left;
 margin-top: 6px;
 margin-bottom: 6px;
 background-color: #191A1C;
 border-right: 1px solid #000;
 border-left: 1px solid #000;
 border-bottom: 1px solid #000;
 -moz-opacity: 0.95;
 -khtml-opacity: 0.95;
 filter: alpha(opacity=95);
}
.p3_navBoxStyle_19 {
 display: inline;
 margin-right: 20px;
}
.p3_navSubBoxStyle_19 {
 display: block;
}
.p3_navLinkStyle_19 {
 padding: 7px;
 display: inline-block;
 font-family: Tahoma, Verdana, Arial, Helvetica, serif;
 font-size: 12px;
 font-weight: bold;
 text-decoration: none;
 color: #ffffff;
 -moz-opacity: 0.20;
 -khtml-opacity: 0.20;
 filter: alpha(opacity=20);
}
.p3_navSubLinkStyle_19 {
 display: block;
 padding: 7px;
 font-family: Tahoma, Verdana, Arial, Helvetica, serif;
 font-size: 12px;
 text-decoration: none;
 color: #a9a9a9;
}

.p3_navLinkStyle_19:HOVER {
 background-color: #ffffff;
 padding: 7px;
 display: inline-block;
 text-decoration: none;
 color: #000;
}

.p3_navSubLinkStyle_19:HOVER {
 display: block;
 background-color: #cccccc;
 text-decoration: none;
 color: #000000;
}
</style>
    Die unteren müssten die betreffenden Problemfälle sein.
    Was mir aufgefallen ist, dort ist im Quelltext etwas kommentiert mit:

    Code:
    <!--[if lt IE 7]>
<style type="text/css">.p3_navSubLinkStyle_19 {width: 100%;}</style>
<![endif]-->
<style type="text/css"></style><link rel="Stylesheet" href="./includes/styles/sitestyle.css">
    In der genannten "sitestyle.css" steht nur drin:

    Code:
    BODY {
margin: 0px;
padding: 0px;
font-family: Tahoma,Arial,Helvetica,Verdana;
font-size: 12px;
}
A {
font-family: Tahoma,Arial,Helvetica,Verdana;
font-size: 12px;
}
    Was muss nun getan werden, bzw was hat der IE da für ein Problem?

    Vielen Dank, BW selbstverständlich.
     
    + Multi-Zitat Zitieren
  3. 1. Oktober 2010
    AW: CSS Anzeigefehler IE

    es wird gesagt das
    HTML:
    font-family: Verdana, Arial, Helvetica, Tahoma, sans_serif;
    die schriftart verdana, ... sein soll
    jetzt wird aber gesagt
    bist du der ie >=7 dann mach
    HTML:
    font-family: Tahoma,Arial,Helvetica,Verdana;
    die schriftart tahoma

    also stellt der ie was anderes dar als alle anderen.
     
    + Multi-Zitat Zitieren
  4. 1. Oktober 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: CSS Anzeigefehler IE

    Hallo Onip, danke erstmal für deinen Ratschlag.
    Die andere Schriftart stört nicht wirklich, viel eher
    stört die Schriftfarbe und der Hover.
    Sieht in etwa so aus:

    Bild

    Links die Darstellung im IE ( falsch und dunkel )
    Rechts im Firefox/Opera ( richtig und hell )

    Hoffentlich hat noch wer nen Tipp oder nen Lösungsansatz -.-
     
    + Multi-Zitat Zitieren
  5. 2. Oktober 2010
    AW: CSS Anzeigefehler IE

    die einzelnen links haben die klasse .p3_navLinkStyle_19 ?
    dann wirds doch korrekt dargestellt.

    -moz-opacity
    -khtml-opacity
    filter: alpha(opacity=20)
    bewirken ja transparenz

    bewirken ja ein transparent effekt.
     
    + Multi-Zitat Zitieren
  6. 3. Oktober 2010
    AW: CSS Anzeigefehler IE

    Die Seiten werden so eingebunden:

    Hab die 3 Zeilen mal rausgenommen, die für die Transparenz sorgen. Leider keine Besserung.
     
    + Multi-Zitat Zitieren
  7. 4. Oktober 2010
    AW: CSS Anzeigefehler IE

    du sagst dem container .p3_navBoxStyle_19 das er transparent sein soll.
    alle inhalte darin werden auch transparent.
     
    + Multi-Zitat Zitieren
  8. 4. Oktober 2010
    AW: CSS Anzeigefehler IE

    Ich möchte ja keine Transparenz, sondern das weiße haben, wie
    oben im Bild!

    BWs erstmal raus.
     
    + Multi-Zitat Zitieren
  9. 4. Oktober 2010
    AW: CSS Anzeigefehler IE

    Code:
    -moz-opacity: 1;
-wekit-opacity: 1;
opacity: 1;
filer: alpha(opacity=100);
    hebt die transparenz wieder auf.
     
    + Multi-Zitat Zitieren
  10. 4. Oktober 2010
    AW: CSS Anzeigefehler IE

    Danke, das hat schonmal geklappt.
    Hab die 3 Zeilen in die "sitestyle.css" eingefügt ( im body-bereich ),
    nun ist die Transparenz schonmal weg.

    Jetzt klappt der Hover noch nicht. Der soll ja den weißen Kasten erzeugen.
    Das muss ja nun auch irgendwie in die Sitestyle.css.

    Hab schonmal den entsprechenden Code aus den HTML-Dateien genommen,
    aber den frisst er nicht. Verstehe auch die "pseudo" IF-Anweisung nicht,
    warum der IE da extra die Weiterleitung an die Style.css bekommt.
     
    + Multi-Zitat Zitieren
  11. 5. Oktober 2010
    AW: CSS Anzeigefehler IE

    ich versteh das auch nicht, warum man das macht.

    ich mach das immer so
    für alle:
    HTML:
    #div {
 margin: 1px 2px 3px 4px;
}
    für ie 6
    HTML:
    * html #div {
 margin: 5px 6px 7px 8px;
}
    für ie 7
    HTML:
    * + html #div {
 margin: 9px 10px 11px 12px;
}
    siehe
    CSS Filter Browserweiche per CSS

    // edit
    hier mal ein normaler hover
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Unbenannt</title>

<style type="text/css">
a.link {
 display: block;
 float: left;
 padding: 4px 12px;
}
a.link:hover {
 background: #666;
 color: #fff;
}
</style>

</head>

<body>

<a href="#" class="link">link 1</a>
<a href="#" class="link">link 2</a>


</body>
</html>
     
    + Multi-Zitat Zitieren
  12. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten