Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

JQuery & CSS Tab Issues

Posted on 2016-11-06
7
Medium Priority
?
84 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 59

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 59

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
Use Filtering Commands to Process Files in Linux

Learn how to manipulate data with the help of various filtering commands such as `cat`, `fmt`, `pr`, and others in Linux.

 
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 59

Accepted Solution

by:
Julian Hansen earned 2000 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 59

Expert Comment

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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
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 rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

721 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