This week's book giveaway is in the Servlets forum.
We're giving away four copies of Murach's Java Servlets and JSP and have Joel Murach on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes Not achieving space between div blocks containing lists Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Not achieving space between div blocks containing lists" Watch "Not achieving space between div blocks containing lists" New topic
Author

Not achieving space between div blocks containing lists

Joe Lemmer
Ranch Hand

Joined: Oct 24, 2008
Posts: 171
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


OCPJP 85%
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60774
    
  65

Have you tried adjusting the margin bottom?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Joe Lemmer
Ranch Hand

Joined: Oct 24, 2008
Posts: 171
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60774
    
  65

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

Joined: Oct 24, 2008
Posts: 171
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60774
    
  65

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

Joined: Oct 24, 2008
Posts: 171
OK will do. Thanks for your replies.

:-)
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Validate your HTML, you will see that you are breaking rules with the divs.

Eric
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Not achieving space between div blocks containing lists
 
Similar Threads
converting html to pdf
wide navigation bar causes problems
how would i do the following in css
Absolute Position in IE
Problem with struts-menu for second level submenu