Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

JQuery & CSS Tab Issues

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

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 60

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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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 60

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 60

Expert Comment

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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

877 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