Customization not showing correctly
Hi
I've done a very minor customization on our site and I'm confident the css is correct (see below)
and the html is below as well calling up the class NewsFlash
and yet the <h4> is not performing as it should the words News Flash should be in blue and bigger font (see nadec.net).
I know I could manually change with html to get the color and font size I want - but it annoys me that I can't work out why it isn't working correctly.
As well if you look at the screenshot you can see that I have placed an Upcoming events box under the left nav bar. I've put into the file four <br> to try and force it down a bit but it doesn't seem to work - any reason for that?
Thanks
Shelley
.Upcoming {
background-color: #fafcff;
width: 90%;
border: 2px solid #4d83c0;
margin: 2px 2px 2px 2px;
padding: 5px;
color: #000000;
}
.Upcoming h4 {
margin: 6px;
padding: 3px;
text-align: center;
background-color: #c0504d;
color: #fefefe;
}
.Upcoming p {
font-size: 90%;
padding: 0 4px;
}
.Upcoming a:link {
color: #cc6633;
text-decoration: underline;
text-align: center;
padding: 0px;
}
.Upcoming a:visited {
color: #c2c2c2;
text-decoration: none;
}
.Upcoming a:hover {
color: #c2c2c2;
background-color: transparent;
text-decoration: underline;
}
.NewsFlash {
border-top: #006699 5px solid;
border-bottom: #006699 5px solid;
font-size: 90%;
padding-bottom: 10px;
padding-top: 10px;
margin: 6px;
color: #000000;
background-color: #fafacf;
}
.NewsFlash h4 {
font-size: 14px;
margin: 6px;
text-align: center;
color: #006699;
}
html calling up the NewsFlash
<div class="NewsFlash">
<h4>News Flash</h4>
<p><br></p>
<p><b><i>Dressage 25/26 February</i></b></p>
<p>Dressage Entries for 25/26 Feb are closed. Draw will be available 22 Feb.</p>
<hr>
<p><i><b>NADEC Member On Fire!</b></i></p>
<p></p>
<p align="justify">Wow did you hear about the wonderful results of NADEC's Dressage Co-ordinator -- the wonderfully talented Sheridyn Ashwood and her great horse Mr P .... she has been down south the past month or so getting great results in the Grand Prix at Boneo and Orange ....</p>
<p align="justify">Culminating this weekend by coming 2nd to Rozzie Ryan in two events, with scores in the very high 60s (and only half a % behind Rozzie in one test) .... What makes it even more remarkable is that this was (I think) her 6th only ever Grand Prix she's ridden (certainly less than double digits) and she's had Mr P for just over six months!!!<br></p>
<p>Could we have a Club Member to watch riding at this year's Olympics???? </p>
<p align="justify">Let's all keep our fingers crossed for Sheridyn and Mr P and hope their campaign continues to be a success...</p>
<p></p>
</div>
-
Matthieu commented
Great suggestion. Here are some additional information on the "!important" clause: http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it