SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: span height !?

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Holland
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    span height !?

    Hi

    This is my first attempt to html a page with div / span in combination with javascript and css.

    In my page the SPAN element is somehow higher then it should be in internet explorer. It seems it has some dorment space underneath it. I'm using:

    Code:
    <div>
      <span class="pusher"><img src="parentPusher.gif"></span>
      <span class="pusher"><img src="child.gif"></span>
      <span class="child" id="child2">Ik ben een child</span>
    </div>
    <div>
      <span class="pusher"><img src="parentPusher.gif"></span>
      <span class="pusher"><img src="child.gif"></span>
      <span class="child" id="child3">Ik ben een child</span>
    </div>
    and format it with css:

    Code:
    .child {
    	z-index: 1;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	vertical-align: top;
    	margin: 0px;
    	padding: 0px;
    	border: 0px;
    	height: 0px;
    	overflow: hidden;
    }
    
    .childContainer {
    	overflow: hidden;
    	margin: 0px;
    	padding: 0px;
    }
    The discrepancy between browsers is this:



    I hope you can help me. Thnx ! You can try the site here: http://joop.whatasolution.nl/test.htm

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    A span will only take height if you set its display property to "block". Otherwise, it will ignore it, as all good inline elements should . Besides, if you're going for a tree-menu type of list, then you should use the appropriate <ul> and <li> with proper CSS (like list-style-image) for your tree nodes.

  3. #3
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    A span will only take height if you set its display property to "block". Otherwise, it will ignore it, as all good inline elements should . Besides, if you're going for a tree-menu type of list, then you should use the appropriate <ul> and <li> with proper CSS (like list-style-image) for your tree nodes.
    Except images, of course
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Jeff Lange
    Except images, of course
    You should be setting that in HTML anyway.

  5. #5
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have found a number of problems
    1. On the page posted you have an extra set of divs compared to the code you have posted.
    2. There are a number of returns and new lines that IE can cometimes interpret as a plain space which can introduce vertical white space.
    3. You only set the font and size on the child class. All other classes have the default font size which is bigger.


    You need to set the font size of the other spans and divs involved in the list to 1px so that if a space is interprted within those spans and divs it is not higher than the text in the child span.

    You may need to remove white space from the file (spaces and newlines).

  6. #6
    SitePoint Zealot johno's Avatar
    Join Date
    Sep 2003
    Location
    Bratislava, Slovakia
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  7. #7
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Holland
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help. The font hight was bugging me.

    I'll try again with list.. also, i'm trying to learnd css and javascript. If I really wanted a perfect working tree menu I'd have stole it.

    Still thanks though.. you're help is really appriciated


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •