Jump to content

text-align works only if an in-line style


Pru

Recommended Posts

Hi all, I have the following in style tags at the top of an html page:#wrapper{text-align: center;width: 900px;margin: 0 auto;}#content{width: 100%;overflow: auto;text-align: center;padding: 0 10 10 10;height: 340px;}but the text-align instruction never centers the zones in question (wrapper and content are both divs, and content is inside wrapper).However, when I put these in as in-line styles, it works perfectly. It's the same whether in IE7 or FF2.Originally the styles were in a separate CSS style sheet, but that didn't work either (the text-align, I mean).Is this a known bug, or is there something I haven't grasped?TksPru

Link to comment
Share on other sites

It seems to work fine for me. here's the quick code I put together to test it (it's not layed out the best but I was just giving it a quick test).

<!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=iso-8859-1" /><title>Test</title><style type="text/css"><!--#wrapper{text-align: center;width: 900px;margin: 0 auto;}#content{width: 100%;overflow: auto;text-align: center;padding: 0 10 10 10;height: 340px;}--></style></head><body><div id="wrapper">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque nec nisi sed sapien tempus gravida. Vivamus vel velit vitae nisl malesuada ultrices. Ut egestas. Integer iaculis quam at magna. Integer rhoncus. Quisque aliquam, ligula a laoreet dignissim, nunc urna porttitor lectus, a facilisis metus dolor vitae sem. Pellentesque fermentum, odio at convallis tempor, mi dui venenatis felis, in suscipit arcu libero sed orci. Curabitur et erat a mauris vulputate aliquet. Morbi tempor nunc vitae arcu. Pellentesque nec magna imperdiet purus sollicitudin mollis. Etiam at ipsum. Proin elit dolor, consectetuer malesuada, elementum id, malesuada id, mauris. Fusce ullamcorper consectetuer tellus. Nam bibendum libero nec dolor. Quisque sed ligula.</div><div id="content">Morbi hendrerit, turpis vitae malesuada venenatis, massa arcu mollis tellus, sit amet volutpat urna justo sit amet risus. Phasellus lacus libero, imperdiet quis, tincidunt vel, sagittis in, neque. Donec at ante. Sed sed pede eu nunc pulvinar porttitor. Sed fermentum nisl. Quisque dignissim nunc ut est. Nulla facilisi. In bibendum dui ac elit. Sed malesuada ullamcorper mi. Pellentesque fringilla. Nam tempor felis non enim. Praesent tellus purus, accumsan sit amet, malesuada eu, faucibus lacinia, mi. Cras sit amet neque. Mauris nulla metus, viverra elementum, volutpat ac, egestas sit amet, diam. Curabitur est. Integer suscipit. In nunc mauris, lacinia eget, pulvinar quis, ornare at, nibh.</div></body></html>

Just as a reminder incase this is your problem... you can only use an ID selector to indentify one element.

Link to comment
Share on other sites

Thank you very much for this! I discovered an error in my <style> tags :) on the html page. With that fixed it worked. For separate style sheets my problem was that the CMS I use seems to overwrite some of my style-sheet info when displaying the page (have to troubleshoot this separately). For now I've added an extra style block on the html page itself as a hack, and that works.Thanks again!Pru

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...