• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Tim Cooke
  • paul wheaton
  • Paul Clapham
  • Ron McLeod
Sheriffs:
  • Jeanne Boyarsky
  • Liutauras Vilda
Saloon Keepers:
  • Tim Holloway
  • Carey Brown
  • Roland Mueller
  • Piet Souris
Bartenders:

Not achieving space between div blocks containing lists

 
Ranch Hand
Posts: 171
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi guys,

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.

Cheers

Joe
 
Sheriff
Posts: 67756
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Have you tried adjusting the margin bottom?
 
Joe Lemmer
Ranch Hand
Posts: 171
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Bear,

Thanks for your reply.

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.

Regards

Joe
 
Bear Bibeault
Sheriff
Posts: 67756
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Adding conflicting CSS is a sure way to get non-deterministic behavior.

There's already a margin-bottom rule in "#nav li". Don't try to compete with it. Have you tried adjusting it?
 
Joe Lemmer
Ranch Hand
Posts: 171
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Bear

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.

Thanks again

Joe
 
Bear Bibeault
Sheriff
Posts: 67756
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Joe Lemmer
Ranch Hand
Posts: 171
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
OK will do. Thanks for your replies.

:-)
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Validate your HTML, you will see that you are breaking rules with the divs.

Eric
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic