jQuery Tabs & CSS Style

Question

I am using jQuery UI Tabs to style part of my page.

I originally had the page like this:

<fieldset>
    <legend>Part 1</legend>

    ...
</fieldset>

<fieldset>
    <legend>Part 2</legend>

    ...
</fieldset>

I then put these two items inside a tab control:

<div id="tabs">
   <ul>
       <li><a href="#tab1">Part 1</a></li>
       <li><a href="#tab2">Part 2</a></li>
   </ul>

   <div id="tab1">
       <fieldset ...>
   </div>

   <div id="tab2">
       <fieldset ...>
   </div>
</div>

<script type="text/javascript">
    $(function() {
        $('#tabs').tabs();
    });
</script>

The problem is that after I did this the tab control has modified the style of the fieldsets within it. Everything within the tabs has a larger font size, etc.

How can I easily say that everything in tab1 & tab2 should not be affected by the style of the tab control?

I want the tab control itself to have the larger font size and font, but the children should keep the old font size and font family.

Sitnam · Accepted Answer · 2011-10-10 15:15:23Z

1

The problem is coming from JQuery IU itself. namely ui-widget.

Example Here

There are 2 ways around this, remove the offending css yourself like the example.

Or add a css style to target fieldset when they are within the class ui-widget

answered Oct 10, 2011 at 15:15

Sitnam

1646 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Tabs & CSS Style

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related