I've been stuck on this problem for a while and would be very grateful for any help.
I am trying to make a navigation menu along the lines of the 'son of suckerfish' from 'htmldog.com', especially as shown on www.jennifermadden.com. I've got the menu part working fine and have used jQuery so that it works correctly with IE as well.
Only thing is is that, as on the Jennifer Madden website, I would like to have separate blocks with clear spaces in between. First of all here is some simple test html code:
and the CSS:
The above code will NOT work in IE, because it doesn't have the jQuery code for hovering, so if you are going to try it, please only do so on firefox or opera.
My problem is that I want two separate blocks, but this is being displayed as one big block in Firefox and Opera (It shows up as two separate blocks with IE though so thats good!). As you can see, I have tried to put it in divs which belong to a class which has a margin, but this hasn't worked. I have also tried putting in a 'blank' list element which is the same colour as the background and no border, but there was still a border showing. I have also played around with selectors with no success.
Basically, I'm not sure why the border would still be showing, or why a space isn't being put in between the two divs.
Yes I have tried adjusting the margin: bottom. Other CSS rules seem to be being applied, but not the margin-bottom one.
For example, if I have the following,
then what I've labeled as '1st Block Header', '1st Level Element' and the corresponding '2nd Level Elements' are now displayed in bold, but the contents of both divs still appear together, without any separation. I would have thought that the first child of the div would be the first 'li' element which encloses a block.
Yes I have tried adjusting the margin-bottom in '#nav li'. Unfortunately, this separates all the list elements, which is not what I want. The effect that I wanted to achieve by putting in the div's was to separate blocks of 'li''s but not every 'li'.
Do you know why it could be that even though I apply a margin-bottom of 30px to the div's, it has no effect and it still looks like all one list? I would have thought that even though the margin-bottom of the '#nav li' has been set to -1px, this would not conflict with the div as it is a completely different element in which I have nested the blocks that I want to separate.
CSS is tricky that way. The most specific rule wins. To make a margin-bottom override the value for just a subset of the items you need to supply a more specific rule than the one you want to over-ride.
The rules for "more specific" are complex. I'd suggest consulting the CSS Specification.