Reputation: 12747
I've quickly made up a little tabbed top to my form.
I'm not going to actually change the elements on each tab, I'm simply going to use javascript to display certain fields and hide others, based on which tab the user clicks.
So the way that a user knows their tab is clicked is by changing the background color and font-weight of the selected tab, using javascript.
This is how it looks:
My main question is about the design_tabsborder
ul
that I'm using. The only reason I put it there is because I want to have an image that has a vertical gradient fade-out of the tabs color to white. This code below is working fine on Chrome, apart from the fact that the corners aren't rounded, it's also working fine on Firefox.
So I don't have a problem that I want to fix, but I want to know if there's something really wrong structurally or otherwise, with the way that I'm doing this.
The following is my CSS:
.design_tabs
{
list-style-type:none;
width:95%;
}
.design_tabsborder
{
background-image:url(images/tabsbg.jpg);
background-position:bottom;
background-repeat:repeat-x;
height:15px;
width:100%;
margin-top:10px;
}
.design_tab
{
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
float:left;
display:block;
padding:5px 3px 5px 3px;
text-align:center;
width:112px;
color:black;
margin-left:2px;
background-color:lightgray;
cursor:pointer;
}
And my HTML:
<ul class='design_tabs' id='design_tabs' style='position:absolute; top:150px; left:20px;'>
<li class='design_tab tabon' id='choose_images'>
Choose images
</li>
<li class='design_tab taboff' id='company_details'>
Company details
</li>
<li class='design_tab taboff' id='personal_details'>
Personal details
</li>
<li class='design_tab taboff' id='final_review'>
Final Review
</li>
<br /><ul class='design_tabsborder'><li> </li></ul>
</ul>
Upvotes: 0
Views: 584
Reputation: 1079
You have not included non-prefixed properties of your border-radius
. As you can see here (http://caniuse.com/border-radius), almost none browser uses prefixes with border-radius anymore.
Upvotes: 1