Autor |
Nachricht |
Felou
Threadersteller
Dabei seit: 30.10.2008
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 30.10.2008 13:22
Titel IE div backgroundimage position |
|
|
Hallo werte Forengemeinschaft
*allen herzlich zuwink* Ich brauche eure Hiiiilfe, bitte. Folgendes Problem:
Abgerundete Ecken bei einem Kasten, nachdem dieser eine CSS Befehl
-moz-border-radius: .. px; -khtml-border-radius:30px; im Explorer noch nicht funzt, habe ich den jetzt
mit Bildern oben und unten gebaut. Der Kasten soll nur in der Höhe variieren können.
Das sieht so aus bei FF, Opera, Safari etc. Mac/PC:
Der IE6 + 7 machen daraus soetwas:
den IE6 kann ich noch bezierzen mit
margin-top: -1px;
aber der 7er lässt sich nicht beeindrucken.
Der Code dazu sieht so aus:
Code: | /* Tabelle Infobox*/
#tabinfo {
font-family: "Lucida Grande", "Trebuchet MS", sans-serif;
font-size: 10px;
line-height: 18px;
width: 250px;
}
#tabinfo ul, ol { padding-left: 30px; }
.tabcutters {
background-image: url(../images/BG_cutter_info.gif);
background-repeat: repeat-y;
list-style-position: outside;
list-style-image: url(../images/listenpunkt-dblau.gif);
}
|
und der HTML Code so:
Code: | <td><div id="tabinfo" class="tabcutters"><img src="../images/BG_cutter_info_O.gif" alt="rahmen oben" />
<ol>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
<img src="../images/BG_cutter_info_U.gif" alt="rahmen unten" /></div></td> |
Habe schon getestet mit
Code: | background-position: top;
background-position: left; |
noch beim Rahmen oder auch der
Code: | background-position: 0px 0px; |
aber der IE7 rührt sich nicht. Hat jemand ne Idee? *hoff*
Das ganze ist doctype XHTML 1.0 Transitional und allg. * margin und padding =0 gesetzt.
Hoffnungsvolle Grüße Fe
|
|
|
|
|
Nik-Flip
Dabei seit: 04.08.2008
Ort: Düsseldorf
Alter: -
Geschlecht:
|
Verfasst Fr 31.10.2008 13:23
Titel
|
|
|
Guten Tag,
erstell doch einfach zwei Klassen für die Listen: <li class="top"> und <li class="bottom">
HTML:
Code: |
<ul id="box">
<li class="top"></li>
<li>Inhalt</a>
<li>Inhalt</a>
<li>Inhalt</a>
<li class="bottom"></li>
|
CSS:
Code: |
#box {background:url(BILDFUERHINTEN) repeat-y;}
#box li.top {height:xxpx;background:url(BILDFUEROBEN) no-repeat;}
#box li.bottom {height:xxpx;background:url(BILDFUERUNTEN) no-repeat;}
|
*Hab es nicht getestet, sollte es nicht klappen, einfach bei mir melden.
Zuletzt bearbeitet von Nik-Flip am Fr 31.10.2008 13:25, insgesamt 3-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
Felou
Threadersteller
Dabei seit: 30.10.2008
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 02.11.2008 20:21
Titel
|
|
|
Vielen Dank Nik-Flip für deinen Tipp! War auch gut gedacht fand ich, hatte aber
leider doch noch das gleiche Problem im IE7 und der IE6 hat unten verschoben,
aber ich bin auf ein anderes Script gestossen:
http://www.redmelon.net/tstme/4corners/
klappt wunderbar in allen Browsern.
Grüssla Fe
|
|
|
|
|
|
|
|
Ähnliche Themen |
[CSS] position
[CSS] - Position
XSLT Position()
Position fixed
position : relative
Popup Position!
|
|