JQuery & CSS Tab Issues

Attached are the html and css for code I am having problems with. I am using the examples provided at https://jqueryui.com/tabs/#default and making a page with both horizontal and vertical tabs. It works great, other than that when I select the second horizontal tab, its vertical tab has bullets on the left. If I click those tabs, the bullets disappear, but I don't want them to show in the first place.
screenshotAlso, I'd like to remove the borders, and the shaded background on the tab panels. I'd also like the vertical tab panels to not be have a left indent - to be flush on the left. Can anyone help with that? If not, at least the first problem with the bullets. Thanks!

Here is the code.
TestJSBoth.html
jquery-ui.css
LVL 2
Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Julian HansenConnect With a Mentor Commented:
This appears to be a bug with IE11
The following seems to fix it
  .ui-tabs-nav {list-style-image: url(data:0)}
  .ui-tabs .ui-tabs-nav li {list-style: inherit;}

Open in new window

Updated sample here
0
 
Julian HansenCommented:
I am not seeing any bullets (you can look here for a sample)

To remove the border add this custom style after your jquery-ui.css

.ui-widget-content {
  border: none
}

Open in new window


Refer to same sample above
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Julian, Second tab, are your bullets.
julian bullets
the border:none;
didn't remove my borders.

I added that style within my document under the other scripts and also in my css at the very bottom. Are you sure that's all you did to remove yours?

I also viewed source on yours and copied the entire document as a new html and ran it, and when I run it, with my css file, it still has the borders using your html source. So did you do anything else to the CSS file itself?

thanks.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Julian HansenCommented:
Ah - Internet Exploder ... I was using FF / Chrome

For some reason IE is interpreting the list-style: none on the <li> element as being an override on the <ul> parent.

Will take a look and post back.
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
I found the solution to removing the borders, it is this one:
    .ui-widget.ui-widget-content{
        border: none !important;
    }

but still looking for the bullet problem resolution.
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Wow! Thanks so much! you're the best!
0
 
Julian HansenCommented:
Thank you and you are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.