SOLVED: Weird "mouseover/selected/hover/!important" problem

39 Posts

Counterfire Reply #1, 16 years ago

Hey All,

Website in Question: http://ar.fiery-legends.de/

Problem: The pagination numbers of the Slider tend to disappear when they’re selected. Once the next is selected/hovered the number(image) reappears.

Thing is, both the slider and the two mouseovers below the slider follow the same pattern in css mouseover coding:

a.toc {
    float: left;
    width: 32px;
    height: 32px; 
}

a.toc span {
    display: none;
}

a.toc:hover,
a.selected {
    background-position: 0 -32px ! important;
    /* 
    add the ! important here just in case, since
    you're dealing with multiple classes
    */
}

#s_1 {
    background: url("slides/s_1.png") no-repeat 0 0;
}

#s_2 {
    background: url("slides/s_2.png") no-repeat 0 0;
}

#s_3 {
    background: url("slides/s_3.png") no-repeat 0 0;
}

#s_4 {
    background: url("slides/s_4.png") no-repeat 0 0;
}

Thing is, if you remove the !important part on the mouseovers below then there is no problem within the pagination. However, then the mouseovers do not function.

Above was the code for the pagination here is the code for the "works" underneath the slider:

/* WORKS */
#works {
    margin: 0 auto;
    padding-top: 50px;
    width: 1000px;
    height: 100%;
}

#w1 {
    margin-left: 63px;
    background: url("works/w_julia.png") no-repeat 0 0;
}

#w2 {
    margin-left: 62px;
    margin-right: 62px;
    background: url("works/w_flv8.png") no-repeat 0 0;
}

#w3 {
    margin-right: 63px;
    background: url("works/w_flv8.png") no-repeat 0 0;
}


a.mini_w {
    float: left;
    width: 250px;
    height: 210px;
}

a.mini_w span {
    display: none;
}

a.mini_w:hover, a.selected {
    background-position: 0 -210px ! important;
}

Any idea how to resolve this?

btw, off-topic, is it
!important or
! important (with a space) ??

1,024 Posts

Frank Reply #2, 16 years ago

last question first !important.

EDIT:

Start by validating your site, because both your HTML and your CSS dont pass W3C validation. So get rid of those errors that might help. Also there s something in the CSS that overrides this line

a.mini_w:hover, a.selected {
background-position: 0px -210px !important;
}

its in the arv6_stylesheet.css on line 288. But I might be wrong!

Where did you get the content slider from, you got a URL I would like to compare to the original code, tnx Frank.

87 Posts

webandflow Reply #3, 16 years ago

Change:

a.toc:hover,
a.selected {
    background-position: 0 -32px ! important;
    /* 
    add the ! important here just in case, since
    you're dealing with multiple classes
    */
}

to:

a.selected {
    background-position: 0 -32px ! important;
    /* 
    add the ! important here just in case, since
    you're dealing with multiple classes
    */
}

And you should be in business. The !important keyword is VERY powerful and can really screw things when used a lot.

Des
webandflowdesign.com

39 Posts

Counterfire Reply #4, 16 years ago

Link to Stylesheet: http://ar.fiery-legends.de/arv6_stylesheet.css

One slide of the slider:

    <div id="slide_right_img"><img src="slides/s_flv8.png" alt=""  /></div>
 	<div id="slide_left_info">
   	  <div id="s_title"><img src="slides/s_flv8_t.png" alt=""  /></div>
      <a id="slide_view-btn" href="#" title="slide_view-btn"><span>View Project</span></a>
  	</div>

XHTML Validator: ☺http://validator.w3.org/check?uri=http%3A%2F%2Far.fiery-legends.de%2Findex.php&charset=%28detect+automatically%29&doctype=Inline&group=0

CSS Validator: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Far.fiery-legends.de%2Farv6_stylesheet.css&profile=css3&usermedium=all&warning=1&lang=en

I changed the "a.selected" to what you said, yet now only the mouseovers don’t work anymore :s

Is there anyway you could tell me how to get them to work again? And if possible, tell me how to fix those validator mistakes?

I think the xhtml ones are due to a !important missing in the div id’s, but where do I put it :s?

1,024 Posts

Frank Reply #5, 16 years ago

Okay the HTML errors,

the "s_title" is currently a div id, it is used at least twice in your template and thus should be a class. Or something is wrong the way it is used, anyway:
Line 64 and line 55 should both read

<div class="s_title"><img src="slides/s_flv8_t.png" alt=""></div>

Same goes for line 65 and 56, should read:

<a class="slide_view-btn" href="#" title="slide_view-btn"><span>View Project…

Off course things should be changed to in your CSS

so

#s_title {text-decoration: none;padding-top: 75px;padding-bottom: 30px;	margin: 0 auto;}

should be

.s_title {text-decoration: none;padding-top: 75px;padding-bottom: 30px;	margin: 0 auto;}

and I was looking for the

EDIT Can you let me know where you got this script, is it from dynamic drive? Because that "manual" tells you to create a link to

<link rel="stylesheet" type="text/css" href="contentslider.css" />

I dont see that bit of code in your CSS also there is a bit of jquery script initoated? Are them two not in conflict?
As for the CSS errors, not sure if those are real errors (CSS3?)
And to get back the hover you should undo the

a.toc:hover,

What if you only use the a.hover and leave out the selected for a trY?

39 Posts

Counterfire Reply #6, 16 years ago

Thanks for your input, there were some other small things I changed and all is working fine! :]

-Solved

1,024 Posts

Frank Reply #7, 16 years ago

.pagination .selected { background-position: 0 -32px !important;}

Okay, good!