✔ Problem: Div ändert beim Überfahren die größe..

L

lacie

• 17. August 2007

• #1

Hallo zusammen,
schon nach einem Tag melde ich mich mit einem neuen Problem.. und ich hoffe das auch diese genauso schnell gelöst werden kann.

Zum Problem:

Ich habe ein Artikelscript, das alle Artikel der Reihe nach anzeigt.
(mit dem Abstand und allem den ich haben will)
Beim überfahren eines Linkes (Artikeltitel) springt (nur im IE) das Element dannach ein Stück weiter nach unten. So als würde der Div Container in dem der Artikel sich befindet vergrößert.

Mein hover effekt ist ein:
font-weight:bold
wenn das was zur sache tut.

Wer schon mit den wenigen Angaben etwas anfangen kann, soll gerne einen Vorschlag machen.
Wer einen Link braucht um sich das ganze mal anzusehen, bitte dannach fragen.
(Ist eine Betaseite, die möglichst noch nicht gesehen werden soll)
Danke für euer Verständniss und eure Hilfe schonmal im vorraus

Gruß lacie

 

Zuletzt bearbeitet von einem Moderator: 17. August 2007

M

Maik

• 17. August 2007

• #2

Hi,

der vollständige Quellcode (HTML + CSS) sollte zunächst mal ausreichen, um sich das näher anschauen zu können.

 

L

lacie

• 17. August 2007

• #3

Die Artikel sind wie folgt untereinander angeordnet:

HTML:

<div id='news'>
<div id='news_titel'><a href='artikel.php?artikelid=8' class='forum'>Test BB Codes #3</a>
<br><img src='images/stars/1.gif'>(1 Votes)</div>
<div id='news_autor'><a href='profile.php?nick=Admin'>Admin</a></div>
<div id='news_date'>16.08.2007 17:49:41</div>
</div>

Dazu das CSS:

Code:

#news{
color:#000000;
width:600px;
text-align:left;
padding-top:25px;
}
#news_titel{
float:left;
width:300px;
padding-bottom:2px;
}
#news_autor{
text-align:right;
float:left;
width:150px;
padding-bottom:2px;
}
#news_date{
text-align:right;
float:left;
width:150px;
padding-bottom:2px;
}

 

M

Maik

• 17. August 2007

• #4

Poste mal besser den Link zur Seite, denn mit dem gezeigten Code-Schnipsel verschiebt sich bei mir im IE nichts.

 

L

lacie

• 17. August 2007

• #5

Ich hab hier bei der Arbeit auch nur IE Version 6.0 wie es in anderen aussieht weiß ich nicht...

Aber wenn du noch kurz wartest bevor du dich in den Quellcode stürzt, ich mach vorher noch ein par \n in mein script zur übersicht!

//edit:

Fertig

 

Zuletzt bearbeitet von einem Moderator: 17. August 2007

L

lacie

• 17. August 2007

• #6

Inzwischen hab ich auch mal probiert verschiedenen Divboxen clear zuzuweisen, allerdings mit keinerlei Effekt...

 

M

Maik

• 17. August 2007

• #7

Wie es scheint, hast du dich an einigen Stellen im HTML-Code mit den schliessenden </div>-Tags verzettelt, wie z.B. im DIV .c2box, wo es vor dem schliessenden </form>, anstatt dahinter notiert ist, oder vor dem Footer, wo plötzlich fünf </div>-Tags auftauchen, obwohl es nur zwei sein dürften.

Zudem muss eine ID in einem Dokument eindeutig sein, d.h. sie darf darin nur einmal vorkommen.

Somit müssen die immer wiederkehrenden IDs #news, #news_titel, #news_autor, #news_date in Klassen umgewandelt werden.

 

M

Maik

• 17. August 2007

• #8

Nachtrag zur "tatsächlichen" Problemlösung

Code:

* html #news_date {
height:1%;
}

Natürlich muss das Stylesheet noch auf die angesprochene Klasse umgestellt werden.

 

L

lacie

• 17. August 2007

• #9

Also die Divs müssten jetzt richtig geschlossen sein.
(war einfach zu unübersichtlich)

die ganzen news id´s in classen umgewandelt.

Dein Vorschlag ausprobiert, doch der fehler bleibt der gleiche.

Könntest du es dir nochmal anschauen?

 

Zuletzt bearbeitet von einem Moderator: 17. August 2007

M

Maik

• 17. August 2007

• #10

Du hast vergessen, die Klasse .clearfix aufzurufen:

Code:

<div class='news clearfix'>...</div>