codes conflict

[viktor]

I got two css codes that won't work together.

This code:

.optionsDivInvisible, .optionsDivVisible {
position:absolute;
margin-top:-1px;
margin-left:3px;
width:250px;
background:#6f7074;
padding:2px;
font-size:11px;
z-index:20;
}
.optionsDivInvisible {display:none;}
.optionsDivVisible {display:block;}
.optionsDivVisible p {
margin:0;
padding:0;
}
.optionsDivVisible a {
color:#F2F2F2;
text-decoration:none;
display:block;
padding:1px 4px;
border:1px solid #6f7074;
}
.optionsDivVisible a:hover {
color:#FFF;
background:#5F6062;
border-color:#cfd0d6;
}


does not work correctly with this code installed:



/* CSS General*/

.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{
background: transparent url(images/img.php.png) no-repeat bottom right;}
.cssbox{
/* intended total box width - padding-right(next) */
width:370px !important; /* IE Win = width - padding */
width: 320px;
/* the gap on the right edge of the image (not content padding) */
padding-right:15px;
/* use to position the box */
margin:100px auto;}
/* set the top-right image */
.cssbox_head{background-position:top right;
/* pull the right image over on top of border */
margin-right:-15px;
/* right-image-gap + right-inside padding */
padding-right:40px;}
/* set the top-left image */
.cssbox_head h2{
background-position:top left;
margin:0;
/* reset main site styles*/
border:0;
/* ditto */ /* padding-left = image gap + interior padding ... no padding-right */
padding:25px 0 15px 40px; height:auto !important; height:1%;}
/* IE Holly Hack */ /* set the lower-left corner image */
.cssbox_body{
background-position:bottom left; margin-right:25px;
/* interior-padding right */
padding:15px 0 15px 40px;} /* mirror .cssbox_head right/left */

.request{
top: 255px;
left: 690px;
position:absolute;
text-decoration: none;
font-style:normal;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:10px;
color:#999999;}

.navbar, a:link{
top: 350px;
text-align: center;
text-decoration: none;
font-style:normal;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:10px;
color:#999999;}

.copyright{
top: 355px;
text-align: center;
font-style:normal;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:9px;
color:#999999;}



I can't see where the problem is. Any help?

viktor

[codeexploiter]

Please make sure that all the css properties terminated correctly using semi colon ( ; ). Technically you can leave the last CSS property without terminating a semi colon. But in your CSS there are a number of items that are not the last items but still haven't used semi colons.

If the above mentioned thing occur then it won't consider the following CSS rules any more.

[viktor]

I looked at the code and corrected them. However, to my knowledge semicolons are not required after the last element inside a class. Which was the case here almost in every class.

I put semicolons back in and updated the code above. It still won't work.

Some info:
The first code is for pulldown menu.

The second code creates round corners with an image.

Somehow, the 2nd code renders the 1st code invalid to the point that you see the pulldown menu but you can't click on it, won't pull down.

viktor

[codeexploiter]

Can you post a link to your page in which the problem occurs so that we'll get a chance to see the CSS in work.

[viktor]

Here's the link. I just uploaded everything onto the server.
I've been working with Firefox, and noticed that IE for some reason does not
load page correctly. I'm not sure why. Any help on that would be greatly appreciated.
http://viktorix.com/forms/testing.htm (pull down menu)

viktor

[viktor]

Any help? Anyone?