Loading ...
Sorry, an error occurred while loading the content.

TabView heights affect other page content in Firefox

Expand Messages
  • guacorecipe
    Can anyone recommend a CSS way to completely prevent changes to the heights and margin/padding of selected tabs in TabView? TabView is designed to make the
    Message 1 of 5 , Jul 30 2:49 PM
    • 0 Attachment
      Can anyone recommend a CSS way to completely prevent
      changes to the heights and margin/padding of selected
      tabs in TabView?

      TabView is designed to make the selected tab taller
      than the others.

      That appears to work in IE7 but in Firefox, selecting a
      tab will change the layout slightly, raising or lowering
      the text inside the tab, the content of other items on
      the page and even the text inside of our search button.

      This is driving us nutz. We would prefer tabs all stay
      the same dimensions selected or not.

      We are using markup to make the tabs appear and and are
      not deviating from the code in the TabView example.
    • Frank Dietrich
      ... Compared to the dataTable, I found skinning the TabView to be really easy. There are two css-files for the tabview. a core and a skin css. Having css-files
      Message 2 of 5 , Jul 30 3:39 PM
      • 0 Attachment
        >Can anyone recommend a CSS way to completely prevent
        >changes to the heights and margin/padding of selected
        >tabs in TabView?
        >
        >TabView is designed to make the selected tab taller
        >than the others.

        Compared to the dataTable, I found skinning the TabView to be
        really easy.
        There are two css-files for the tabview. a core and a skin css.

        Having css-files local, You could simply modify the latter. If
        You draw the css and js files from YAHOO at runtime, You can
        make a modified copy of that in Your private Tabs-Skin.css
        and load this after the others. Worked for me.


        >That appears to work in IE7 but in Firefox, selecting a
        >tab will change the layout slightly, raising or lowering
        >the text inside the tab, the content of other items on
        >the page and even the text inside of our search button.

        hmm... works flawlessly in FF for me, but I have nothing on top of it.


        HTH

        Frank
      • guacorecipe
        ... Thank you Frank. Will try your advice. Guaco
        Message 3 of 5 , Jul 30 4:23 PM
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "Frank Dietrich" <fdietrich@...> wrote:

          > Compared to the dataTable, I found skinning the TabView to be really easy.

          Thank you Frank. Will try your advice.

          Guaco
        • guacorecipe
          The phenomenon is visible even in the online YUI example: http://developer.yahoo.com/yui/examples/tabview/frommarkup_clean.html In Firefox 3.0.1 Mac, the
          Message 4 of 5 , Jul 30 4:46 PM
          • 0 Attachment
            The phenomenon is visible even in the online YUI example:

            http://developer.yahoo.com/yui/examples/tabview/frommarkup_clean.html

            In Firefox 3.0.1 Mac, the content below the tabs raises
            and lowers by apparently one pixel as you click the first
            (or second) and then the third tabs. Same thing on my
            Windows box at the office.

            The behavior does not occur in Safari or OmniWeb.
          • Frank Dietrich
            ... OK, I did not see *Mac*. For me under, using doze XP, there is no issue with FireFox 3
            Message 5 of 5 , Jul 30 4:54 PM
            • 0 Attachment
              >The phenomenon is visible even in the online YUI example:
              >
              >http://developer.yahoo.com/yui/examples/tabview/frommarkup_clean.html
              >
              >In Firefox 3.0.1 Mac,....

              OK, I did not see *Mac*.

              For me under, using doze XP, there is no issue with FireFox 3
            Your message has been successfully submitted and would be delivered to recipients shortly.