Re: [WSG] .box breaks up on feedback page.
It work fine in Firefox 3.5. It might be a browser quirk. Kathleen R Dery wrote: Hello, I have a .box on my lists. All of them have round corners except the one on feedback page. I was able to get the corner on the bottom-right round last night at one point, but when I moused over it, it changed. Not that corner is not round at all. I am chasing errors, but have not found it yet. Will someone help? Thanks!! Kathleen http://198.189.180.32/ma-ftp/media-arts/DMA_C111/dery/site/feedback_6.html http://198.189.180.32/ma-ftp/media-arts/DMA_C111/dery/site/main.css *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] .box breaks up on feedback page.
Hi Katherine,
This is a case of the specificity, or the weight of one selector
winning over another selector.
You initially apply a rule using this selector:
#navigation ul a { }
You then apply a new rule for the :hover pseudo-class, using this
selector:
#navigation a:hover { }
The third rule you apply is aimed at the last link in your navigation,
where the class of feedback is applied. This only takes place when
you also have the id of feedback applied to the body element.
#feedback #navigation .feedback a { }
The first rule's selector has a weight of: 0-1-0-2 (no inline styles,
one ID, no classes and two elements)
The second rule's selector has a weight of: 0-1-1-1 (no inline styles,
one ID, one pseudo-class and one element)
The third rule's selector has a weight of: 0-2-1-1 (no inline styles,
two IDs, one class and one element)
As you can see, this third rule has much more weight than the two
rules above so it wins out - the :hover rule will not be applied in
this case. There are a number of solutions, but the quickest is to
write a new rule just for this case, making sure the selector is
specific enough, and has enough weight:
#feedback #navigation .feedback a:hover { }
Does this all make sense?
I have a simple presentation about specificity and the cascade online
here if it helps:
http://www.slideshare.net/maxdesign/css-cascade-1658158
Thanks
Russ
On 13/11/2009, at 4:29 AM, Kathleen R Dery wrote:
Hello,
I have a .box on my lists. All of them have round corners except
the one on feedback page. I was able to get the corner on the
bottom-right round last night at one point, but when I moused over
it, it changed. Not that corner is not round at all. I am chasing
errors, but have not found it yet.
Will someone help?
Thanks!!
Kathleen
http://198.189.180.32/ma-ftp/media-arts/DMA_C111/dery/site/feedback_6.html
http://198.189.180.32/ma-ftp/media-arts/DMA_C111/dery/site/main.css
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] .box breaks up on feedback page.
Yes, I reframed the question again in the forum. It only happens in IE. I am trying to remove it in IE only with a conditional comment. Still it persists. Thanks! Kathleen It work fine in Firefox 3.5. It might be a browser quirk. Kathleen R Dery wrote: Hello, I have a .box on my lists. All of them have round corners except the one on feedback page. I was able to get the corner on the bottom-right round last night at one point, but when I moused over it, it changed. Not that corner is not round at all. I am chasing errors, but have not found it yet. Will someone help? Thanks!! Kathleen http://198.189.180.32/ma-ftp/media-arts/DMA_C111/dery/site/feedback_6.html http://198.189.180.32/ma-ftp/media-arts/DMA_C111/dery/site/main.css *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] .box breaks up on feedback page.
Thanks Russ;
I have no problem with hover. My nav and all other links hover fine.
I am confused. Does this affect my box?
I reframed my question to the forum.
Thanks for the feedback! You are kind.
Kathleen
On Nov 12, 2009, at 12:02 PM, Russ Weakley wrote:
Hi Katherine,
This is a case of the specificity, or the weight of one selector
winning over another selector.
You initially apply a rule using this selector:
#navigation ul a { }
You then apply a new rule for the :hover pseudo-class, using this
selector:
#navigation a:hover { }
The third rule you apply is aimed at the last link in your
navigation, where the class of feedback is applied. This only
takes place when you also have the id of feedback applied to the
body element.
#feedback #navigation .feedback a { }
The first rule's selector has a weight of: 0-1-0-2 (no inline
styles, one ID, no classes and two elements)
The second rule's selector has a weight of: 0-1-1-1 (no inline
styles, one ID, one pseudo-class and one element)
The third rule's selector has a weight of: 0-2-1-1 (no inline
styles, two IDs, one class and one element)
As you can see, this third rule has much more weight than the two
rules above so it wins out - the :hover rule will not be applied in
this case. There are a number of solutions, but the quickest is to
write a new rule just for this case, making sure the selector is
specific enough, and has enough weight:
#feedback #navigation .feedback a:hover { }
Does this all make sense?
I have a simple presentation about specificity and the cascade
online here if it helps:
http://www.slideshare.net/maxdesign/css-cascade-1658158
Thanks
Russ
On 13/11/2009, at 4:29 AM, Kathleen R Dery wrote:
Hello,
I have a .box on my lists. All of them have round corners except
the one on feedback page. I was able to get the corner on the
bottom-right round last night at one point, but when I moused over
it, it changed. Not that corner is not round at all. I am chasing
errors, but have not found it yet.
Will someone help?
Thanks!!
Kathleen
http://198.189.180.32/ma-ftp/media-arts/DMA_C111/dery/site/feedback_6.html
http://198.189.180.32/ma-ftp/media-arts/DMA_C111/dery/site/main.css
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] .box breaks up on feedback page.
Will someone help?
I think the problem is related to the different default margin/padding
values that different browsers default to. Try replacing this in your css
file:
/* --larger flexible rounded corner box--- */
.box_two {
width: 400px;
background: #da9c73 url(bottom-left.gif) no-repeat left bottom;
padding: 0;
margin: 0;
}
.box_outer {
background: url(bottom-right.gif) no-repeat right bottom;
padding: 0 0 5% 0;
margin: 0;
}
.box_inner {
background: url(top-left.gif) no-repeat left top;
padding: 0;
margin: 0;
}
.box_two ul {
background: url(top-right.gif) no-repeat right top;
padding: 5% 5% 0 5%;
margin: 0;
}
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] .box breaks up on feedback page.
Kathleen R Dery wrote: [...] I am puzzled because the boxes for the lists on other pages are fine with my CSS. It is just the feedback page with the links, the bullets, and the external link icons. This is a good example where using a *logical* debugging process can help immensely, especially when working with CSS and potential browser bugs, and even if you aren't a CSS expert. Based upon your statement above, have you confirmed that the feedback page is in fact ok by removing all the aforementioned content to confirm? Strip it back to the basic template with an empty content column and only your list with the rounded corners and see what happens. If everything is ok, then add the links, bullets etc back in one at a time until you are able to re-create the problem. Once you know which item is the offender, you can better deal with it. FWIW I see the rounded corners just fine in FF 3.015 and FF 3.5. HTH Mark *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] .box breaks up on feedback page.
Thanks Kepler! I do think it has to do with browser-specific margins
and padding also. However, when I tried your CSS, there were two
problems: The filenames for the box parts are supposed to have an
underscore. I fixed that after trying the code the first time. The
results from both times of trying the CSS you provided are a square-
cornered box. I am puzzled because the boxes for the lists on other
pages are fine with my CSS. It is just the feedback page with the
links, the bullets, and the external link icons.
Thanks again!
On Nov 12, 2009, at 2:21 PM, Kepler Gelotte wrote:
Will someone help?
I think the problem is related to the different default margin/padding
values that different browsers default to. Try replacing this in
your css
file:
/* --larger flexible rounded corner box--- */
.box_two {
width: 400px;
background: #da9c73 url(bottom-left.gif) no-repeat left bottom;
padding: 0;
margin: 0;
}
.box_outer {
background: url(bottom-right.gif) no-repeat right bottom;
padding: 0 0 5% 0;
margin: 0;
}
.box_inner {
background: url(top-left.gif) no-repeat left top;
padding: 0;
margin: 0;
}
.box_two ul {
background: url(top-right.gif) no-repeat right top;
padding: 5% 5% 0 5%;
margin: 0;
}
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] .box breaks up on feedback page.
Thanks, that is practical advise. I will try it. Kathleen On Nov 12, 2009, at 4:14 PM, Mark Henderson wrote: Kathleen R Dery wrote: [...] I am puzzled because the boxes for the lists on other pages are fine with my CSS. It is just the feedback page with the links, the bullets, and the external link icons. This is a good example where using a *logical* debugging process can help immensely, especially when working with CSS and potential browser bugs, and even if you aren't a CSS expert. Based upon your statement above, have you confirmed that the feedback page is in fact ok by removing all the aforementioned content to confirm? Strip it back to the basic template with an empty content column and only your list with the rounded corners and see what happens. If everything is ok, then add the links, bullets etc back in one at a time until you are able to re-create the problem. Once you know which item is the offender, you can better deal with it. FWIW I see the rounded corners just fine in FF 3.015 and FF 3.5. HTH Mark *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] .box breaks up on feedback page.
The filenames for the box parts are supposed to have an underscore
Ah, sorry about that. I changed the filenames to test locally. You also need
to add 'images/' before the filename as in your original as well. So it
should be:
/* --larger flexible rounded corner box--- */
.box_two {
width: 400px;
background: #da9c73 url(images/bottom_left.gif) no-repeat left bottom;
padding: 0;
margin: 0;
}
.box_outer {
background: url(images/bottom_right.gif) no-repeat right bottom;
padding: 0 0 5% 0;
margin: 0;
}
.box_inner {
background: url(images/top_left.gif) no-repeat left top;
padding: 0;
margin: 0;
}
.box_two ul {
background: url(images/top_right.gif) no-repeat right top;
padding: 5% 5% 0 5%;
margin: 0;
}
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
