div acting strangely on Opera..

liunx

Guest
Hello !
It's me again !
I'll make it short...
this is my code :

...
<p><a href=http://www.webdeveloper.com/forum/archive/index.php/"#menumap" name="edit" class="anchor fl" id="edit" >Edito :</a> Les dernières mises à jour, le petit
blabla inutile de Ness, que personne ne lit de toute façon... sniff
!!! </p>

<div class="hr"></div><br>

<p><a href=http://www.webdeveloper.com/forum/archive/index.php/"#menumap" name="hista" class="anchor fl" id="hista" >Histoire :</a> eh bien, si c'est pas clair, je vois pas... Vous
y trouverez les chapitres des Enfants de l'Ô, au fur et à mesure
des mises à jour. Et peut-être quelques teasers, on verra.</p>
<ul>
<li class="li"><strong>Première partie :</strong> là, vous avez accès à tous les anciens chapitres de la
première partie, ainsi qu'aux chapitres remaniés. Vous pouvez laisser des
commentaires ( ce serait vachement sympa, d'ailleurs ) </li>
<li class="li"><strong>Deuxième partie :</strong> pareil, mais pour la deuxième partie. C'est là qu'il
faudra principalement chercher les nouveautés.</li>
<li class="li"><strong>Annexes :</strong> une sorte de lexique, avec quelques informations historiques
ou linguistiques, en rapport avec les deux premières parties. </li>
</ul>

<div class="hr"></div><br>

<p><a name="persoa" id="persoa" class="anchor fl" href=http://www.webdeveloper.com/forum/archive/index.php/"#menumap" >Personnages :</a> les fiches des personnages, qui seront également
complétées au fil du temps. Peut être très utile
pour vous remémorer quelques
persos, si une...


the little div with the hr class act as an horizontal rule. ( and NO, I don't want to use a regular hr, stupid border problem in IE... )
that's the css...

/* horizontal rule */
.hr {
background-image:url(1/hr.gif);
background-repeat:no-repeat;
background-position:center;
position:absolute;
left:46.5%;
border:0px;
width:41px;
height:15px;
}

Now, my problem is that the div is overlapping the text in Opera 7 and 8, which could be an aesthetic style, but I'd prefer to have it normal...
I made two screen shots, one under FF ( normal ) and under Opera ( overlapping )
The hr are the three rotated squares ( I really should look up the french work "losange" in the dictionary... )
Thanks for any suggestion !
( BTW, I tried the padding, and it didn't work, on any browser.. that's why I'm using the <br> tag, which I would gladly get rid of )losenge: lozenge, diamond or rhombus.

Why position:absolute ?
Instead of an empty <div> give the previous element the class {background:url(1/hr.gif) no-repeat center bottom;padding-bottom:50px;}mmmm, you're right, I should do that. And I will !
I'll tell you right away if it works.
Why absolute ?
Beacuse the div itself is in another div, and... yeah, finally, I don't know. I tend to always use position absolute, because I don't really realise the differency.
It's the same for the float thing. I barely ever use it, because I don't know how it works... :Dthanks, Fang, it worked fine !
Actually, I did a mix of the two things, because I wanted to keep an empty div for the hr. It was clearer for me, and moreover, I had a lot of lists, and giving the list a class, the hr was centered according to the ul element, and therefore not centered in the page...
Thans a lot, you've been a lot of help in the last couple of days ! :p
 
Back
Top