Module background color will not change

I have a menu module that i would like to change the color of the background from white to another color and add a header image. I have created the suffix and it does work. The padding and border work perfectly. When i look at it from firebug i see that it is being overridden by the other CSS items. In the example below you can not see the line through for div.mymenu. I just can not see where my problem is.

The code from firebug is shown below and the code from my css is below that.
code from firebug

Code: Select all

#gkPage .box:first-child, #gkPage .box_menu:first-child, #gkPage .box_text:first-child {
    margin-top: 0 !important;
}
template.css (line 153)
#gkPage .box, #gkPage .box_menu, #gkPage .box_text {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 2px 2px 2px 2px;
    margin-top: 8px;
    overflow: hidden;
}
template.css (line 150)
div.mymenu {
    background-position: center top;
    border: 2px dashed #DDDDDD;
    padding-top: 52px;
}


my css code from line 337 in the template.css file

Code: Select all

div.mymenu {
    border: 2px dashed #ddd;
    background-color: #red;
   background-position:top;
   padding-top:52px;
}


If you try to set color by 'red' you don't need # before, please look at w3schools for more details >> http://www.w3schools.com/html/html_styles.asp

Sorry about the # in front of the red. It was a typo(i had a #990033 before i changed it to red), but even without it i am still being overridden by the other items and can not get the background to go the color i would like or add the image to the top of the module. I really do not want to change all my menus to the red color, just this module. I still can not see the error. Thanks in advance

Did you try add '!important' rule to css rule ?

Thanks Conrad, that works. I also tried to add the 'header' image to the module and it was also necessary to add the !important. Can this '!important' cause the css code to break? I know it should not break with my module suffix because it is different than the suffix/classes/ids in the template, by adding this is there a risk?

It depends. Becasue if you are using your suffix name in selector and you didn't add this suffix to another modul it shouldn't break code in diffrent places than this one with your suffix. But if you add this to class used in diffrent places than this module it can affect rest of them.

Thank you again, Conrad