Inline image rollover being cut off

[lynn_jkls]

Hi, I'm a newbie and just learning CSS and web design.

I have a horizontal navigation bar, and I want an image to appear above each link on the hover and active states. The image is being cut off on the top, and my attempts to position it haven't worked, even though there is an inline image that is the same height as the clipped image that isn't cut off.

Any help greatly appreciated!! I tried posting the link, but this is my first post, and Sitepoint won't let me. Here is the CSS - I'll try attaching the HTML:

@charset "UTF-8";
/* CSS Document */
 
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #e5a552;
    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 */
    min-width: 1024px;
    color: #816c60;
}
 
#mainContent, #footer {
    position: absolute;
}
 
#header {
    background-image: url(images/flower.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    padding-top: 4px;
    height: 110px;
    margin: auto 0 auto 0;
    text-align: center;
    z-index: 1
}
 
#banner {
    background-image: url(images/interiorbanner.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    padding-top: 4px;
    height: 110px;
    margin: auto 0 auto 0;
    text-align: center;
    z-index: 1
}
 
#mainContent {
    top: 180px;
    padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
 
#footer {
    height: 2em;
    width: 100%;
    top: 625px;
    clear: both;
    padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#e5a552;
}
 
#container {
    width: 1024px;
    min-height: 620px;
    background: #ffffff;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -2em;
    position: relative;
}
 
#header p {
    text-align: center;
    color: #816c60;
    font-size: 12px;
    line-height: 100%;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}
 
#header h1 {
    margin: 0;
    padding-bottom: 2px;
    padding-top: 4px;
}
 
#header h2 {
    margin: 0;
    padding-bottom: 0;
    padding-top: 6px;
}
 
#banner h1 {
    font-size: large;
    font-weight: 100;
    line-height: 1;
    padding-left: 120px;
    padding-right: 600px;
}
 
#banner h2 {
    font-size: medium;
    font-weight: 100;
    line-height: 1;
    padding-left: 120px;
    padding-right: 600px;
    margin: 0;
}
 
#banner h3 {
    font-size: medium;
    font-weight: 100;
    line-height: 0;
    padding-left: 750px;
    padding-right: 50px;
    margin: 0;
}
 
#header li {
    display: inline;
    padding-right: 1em;
    padding-left: 1em;
    border-right: 1px solid #d9848b;
    font-size: medium;
}
 
#navigation {
    background: #fff;
    top: 80px;
    height: 80px;
    text-align: center;
    padding: 0;
    margin: 0;
    z-index: 2;
}
 
#navigation ul {
    margin: 0;
    padding: 0;
    background-color: #fff;
    z-index: 3;
    overflow: visible;
}
 
#navigation li {
    display: inline;
    text-align: center;
    width: 1024px;
    font-size: 13px;
    list-style-type: none;
    color: #816c60;
    padding: 0 1.5em 0 0;
    margin: 0;
    z-index: 4;
    }
    
#navigation li a:hover, #navigation li a:active {
    background-image: url(images/leaf.png);
    position: relative;
    background-repeat: no-repeat;
    background-position: 50% 80%;
    height: 41px;
    margin-top: -28px;
    z-index: 5;
    }
 
#footer p {
    text-align: center;
    color: #006600;
    font-size: small;
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
 
p {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    text-align:left;
    color: #816c60;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    line-height: 120%;
    padding-left: 100px;
    padding-top: 6px;
}
 
a {
    text-decoration: none;
}
 
a:link {
    color: #816c60;
}
    
a:visited { 
    color: #816c60;
}
 
a:hover {
    color: #CC3366;
    text-decoration: underline;
}
 
a:active {
    color: #CC3366;
}
 
h1 {
    font-size: 24px;
    font-weight: 100;
    line-height: 1;
    padding-bottom: 0;
}
 
h2 {
    font-size: 18px;
    font-weight: 100;
    line-height: 1;
    padding: 0;
}
 
h3 {
    font-size: 14px;
    font-weight: 150;
    line-height: 1;
    padding: 0;
}
 
h4 {
    font-size: 13px;
    font-weight: 150;
    line-height: 1;
    padding-top: 12px;
}
 
img.center {
    display: block;
    width: 624px;
    margin-left: 200px;
    margin-right: auto;
}
 
img.right {
    float: right;
    padding-right: 100px;
    padding-left: 10px;
}
 
#mainContent h3, h4 {
    text-align: left;
    padding-left: 100px;
    margin: 0;
}

[lynn_jkls]

I've gotten a little bit closer to what I want! I added a class selector and an empty span element to the <a> element. Now I see my image over each link when I hover (in FF and Opera, something goofy in Safari, and haven't checked IE yet). Next issue to tackle:I'd like the image centered over each link, and right now I have it absolutely positioned in the top left corner above each link.

How do I center the image over each text link? Here is that section's CSS:

#navigation {
    background: #fff;
    top: 80px;
    height: 80px;
    text-align: center;
    padding: 0;
    margin: 0;
    z-index: 2;
}
 
#navigation ul {
    margin: 0;
    padding: 0;
    background-color: #fff;
    z-index: 3;
    overflow: visible;
}
 
#navigation li {
    display: inline;
    text-align: center;
    width: 1024px;
    font-size: 13px;
    list-style-type: none;
    color: #816c60;
    padding: 0 1.5em 0 0;
    margin: 0;
    z-index: 4;
    }
    
.imgtipped:hover {
    position: relative;
}
 
.imgtipped:hover .imgtip {
    position: absolute;
    left: 0;
    top: -1em;
    width: 27px;
    height: 15px;
    background-image: url(images/leaf.png);
    background-repeat: no-repeat;
    z-index: 5;
}
 
.imgtipped:active {
    position: relative;
}
 
.imgtipped:active .imgtip {
    position: absolute;
    left: auto;
    top: -1em;
    width: 27px;
    height: 15px;
    background-image: url(images/leaf.png);
    background-repeat: no-repeat;
    z-index: 5;
}

Thanks for any help! I have three books open on my lap, and have been searching online for a week to try to figure this out!

[AutisticCuckoo]

I've added some syntax highlighting and I'm moving the thread to the CSS forum where the gurus roam.

[RyanReese]

Hi, which element in the CSS do you wnat centered that is AP'd? There arae quite a few. Also you can post a link by leaving off the http://www. parts of the URL so it looks like this

sitehere . com / page . php

Also you should know that setting z-index only applies to element that have position set, aka relative, absolute, or fixed.

Overflow:visible is the default value and setting it does nothing special other then resetting it if it was previously set

Also note that if you are going to use AP then it is best to set both coordinates as IE needs both set otherwise factors such as text align will influence the position.

And also note that setting display:inline; on an element such as a <li>, or any other element like that will cause it to ignore widths/heights, if you need to accesss these properties you can set display:inline-block though be aware FF2 andn Ie6/7 need work (floating would be a good alternative if possible)

FF2 needs display:-moz-inline-block; set (before inline-blockk is fed to good browsers) and then IE6/7 need a CC set for them to set display:inlline; for them because otherwise it won't recognize inline-block because they only recognize inline-block for inline elements by nature.

That should set you off

[lynn_jkls]

Thanks!! I will try some of these suggestions. The test site is up at thrownawaycircus dot com slash StanleyTest.

The element I would like centered is the .imgtip over the inline navigation links in the hover and active states. I'd like it centered over each nav link, but as the links are live text, there isn't a set width to them - Some are wider and some are narrower based on the text, and the font size is variable based on browser interpretation. It's not a deal-breaker - I could live with the image lining up at the top left corner above each link as it is now, but if there's a way to center it, I'd love to learn!

I have cleaned up some of the CSS, but still have more to do. Just getting my feet wet in CSS (print designer stepping into web) and trying to see what works and what doesn't and why. It passes validation, but I don't want useless matter in there.

Other than centering that particular element, the site looks fine in FF, Safari, Opera, Chrome and IE 8. The .imgtip is up too high in IE7, and I haven't braved an IE6 viewing yet...

[RyanReese]

Hi, I think this can be achieved by doing something like this, note that for perfection an extra element is needed
Have your HTML like this

<li><a href="prevention.html" class="imgtipped">Breast Cancer Prevention<span 

class="sexy"><span class="imgtip"></span></span</a></li>

Note the <span class="sexy"> encompases the imgtip, now update the CSS

.imgtipped:hover span.sexy
{
	position:absolute;
	left:50%;
	top:-1em;
	display:block;
	width:27px;
	height:15px;
}
.imgtipped:hover span.sexy .imgtip {
	position: absolute;
	left: -50%;
	display:block;
	top: 0;
	width: 27px;
	height: 15px;
	background-image: url(images/leaf.png);
	background-repeat: no-repeat;
	z-index: 5;
}

I can explain if you want.

[lynn_jkls]

Brilliant! Thanks! So I needed more containers, basically - there wasn't anything to position the image relative to - is that right? Any explanation will be appreciated.

Another question: how do I get the image to remain on when you're on a certain page? I thought the active state did that. Do I need another class for the li selector? (Sorry if I'm mashing terms, I'm a beginner!)

I'm trying this, but the image appears only to the left of the link:

li.current_page {
position: relative;
}

li.current_page .imgtip {
position: absolute;
left: 50%;
display: block;
top: 0;
width: 27px;
height: 15px;
background-image: url(images/leaf.png);
background-repeat: no-repeat;
z-index: 5;
}

li.current_page {
position: relative;
}

li.current_page span.bright .imgtip {
position: absolute;
left: -50%;
display: block;
top: 0;
width: 27px;
height: 15px;
background-image: url(images/leaf.png);
background-repeat: no-repeat;
z-index: 5;
}

[RyanReese]

Originally Posted by lynn_jkls

Brilliant! Thanks! So I needed more containers, basically - there wasn't anything to position the image relative to - is that right? Any explanation will be appreciated.

You needed the position:relative; to start a stacking context for the inner spans which were Ap'd. The 50% left is moving it over so the lleft corner is on the 50% mark, and then the inner -50% omoves it over 50% thus equally centered.

Another question: how do I get the image to remain on when you're on a certain page? I thought the active state did that. Do I need another class for the li selector? (Sorry if I'm mashing terms, I'm a beginner!)

The :active pseudo class only works when an element has the mouse clicked down, aka worthless for what your trying to do. You need to add a class to the active item and apply stylse to suite.

[lynn_jkls]

Thanks Ryan, for the helpful comments and explanation with this. I got the image to stay on for the current page with a new class too. On to IE fixes and cleaning up the CSS!

a.current {
position: relative;
text-decoration: none;
cursor: default;
}

a.current span.bright {
position: absolute;
left: 50%;
top: -1em;
display: block;
width: 27px;
height: 15px;
text-decoration: none;
cursor: default;
}

a.current span.bright .imgtip {
position: absolute;
left: -50%;
display: block;
top: 0;
width: 27px;
height: 15px;
cursor: default;
text-decoration: none;
background-image: url(images/leaf.png);
background-repeat: no-repeat;
z-index: 5;
}

[RyanReese]

Looks good . Your welcome.

[lynn_jkls]

Just wanted to update for anyone else trying to do the same thing: While trying to fix for IE 6 and 7, I found (with help!) another way to have an image appear over the links in the horizontal navigation, and have that image remain when you're on a current page. Instead of the CSS for the nested span elements, I added a display:block for the a element in the li, and grouped the CSS for the hover, active and current classes. Some finagling with this method also cleared up the problems I was having in IE, without any conditional comments. Yay!

[COLOR="rgb(255, 0, 255)"]#navigation[/color] {
background: #fff;
text-align: center;
height: 80px;
padding: 0;
margin: 0 0 0 80px;
}

[COLOR="rgb(255, 0, 255)"]#navigation[/color] ul {
margin: 0;
padding: 0;
background-color: #fff;
position: relative;
height: 41px;
}

[COLOR="rgb(255, 0, 255)"]#navigation[/color] li {
display: inline;
font-size: .9em;
list-style-type: none;
color: #cc3366;
float: left;
padding: 0 1.5em 0 0;
margin: 0;
height: 41px;
position: relative;
}

[COLOR="rgb(255, 0, 255)"]#navigation[/color] li a {
display: block;
}

.imgtipped {
padding-top: 18px;
margin-top: 10px;
font-size: 13px;
}

.imgtipped:hover, .imgtipped:active, a.current {
background-image: url(images/leaf.png);
background-repeat: no-repeat;
background-position: top center;
}

a.current {
text-decoration: none;
cursor: default;
}

[lynn_jkls]

oops - sorry, my color coding didn't work too well there!