CSS problem
Im in abit of a pickle, if you have read my other thread you will know the jist of the story..Iv managed to solve some problems which have caused more..
If you have good knowledge of css regarding layouts and firefox bugs...please please help me..
add [email protected]
Basically i have this now..I have stopped the flickering and im able to click the sub menu items..i done this by adding:
position: absolute; to the navout div
Position: absolute; to *html div#navout
position: absolute; to ul#nav
i get this problem (if you can view in both firefox and IE) you will see the problems i face
http://www.caldicot-pc-helpdesk.co.uk/fcv/index7.php
css
if you can see any mistakes please let me know
Im in abit of a pickle, if you have read my other thread you will know the jist of the story..Iv managed to solve some problems which have caused more..
If you have good knowledge of css regarding layouts and firefox bugs...please please help me..
add [email protected]
Basically i have this now..I have stopped the flickering and im able to click the sub menu items..i done this by adding:
position: absolute; to the navout div
Position: absolute; to *html div#navout
position: absolute; to ul#nav
i get this problem (if you can view in both firefox and IE) you will see the problems i face
http://www.caldicot-pc-helpdesk.co.uk/fcv/index7.php
css
Code:
body {
background-color:#FFFFFF;
background-image:url(Images/background.jpg);
}
div#container {
background-color:#000000;
margin-left: 130px;
margin: auto;
margin-bottom: 0px;
margin-top: 25px;
height: 520px; /*keep this the same height*/
width: 900px; /*keep this the same width*/
z-index: 1; /*needed to make everything appear ontop of container*/
border: 2px solid black; /*this might need changing to work in IE*/
}
div#banner {
background-color: #FFFFFF;
background-image:url(Images/banner.jpg);
float: left; /*floats banner to the left of the container*/
margin-bottom: 0px;
margin-top: 1px;
margin-left: 1px;
margin-right: 1px;
height: 85px;
width: 895px;
border: 1px solid black;
}
* html div#banner { /*IE FIXES*/
margin-right: 3px;
width: 900px;
}
div#navout {
background-image:url(Images/menu.jpg);
background-color:#999999;
position: absolute;
margin-left: 2px;
margin-top: 2px;
margin-bottom: 1px;
width: 895px;
height: 20px;
border-width:1px;
}
*html div#navout {
background-color:#999999;
position: absolute;
margin-left: 2px;
margin-top: 2px;
margin-bottom: 1px;
width: 900px;
height: 20px;
border-width:1px;
}
li {
display: inline;
background-color:#999999;
background-image:url(Images/menu.jpg);
}
div#contentout {
background-color: #ffffff;
float: left;
margin-top: 1px;
margin-left: 1px;
margin-right: 1px;
margin-bottom: 1px;
height: 405px;
width: 895px;
border: 1px solid black;
}
div#contentin{
background-color:#666666;
margin-top: 2px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 2px;
height: 380px;
width: 889px;
border: 1px solid black;
overflow: auto;
}
* html div#contentout { /*IE FIXES*/
float: left;
width: 742px; /* for IE5.x/win */
/* for other IE versions */
margin-right: 1px;
margin-left: 1px;
}
* html div#contentin { /*IE FIXES*/
float: left;
width: 895px; /* for IE5.x/win */
margin-right: 1px;
margin-left: 1px;
}
div#footer {
height: 16px;
width: 889px;
background-color:#666666;
margin-left: 2px;
border: 1px solid black;
}
* html div#footer { /*IE FIXES*/
margin-left: 2px;
height: 15px;
width: 895px;
}
div#form {
text-align:center;
}
ul#nav {
padding: 0;
margin: 0;
list-style: none;
border-bottom: 0px solid #000000;
border-right: 0px solid #000000;
position: absolute;
}
li {
float: left;
position: relative;
width: 9em;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
color:#FFFFFF;
font-weight:bold
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{
display: block;
}
li:hover {background-color:#CCCCCC;
}
a {text-decoration:none;
color:#FFFFFF;
}
a:hover {
color:#FF0000;
}
p#header {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
padding-top: 5px;
text-align:center;
}
p#subheading {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12;
font-weight:bold;
}
p#paragraph {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:100;
padding-left: 50px;
padding-right: 50px;
padding-top: 25px;
padding-bottom: 25px;
color:#FFFFFF;
}
p#footer {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
margin-top:1px;
margin-bottom:0px;
}if you can see any mistakes please let me know
Last edited: