Hi, i have a strange bug with my website but cant seem to pinpoint the problem, iv only noticed it recently and cant recall when it appeared.
if you visit www.dmoranda.co.uk
it only happens in firefox browsers.
If you minimise the page vertically (pull down from the top, you will see when the scroll bar on the main browser window appears, the body div will overlap and create inconsistant margins around some objects in the page (right margin on the body div, also the bottom margin of the menu objects will change).
below is my code
if you visit www.dmoranda.co.uk
it only happens in firefox browsers.
If you minimise the page vertically (pull down from the top, you will see when the scroll bar on the main browser window appears, the body div will overlap and create inconsistant margins around some objects in the page (right margin on the body div, also the bottom margin of the menu objects will change).
below is my code
Code:
/* CSS Document */
/*//////Layout Objects//////*/
* {
margin: 0;
padding: 0;
}
body {
background-image: url("images/testbody.gif");
margin: 3% auto; /*problem with menu items changing padding when page minimised, this was set to 3%*/
padding: 0;
text-align: center;
}
#container {
margin:0 auto;
width: 70%;
min-height: 545px;
min-width: 850px;
height: 545px;
background-color: #FFFFFF;
border:1px solid #000;
}
/*Banner size 1050px X 90px*/
#banner {
margin: 2px;
height: 90px;
border:1px solid #000;
background-image:url("images/banner-repeat.gif");
}
#menu {
margin: 2px;
height:24px;
background-image:url("images/testfooter.gif");
border:1px solid #000;
}
#body {
margin: 2px;
/*height: 72%;*/
height: 392px;
background-color: #f3f3f3;
border:1px solid #000;
overflow: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 2%;
}
#footer {
margin: 2px;
height: 21px;
background-image:url("images/testfooter.gif");
border:1px solid #000;
clear:left;
text-align: right;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#F5F5F5;
}
* html #footer {
height: 21px; /* for IE5 and IE6 in quirks mode */
}
#phpcontainer {
width: 250px;
height: 200px;
margin:0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#news {
margin:0 auto;
width: 70%;
height: 40%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px ;
float: left;
margin-left: 15%;
/*border: 1px solid #000000;*/
text-align: left;
}
#bodycareercontainer {
width: 70%;
height: 80px;
margin:0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px ;
float: left;
margin-bottom: 5px;
/*border: 1px solid #000000;*/
padding-left: 15%;
}
#cv {
margin:0 auto;
margin-top: 2%;
margin-bottom: 2%;
width: 85%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px ;
border: 1px solid #000000;
}
#listcenter {
display: inline;
text-align: left;
}
#listleft {
display: inline;
text-align: left;
float: left;
padding-left: 5%;
padding-right: 50%;
}
#adminlogin {
margin:0 auto;
width: 20%;
border: 1px solid #000000;
margin-left: 40%;
margin-top: 5%;
}
#adminform {
margin:0 auto;
width: 40%;
margin-left: 30%;
margin-top: 5%;
}
/*/////End of Layout Objects//////*/
/*/////All Hacks//////*/
/*Box Model Hack for IE Browsers*/
* html #container {
width: 86.5%; /* for IE5 and IE6 in quirks mode */
w\idth: 86.5%; /* for IE6 in standards mode */
}
/*End of Box Model Hack*/
/*Hack for IE min-width*/
* html .minwidth {
border-left:900px solid #CCCCCC;
background-image: url("images/testbody.gif");
}
* html .container {
margin-left:-900px;
position:relative;
background-image: url("images/testbody.gif");
}
/*\*/
* html .minwidth, * html .container {
height: 1px;
}
/**/
/*///////End of hack for IE min-width///////*/
* html #news {
margin-left: 7.5%;
}
/* /////End of Hacks/////*/
/*//////Start Of Navigation//////*/
#nav ul{
padding : 2px 0;
margin : 0;
text-align: center;
width: 100%;
}
#nav li{
display : inline;
list-style-type: none;
}
#nav ul li a{
color: #F5F5F5;
font-weight : bold;
text-decoration : none;
padding-left : 5%;
padding-right : 5%;
border:1px solid #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#nav ul li a:hover{
background-color: #0190D7;
color:#000000;
}
/*//////End Of Navigation/////*/
/*///////////List Styles///////////////*/
ul#kbaselist {
float: left;
text-align: left;
padding-left:35%;
padding-right: 30%;
font-size: 11px;
padding-bottom: 10px;
}
ul#cvlist {
float: left;
text-align: justify;
padding-left: 5%;
font-size: 11px;
}
/*////////////End of list styles////////*/
/*//////Start of Text Styles//////*/
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px ;
font-weight: bold ;
margin: 5px auto ;
text-align: center;
text-decoration: underline;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px ;
margin: 5px auto ;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 10px;
}
p.main {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px ;
margin: 2px auto ;
padding-left: 15%;
padding-right: 150px;
padding-bottom: 10px;
text-align: justify;
}
p.careermain {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px ;
margin: 0 auto ;
padding-left: 110px;
padding-right: 10px;
padding-bottom: 10px;
text-align: justify;
}
p.subtitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px ;
font-weight: bold;
margin: 5px auto ;
text-align: left;
text-decoration: underline;
padding-left: 10%;
padding-bottom: 10px;
}
p.subtitlecareer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px ;
font-weight: bold;
margin: 5px auto ;
text-align: left;
text-decoration: underline;
padding-left: 10%;
padding-bottom: 10px;
float: left;
}
p.header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px ;
margin: 5px auto ;
text-align: left;
padding-left: 95px;
padding-right: 100px;
padding-bottom: 10px;
}
p.cv {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px ;
padding-left: 5%;
padding-right: 10%;
text-align: left;
}
p.cvsubheading {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px ;
padding-left: 1%;
text-align: left;
text-decoration: underline;
font-weight: bold;
}
a.nav:link {color: red; text-decoration: none; }
a.nav:visited {color: purple; text-decoration: none; }
a.nav:hover {color: orange; text-decoration: underline; }
/*//////End of Text Styles//////*/
/*//////Start of Image Styles//////*/
img.floatLeft {
float: left;
margin: 4px;
padding-left: 100px;
width: 150px;
height: 200px;
}
img.floatRight {
float: right;
margin: 4px;
padding-right: 100px;
width: 100px;
height: 100px;
}
/*//////End of Image Styles//////*/
/*//////Start of form styles//////*/
.fname {
width:204px;
}
.femail {
width:204px;
}
/*//////end of form Styles//////*/