Geek asks and answers

Problem with CSS Tab Borders

I had a problem defining how to manipulate borders for some tabs

enter image description here

You can see the functionality here on ASP.NET if you are logged in to http://forums.asp.net/user/editprofile.aspx#

You can see that for the onClick event, the background color of the tab changes to white as intended.

The problem is that Im has to do with Borders for onClick:

The lower border should change from gray to white. The border-left and right borders should change to gray.

Similarly, if no tab is selected: The lower border should change to gray from white. The border-left and right border should not have a border.

In my CSS, I use both the blue and white class for JavaScript. However, I also have: .common-heading-tabs a.selected, and that scares me.

Here is my Fiddle - if someone can help It would be great http://jsfiddle.net/NinjaSk8ter/ZSeFA/

+3
source share
4 answers

I slightly modified the CSS class for .white, your CSS label was not standard:

border-left-color: #A0AFC3;
border-left-style: solid;
border-left-width: 1px;

In addition, to get the lower border, you have one of two options, you can do one of

  • remove the bottom border from the class .common-heading-tabs aand add it to the class.blue
  • add border-bottom-color:white !important;to class.white

, , , ( .common-heading-tabs a), , , border-left-color-value, border-left-color, , , .common-heading-tabs a, bottom-border-color:white !important

, !

Edit

, .left-col :

.left-col
{
 border-bottom-color: black;
 border-bottom-width: 1px;
 border-bottom-style: solid;
}

, , , , , .

,

+1

, ,

<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>
0

. .blue important , .white.

.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;
}
0

The problem, as far as I can see, is that, although the links are used as .common-heading-tabs awell as .white, the first is "more specific" class of the CSS, which means that the browser gives it priority in determining which styles to apply.

If you want the style to .whiteoverlap the border, you can add a border !importantto the style:

.white {   
    background-color: white !important;
    border-bottom-color: #FFFFFF !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    ...
}

or redesign your class device so that conflicting border styles are not applied from the beginning, which in your case could mean, for example, moving the blue border style from .common-heading-tabs ato .blue.

0
source

More articles:


All Articles