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

Internet Explorer Bugs [Darstellung]

H

Hazelnut

Neues Mitglied
Hallo,

habe auf meiner Seite einige Internet Explorer Bugs. Habe schon echt viel versucht, und gegoogelt. Bin allerdings jetzt mit meinem Latein am ende.

Im Firefox wird der Content Bereich schön zentriert bzw. Dort angezeigt, wo er stehen soll.

Im IE 7 wird er allerdings arg weit Links dargestellt. Das zerschießt die ganze Seite.

Hier noch zwei Screenshots. Einmal mit der IE 7 Ansicht und einmal im Firefox:





Folgende CSS Codes nutze ich:

grid.css

Code: 
@charset "utf-8";
/* 52framework grid

16 cols by 52px, with an 8px gutter

*/

.col {
    margin-left:5px; margin-right:10px;
    display: inline;
    float: left;
    position: relative;
}

.row{
    width: 1030px;
    margin: 276px;
    overflow: hidden;
    margin-top: 15px;
    margin-bottom: 30px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}
.row .row {
    margin: 0 -10px;
    width: auto;
    display: inline-block;
}

.col_1 {    width:40px;     }
.col_2 {    width:100px; }
.col_3 {    width:160px; }
.col_4 {    width:220px; }
.col_5 {    width:280px; }
.col_6 {    width:340px; }
.col_7 {    width:400px; }
.col_8 {    width:494px; }
.col_9 {    width:520px; }
.col_10{    width:580px; }
.col_11{    width:640px; }
.col_12{    width:700px; }
.col_13{    width:760px; }
.col_14{    width:820px; }
.col_15{    width:880px; }
.col_16{    width:940px; }

/* for use on elements like input fields */

.width_1 {    width:40px;     }
.width_2 {    width:100px; }
.width_3 {    width:160px; }
.width_4 {    width:220px; }
.width_5 {    width:280px; }
.width_6 {    width:340px; }
.width_7 {    width:400px; }
.width_8 {    width:460px; }
.width_9 {    width:520px; }
.width_10{    width:580px; }
.width_11{    width:640px; }
.width_12{    width:700px; }
.width_13{    width:760px; }
.width_14{    width:820px; }
.width_15{    width:880px; }
.width_16{    width:940px; }
Style.css

Code: 
/*
Theme Name: Das Leben im Fluss
Theme URI: http://florian-wirths.com/
Description: Wordpress Theme für das-leben-im-fluss.de.
Author: Florian Wirths
Version: 1.0
Tags: blue, white, brown, fixed-width
*/

@charset "utf-8";
/* 52framework General StyleSheet - contains styles for all the HTML elements this framework supports */

header {background:#9DC9E0; -moz-border-radius-topleft:11px; -moz-border-radius-topright:11px; -webkit-border-top-left-radius:11px; -webkit-border-top-right-radius:11px; border-topleft-radius:11px; border-topright-radius:11px; height:112px; position:relative; margin-bottom:13px;}
    header .logo {font-size:34px; height:52px; padding-top:28px; margin-left:11px; font-weight:700; font-weight: bold; text-shadow:1px 1px 2px #000; color:#fff; filter: Shadow(Color=#666666, Direction=135, Strength=3);}
    header .statement {width:20%; text-align:right; padding-top:30px; color: #666666; font-style: italic; margin-right: 44px;}
header nav { background-color:#666666; color:#fff; height:31px;border-top: 1px solid #E9EFF2;}
    nav ul {list-style:none;}
    nav ul li {float:left; margin-left:0px;}
    nav ul li a {display:block; color:#fff; text-decoration:none; padding:6px 8px; height: 12px;}
    nav ul li a:hover, nav ul li.active a {background:none repeat scroll 0 0 #666666; border-left: 1px solid #CCCCCC; color: #FEF9F0}
aside {min-height:600px;}    

    .submit, .submit:visited {
        background: #525252; 
        display: inline-block; 
        padding: 5px 10px 6px; 
        color: #fff; 
        -moz-border-radius: 5px; 
        -webkit-border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        border:none;
        text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
        position: relative;
        cursor: pointer;
        margin-bottom:5px;
    }

footer {
  background:#F2F2F2;
  clear:both;
  font-size:11px;
  margin:0 auto;
  overflow:auto;
  padding-bottom:20px;
  padding-left:20px;
  padding-right:20px;
  padding-top:0;
  text-align:left;
  width:970px;
  height:20px;

}

img {
img.center { text-align : center }
img.right { text-align : right }
img.left { text-align : left }
}

ul .navigation {
margin-right: 10px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size:52%/1.52em;
    background: url("http://www.html.de/images/bg2.png");
}

/* ** ** Common Addative Classes ** ** */
.left  { float:left}
.right { float:right}
.clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0px; height:0px;}
.hide  { display:none}

.align_right    { text-align:right;}
.align_left     { text-align:left;}
.align_center   { text-align:center;}
.align_justify  { text-align:justify;}

.alignleft {float: left; border:3px solid #dfdede; margin:0 8px 5px 0;}
.alignright {float: right; border:3px solid #dfdede; margin:0 0 15px 0;}
.aligncenter {float: none; margin: 0 auto; border:3px solid #dfdede; margin:0 0 15px 0;}
.alignnone {float: none; border:3px solid #dfdede; margin:0 0 15px 0;}

a {    color:#2A8FBD;    }
a:hover, a:focus { text-decoration:underline;}
a:active, a:visited { }

blockquote {
        font-family: Georgia,"Times New Roman", Times, serif; 
        margin:5px; 
        padding:10px;
        font-size:1.52em; 
        color:#999; 
        font-style:italic; 
        line-height:1.3em; 
        width:100%; 
        quotes:none;
    }
    blockquote.left {border-right:1px dashed #ccc; width:35%;}
    blockquote.right {border-left:1px dashed #ccc; width:35%;}

/* ** ** Header Styles ** ** */
h1, h2, h3, h4, h5 {margin:0 0 0.5em; line-height:1.1em; font-family:DejaVu Sans, Bitstream Vera Sans, Segoe UI, Lucida Grande, Verdana, Tahoma, Arial, sans-serif;}
h1 {    color:#404040;font-size:20;} 
h2 {    color:#666666;font-size:19px;} 
h3 {    color:#404040;font-size:18;} 
h4 {    color:#404040;font-size:17;} 
h5 {    color:#404040;font-size:16;} 
h6 {    color:#404040;font-size:15em;}

/* ** ** ul li's ** ** */
ul li
{
    margin-left:25px;
}

/* ** ** custom select color ** ** */
::selection {
    background: #525252; /* Safari */
    }
::-moz-selection {
    background: #525252; /* Firefox */
    color:#fff;
}
/* ** ** paragraph styling ** ** */
p {margin:0 0 1.52em;}
    p img.left {float:left;margin:1.52em 1.52em 1.52em 0;padding:0;}
    p img.right {float:right;margin:1.52em 0 1.52em 1.52em;}

/* ** ** forms ** ** */
form fieldset {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius:5px; padding-top:5px; padding-left:5px; border:1px solid #ccc; }
form fieldset legend {font-size:1.4em; padding:0 5px;}
form input[type=text], form input[type=email], form input[type=url] {-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; height:20px; margin-bottom:5px; border:1px solid #ccc; padding:4px 0 1px 5px;}
form label {display:block; height:20px; font-size:1.2em;}


strong           {    font-weight:600;}
em, dfn          {    font-style:italic;}
dfn              {   font-weight:600;}
sup, sub         {   line-height:0;}
abbr, acronym   {    border-bottom:1px dashed #ccc;}
address         {    margin:0 0 1.5em;font-style:italic;}
del             {    color:#666;}
pre, code, tt   {    font:1em 'andale mono', 'lucida console', monospace;line-height:1.5; display:block;}
code             {    background-color:#d5d2d8; display:block; padding:0px 2px 4px 26px; background:#fff url(images/code.jpg) no-repeat left top; line-height:1.67em;}
pre             {    margin:1.5em 0;white-space:pre;}

#infobox-index {
border: 1px solid #DDDDDD;
background: #F0F0F0;
padding: 4px 0 0 5px;
height: 43px;
font-family: Tahoma, Arial, sans-serif;
margin-bottom: 35px;
}

#infobox {
    display:block;
    background:#efefef;
    border:1px solid #ccc;
    padding:5px;
    margin-top:25px;
}

#infobox img.avatar {
    float:left;
    margin:0 10px 5px 0;
    padding:3px;
    border:1px solid #ccc;
}

#infobox ul li {
    display:inline;
    margin-right:20px;
}

#breadcrumb {
border-bottom: 1px solid #DDDDDD;
}

#sidebar {
    width: 220px;
    height: 100%;
    float:right;
    border-left: 2px solid #E9EFF2;
}

#sidebar ul li{
background:none repeat scroll 0 0 #ECEFF1;
color:#999999;
-moz-border-radius: 6px;
margin-bottom:8px;
margin-left:3px;
margin-right:20px;
padding:2px 4px 4px;
list-style: none;
}

#article {
margin-top:22px;
margin-left:12px;
/* border-bottom: 1px solid #CCCCCC; */
{
Wäre super wenn mir da einer helfen würde! :>

Link würde ich natürlich auch per PN versenden!
 
Zuletzt bearbeitet:
Hallo,
Du bist echt gut :O)
habe auf meiner Seite einige Internet Explorer Bugs
Zum Vergrößern anklicken....
Stell ein Link rein sonnst kann dir keiner helfen und deswegen hat das bestimmt auch noch keiner gemacht.
Oder Schick den Link halt.
(ist die Seite so schlimm das nicht traust zu zeigen :O) )

Mit dem Code oben kann wohl kaum einer was anfangen und von den Bildern her scheint das auch eher was sehr Simples zu sein vom Template her.

Wie gesagt ohne Link wird das nichts, trau dich, stelle ihn rein, kannst ja nach Lösung wieder Löschen.

Cheffchen
 
Hallo,

brauchst Link nicht schicken.
Sag doch das es ein WordPress Block ist.
Da stimmt wohl einiges mehr nicht, das hat nichts mit IE zu tun. mach erstmal alles Valide und schaffe System rein z.b .col steht mehr als einmal in css Dateien drin und eigentlich immer das gleiche.

Habe mit WordPress und grid nichts am Hut ist mir zu kompliziert aber vielleicht kann dir jemand helfen der sich damit besser auskennt und das auseinander puzzeln.

Cheffchen

EDIT: auch im FF ist nicht alles wie es soll (Menü Pfeil wenn untermenüs vorhanden sind nur auf Startseite)
 
Zuletzt bearbeitet:
Es hatte was mit dem IE zu tun. Er hat eine Codezeile nicht gemocht. Habe Sie entfernt und den Code so gut wie Valide gemacht. (Einen Fehler kriege ich nicht gefixt)

Kennt einer vielleicht ein Script, welches es ermöglicht, abgerundete ecken im IE darstellen zu lassen? Modernizr, ist nicht so gut bzw. funktioniert nicht.
 
Mach lieber ein neuen Beitrag auf wegen den ecken, denn vielle lessen beitrage nicht, wo es schon antworten gibt und auch schon ein paar tage alt sind.
Valide ist relativ, 1 das ist voll im grünen Bereich bloss keine 99 wie vorher. :O).


Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben