Mam div w którym jako tła używam wąskiego obrazka png (gradient) i rozszerzam w zależności od szerokości i ilości tekstu. Wszystko ładnie wyświetla zarówno w FF jaki i IE oraz w innych.
problem pojawia się gdy potrzeba załadować nowy content do div za pomocą ajaxa nie odświeżając strony. I jak zwykle IE musi mi sprawić psikusa i coś popsuć. Przy zmianie ilości tekstu (rozszerzenie w dół lub zmniejszenie) wysokość obrazka tła gradientu nie zmienia się i powstaje dziura.
zakładam, że problem można rozwiązać ładując obrazek jako background ale jak próbowałem tak to nie udało mi się uzyskać takiego efektu skalowania.
dziękuję za ewentualne sugestie.
poniżej przykład kodu:
main.css:
Kod: Zaznacz cały
body {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 12px;
text-align: justify;
background: url('../resources/img/background_gradient.png') repeat-x #e6f4fb;
color: #464646;
}
img {
border: none;
display: block;
}
#mainContainer {
width: 1000px;
margin: 0 auto;
}
.gradientBox {
position: relative;
margin-top: 10px;
border: 1px solid #c0c1c3;
z-index: 1;
}
.gradientBoxText {
margin: 10px;
}
.gradientBoxImage {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
Kod: Zaznacz cały
<body>
<script type="text/javascript" src="/Web/resources/js/jquery.js" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#contentHolder").click(function() {
jQuery("#contentHolder").html(jQuery("#hiddenContent").html());
})
});
</script>
<div id="mainContainer">
<div class="gradientBox">
<img src="/Web/resources/img/gradient.png" alt="" class="gradientBoxImage" />
<div class="gradientBoxText">
<div id="contentHolder">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum.
</div>
</div>
</div>
</div>
<div id="hiddenContent" style="display: none;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum.
</div>
</body>i screeny mniej więcej o co chodzi:
widok początkowy:
http://img703.imageshack.us/i/startw.jpg/
efekt pożądany: (np: FF)
http://img641.imageshack.us/i/47512807.jpg/
i efekt pod IE:
http://img443.imageshack.us/i/badq.jpg/
