www.webdeveloper.com
Results 1 to 3 of 3

Thread: Help with phantom space.

Hybrid View

  1. #1
    Join Date
    Mar 2013
    Posts
    13

    Help with phantom space.

    I have the following javascript and it works as it should, a new image is loaded each time the page is loaded.


    var imagenumber = 5 ;
    var randomnumber = Math.random() ;
    var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
    var URLs = new Array() ;
    images = new Array
    images[1] = "images/headerpics/h1.jpg"
    images[2] = "images/headerpics/h2.jpg"
    images[3] = "images/headerpics/h3.jpg"
    images[4] = "images/headerpics/h4.jpg"
    images[5] = "images/headerpics/h5.jpg"



    var image = images[rand1] ;
    var linknumber = 1 ;
    var img1 = Math.round( (linknumber-1) * randomnumber) + 1 ;
    links = new Array
    links[1] = "index.htm"

    var link = links[img1];
    document.write('<a href="' + link + '"><img src="' + image + '" border="0"></a>') ;

    Here is the html code to call the script,

    <!-- START ROTATING HEADER GRAPHICS -->

    <script language="JavaScript"
    type="text/JavaScript" src="javascripts/headerpics.js">
    </script>

    <!-- END ROTATING HEADER GRAPHICS -->

    The issue is that a small space is created under the image when it loads using the javascript.

    I have a table created with two rows with a menu bar in the bottom row and the images load in the top row. If I just place an image in the top row it looks fine. If I use the script to randomly load the images there is a small space under the image or between the top row and bottom row.

    Any suggestions??

    Thanks!

    Joe

  2. #2
    Join Date
    Mar 2013
    Posts
    13
    Quote Originally Posted by webdone View Post
    I have the following javascript and it works as it should, a new image is loaded each time the page is loaded.


    var imagenumber = 5 ;
    var randomnumber = Math.random() ;
    var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
    var URLs = new Array() ;
    images = new Array
    images[1] = "images/headerpics/h1.jpg"
    images[2] = "images/headerpics/h2.jpg"
    images[3] = "images/headerpics/h3.jpg"
    images[4] = "images/headerpics/h4.jpg"
    images[5] = "images/headerpics/h5.jpg"



    var image = images[rand1] ;
    var linknumber = 1 ;
    var img1 = Math.round( (linknumber-1) * randomnumber) + 1 ;
    links = new Array
    links[1] = "index.htm"

    var link = links[img1];
    document.write('<a href="' + link + '"><img src="' + image + '" border="0"></a>') ;

    Here is the html code to call the script,

    <!-- START ROTATING HEADER GRAPHICS -->

    <script language="JavaScript"
    type="text/JavaScript" src="javascripts/headerpics.js">
    </script>

    <!-- END ROTATING HEADER GRAPHICS -->

    The issue is that a small space is created under the image when it loads using the javascript.

    I have a table created with two rows with a menu bar in the bottom row and the images load in the top row. If I just place an image in the top row it looks fine. If I use the script to randomly load the images there is a small space under the image or between the top row and bottom row.

    Any suggestions??

    Thanks!

    Joe

    I may have gotten it. I'm using FrontPage and when I view the page using Front Page is shows the space if I view it on the web it looks fine with a little tweaking of the table. What i mean by tweaking the table is that I'm using a background image in the top row of the table and I had to move the top of the bottom row up to remove the space. In doing so however, in FrontPage design mode, the row is not tall enough to show the whole background image in design mode but looks fine on the web or in preview mode except for the space is there. Go figure...

    I don't know near enough about this stuff.

    Any input would still be helpful.

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    Without CSS style an image is a inline block. Then, if the height of the image is not a multiple of the line-heigth a space appears at the top of the image... To solve this problem change the class of this image with a class {display:block} and leave the table's td take the corresponding height...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles