مشكلة بل مصيبة مع الـ Position:absolute على الكروم , كيف حلها ... !

[المظفر بالله]

السلام عليكم ورحمة الله وبركاته

اخواني الاعزاء, عندي مشكلة مع الكروم تحديداً, باختصار شديد عندي الكود التالي:

<div class="imagesGalleryDiv">
    <a href="#">
         <span class="imagesGalleryTitle">صور</span>
         <img class="imagesGalleryImg" alt="" src="./images/10.png">
    </a>
</div>

ولدي الخصائص التالية:

.imagesGalleryDiv {
    float: right;
}

.imagesGalleryTitle {
    background-image: url("./images/p10.png");
    background-position: center center;
    color: rgb(218,206,144);
    width: 100px;
    height: 23px;
    border: 1px solid rgb(37,152,78);
    float: right;
    text-align: right;
    vertical-align: middle;
}

a .imagesGalleryTitle {
    text-decoration: none;
    vertical-align: middle;
    text-align: center;
    color: rgb(218,206,144);
    font-weight: bold;
    font-size: 9pt;
    margin: 1px 1px 0 0;
    position: absolute;
    top: auto;
    width: 100px;
    height: 23px;
}

.imagesGalleryImg, .imagesGalleryDiv {
    width: 281px;
    height: 118px;
}

طبعا الكود يحتاج لتنظيف واختصار, لكن عموماً المشكلة هي ان لدي صورة , وفوقها يجب ان تظهر عبارة "صور" داخل مربع صغير في الزاوية العليا اليمنى من الصورة, الكود شغال تمام على الفايرفوكس ولأول مرة على الانترنت اكسبلورر, الغريب هو على الكروم , المربع المكتوب عليه "صور" انزاح الى الزاوية العليا اليسرى وخارج الصورة, اي المربع ملامس للصورة من الخارج وليس من الداخل.

باختصار من خلال الصور:

من المفترض ان يظهر هكذا (كم في انترنت اكسبلورر وفايرفوكس) :


لكنه ظهر هكذا (في كروم) :


هل لديكم اي فكرة لتصحيح المشكلة, ولو باعادة صياغة الكود.

طبعا البعض قد يقول الحل هو استخدام right وleft نعم هذا حل لو كان هنالك صندوق واحد, لكن المشكلة انه لو كان لديك اكثر من صندوق "imagesGalleryDiv" ستتراكم العناوين فوق بعضها:

سلمتم

تعديل: وجدت الحل تجدونه في الرد التالي

[المظفر بالله]

السلام عليكم ورحمة الله وبركاته

ولله الحمد وجدت حل واريد رأيكم فيه, والمجال مفتوح لحلول اخرى, الحل ببساطة قمت باعادة صياغة الكود اولا بقلب الـ Span مكان الـ img :

<div class="imagesGalleryDiv">
    <a href="#">
         <img class="imagesGalleryImg" alt="" src="./images/10.png">
         <span class="imagesGalleryTitle">صور</span>
    </a>
</div>

والتعديل على الـ CSS وتحديداً a .imagesGalleryTitle وذلك بجعل قيمة position: relative و جعل قيمة top: -120px طبعا هذه القيمة هي ارتفاع الصورة , وللاسف القيمة تحتاج لمراعاة مع الاكسبلورر, قيمة التوب في فايرفوكس وكروم هي -121 بكسل بحالتي وعلى انترنت اكسبلورر 9 تحديداً, لم اجرب على غيره هي -123 بكسل ...

شكراً لكم

[ماجيك اعلان]

اشكرك علي وضع الحل

[AROON]

وجهتني المشكلة ولاكن بشكل اخر

عند استعراض الموقع علي المتصفح تظهر الصورة..بالشكل المطلوب



اما اذا قمت بتقليل دقة الشاشة او التصفحة من جهاز اخر دقة الشاشة به اقل تظهر الصورة كده





الكود الذي استخدمة

<div style="position:absolute; display:block; text-align:center; top:440px; right:405px; border:1px #333 solid; background:#FFF;"><img src="images/brand/pic.jpg" width="86" height="68" hspace="5" vspace="5" /></div>

ما الحل؟؟

[ليوناردو دافينشي]

الحل
لا تحدد قيمة , اجعلها تلقائي
من

right:405px 

الى

right:auto