10 Replies Latest reply on Sep 7, 2011 5:50 AM by Jeff_Coatsworth

    How to Centre tables with out centreing the text in elements?

    JunooniRobo

      Ok so this bug has been boggling my brains for a while. When i create a table and center it, all the text inside the table also center justifies (in the output and preview, but is not visible in HTML editor), no matter what the justification is for the cells, the cells will always justify as the table is justified.

       

      I have Robohelp ver.8

       

      In editor

      p1.PNG

      In output

      p2.PNG

        • 1. Re: How to Centre tables with out centreing the text in elements?
          Peter Grainge Adobe Community Professional (Moderator)

          See Using RoboHelp 8 on my site.

           

           

           


           

          See www.grainge.org for RoboHelp and Authoring tips

           

          @petergrainge

          • 2. Re: How to Centre tables with out centreing the text in elements?
            JunooniRobo Level 1

            thanks Peter.

             

            My next question is why does that option even exist .....?? offcourse i want my editing in RH to go to HTML.... :-/

            • 3. Re: How to Centre tables with out centreing the text in elements?
              Peter Grainge Adobe Community Professional (Moderator)

              By default when you generate your help it is written in XHTML that has much stricter rules. That option creates your help in HTML and its less strict rules are not causing the centering problem.

               

               

               


              See www.grainge.org for RoboHelp and Authoring tips

               

              @petergrainge

              • 4. Re: How to Centre tables with out centreing the text in elements?
                JunooniRobo Level 1

                ok that solved the alignment problem. But now, i had a flaoting object in my header with navigation buttons. It is no longer floating.

                 

                here is my master page code:

                <?xml version="1.0" encoding="utf-8" ?>
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <meta name="topic-comment" content="" />
                <meta name="generator" content="Adobe RoboHelp 8" />
                <title>SHARQ_Master_MO_2_1_2011</title>
                <link rel="StyleSheet" href="SHARQ_MO_2_1_2011.css" type="text/css" />
                <style type="text/css">/*<![CDATA[*/
                div.floating-menu {
                position: fixed;
                background: #000000;
                border: 0;
                width: 150px;
                z-index: 100;
                }
                div.floating-menu a,
                div.floating-menu h3 {
                display: block;
                margin: 0 0.5em;
                }
                /*]]>*/</style>
                </head>

                <body>
                <?rh-region_start type="header" style="width: 100%; height: 26px; background-color: #ffffff;" ?>
                <div class="floating-menu" style="width: 100%; border-left-width: 1px;
                   border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px;
                   float: none; background-color: #ffffff;">
                  <table style="border: Solid 2px #66ccff; background-attachment: scroll;
                     background-image: url('Images/header background.png');
                     background-repeat: Repeat-X; left: 0px; top: 0px; height: 50px;"
                     cellspacing="0" background="Images/header background.png"
                     width="99%">
                   <col width="48" />
                   <col width="764" />
                   <col width="521" />
                   <tr style="height: 42px;">
                    <td style="vertical-align: top;"><p style="margin-left: 5pt;
                              margin-top: 5pt; margin-bottom: 0pt;"><img
                     src="Images\sharq_logo.png" alt="" style="border: none;"
                     width="40" height="28" border="0" /></p></td>
                    <td style="vertical-align: top;"><p style="margin-bottom: 0pt;
                              font-family: Garamond, serif;
                              color: #00337a; font-weight: bold;
                              margin-left: 5pt;
                              margin-top: 1pt; font-size: 20pt;">Mechanical
                     Engineer Training Manual</p></td>
                    <td><p style="margin-bottom: 0pt; margin-right: .15in;
                       margin-top: 5pt; color: #0064ae;" align="right"><input
                     type="image" name="image" src="Images\home.png" title="Home page"
                     onclick="window.location.href='Disclaimer.htm'" style="width: 23px;
                     height: 21px;" />&#160;<input type="image" value="Go Back"
                             onclick="history.go(-1)"
                             src="Images\Go Back.png"
                             name="image" title="Go back to previous page"
                             style="width: 77px; height: 21px;" />&#160;<script
                     type="text/javascript">var sForward = canGo(true);
                var sBackward = canGo(false);
                //Get the path of the root of the project
                var sRelPath = _getRelativePath(document.location, gsStartPage);

                if(sBackward == true)
                document.write('<img src="'+sRelPath+'/images/left_out.png" title="Previous topic" onclick="onPrev()" style="cursor: pointer"/>');
                else
                document.write('<img src="'+sRelPath+'/images/left_in.png" title="No more topics to display"/>');
                if(sForward == true)
                document.write('<img src="'+sRelPath+'/images/right_out.png" title="Next topic" onclick="onNext()" style="cursor: pointer"/>');
                else
                document.write('<img src="'+sRelPath+'/images/right_in.png" title="No more topics to display"/>');</script></p></td>
                   </tr>
                  </table>
                </div>
                <?rh-region_end type="header" ?>
                <p style="margin-bottom: 1pt; line-height: Normal; margin-top: 1pt;">&#160;</p>
                <?rh-placeholder type="breadcrumbs" ph-align="2" sep-char=" -|- " home="Home"
                usetopicformat="0" ph-style="font-family:Calibri;font-size:8pt;font-weight: normal;font-style: normal;text-decoration: none; margin-top: 5pt" ?>
                <?rh-region_start type="body" ?>
                <p>&#160;</p>
                <?rh-region_end type="body" ?>
                <?rh-region_start type="footer" style="width: 100%; position: relative;" ?>
                <table style="left: 0px; top: 232px; height: 36px;" cellspacing="0"
                    width="100%">
                  <col style="width: 100%;" />
                  <tr>
                   <td style="vertical-align: bottom;"><p style="margin-top: 30px;"><span
                    style="font-family: Calibri, sans-serif; color: #c0c0c0;">Copyright
                    <?rh-symbol_start name="Copyright" ?>©<?rh-symbol_end ?> </span></p></td>
                  </tr>
                </table>
                <?rh-region_end type="footer" ?>
                </body>
                </html>

                 

                • 5. Re: How to Centre tables with out centering the text in elements?
                  Peter Grainge Adobe Community Professional (Moderator)

                  That's a different problem. Maybe someone else can help you with that one.

                   


                  See www.grainge.org for RoboHelp and Authoring tips

                   

                  @petergrainge

                  • 6. Re: How to Centre tables with out centreing the text in elements?
                    Willam van Weelden Adobe Community Professional & MVP

                    Hi,

                     

                    Let me guess, you're using Internet Explorer. When creating the XHMTL output, IE renders in strict mode. This makes that the fixed element is correctly positioned. When IE is in quircks mode, what happens if you output to HTML 4.01, IE doesn't render the fixed element correctly.

                     

                    There are some ugly fixes for this, but that may not be the way to go. Perhaps another approach to the table would be better.

                     

                    If I understand correctly, you want the table to be centered on the screen. Simply centering the text using text-align will center the text in the table. All elements in the table will have the same alignment as the table, unless you override the text-align of every element.

                     

                    For IE6+ the following might be better:

                     

                    Instead of centering the table using text-align, center the table by setting automatic margins. For instance:

                     

                    <table><tr><td>Simple table</td></tr></table>

                     

                    In your css:

                     

                    table {

                         margin-left: auto;

                         margin-right; auto;

                    }

                     

                    You may want to use table classes to get it working on only specific tables:

                    <table class="centeredtable"><tr><td>Simple table</td></tr></table>

                     

                    table.centeredtable {

                         margin-left: auto;

                         margin-right; auto;

                    }

                     

                    Note that this will only work in IE strict mode. So uncheck the option to export as HTML.

                     

                    Greet,

                     

                    Willam

                    1 person found this helpful
                    • 7. Re: How to Centre tables with out centreing the text in elements?
                      JunooniRobo Level 1

                      Thnaks Van, the css thing worked. All though there was a typeo in your code (which i figured out later on L( ):

                       

                      table {

                      margin-left: auto;

                      margin-right: auto;

                      }

                       

                      Also inoder for this to work, as i was importing Doc file into RH, the inline formatting had to be removed from the tables. Otherwise the table was right aligning with the css fix.

                      • 8. Re: How to Centre tables with out centreing the text in elements?
                        Willam van Weelden Adobe Community Professional & MVP

                        LOL, many people get my name wrong but I haven't heard 'Van' before. Van is part of my family name, called a tussenvoegsel. I don't believe there's an English equivalent for that.

                         

                        Good you figured out the typo. Sorry about that.

                         

                        One more note: you can override the inline styling by using the !important declaration:

                         

                        table {

                        margin-left: auto !important;

                        margin-right: auto !important;

                        }

                         

                        Greet,

                         

                        Willam

                        1 person found this helpful
                        • 9. Re: How to Centre tables with out centreing the text in elements?
                          JunooniRobo Level 1

                          atleast i didnt get it wrong

                           

                          thanks for the update as well

                          • 10. Re: How to Centre tables with out centreing the text in elements?
                            Jeff_Coatsworth Adobe Community Professional & MVP

                            Thanks for the tussenvoegsel lesson - I just had to look that one up on Wikipedia! English used to have similar place references (thanks to the Normans), but they've gradually been dropped or incorporated into the family name.