Solved

Centering a DIV content tag on IE

Posted on 2004-10-18
13
982 Views
Last Modified: 2013-12-03
Hello!

I'm back here...

I tried to integrate your css design solutions regarding center and right alignment of a DIV content tag into my page.

But it will not do it.

The site is http://www.europasprak.com

The css file is

<style type='text/css'>
.dummy { }
.ID1_1 { font-size: 12px; font-family: arial; margin: 0px; padding: 0px; }
.ID1_1 a { text-decoration: none; }
.ID1_1_2 { text-align: left; margin: 0px; padding: 0px; }
.ID1_2_3 { text-align: left; border-width: 3px; border-style: solid; font-size: 12px; font-family: verdana; margin: 0px; padding: 0px; width: 100px; }
.ID1_2_2 .navbar { border-color: #FFFFFF; border-style: none; direction: ltr; color: #003399; font-size: 14px; font-style: normal; font-family: verdana; margin: 1px; padding: 1px; white-space: normal; }
.ID1_2_2 a { color: #003399; font-size: 14px; font-style: normal; font-family: verdana; }
.ID1_2_2 .navbarItem { border-color: #99CCFF; border-width: 1px; border-style: solid; color: #006699; font-size: 14px; font-family: courrier; font-weight: bold; margin: 2px; padding: 4px; }
.ID1_2_2 a { color: #006699; font-size: 14px; font-family: courrier; font-weight: bold; }
.ID1_3_6 { text-align: center; font-size: 12px; font-family: arial; margin: 0px auto; padding: 0px; width: 600px; }
.ID1_3_6 a { text-decoration: none; }
.ID1_4_7 { text-align: right; border-color: #000000; font-size: 12px; font-family: verdana; margin: 0px 0px 0px auto; padding: 0px; width: 100px; }
.ID1_6_9 { text-align: center; font-size: 12px; margin: 0px auto; padding: 0px; }
.ID1_6_9 a { text-decoration: none; }
</style>

The div tag in question is ID1_3_6

It does not want to center it on IE.

What could be wrong..?

Thanks
Stephane
0
Comment
Question by:stephaneeybert
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 4
13 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 12337319
Hi Stephane - guess I was too late :-)

I have to ask how you're generating the code, I'm afraid it's not in very good shape at the moment.

Sean
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12337375
The initial problem is that you're setting an explicit width, you need to remove it:

.ID1_3_6 { text-align: center; font-size: 12px; font-family: arial; margin: 0px auto; padding: 0px; width: 100%; }

But there is a lot of extra code in there at the moment, good cross-browser display may be tricky unless we can pare it down quite a bit.

Sean
0
 

Author Comment

by:stephaneeybert
ID: 12338052
I generate the code using a php function.

I offer a set of properties to be applied to containers and elements residing inside these containers.

The elements are rendered as div tags and their properties are applied to these div tags.

The containers are rendered as table cells and their properties are applied to these td tags.

I hesitated to render the containers as div tags too.

Here are all the properties offer to the users:

    $this->propertyTypes = array(
      'ALIGNMENT' =>
        array('text-align', $this->mlText[1], $this->mlText[2], TEMPLATE_PROPERTY_TYPE_SELECT, array("left" => $this->mlText[3], "center" => $this->mlText[4], "right" => $this->mlText[5])),
      'BACKGROUND_COLOR' =>
        array('background-color', $this->mlText[6], $this->mlText[7], TEMPLATE_PROPERTY_TYPE_COLOR),
      'BACKGROUND_IMAGE' =>
        array('background-image', $this->mlText[8], $this->mlText[9], TEMPLATE_PROPERTY_TYPE_IMAGE),
      'BACKGROUND_REPEAT' =>
        array('background-repeat', $this->mlText[99], $this->mlText[100], TEMPLATE_PROPERTY_TYPE_SELECT, array("" => "", "repeat" => $this->mlText[102], "repeat-x" => $this->mlText[103], "repeat-y" => $this->mlText[104], "no-repeat" => $this->mlText[101])),
      'BACKGROUND_POSITION' =>
        array('background-position', $this->mlText[105], $this->mlText[106], TEMPLATE_PROPERTY_TYPE_SELECT, array("" => "", "top left" => $this->mlText[107], "top center" => $this->mlText[108], "top right" => $this->mlText[109], "center left" => $this->mlText[110], "center center" => $this->mlText[111], "center right" => $this->mlText[112], "bottom left" => $this->mlText[113], "bottom center" => $this->mlText[114], "bottom right" => $this->mlText[115])),
      'BACKGROUND_ATTACHMENT' =>
        array('background-attachment', $this->mlText[10], $this->mlText[11], TEMPLATE_PROPERTY_TYPE_SELECT, array("" => "", "fixed" => $this->mlText[97], "scroll" => $this->mlText[98])),
      'BORDER_STYLE' =>
        array('border-style', $this->mlText[12], $this->mlText[13], TEMPLATE_PROPERTY_TYPE_SELECT, array("" => "", "none" => $this->mlText[46], "solid" => $this->mlText[70], "dotted" => $this->mlText[71], "dashed" => $this->mlText[72], "double" => $this->mlText[92], "groove" => $this->mlText[93], "ridge" => $this->mlText[94], "inset" => $this->mlText[95], "outset" => $this->mlText[96])),
      'BORDER_COLOR' =>
        array('border-color', $this->mlText[14], $this->mlText[15], TEMPLATE_PROPERTY_TYPE_COLOR),
      'BORDER_SIZE' =>
        array('border-width', $this->mlText[16], $this->mlText[17], TEMPLATE_PROPERTY_TYPE_RANGE, array(0, 10)),
      'WIDTH' =>
        array('width', $this->mlText[18], $this->mlText[19], TEMPLATE_PROPERTY_TYPE_TEXT),
      'MARGIN' =>
        array('margin', $this->mlText[20], $this->mlText[21], TEMPLATE_PROPERTY_TYPE_RANGE, array(0, 30)),
      'PADDING' =>
        array('padding', $this->mlText[22], $this->mlText[23], TEMPLATE_PROPERTY_TYPE_RANGE, array(0, 30)),
      'TEXT_ALIGNMENT' =>
        array('text-align', $this->mlText[36], $this->mlText[37], TEMPLATE_PROPERTY_TYPE_SELECT, array("" => "", "left" => $this->mlText[38], "center" => $this->mlText[39], "right" => $this->mlText[40], "justify" => $this->mlText[41])),
      'FONT_COLOR' =>
        array('color', $this->mlText[24], $this->mlText[25], TEMPLATE_PROPERTY_TYPE_COLOR),
      'FONT_TYPE' =>
        array('font-family', $this->mlText[26], $this->mlText[27], TEMPLATE_PROPERTY_TYPE_SELECT, array("" => "", "arial" => "Arial", "verdana" => "Verdana", "courrier" => "Courrier", "lucida" => "Lucida", "garamond" => "Garamond", "georgia" => "Georgia")),
      'FONT_SIZE' =>
        array('font-size', $this->mlText[28], $this->mlText[29], TEMPLATE_PROPERTY_TYPE_RANGE, array(0, 100)),
      'FONT_WEIGHT' =>
        array('font-weight', $this->mlText[30], $this->mlText[31], TEMPLATE_PROPERTY_TYPE_SELECT, array("" => "", "normal" => $this->mlText[73], "bold" => $this->mlText[74], "100" => "100", "200" => "200", "300" => "300", "400" => "400", "500" => "500", "600" => "600", "700" => "700", "800" => "800", "900" => "900")),
      'LINE_HEIGHT' =>
        array('line-height', $this->mlText[128], $this->mlText[129], TEMPLATE_PROPERTY_TYPE_RANGE, array(0, 30)),
      'WORD_SPACING' =>
        array('word-spacing', $this->mlText[122], $this->mlText[123], TEMPLATE_PROPERTY_TYPE_RANGE, array(0, 30)),
      'LETTER_SPACING' =>
        array('letter-spacing', $this->mlText[75], $this->mlText[76], TEMPLATE_PROPERTY_TYPE_RANGE, array(0, 30)),
      'WHITE_SPACE' =>
        array('white-space', $this->mlText[117], $this->mlText[118], TEMPLATE_PROPERTY_TYPE_SELECT, array("" => "", "normal" => $this->mlText[119], "pre" => $this->mlText[120], "nowrap" => $this->mlText[121])),
      'DIRECTION' =>
        array('direction', $this->mlText[124], $this->mlText[125], TEMPLATE_PROPERTY_TYPE_SELECT, array("" => "", "ltr" => $this->mlText[126], "rtl" => $this->mlText[127])),
      'FONT_STYLE' =>
        array('font-style', $this->mlText[32], $this->mlText[33], TEMPLATE_PROPERTY_TYPE_SELECT, array("" => "", "normal" => $this->mlText[89], "italic" => $this->mlText[90], "oblique" => $this->mlText[91])),
      'TEXT_DECORATION' =>
        array('text-decoration', $this->mlText[34], $this->mlText[35], TEMPLATE_PROPERTY_TYPE_SELECT, array("" => "", "none" => $this->mlText[77], "underline" => $this->mlText[78], "line-through" => $this->mlText[79], "overline" => $this->mlText[80], "blink" => $this->mlText[116])),
      'TEXT_INDENT' =>
        array('text-indent', $this->mlText[81], $this->mlText[82], TEMPLATE_PROPERTY_TYPE_RANGE, array(0, 200)),
      'TEXT_TRANSFORM' =>
        array('text-transform', $this->mlText[83], $this->mlText[84], TEMPLATE_PROPERTY_TYPE_SELECT, array("" => "", "none" => $this->mlText[85], "uppercase" => $this->mlText[86], "lowercase" => $this->mlText[87], "capitalize" => $this->mlText[88])),
      'LINK_COLOR' =>
        array('color', $this->mlText[42], $this->mlText[43], TEMPLATE_PROPERTY_TYPE_COLOR),
      'LINK_TEXT_DECORATION' =>
        array('text-decoration', $this->mlText[44], $this->mlText[45], TEMPLATE_PROPERTY_TYPE_SELECT, array("" => "", "none" => $this->mlText[46], "underline" => $this->mlText[47])),
      'LINK_HOVER_COLOR' =>
        array('color', $this->mlText[51], $this->mlText[52], TEMPLATE_PROPERTY_TYPE_COLOR),
      'LINK_HOVER_TEXT_DECORATION' =>
        array('text-decoration', $this->mlText[53], $this->mlText[54], TEMPLATE_PROPERTY_TYPE_SELECT, array("" => "", "none" => $this->mlText[46], "underline" => $this->mlText[47])),
      'LINK_USED_COLOR' =>
        array('color', $this->mlText[55], $this->mlText[56], TEMPLATE_PROPERTY_TYPE_COLOR),
      'IMAGE_BACKGROUND_COLOR' =>
        array('image-background-color', $this->mlText[63], $this->mlText[64], TEMPLATE_PROPERTY_TYPE_COLOR),
      );

Here is the funciton that renders the properties.

You can see in it some tricks to work around css issues, like positioning...

  // Get the css value for a property
  function getCssValue($name, $value, $templatePropertySetId) {
    $templatePropertyUtils = new TemplatePropertyUtils();

    // Do not display 0px values except for some properties
    if (!in_array($name, array('MARGIN', 'PADDING')) && is_numeric($value) && $value == 0) {
      $value = "";
      }

    // In the most common case, nothing is to be done
    $cssValue = $value;

    // Special coding for an image
    if ($name == 'BACKGROUND_IMAGE') {
      $cssValue = "url($templatePropertyUtils->imageUrl/$value)";
      }

    // Add a pixel unit except on a font weight numeric value
    if (is_numeric($value) && $name != 'FONT_WEIGHT') {
      $cssValue .= "px";
      }

    // Trick to have a div align on the left, center, right
    if ($name == 'MARGIN') {
      if ($otherTemplateProperty = $templatePropertyUtils->selectByTemplatePropertySetIdAndName($templatePropertySetId, "ALIGNMENT")) {
      $otherValue = $otherTemplateProperty->getValue();
      } else {
      $otherValue = "";
      }
      if ($otherValue == 'left') {
      } else if ($otherValue == 'center') {
      $cssValue .= " auto";
      } else if ($otherValue == 'right') {
      $cssValue .= " $cssValue $cssValue auto";
      }
      }

    return($cssValue);
    }


Regards
Stephane
0
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

 
LVL 31

Accepted Solution

by:
seanpowell earned 50 total points
ID: 12338204
Well, if you're going to generate the layout with a php function like that there's not much I can do for you.

Are you able to generate the html and css by hand, or do you have access to a good wysiwyg editor, assuming you're comfortable with the code?
0
 

Author Comment

by:stephaneeybert
ID: 12344950
I'm confortable with coding css. But I only want to offer simple css properties to the users.

The only one that poses a problem is the alignment property.

And it is a problem only on IE.

Otherwise the function works okay.

But I'll make a simpler example.

Come back soon!

Thanks
0
 

Author Comment

by:stephaneeybert
ID: 12344957
Here comes the example...

First the page html code:

<table width='100%' class='admin'><tbody><tr><td align='center'>
<table width='98%' class='inner'><tbody><tr><td align='center'>
<table border='0' width='100%'><tbody>
<tr>
<td valign='top' width='10%'  align='center'>
<span style=''>
<!doctype html public '-//w3c//dtd html 4.01 transitional//en'>
<html xml:lang="fr" lang="fr">
<head>

<script language='javascript' src='http://www.thalasoft.com/engine/js/popup.js'></script>
<script language='javascript' src='http://www.thalasoft.com/engine/js/utilities.js'></script>
<noscript>Your browser is not supporting scripts.</noscript>

<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>
<meta http-equiv='content-script-type' content='text/javascript'>
<meta http-equiv='content-style-type' content='text/css'>
<meta http-equiv='imagetoolbar' content='false' />
<meta http-equiv='content-language' content='fr' />
<meta http-referer='http://www.thalasoft.com'>
<meta name='robots' content='ALL' />
<meta name='MSSmartTagsPreventParsing' content='true' />
<meta name='description' content=''>
<meta name='keywords' content='Thalasoft'>

<link href='http://www.thalasoft.com/data/template/model/html/preview.css' rel=stylesheet type='text/css'>

</head>

<body class='ID7_106'>

<base href='http://www.thalasoft.com'>

<div class='ID7_40_140'>

<table style='width:100%; margin:0px; padding:0px;'><tr>
<td valign='top'>
<table style='width:100%; margin:0px; padding:0px;'><tr><td class='ID7_35_107'>
</td></tr></table>
</td>
</tr></table>
<table style='width:100%; margin:0px; padding:0px;'><tr>
<td valign='top'>
<table style='width:100%; margin:0px; padding:0px;'><tr><td class='ID7_36_111'>
</td></tr></table>
</td>
<td valign='top'>

<table style='width:100%; margin:0px; padding:0px;'><tr><td class='ID7_37_127'>
<div class='ID7_37_59'>
<div class='user'>
<form action='http://www.thalasoft.com/engine/system/user/login.php' method='post'>
<div class='email'>Email:<br><input type='text' name='email' size='10' maxlength='50'></div>
<div class='password'>Mot de passe:<br><input type='password' name='password' size='10' maxlength='10'></div>
<div class='ok'><input type=image border='0' src='http://www.thalasoft.com/engine/system/admin/html/images/common/ok_tiny_user.png'></div>
<div class='register'><a href='http://www.thalasoft.com/engine/system/user/register.php' >Inscription</a></div>
<input type=hidden name='formSubmitted' value='1'>
</form>
</div></div>
</td></tr></table>
</td>
<td valign='top'>

<table style='width:100%; margin:0px; padding:0px;'><tr><td class='ID7_38_129'>
</td></tr></table>
</td>
</tr></table>
<table style='width:100%; margin:0px; padding:0px;'><tr>
<td valign='top'>
<table style='width:100%; margin:0px; padding:0px;'><tr><td class='ID7_39_138'>
</td></tr></table>
</td>
</tr></table>
</div>
</body>
</html>
</span>
</td>
</tr>
</tbody></table>

</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
0
 

Author Comment

by:stephaneeybert
ID: 12344962
Oops! My mistake! Ignore the previous page code. It is not the one in question...

0
 

Author Comment

by:stephaneeybert
ID: 12344969
There comes the html page code:

<!doctype html public '-//w3c//dtd html 4.01 transitional//en'>
<html xml:lang="fr" lang="fr">
<head>

<script language='javascript' src='http://www.thalasoft.com/engine/js/popup.js'></script>
<script language='javascript' src='http://www.thalasoft.com/engine/js/utilities.js'></script>
<noscript>Your browser is not supporting scripts.</noscript>

<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>
<meta http-equiv='content-script-type' content='text/javascript'>
<meta http-equiv='content-style-type' content='text/css'>
<meta http-equiv='imagetoolbar' content='false' />
<meta http-equiv='content-language' content='fr' />
<meta http-referer='http://www.thalasoft.com'>

<meta name='robots' content='ALL' />
<meta name='MSSmartTagsPreventParsing' content='true' />
<meta name='description' content=''>
<meta name='keywords' content='Thalasoft'>

<link href='http://www.thalasoft.com/data/template/model/html/properties.css' rel=stylesheet type='text/css'>

</head>

<body class='ID7_106'>

<base href='http://www.thalasoft.com'>

<div class='ID7_40_140'>

<table style='width:100%; margin:0px; padding:0px;'><tr>
<td valign='top'>

<table style='width:100%; margin:0px; padding:0px;'><tr><td class='ID7_35_107'>
</td></tr></table>
</td>
</tr></table>
<table style='width:100%; margin:0px; padding:0px;'><tr>
<td valign='top'>
<table style='width:100%; margin:0px; padding:0px;'><tr><td class='ID7_36_111'>
</td></tr></table>
</td>
<td valign='top'>
<table style='width:100%; margin:0px; padding:0px;'><tr><td class='ID7_37_127'>
<div class='ID7_37_59'>
<div class='user'>
<form action='http://www.thalasoft.com/engine/system/user/login.php' method='post'>
<div class='email'>Email:<br><input type='text' name='email' size='10' maxlength='50'></div>
<div class='password'>Mot de passe:<br><input type='password' name='password' size='10' maxlength='10'></div>

<div class='ok'><input type=image border='0' src='http://www.thalasoft.com/engine/system/admin/html/images/common/ok_tiny_user.png'></div>
<div class='register'><a href='http://www.thalasoft.com/engine/system/user/register.php' >Inscription</a></div>
<input type=hidden name='formSubmitted' value='1'>
</form>
</div></div>
</td></tr></table>
</td>
<td valign='top'>
<table style='width:100%; margin:0px; padding:0px;'><tr><td class='ID7_38_129'>
</td></tr></table>
</td>
</tr></table>
<table style='width:100%; margin:0px; padding:0px;'><tr>
<td valign='top'>
<table style='width:100%; margin:0px; padding:0px;'><tr><td class='ID7_39_138'>
</td></tr></table>

</td>
</tr></table>
</div>
</body>
</html>
0
 

Author Comment

by:stephaneeybert
ID: 12344971
And its css properties file:

<style type='text/css'>
.dummy { }
.ID7_106 { margin: 0px; padding: 0px; }
.ID7_36_111 { text-align: left; margin: 0px; padding: 0px; width: 150px; }
.ID7_37_127 { text-align: right; margin: 0px 0px 0px auto; padding: 0px; width: 500px; }
.ID7_38_129 { text-align: left; margin: 0px; padding: 0px; width: 150px; }
</style>
0
 

Author Comment

by:stephaneeybert
ID: 12344973
It works fine on Mozilla Firefox.
0
 

Author Comment

by:stephaneeybert
ID: 12345002
And it also works fine on IE!

Then it must be that it was some other properties in the first big example that were causing the problem...

I'll try to find out...

0
 

Author Comment

by:stephaneeybert
ID: 12345074
I don't get it. It works now.

Case closed.

Thanks anyway!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12345758
Well, I'm glad its solved :-)

Thanks Stephane,
Sean
0

Featured Post

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

623 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