2

In the line of code below, how can i remove the border-top? I've tried "border-top: none;" but this didn't work. Any help would be greatly appreciated!

dd { border-top: 0; font-size: 12px; &:last-of-type { border-top: 1px solid white; position: relative; top: -1px; }

http://jsfiddle.net/q2Gm9

Slurms
  • 199
  • 2
  • 4
  • 15

3 Answers3

4
border-top: 0 !important;

You need to add !important, which tells the styling to take priority over previous styling.

Might be worth reading up on how css targets elements and what takes priority: this post explains it better than I can: What are the priorities among CSS selectors

As a note: I seem to remember running into some problems in certain browsers if border styling is set differently, e.g if you add a style to all borders and then try to overwrite with individual border settings, e.g border-top - I'm sorry I can't remember the exact details but something to keep in mind if you have other border problems.

UPDATE: I have simplified the css to remove the nested css and unecessary duplicate selections, check here http://jsfiddle.net/VWQct/24/ . Is this what you were trying to achieve?

Community
  • 1
  • 1
SwiftD
  • 5,769
  • 6
  • 43
  • 67
  • Did not work for me unfortunately, still showing the line but now in black. http://jsfiddle.net/m4FLd/ – Slurms Sep 04 '12 at 10:12
  • Your css is a little hard to read and I'm not sure you're looking at the border you think you are. You could try giving each border a different color so you know which one you are looking at. However, You have several rules targetting the same element, if I was you I would simplify things and target dd and dt separately, get rid of the nested css, you will then suddenly have a very simple problem to solve. – SwiftD Sep 04 '12 at 10:32
  • Its the line in yellow. I'd like to remove it all together if possible. http://jsfiddle.net/VWQct/ – Slurms Sep 04 '12 at 10:39
  • @jbnbtw Thats due to the dt having border-bottom set delete it and you can see the dd has no border-top :) – AbstractChaos Sep 04 '12 at 10:44
  • @AbstractChaos I removed the border-bottom set but the yellow line is still there. :( – Slurms Sep 04 '12 at 10:53
  • What is happening: You remove the yellow line with border:0px !important, you then see the black border bottoms created by the rule &:last-of-type { border-bottom:, which is a pplied to both your last dd and dt elements (of which there is only one of each). Like I said, It's much more complicated than it need to be - I would simplify it for you, but I dont know if you need the last of type rules applied to both eles or not. – SwiftD Sep 04 '12 at 10:55
  • @WebweaverD I'm only wanting to keep the bottom line but ensuring that the bottom line is present when opening and closing the accordion. If you could help simplify the code for me, i would be so grateful!! – Slurms Sep 04 '12 at 11:05
1
<dt><a href="">Panel 1</a></dt>
on Panel 1 click you should set border-bottom:0px !important;
because border-top is working fine.
Gopal
  • 217
  • 1
  • 4
  • 18
  • This didn't work for me. Trying to remove the yellow line. Let me know your thoughts. http://jsfiddle.net/VWQct/ – Slurms Sep 04 '12 at 10:44
  • yellow line color you can replace with white color – Gopal Sep 04 '12 at 10:50
  • I'd would like to remove the line all together instead of having the line in white. – Slurms Sep 04 '12 at 10:52
  • onclick you can addclass on this control and set class attribute border-bottom:0px !important; $('.accordion > dt').addClass('hidetopborder'); – Gopal Sep 04 '12 at 11:08
0

Try this

border-top: none !important;
Adi
  • 5,089
  • 6
  • 33
  • 47
Anshuman Jasrotia
  • 3,135
  • 8
  • 48
  • 81
  • Still no luck. :( This is strange, the line still shows up in black http://jsfiddle.net/eDW9e/ – Slurms Sep 04 '12 at 10:22
  • The problem in this line .accordion dd:last-of-type, .accordion dt:last-of-type { border-bottom: 1px solid #000000; } you will need to separate these two classes and then you can give the separate borders for each of these. – Anshuman Jasrotia Sep 04 '12 at 10:32