Need some CSS help | INFJ Forum

Need some CSS help

Alkali Regnant

Alkali Regnant

Regular Poster
Sep 28, 2009
74
5
0
MBTI
INFJ
I can't believe I'm having this problem when I've done this so many times before but I can't find out what's going wrong.

I have some links that I need to have a background image show up when you hover over them. However only the top part of background image is showing. I've messed with the margins and padding and the only thing that works slightly is if I set the background-position to left (you see half of the image)

background-image:url(pics/navHover.png);
background-repeat:no-repeat;
width:101;
height:62;

That is what I'm working with in the css. Can anyone help?
 
Buy deagle AWP combo and camp
 
I am guessing an underlying div is conflicting. Do you have more code you can paste? such as the bar the button belongs to, the css of those as well.
 
NeverAmI said:
I am guessing an underlying div is conflicting. Do you have more code you can paste? such as the bar the button belongs to, the css of those as well.
Click to expand...

Sure

Code: 
<style type="text/css">
a:link, a:visted{
background-image:url(pics/navLink.png);
background-repeat:no-repeat;
padding:0px 0px 0px 0px;
width:101;
height:62;
}
a:active{
background-image:url(pics/navActive.png);
background-repeat:no-repeat;
width:101;
height:62;
}
a:hover{
background-image:url(pics/navHover.png);
background-repeat:no-repeat;
width:101;
height:62;
}
</style>
</head>

<body>
<a href="url"><img src="pics/navWelcome.png" width="101" height="62" border="0" alt="Welcome" /></a>
<a href="url"><img src="pics/navStaffAndContacts.png" width="160" height="62" border="0" alt="Staff and Contacts" /></a>
<a href="url"><img src="pics/navPreviousEditions.png" width="141" height="62" border="0" alt="Previous Editions" /></a>
 
Well, if the images that the <a> tags are enclosing is bigger than the problem that you are having will tend to appear. Although everything looks normal, and this problem should not be appearing. The first thing you could try is to set the <!doctype>, maybe to something like HTML 4.0 Strict (which is what I always use) since sloppily written code tends to break noticably on the strict doctype, allowing you to write code which is more compatible with more browsers.

Try this CSS code and see if it helps anything.

You can use a better CSS setup by doing contextual selectors, in addition you can group common attributes
Code: 
.nav a,.nav a:visited { 
   height: 62px; 
   width: 101px; 
   background-image: url('pics/navLink.png');
   background-repeat: no-repeat;
   background-align: top left;
}
.nav a:active {
 background-image: url('pics/navActive.png');
}
.nav a:hover {
 background-image: url('pics/navHover.png');
}
Code: 
<div class="nav">
<a href="#">Nav1</a>
<a href="#">Nav2</a>
<a href="#">Nav3</a>
</div>
If that fails, also try eliminating the "height" and "width" values from the "a" part of your CSS. This will allow the anchor tags to automatically size according to whatever they're enclosing (which is what you would normally want).

You could also try to reset the CSS properties for all images by doing something like this
Code: 
img { border-width: 0px; margin: 0px; padding: 0px; }
If things get wonky, remove the CSS attributes until its unwonky.

Another thing, I tend to prefer to write CSS backgrounds in shorthand, something like this:
Code: 
background: #cccccc url('images/whatever.jpg') top left repeat-x;
Another convenient shortcut is
Code: 
border: solid #000 1px 1px 1px 5px;
It's more convenient for one-off things.
 
Last edited:
You must log in or register to reply here.
Top Bottom
Back