Hi...Have been creating my website...using tables etc....ut have now re developed it using CSS positioning etc. Just need some advice....I have browser issues.....and different screen size problems......I have developed my page.....on a screen resolution of 1280 x 1024 pixels. My page looks great within the firefox browser, but its all over the place in IE6.....also when I open my page on a smaller screen resolution its also out on both browsers....why is this????
Have been using absolute positioning within CSS and used percentage values to positon...why is it all over the place on different screen sizes????What am I doing wrong???
Here is the code for my page hope someone can give me necessary advice and point me in right direction.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Three plus top box</title>
<link rel="stylesheet" href="css/fouc.css" type="text/css" media="all" />
<style type="text/css" >
#vertnav {
list-style: none;
width: 122px;
}
#vertnav ul {
padding: 0px;
margin: 0px;
line-height: 1;
list-style-type: none;
}
#vertnav li {
position: relative;
width: 130px;
background-color: #515033;
border-bottom:0;
display: block;
margin-bottom: 1px;
}
#vertnav a {
padding: 1px;
display: block;
BORDER-TOP: #ffffff 1px solid;
font: 13px verdana;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
width: 130px;
color: #CCCCCC;
background-color: #515033;
text-align: left;
text-decoration: none;
BORDER-BOTTOM: #ffffff 1px solid;
}
#vertnav a:hover {
background-color:#beb968;
color:#CCCCCC;
}
#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{
display:none;
position:absolute;
top:0;
left:132px;
}
#vertnav li:hover ul ul, #vertnav li:hover ul ul ul{
display:none;
}
#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul{
display:block;
}
li>ul {
top: auto;
left: auto;
}
/* Win IE only \*/
* html #vertnav li{float:left; height: 1%;}
/* end holly hack */
body {
font-family: verdana, arial, helvetica, sans-serif;
color: #ccc;
background-color: #515033;
}
a {
text-decoration: none;
font-weight: bold;
font-size: 12px;
color: #ffffff;
outline: none;
}
a:visited {
color: #ccc;
}
a:active {
color: #ccc;
}
a:hover {
color: #ccc;
text-decoration: underline;
}
.ahem {
display: none;
}
strong, b {
font-weight: bold;
}
p {
font-size: 5px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}
/* weird ie5win bug: all line-height to font-size ratios must agree or box gets pushed around. UPDATE: this has turned out to be very rare. my current recommendation is IGNORE this warning. at the moment i'm leaving it in only in case the issue turns up again. possibly the original bug in march 2001 was caused by an unusual combination of factors, although this solved it at the time.*/
h1 {
font-size: 24px;
line-height: 44px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 18px;
line-height: 40px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h3 {
font-size: 16px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h4 {
font-size: 14px;
line-height: 26px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h5 {
font-size: 12px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h6 {
font-size: 10px;
line-height: 18px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
img {
border: 0;
}
.nowrap {
white-space: nowrap;
font-size: 10px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
/* must be combined with nobr in html for ie5win */
}
.tiny {
font-size: 9px;
line-height: 16px;
margin-top: 15px;
margin-bottom: 5px;
}
#backgroundnew {
position:absolute;
top: 4%;
left: 19.48%;
margin: 0px;
padding: 0px;
background:#bfbe95 ;
height: 90px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 540px;
width: 56.37%;
}
html>body #backgroundnew{
height: 540px; /* ie5win fudge ends */
}
#topbar {
position:absolute;
top: 3%;
left: 19.48%;
margin: 0px;
padding: 0px;
BORDER:1px solid;
background: #515033;
height: 90px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 8px;
width: 56.12%;
}
html>body #topbar {
height: 8px; /* ie5win fudge ends */
}
#top {
position:absolute;
top: 4%;
left: 19.48%;
margin: 0px;
padding: 0px;
background: #515033;
height: 90px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 90px;
width: 56.18%;
}
html>body #top {
height: 50px; /* ie5win fudge ends */
}
#datebar {
position: absolute;
top: 14.5%;
left: 19.45%;
margin: 0px;
padding: 0px;
border: 1px solid #ccc;
background: #d3d2b6;
width: 56.1%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 56.1%;
height: 20px;
}
html>body #datebar{
width: 56.1%; /* ie5win fudge ends */
}
#left {
position: absolute;
top: 17.8%;
left: 19.5%;
margin: 0px;
padding: 0px;
border: 1px solid #ccc;
background: #d3d2b6;
width: 10.5%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 10.5%;
height: 201px;
}
html>body #left {
width: 10.5%; /* ie5win fudge ends */
}
#middle {
margin: 20px 190px 20px 190px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
}
#main{
position: absolute;
top: 15.5%;
left: 30%; /* Opera5.02 will show a space at right when there is no scroll bar */
margin: 20px;
padding: 10px;
border: 1px solid #ffffff ;
background: #d3d2b6;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 14%;
height:180px;
}
html>body #main {
width: 14%; /* ie5win fudge ends */
}
#right{
position: absolute;
top: 15.6%;
left: 47%; /* Opera5.02 will show a space at right when there is no scroll bar */
margin: 20px;
padding: 10px;
border: 1px solid #ffffff ;
background: #beb968 ;
width: 25.5%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 25.5%;
height:180px;
}
html>body #right{
width: 25.5%; /* ie5win fudge ends */
}
#pictures {
position: absolute;
top: 45.5%;
left: 22.5%;
margin: 0px;
padding: 0px;
border: 1px solid #ccc;
background: #d3d2b6;
width: 50.5%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 50.5%;
height: 150px;
}
html>body #pictures {
width: 50.5%; /* ie5win fudge ends */
}
#navbar{
position: absolute;
top: 39.7%;
left: 17.9%; /* Opera5.02 will show a space at right when there is no scroll bar */
margin: 20px;
padding: 10px;
border: 1px solid #ffffff ;
background: #697b34 ;
width: 54.7%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width:54.7%;
height:.3%;
}
html>body #navbar{
width: 54.7%; /* ie5win fudge ends */
pre {
font-size: 5px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}
</style>
<SCRIPT type=text/javascript>
activateMenu = function(vertnav) {
/* currentStyle restricts the Javascript to IE only */
if (document.all && document.getElementById(vertnav).currentStyle) {
var navroot = document.getElementById(vertnav);
/* Get all the list items within the menu */
var lis=navroot.getElementsByTagName("LI");
for (i=0; i<lis.length; i++) {
/* If the LI has another menu level */
if(lis[i].lastChild.tagName=="UL"){
/* assign the function to the LI */
lis[i].onmouseover=function() {
/* display the inner menu */
this.lastChild.style.display="block";
}
lis[i].onmouseout=function() {
this.lastChild.style.display="none";
}
}
}
}
}
window.onload= function(){
/* pass the function the id of the top level UL */
/* remove one, when only using one menu */
activateMenu('vertnav');
}
</script>
</head>
<div id="backgroundnew">
</div>
<div id="right">
</div>
<div id="main">
<img src="CSSImages/cups.png"/>
</div>
<ul id="vertnav">
<div id="left">
<li>
<div align="left"><a href="#">Home</a></div>
</li>
<li>
<div align="left"><a href="#">Profile</a></div>
</li>
<li><a href="#">Mug Shapes</a></li>
<li><a href="#">Processes</a>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Printing</a> </li>
<li><a href="#">Despatch</a></li>
<li><a href="#">Mail Order</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Open Stock/Retail</a></li>
</ul>
</div>
<div id="topbar">
</div>
<div id="top">
<img src="CSSImages/logotopmug2.jpg" width="720" height="91" align="top" class="borderstyle" />
</div>
<div id = "datebar">
<SCRIPT>
/*Current date script credit:
JavaScript Kit (
www.javascriptkit.com)
Over 200+ free scripts here!
*/
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thu rsday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May"," June","July","August","September","October","Novem ber","December")
document.write("<small><font color='515033' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small>")
</SCRIPT>
</div>
<div id="navbar">
<A
href="http://www.alakesidevilla-florida.co.uk/Cats.htm">Cats</A>
<A
href="http://www.alakesidevilla-florida.co.uk/openstock.htm#">Christopher
Hughes Collection</A>
<A
href="http://www.alakesidevilla-florida.co.uk/dogs.htm">Dogs</A>
<A
href="http://www.alakesidevilla-florida.co.uk/openstock.htm#">Miscellaneous</A>
<A
href="http://www.alakesidevilla-florida.co.uk/openstock.htm#">Yesteryear</A>
</div>
<div id="pictures">
</div>
</body></html>
