SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    unwanted image padding... and nonworking CSS

    Hi! I've always found forums to be the best source of programming solutions, so I'm excited to brush up on my web development skills here. Thanks in advance to everyone who tries to help me out =)

    I'm building a navigation bar at the top of my web site. Right now it's in the form of a table with exactly 1 cell (the reason I've done this, for now, is so that the bar will be centered... I'm sure there's a better way to do this)

    The graphics are designed so that the buttons on the bar should be right against each other, that is with 0 pixels "padding" or "buffering" between them (I'm rusty on web lingo too ) However, there exists a space of 4 pixels between each link/image. Attached below is some code.

    Code:
    <!-- news -->
    <a href="index.html" onmouseover="imgmouseover('news')" onmouseout="imgmouseout('news')">
        <img src="images/news-mouseout.jpg" name="news" width="100px" border="0">
    </a>
    <!-- about -->
    <a href="about.html" onmouseover="imgmouseover('about')" onmouseout="imgmouseout('about')" padding="0">
        <img src="images/about-mouseout.jpg" name="about" width="100px" border="0" padding="0">
    </a>
    <!-- store -->
    <a href="store.html" onmouseover="imgmouseover('store')" onmouseout="imgmouseout('store')">
        <img src="images/store-mouseout.jpg" name="store" width="100px" border="0" padding="0">
    </a>
    I'd also like to move as much of this code as possible to an external style sheet. I started developing the code with a style sheet, but I have been unable to make it work (ie, settings within the css file seemed to be ignored).

    I tried putting this code in the <head> section both with and without a <style> tag, yielding no results either time:

    Code:
    <link rel="stylesheet" type="text/css" href="style.css" />
    Thanks for any advice you might be able to give! =)

  2. #2
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First off, your stylesheet link is correct, so I'm not sure why it wouldn't be taking it. Try clearing your cache and hitting refresh? Sometimes my style changes don't go into effect until I do a complete refresh.

    Second, for the padding issue, trying starting out with this:

    Code:
    a { margin: 0; padding: 0; }
    img { margin: 0; padding: 0; }
    Just to make sure everything starts at 0. Do you have a live page we could see?
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  3. #3
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,

    Right now I'm working with local files, but I'm planning on moving to the web soon. Expecting a small amount of trouble making the transition; hoping for none =).

    Perhaps css files don't like being referenced from the local disk?


    By the way, I added margin="0" to each toolbar item, ie:

    Code:
    <!-- about -->
    <a href="about.html" onmouseover="imgmouseover('about')" onmouseout="imgmouseout('about')" margin="0" padding="0">
        <img src="images/about-mouseout.jpg" name="about" width="100px" border="0" margin="0" padding="0">
    </a>
    which didn't work.
    Last edited by daveh84; Nov 25, 2008 at 11:08. Reason: additional info

  4. #4
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    For me, the solution to this particular problem was to use an inline style sheet, and set the margin to -2.

    Code:
    <style type="text/css">
    
    img { border:0px; margin:-2px; }
    a { border:0px; }
    
    </style>

  5. #5
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're problem above was that you can't just reference margin and padding from inside the element, it needs to be inside a style declaration, like so:

    Code:
    <img src="image.jpg" style="margin: 0; padding: 0;" />
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches


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
  •