This week's book giveaway is in the OCMJEA forum.
We're giving away four copies of OCM Java EE 6 Enterprise Architect Exam Guide and have Paul Allen & Joseph Bambara on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes Spacing Changing Between List Items Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of OCM Java EE 6 Enterprise Architect Exam Guide this week in the OCMJEA forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Spacing Changing Between List Items" Watch "Spacing Changing Between List Items" New topic
Author

Spacing Changing Between List Items

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1439
    
    1
I am using ul and li tags to create a list of selectable links on my page. Each li tag has a div tag that gets loaded using jquery when the itemlink is clicked. At the same time js function runs to colapse any other previously expanded link.

Initially the links are spaced vertically with one space. When I click a link to expand it thus running the js function to colapse the other links(set div tag css.display:"none") extra space gets put between the links that was not originally there. In other words the links spread out more vertically. It is like the margin gets set to larger value or something.

How can settint the div tag display to none affect the spacing?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61105
    
  66

There's most likely some unexpected CSS taking hold, or extraneous elements in the DOM. Or both.

Your best tool to inspect the DOM and the applied CSS is something like the WebKit debugger in Chrome and Safari. Firebug is good too, but I find the WebKit debugger easier to use.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1439
    
    1
Bear Bibeault wrote:There's most likely some unexpected CSS taking hold, or extraneous elements in the DOM. Or both.

Your best tool to inspect the DOM and the applied CSS is something like the WebKit debugger in Chrome and Safari. Firebug is good too, but I find the WebKit debugger easier to use.


Thanks again.

I finally found the issue causing the problem was a width attribute in the li tag css was wider than the div tag could allow. When I reduced the value to less than the div tag width the ul tags did not adjust vertically any more.

I don't know if what I just explains makes any sense but it works.

If I don't communicate with you again, which I doubt, in a few days have a Merry Christmas.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61105
    
  66

Steve Dyke wrote:have a Merry Christmas.


Thanks!

 
Don't get me started about those stupid light bulbs.
 
subject: Spacing Changing Between List Items