Posted by: adustduke Aug 31 2009, 06:57 AM
Hello all,
I am a designing my first website:
http://sis.bris.ac.uk/~rw7544
And I want to have a drop down menu, which I have currently got working in Firefox, Chrome, Opera and IE8. but I have come across a stumbling block, IE7 doesn't like me...
But then I tried it in IE 7 and the drop down menus were displayed shifted to the right (by 133.33333px), why is this and how do I stop it happening?
Please help me
Cheers
the CSS is:
CODE
/**** Cascading Style Sheet ****/
*{padding:0px; margin:0px;}
body {
text-align:center;
background-color:#E0E0E0;
}
/**** Global CSS ****/
div.wrapper {
width:800px;
background-color:white;
text-align:left;
padding:10px;
margin:0 auto 0 auto;
overflow:hidden;
}
div.container {
width:800px;
padding:0px;
margin:0 0 10px 0;
float:left;
position:relative;
/*background-color:purple;*/
clear:both;
}
/**** Top Bar CSS****/
div.splcontainer {
width:800px;
height:240px;
padding:0 0 10 0;
margin:0;
/*background-color:yellow;*/
background-image:url(images/splashimg.png);
background-repeat:no-repeat;
z-index:5;
}
div.splimg {
width:100%;
height:200px;
/*background:slateBlue;*/
padding: 0px;
margin:0px;
clear:both;
}
/**** CSS for the links under the top image ****/
.link{
width:133.33333px;
height:40px;
float:left;
margin:0px;
color:#ffffff;
line-height:40px;
padding:0 0 0 0;
text-align:center;
}
#llink:hover {
background-image:url(images/leftbtn.png);
color:#FFffFF;
}
#clink:hover {
background-image:url(images/centerbtn.png);
color:#FFffFF;
background-repeat:no-repeat;
}
#rlink:hover {
background-image:url(images/rightbtn.png);
color:#FFffFF;
}
/**** Main Content CSS ****/
div.main {
width:67%;
height:auto;
/*background-color:LightGreen;*/
margin:0px 0px 10px 0px;
padding:5px;
float:left;
}
/**** UBSideBaR (i.e. news and events bar) CSS ****/
div.UBSideBaR {
width:30%;
/*background-color:LightGreen;*/
margin:0px;
padding:5px;
float:right;
}
div.UBSideBox {
width:auto;
height: auto;
margin:0 0 5px 0;
/*background-color:red;*/
padding: 5px;
}
h3.side {
font-variant: small-caps;
}
p.side {
font-style: italic;
}
/**** Footer CSS contents ****/
div.footer {
background-color:#E0E0E0;
padding:5px 5px 10px 5px;
margin:0;
position:relative;
text-align:center;
clear:both;
}
/**** CSS For Drop Down Menus ****/
.dropcontainer {
width:133.33333px;
float:left;
background-color:transparent;
margin:0px;
color:#ffffff;
padding:0;
text-align:center;
overflow:visible;
z-index:50;
}
.dropmenu {
background-color:#4645e9;
z-index: 999;
width:133.33333px;
float:left;
visibility:hidden;
text-align:left;
overflow:hidden;
position: absolute;
margin-top:40px;
}
a.droplink {
z-index: 999;
width:133.33333px;
display:block;
padding:5px;
float:left;
color:white;
overflow:hidden;
}
Posted by: adustduke Sep 3 2009, 02:17 PM
Hi, i have solved my problem thanks, i used lists...