CSS Tabs Border Issue
Question
Im having a problem to determine how to manipulate the Borders for some Tabs
You can see the functionality here on ASP.NET if you are logged-in http://forums.asp.net/user/editprofile.aspx#
You can see for an onClick Event the background-color of the Tab changes to white like its supposed to.
The problem that Im having has to do with the Borders for onClick:
The border-bottom should change from the grey color to white. The border-left and the border-right should change to the grey color.
Likewise when a Tab is not selected: The border-bottom should change to the grey color from white. The border-left and border-right should not have a border.
In my CSS, Im using both the blue and white class for the JavaScript. However I also have: .common-heading-tabs a.selected and this is confusing me.
Here is my Fiddle- if someone could help It would be great http://jsfiddle.net/NinjaSk8ter/ZSeFA/
4 answers
solution1
1 ACCPTED 2011-05-21 18:22:09
I just modified the CSS class for .white a little bit, your CSS mark-up was not the standard:
border-left-color: #A0AFC3;
border-left-style: solid;
border-left-width: 1px;
Additionally, to get the bottom border to go away, you have one of two options, you could do one of either
- remove the bottom border from the
.common-heading-tabs aclass and add it to the.blueclass - add
border-bottom-color:white !important;to the.whiteclass
The reason that you were seeing the behavior that you were was because the standard tab had a border (from .common-heading-tabs a ), and when you switched to white, you tried to change the color or some of the borders, but you used border-left-color-value rather than simply border-left-color , and then you didn't modify the border on the bottom on the tab for the white class, hence either moving the bottom border declaration out of .common-heading-tabs a or explicitly coloring the bottom-border-color:white !important
Hope that helps!
Edit :
You requested having a border run between the tabs, if you were to modify the class .left-col and add to it:
.left-col
{
border-bottom-color: black;
border-bottom-width: 1px;
border-bottom-style: solid;
}
That should do the trick, maybe you should get rid of the borders on the other tabs, if this is what you're looking for, because the double border looks funky.
Let me know if I can help any more
solution2
0 2011-05-21 18:18:52
For an example to make bottom border white look this
<html>
<head>
<style type="text/css">
p
{
border-style:solid;
border-bottom-color:white;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>
solution3
0 2011-05-21 18:23:27
You have some inheritance going on. Adding explicit values to the .blue class and important to the one in .white worked.
.blue {
background-color: #D7DFEA;
border-bottom: 1px solid #fff;
border-top: none;
border-left: none;
border-right: none;
}
.white {
border-bottom: 1px solid #fff !important;
border-top: 1px solid #A0AFC3;
border-left: 1px solid #A0AFC3;
border-right: 1px solid #A0AFC3;
background-color: white;
}
solution4
0 2011-05-21 18:24:16
The problem, as far as I can see, is that while both .common-heading-tabs a and .white are applied to the link, the former is the "more specific" CSS class, which means the browser gives it precedence while determining which styles to apply.
If you want to make sure the .white style overrides the border, you can either add !important to the border style:
.white {
background-color: white !important;
border-bottom-color: #FFFFFF !important;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
...
}
or redesign the appliance of your classes in such a way that conflicting border styles aren't applied to begin with, which in your case could for example mean moving the blue border style from .common-heading-tabs a to .blue .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.