www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Adding <A HREF or image map to an image puts 3px L/R padding on image

  1. #1
    Join Date
    Jan 2010
    Posts
    9

    resolved [RESOLVED] Adding <A HREF or image map to an image puts 3px L/R padding on image

    Hi all --

    I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide.

    I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line.

    I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed.

    Help! How do I get rid of this white space but still keep the link on the image??

    [I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having]
    http://forums.adobe.com/servlet/Jive...5-33485/sc.png
    Thanks in advance!
    //kl

    PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner.

    CSS:
    Code:
    <style type="text/css">
    <!--
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    background-image: url(images/blue.bg.png);
    background-repeat: repeat;
    background-color: #009;
    }
    .oneColFixCtr #container {
    width: 1000px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #FFFFFF;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 0px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
    }
    .oneColFixCtr #mainContent {
    padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    }
    body, td, th {
    color: #333;
    }
    #main_banner2 {
    margin: 0px;
    padding: 0px;
    height: auto;
    width: 1000px;
    }
    -->
    </style>
     
    </head>
    Nav Banner:
    NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space...
    Code:
    <body class="oneColFixCtr">
     
    <!-- MAIN NAVIGATION BANNER -->  
    <!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br />

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    img {float:left;}
    Nav Banner then doesn't need to be on one line

  3. #3
    Join Date
    Jan 2010
    Posts
    9
    Quote Originally Posted by Fang View Post
    img {float:left;}
    Nav Banner then doesn't need to be on one line
    it still does... even with the float tag, if i put a carriage return in the code it puts the whitespace in between the images

  4. #4
    Join Date
    Jan 2010
    Posts
    9
    turns out there was one spot i hadn't zeroed out the margins/padding/border. I zeroed it out and now it works. Thanks all.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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