2010-12-17 3 views
1

Ich habe eine wirklich harte Zeit herauszufinden, warum IE7 fügt zusätzliche Polsterung auf dieser Seite!IE7 Anzeige Probleme (Hinzufügen von zusätzlichen oberen Rand)

Dies ist, was IE7 tut: http://imgur.com/lwyRI.png

Die richtige Seite würde die drei schwarzen Laschen auf die Grafik oben verbunden haben. So soll es aussehen: auch gespeichert auf imgur: 64qbf.png (ich darf nur einen Link)

Der Seitenlink befindet sich im img. (wieder kann ich nur einen link)

bitte hilfe!

CSS-Code:

<style type="text/css"> 
#background{ 
    background-image: url(/images/store/vaporIronBK.jpg); 
    background-repeat:no-repeat; 
    height:auto; 
    width:665px; 

    margin-top:125px; 

    margin-left:228px; 
    padding-top:5px; 
    font-size:15px; 
} 

#background a { 
    color: #ffffff; 
    text-decoration: none; 
} 

#background a:hover { 
    color: #de156d; 
} 

#videoLinks { 
    margin-top:52px; 
    height: 100px; 
} 

#buy{ 
    width:400px; 
    float:left; 
    clear:both; 
    padding-left:235px; 
    color:#000000; 
} 

#video { 
    float: right; 
    left: 683px; 
    margin-left: 35px; 
    margin-top: 166px; 
    width: 200px; 
    color: #000000; 
} 

#video a { 
    text-decoration: none; 
    color: #000000; 
} 

#video a:hover { 
    color: #de156d; 
} 

#footnotes { 
    color:#ffffff; 
    margin-top: 37px; 
} 

#bottom-text { 
    margin-left:40px; 
    margin-top:445px; 
    width:575px; 
} 

#bottom-text a { 
    color: #de156d; 
    text-decoration: none; 
} 

#bottom-text a:hover { 
    color: #000000; 
} 

#bottom-text p { 
    text-align: justify; 
} 

#bottom-text h2 { 
    font-size: 25px; 
    color: #000000; 
    padding-bottom: 10px; 
} 

#bottom-text h3 { 
    padding-bottom: 5px; 
} 

#bottom-text p { 
    padding-bottom: 20px; 
} 

#bottom-text .header-text { 
    padding-bottom: 25px; 
} 

#bottom-text p.taylor-image { 
    text-align: center; 
} 

.tabs { 
    height: 30px; 
    width: 180px; 
    float: left; 
    margin-left: 30px; 
    padding-top: 10px; 
} 
</style> 
+1

Sie müssen einige Beispielcode/CSS/etwas enthalten. wir können nicht von einem statischen Bild debuggen ... – FatherStorm

+0

Schwer zu sagen ohne tatsächlich etwas Code. Wie wäre es, mindestens die CSS/Attribut-Definitionen für diesen Teil der Seite hinzuzufügen?Oder verwenden Sie einen WYSIWYG-Editor und kennen kein aktuelles HTML/CSS? – Mario

+0

poste einige html und css bitte. damit wird es wie ein Wahrsager sein – Fatih

Antwort

0

nicht sicher, aber versuchen Sie dies in Ihrem CSS heraus tun

body 
{ 
    padding:0; 
    margin:0; 
} 

http://www.w3schools.com/css/css_margin.asp http://www.w3schools.com/css/css_padding.asp

alternativ möchte Code wie von anderen angezeigt sehen.

+0

das ist bereits in der Haupt-CSS-Datei hinzugefügt. Ich habe auch versucht, es ohne Glück auf diese Seite zu setzen. – sahand

0

Verwendung:

display: inline; 

Hoffnung, das hilft.

+0

Ich habe versucht, inline hinzuzufügen und es hat nicht geholfen :( – sahand

+0

ok, wenn Sie immer noch nicht die Lösung finden, dh hat einen doppelten Rand Fehler, lesen Sie über die CSS-Box-Modell oder einfach verwenden Sie eine bedingte wie: dieses Stück Code und es wird dieses Stylesheet nur verwenden, wenn Sie in dem angegebenen Browser sind und fügen Sie ein weiteres Stylesheet nur für das ie, dass Sie das Problem mit haben und entfernen Sie die zusätzliche Marge oder was auch immer Probleme, die Sie erleben Hoffe, dass dies hilft – Adamski

0

Versuchen Sie, margin-top: aus #background zu entfernen und fügen Sie stattdessen eine clear:both oder clear:right für #background hinzu.

1

Ich tue dies auf jede Seite:

<body> 
<!--[if IE]><div class="ie"><![endif]--> 

...LALALA 

<!--[if IE]></div><![endif]--> 
</body> 

Es ist ein bedingter Kommentar genannt wird. Es ist IE proprietär, aber verhält sich wie ein Kommentar zu anderen Browsern und Validatoren.

Jetzt können Sie IE spezifische Regeln mit .ie Vorfahren angeben.

Holen Sie sich einige .ie # was auch immer {position: relative;} geht weiter und legen Sie diese Boxen, wo sie sein sollen!

0

Im Allgemeinen, speziell für IE7, aber für eine bessere Praxis sowieso, immer alle Seiten w/Padding oder Rand angeben ... mit anderen Worten nicht nur margin-top:? Px (? Für was auch immer) und annehmen der Rest ist in Ordnung. Besser, Rand zu verwenden:? Px 0 0 0 oder was auch immer Werte.

Eine weitere allgemeine Idee, insbesondere mit IE 7 und darunter, besteht darin, für das gleiche Element keine Ränder und Abstände zu verwenden.

Auch alles Floating benötigt eine Breite und was den Double-Margin-Bug betrifft, tritt es nur auf, wenn Sie einen Rand auf derselben Seite wie die Seite haben, auf der das Element schwebt ..... also wenn Sie float deklarieren : direkt auf etwas, Sie wollen nicht Rand: 0 20px 0 0 auf die gleiche Sache ... es wird verdoppelt werden. Besser, Padding für das enthaltene Element zu verwenden.