Hello,
Sorry if I've posted in the wrong section.
I have been looking and testing for a simple CSS solution for this issue for 3 days, but still w/o any luck. Some said I have to use
position:relative, but it won't work either. Anybody kind enough to give me any hints/ some suggestion,... please
Below is an example code for one page. Basically there's some text within text class <div> and I need them to be inside this <div>, always. So I use CSS rule
overflow:hidden to achieve this and it works beautifully on my FF12, IE8, Safari5, Chrome19 and Opera11. However, someone told me that this long text had spilled over its container <div>, on his iPhone device.
N.B. text scrolling is provided by up and down links, hooked using jQuery's click() handlers, but I don't think this is related to the problem.
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>using overflow:hidden in iPad/iPhone devices</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.clearFloats{
display: block !important;
float: none !important;
clear: both !important;
width: 0px !important;
height: 0px !important;
padding: 0px !important;
}
.dynamic{
width: 500px;
height: 150px;
background-color: lightblue;
}
.dynamic > img{
display: block;
float: left;
}
.dynamic > .text{
background-color: lightgreen;
font-weight: bold;
float: right;
width: 350px;
height: 100%;
overflow: hidden;
/* position: relative; */
}
.scroller{
background-color: lightgray;
width: 60px;
}
.scroller > a{
float: left;
}
.scroller > a:first-child + a{
float: right;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.scroller > a:first-child')
.click(function(){
var scrolledWrapper = $('.dynamic > .text');
scrolledWrapper.scrollTop(scrolledWrapper.scrollTop() - 9);
return false;
})
.next().click(function(){
var scrolledWrapper = $('.dynamic > .text');
scrolledWrapper.scrollTop(scrolledWrapper.scrollTop() + 9);
return false;
});
});
</script>
</head>
<body>
<div class="page">
<div class="dynamic">
<img src="sheep-and-sheep-dog.jpg"
alt="http://www.public-domain-image.com/animals/dog/slides/sheep-and-sheep-dog.html" />
<div class="text">
<p>Courtesy of <a href="http://www.public-domain-image.com" target="_blank">public-domain-image.com</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce faucibus dictum neque eu facilisis. </p>
<p>Proin ut sapien lorem, eget accumsan dui. Quisque at ultrices massa. Nunc enim nibh, condimentum sed semper vel, </p>
<p>viverra eu diam. Donec ac lectus vel mi consectetur molestie. Quisque vitae malesuada neque. </p>
</div>
<div class="clearFloats"></div>
</div>
<div class="scroller">
<a href="#">up</a>
<a href="#">down</a>
<span class="clearFloats"></span>
</div>
</div>
</body>
</html>
A link to above example:
http://bit.ly/Mr5Iac
Thanks,
Hendra