Solved

JQuery & CSS Tab Issues

Posted on 2016-11-06
7
56 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 56

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 56

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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 56

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 56

Expert Comment

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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Open dialog with server side controls in it 3 46
CSS Scroll Center with Static Side. Like EE does. 2 28
CSS for <center> 14 33
javascript and jquery question 4 21
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

762 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