Search code examples
htmlcssimagepositioning

I am having problems getting an image to sit right on top of a block for some reason

MY PROBLEM

I want the 2 ribbonpurplefade.gif's to be RIGHT up again the navmenu bar block that I colored pink (I made it an ugly pink so I can see the boundaries of the blocks).

The top ribbonpurplefade.gif should be sitting RIGHT on top of the navmenu with NO GAPS between them. The bottom ribbonpurplefade.gif should be snug against the bottom of the navmenu with NO GAPS between them.

Nothing I do gets rid of the gaps! That's my problem! :)

I put colors around everything so I can visually see where the blocks are. If you know what I did wrong - please let me know :) And yes, the colors are really ugly - it's so I can see the blocks :) Thanks in advance!

If you don't know what blocks are check out w3.org - they use the term liberally describing anonymous blocks, and <div>This is a block</div> <p>This is also a block</p> etc...

WHAT I TRIED

I have tried 0px for margin and padding and on the img tag. ONly thing that seems to work is using negative values but I don't understand why that would be... I seemed to be able to get them to line up using the ribbonpurplefade.gif as background images but then I could not stretch them in the CSS. So, I changed from using a background image to using an image as you see below and have been trying to make them touch the navmenu.

What I want is the 2 ribbonpurplefade.gif's to be snug up against the navmenu block. Why this isn't working is beyond me. I even tried a reset CSS file and it still does it. Maybe it's not possible. I even tried hspace and vspace but they are depreciated now anyways.

Any solutions need to work with IE7 and up (and alternate browsers FF, Chrome, Op)

HTML

<div class="navribbon"><img src="graphics/common/ribbonpurplefade.gif"></div>
<!-- THIS IS WHERE THE TOP GAP IS. I CANT GET RID OF IT COMPLETELY -->
<!-- NAVIGATION BAR HERE -->
<div class="navmenu">
    <ul>
        <li>Home</li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Services & Pricing</a></li>
        <li><a href="#">Online Store</a></li>
        <li><a href="#">Support & Drivers</a></li>
        <li><a href="#">Company Information</a></li>
    </ul>
</div>
<!-- NAVIGATION ENDED -->
<!-- THIS IS WHERE THE BOTTOM GAP IS. I CANT GET RID OF IT COMPLETELY -->
<div class="navribbon"><img src="graphics/common/ribbonpurplefade.gif"></div>

CSS

/* NAVIGATION RIBBONS BELOW */
.navribbon {
    padding:0px;
    margin:0px;
    /*background-color:#129933;*/
}

.navribbon img {
    padding:2px;
    margin:0px;
    background-color:#00FF66;
}

/* NAVIGATION CSS BELOW*/
.navmenu {
    text-align:center;
    padding:9px;
    margin:0px;
    font-size:14px;
    background-color: #FF0066;
    border:dotted;
}

.navmenu ul {
    margin: 0px;
    padding: 0px;
}

.navmenu li {
    display:inline;
    font-weight:bold;
    /*background-color: #99FF99;*/
}

.navmenu ul a {
    text-decoration:none;
    /*color:#4E4E4E;*/
    /*color: #276056;*/
    color:#267CB2;
}

.navmenu a:hover {
    text-decoration:underline;
    color:black;
}

.navmenu li:after {
    content: "\\";
    padding: 0px 5px;
    color: #999;
}

.navmenu li:last-child:after {
    content: none;
}

UPDATE: May 22, 2012

Well, I tried using tables and putting the top image centered DOWN and the bottom image centered UP but it still puts a gap there. I guess my only solution left is to create a DIV block and absolutely position the elements inside the div or redo all those ribbons in photoshop, resize them all, and resave them back. Ugh... so much work for something SO simple. I just don't understand WHY there is a gap when on every element I say - 0px for margin, padding - I mean... do we not have control over where stuff goes? Why does it HAVE to be a background to line up snugly against another block element? Stupid web design really ticks me off. Almost feel like making everything absolute. ARGH!

Solution

  • I think I've figured this one out after an hour of banging my head against a brick wall. The img tag is an inline element by default, so it has a minimum height which is dictated by the prevailing font-size wherever it's placed. This means that regardless of what height you give it below that minimum, it will always want to make room for the text which may surround it. That's why there's always what appears to be some margins or padding above and below it.

    The solution to your problem is to make your img tags display:block.