Container: links ausgerichtet, 2.Container im 1.: float: right;

[Birgit]

Liebes Forum

Container: links ausgerichtet, 2.Container im 1.: float: right;

Funktioniert so weit auch ganz gut!
Nur leider nicht am IE 5.

Leider komme ich aber auch nicht selbst auf eine Lösung. Vielleicht könnt Ihr mir helfen.

C O D E S C H N I P S E L :
--------------------------------------------------------------------
<a class="downloadLink" href="../pdf/word/produktinfo_0100.doc" target="_blank">
    <div id="rechts">
        <img src="../images/rtf.gif" width="34" height="30"
         hspace="15" border="0" align="middle" alt="RTF-Dokument
         downloaden">[32 KB]
    </div>
  0100 - Volksschulen&nbsp;
</a>
--------------------------------------------------------------------

C S S - C O D E S C H N I P S E L:
--------------------------------------------------------------------
#rechts {
float: right;
width: 120px;
height: 40px;
vertical-align: middle;
line-height: 40px;
cursor: hand;
}

a.downloadLink:link, a.downloadLink:visited, a.downloadLink:hover, a.downloadLink:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
text-decoration: none;
vertical-align:middle;
text-align:left;
line-height:40px;
cursor: hand;
border-bottom-style: dashed;
border-top-style: dashed;
width: 600px;
height: 40px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 21px;
padding-right: 2px;
border-top-width: 1px;
border-bottom-width:1px;
display:block;
}

a.downloadLink:link, a.downloadLink:visited {
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}

a.downloadLink:hover, a.downloadLink:active {
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
background-image:  url(../screen/images/hg_roll1.gif);
background-repeat: repeat-y;
}
--------------------------------------------------------------------

Das ganze könnt Ihr auf http://www.reniets.at/vorschau/produktuebersicht/bestell.php
ansehen.
Im IE5 wird der ganze Layer rechts ausgerichtet.
Richtig wäre natürlich den ::downloadLink:: links ausrichten und dann den div ::rechts:: rechts ausrichten.

Habt Ihr vielleicht eine Ahnung wie ich das Problem im IE5 lösen könnte?

[wahsaga]

hi,

<a class="downloadLink" href="../pdf/word/produktinfo_0100.doc" target="_blank">
    <div id="rechts">

div hat in a nichts zu suchen.

<img src="../images/rtf.gif" width="34" height="30"
         hspace="15" border="0" align="middle" alt="RTF-Dokument
         downloaden">[32 KB]

warum lässt du nicht das bild selbst floaten, wozu überhaupt noch ein container drumherum?

Das ganze könnt Ihr auf http://www.reniets.at/vorschau/produktuebersicht/bestell.php
ansehen.

beseitige bitte erst mal die groben fehler, wie die genannte falsche verschachtelung, die mehrfachverwendung von IDs, etc.

gruß,
wahsaga

[Birgit]

Hallo WAHSAGA!

Danke erstmal für deine schnelle hilfe!

div hat in a nichts zu suchen.
warum lässt du nicht das bild selbst floaten, wozu überhaupt noch ein container drumherum?

Ich weis zwar dass ein div in a prinzipell nichts verloren hat aber ich möchte ja das bild und die KB rechts stehen haben und trotzdem die ganze Zeile als ein Element behandeln (wegen dem rollover-effekt)

Lg Birgit

Ps: Hab schon angefangen aufzuräumen,
Danke für den Tip.

[Ingo Turski]

Hi,

Ich weis zwar dass ein div in a prinzipell nichts verloren hat aber ich möchte ja das bild und die KB rechts stehen haben und trotzdem die ganze Zeile als ein Element behandeln (wegen dem rollover-effekt)

dafür benötigst Du aber kein DIV, sondern nur die display:block Eigenschaft für den Link.

freundliche Grüße
Ingo

[Birgit]

Hi,

dafür benötigst Du aber kein DIV, sondern nur die display:block Eigenschaft für den Link.

Nur das eigentliche Problem ist ja das der erste Teil des Links links ausgerichtet sein soll und der Zweite Teil rechts.
Beim Rollover soll nun aber Teil 1 und Teil 2 mit dem Effekt versehen sein.

in der Grafik ist der 2. Link als Rollover erkennbar.
So hätte ich das ganze halt auch gern im IE5.

Lg. Birgit

Ps: Link hat display:block;

[Ingo Turski]

Hi,

Nur das eigentliche Problem ist ja das der erste Teil des Links links ausgerichtet sein soll und der Zweite Teil rechts.

und wo siehst Du ein Problem, das valide umzusetzen und statt <div id="rechts"> einfach <span id="rechts"> zu verwenden?

freundliche Grüße
Ingo