Solved

JQuery & CSS Tab Issues

Posted on 2016-11-06
7
48 Views
Last Modified: 2016-11-08
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
0
Comment
Question by:Starr Duskk
  • 4
  • 3
7 Comments
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41876361
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
 
LVL 2

Author Comment

by:Starr Duskk
ID: 41877372
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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41877540
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 2

Author Comment

by:Starr Duskk
ID: 41877634
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
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41878318
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
 
LVL 2

Author Closing Comment

by:Starr Duskk
ID: 41878804
Wow! Thanks so much! you're the best!
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41878922
Thank you and you are welcome.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question