Tab Button Hiding under another element? Help! :)

[CrystalT]

So basically I’m trying to use CSS to create a vertical link bar. I -think- I finally have it working properly, but unfortunately it is hidden behind another element.

HTML:

 Important Links 







Policies

CSS:

.navside{

border: 1px solid black;

background: white;

background-image:none;

width:200px;

height:automatic;

min-height:300px;

padding:15;

top:35px;

position:absolute;

}





a.button {

display: block;

width: 135px;

height: 43px;

background: url(button.png) no-repeat top;

position:absolute;

z-index:1;

}



a.button:active {

background: url(button.png) no-repeat bottom;

position:absolute;

z-index:1;

}

So what’s happening (and unfortunately I do not have the webpage online anywhere yet) is that the button appears where it should be appearing (though it’s slightly too far to the right, this is how I noticed I might have it actually working) but it appears underneath the navside element. I’ve tried raising the z-indexes on the button, and putting a z-index of 1 on the navside element so that the buttons have higher z-indexes than the navside element, but that didn’t seem to have any effect. Any help here would be greatly appreciated!

Also this is only my 2nd day working with CSS so super-complex answers will go right over my head. :(

Thanks! :)

[joshuanhibbert]

We are going to need a little more information. The issue isn’t in what you have posted, it must be an overriding style somewhere else.

[CrystalT]

Okay here’s the whole index.css:

* {

margin: 0;

padding: 0;

list-style-type:none;

}





ul.list1 {

list-style-type: none;

background-image: url(WhiteGradient.png);

height: 35px;

width: 770px;

margin: auto;

top:190px;

position:absolute;

left:60px;

}



li.list1 {

float: left;

left:15px;

}



ul.list1 a {

list-style-type:none;

background-image: url(GreyDivider.png);

background-repeat: no-repeat;

background-position: right;

padding-right: 42px;

padding-left: 42px;

display: block;

line-height: 45px;

text-decoration: none;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 21px;

color: #000;

}



ul.list1 a:hover {

color: #838383;

list-style-type:none;

}



ul.list2 {

list-style-image:url('BlueVector.png');

color: #ff0000;

position:absolute;

left:225px;

font-size: 26px;

}



.navside{

border: 1px solid black;

background: white;

background-image:none;

width:200px;

height:automatic;

min-height:300px;

padding:15;

top:35px;

position:absolute;

}





a.button {

display: block;

width: 135px;

height: 43px;

background: url(button.png) no-repeat top;

position:absolute;

z-index:1;

}



a.button:active {

background: url(button.png) no-repeat bottom;

position:absolute;

z-index:1;

}





.content{

border: 1px solid black;

background: white;

width:500px;

height:automatic;

padding:15;

top:35px;

position:absolute;

left:239px;

min-height:300px;

}



body

{

background:black;

background-image:url('VE_large.png');

background-repeat:no-repeat;

background-attachment:scroll;

background-position:300px 10px;

left:300px;

top:10px;

position:absolute;

}



p

{

text-indent:50px;

} 

I have a feeling it links back to the horizontal UL as that has caused issues with almost everything else I’ve added after the fact though I don’t know enough yet to be able to ferret it out for myself. :/ Otherwise there might be an issue (maybe?) in the HTML?

[joshuanhibbert]

I still can’t find the issue. Is this happening in all browsers, or just a particular one?

[CrystalT]

Firefox, Opera, Chrome… the whole navside shows up wonky in IE but even wonky (it’s way far off to the right rather than where it should be), but even on that the button is behind the navside element. So basically yes, all browsers show the same thing (except IE where it is an even worse mess.)

[joshuanhibbert]

Would you mind copying your HTML and CSS into a jsFiddle?

[CrystalT]

Okay you can’t actually see the button poking out since the button uses graphics which aren’t available to jsFiddle. But if you run your mouse over the edge between the white box on the left with the ‘Policies’ link just between the two white boxes, you’ll see the word “Policies” go from black to grey … right there is where I can just see the edge of the button image poking out from behind the left box. (And that probably makes little to no sense. :( ) here

[CrystalT]

I put the website up temporarily HERE so that it can be viewed properly (which will let you see more easily what it’s doing.)

[joshuanhibbert]

I’m still not entirely sure what you are after. I can only assume that you are talking about the background image that has been told not to repeat. Try explicitly declaring background-repeat: repeat; on .button

[CrystalT]

Pictures are easier :D

Ok….
This

Should look like….
That

And then…
Onclick

It should do that. :)

[joshuanhibbert]

Right, so the issue is that you have told the background-image not to repeat. Use my above fix.

[CrystalT]

Like:

a.button {

display: block;

width: 135px;

height: 43px;

background: url(button.png) top;

position:absolute;

background-repeat: repeat;

z-index:1;

}



a.button:active {

background: url(button.png) bottom;

position:absolute;

background-repeat: repeat;

z-index:1;

}

That, you mean?

Update:

I tried the above changes and they seemed to have no effect. Unfortunately it is far past my bedtime so I’ll be off for the evening. Thank you for your help, joshuanhibbert! Hopefully you or someone else might have some other ideas overnight.

I did go ahead and upload the index.css file (with the background-repeat:repeat; changes to a.button) to the temporary webpage where the page is up for view.

Goodnight all and thanks again! :)

Still unsolved. (At this moment at least.)

[joshuanhibbert]

You still have a style that is overriding my solution. When I get some more time, later tonight, I will explain a little more about what is going on, and why it is currently not working.

[CrystalT]

Ok thanks again josh. Sorry for being so thick. Totally new to all this but I am trying. :)

[joshuanhibbert]

Okay, currently you have this class:

ul.list1 a {

list-style-type: none;

background-image: url(GreyDivider.png);

background-repeat: no-repeat;

background-position: right;

padding-right: 42px;

padding-left: 42px;

display: block;

line-height: 45px;

text-decoration: none;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 21px;

color:

black;

}

Which is overriding this class:

a.button {

display: block;

width: 135px;

height: 43px;

background: url(button.png) top;

position: absolute;

background-repeat: repeat;

z-index: 1;

}

Due to specificity (a CSS term that you definitely should Google and wrap your head around).

Most of the properties in the two classes are different, so it’s not too much of an issue. But, background-repeat: repeat; is being overridden by background-repeat: no-repeat;

The easiest way to fix this would be to remove the ul from the ul.list1 a selector (once you understand specificity, that will make sense). You will then also need to remove background: url(button.png) top; as that image links to nothing.

[Author]

Posts