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

Report · Jul 14, 2011

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

In output

Report · Jul 14, 2011

See Using RoboHelp 8 on my site.

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · Jul 14, 2011

thanks Peter.

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

Report · Jul 14, 2011

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

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · Jul 14, 2011

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;" /> <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;" /> <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;"> </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> </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>

Report · Jul 14, 2011

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

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · Jul 14, 2011

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

Report · Sep 06, 2011

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.

Report · Sep 06, 2011

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

Report · Sep 06, 2011

atleast i didnt get it wrong

thanks for the update as well

Report · Sep 07, 2011

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.

Adobe Community

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

1 Correct answer