css border and padding FOR A LINK doesn't work as class but works as inline style

RESOLVED INVALID

Status

()

Firefox
General
RESOLVED INVALID
11 years ago
11 years ago

People

(Reporter: Shoshan, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

11 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0

I have this menu where the bottom border should change when mouse over, and when a class is applied,

#pageLinks a{
	text-decoration:none;
	color:#444444;
	padding:9px 0 9px 0;
}

#pageLinks a:hover, .selectedPage{
	font-weight:bold;
	color:#000000;
	padding:9px 0 5px 0;
	border-bottom:4px solid #000000;
}

when mouse over it works, and when selectedPage class is applied it doesn't change THE BORDERS (it does change the color and font-weight)

when I tried applying the style inline (<a href="..." style="...">) the border and padding did work...

I hope I was helpful and this bug was not yet reported...

_____________
Shoshan

Reproducible: Always

Steps to Reproduce:
1. create the link list and the stylesheet
2. open browser
3. works when hover, not when class applied
4. change to inline style instead of class
5. works okay



if you need the source code email me at psclil@gmail.com and I'll send it to you (i'm not sending because it's asp and I'll have to save a html file and send it withe the images and style sheets ans stuff)

Comment 1

11 years ago
Psclil, 

Can you create a reduced testcase showing the problem? Leave the css code in the testcase and then attach it in this bugfile thanks to the "Create a New Attachment" link.
Make sure your testcase is a reduced testcase, a *_minimized_* testcase. If you need help, read 

What is a Simplified Test Case, and How Do I Make One?
http://www.mozilla.org/newlayout/bugathon.html#testcase

Thank you
(Reporter)

Comment 2

11 years ago
Created attachment 243884 [details]
a simple example to demonstrate the bug

okay, now loook at the first link,
it should be just like it's hover state,
but nope...

on the third link on the other hand,
I was able to make it look like the hover state
by applying the style inline.

Comment 3

11 years ago
Shoshan,

Thank you for your testcase and your efforts here. I can already confirm that you have an over-constrained design, an over-constrained table: a pixel-perfect goal. Also, some of your declarations could be simplified or just removed.
It's not good idea to try to force design into a pixel-rigid layout... This is probably some kind of horizontal menu.

You give cellpadding="0" to the table and then you add &nbsp; in cells: this is not logical, coherent.

#pageList a{
	text-decoration: none;
	color: #FFFFFF;
	padding: 13px 0 13px 0;
}

.selectedPage{
	padding: 13px 0 8px 0;
	border-bottom: 4px solid #9BE4F8;
	color: #9BE4F8;
}

The above 2 rules apply to the same table cell, the first one. Here, the rule 
#pageList a
has a greater specificity than the rule
.selectedPage
so, when there is a conflict, the declarations in #pageList a will be applied. That's by definition in the CSS 2.1 spec.

The only conflict is the padding-bottom of the link: so it will be 13px, not 8px. A visual proof of how the conflict is resolved in favor of #pageList a is that the color is white, not #9BE4F8. Since there is no conflict regarding border-bottom, then the border is rendered. 13px + 11px + 13px + 4px is greater than 37, so it overflows outside the cell dimension: this is correct behavior.

> when selectedPage class is applied it doesn't
> change THE BORDERS (it does change the color and font-weight)

That's because there are no style conflict for the font-weight (it should not change the color though: you say it does) in the 2 css rules but there are 2 declarations of padding in the 2 rules: that's what differs. And the one that wins in the conflict is not the one you expected.

Comment 4

11 years ago
Shoshan,

I'm resolving this bug as INVALID. To know+understand where your code went wrong, you can read

6.4.3 Calculating a selector's specificity
http://www.w3.org/TR/2006/WD-CSS21-20060411/cascade.html#specificity

where you'll see that inline style has a higher specificity than an id attribute which in turn has a higher specificity than a class declaration. When several CSS declarations can be applied to the same element, there are rules to untangle and determine which CSS declaration will be applied.

Resolving as INVALID

-------

There are many ways to get the intended design you want: e.g. you could give a 4px border-bottom of the same color of background for other cells.

You'll find 1 here (where .selectedPage is applied to the cell, not to its content):

http://www.gtalbot.org/BugzillaSection/Bug358425.html

I suggest you use iso-8859-I instead of windows-1255: an iso-charset is better than a proprietary platform one. Also font-size: 11px is (or will be or might be) too small for 40+ years old people. I personally have minimum font-size set to 13px.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 11 years ago
Resolution: --- → INVALID

Comment 5

11 years ago
> I suggest you use iso-8859-I 

I meant iso-8859-8-I

(Reporter)

Comment 6

11 years ago
(In reply to comment #5)


thank you very much, you have been very helpful and all I have been doing was wasting your time.

I am very sorry for that!

> > I suggest you use iso-8859-I 
> 
> I meant iso-8859-8-I
> 

yeah, sure, I get it...

but my page is in Hebrew, and I already know lots about encoding problems and this kind of stuff... I think that is the best solution for most Hebrew pages.

Once again, thank you very much for your time and effort.
You need to log in before you can comment on or make changes to this bug.