After creating a web application with CSS, the initial GUI was exactly how I wanted it to be. However, within 3 seconds of loading the page, the GUI would change.
The HTML code for my header is as follows:
<div id="Slideshow">
<img src="image/s1.jpg" name="slide" style="width:100%; height:150%">
<script type="text/javascript">
<!--
var step = 1
function slideit() {
document.images.slide.src = eval("image" + step + ".src")
if (step < 5)
step++
else
step = 1
setTimeout("slideit()", 2500)
}
slideit()
//-->
For resizing the image in the header without affecting the entire layout, I added style="width:100%; height:150%". To address this issue on mobile devices like iPhones, I created separate CSS rules like this:
#Slideshow
{
position:absolute;
height:15%;
top:10%
}
Changing height:150% to height:15% in the CSS solved the problem on iPhones but not on Samsung Android phones. How can I resolve this inconsistency?