943,650 Members | Top Members by Rank

Ad:
Oct 12th, 2008
0

div align="center"

Expand Post »
The above HTML code is sometimes ignored by FireFox, but worse: It's not even allowed in XHTML1.0 Strict.

I have updated my sites to be "Strict" compatible, except for this little thing which is important enough. The problem is that I have found nothing to replace it.

In this example:

HTML and CSS Syntax (Toggle Plain Text)
  1. <a href="http://greatday.com/motivate/index.html">
  2.  
  3. <img style="width:18em;"
  4.  
  5. src="http://greatday.com/motivate/dmsum.gif" alt="Daily Motivator" title="Daily Motivator" /></a>

the image should be centered, but even if I enclose it by a div with text-align:center,
FireFox places the image to the far left. This happens with many other objects as well, especially if they are defined as block elements.

Surely it shouldn't be like this?
Or rather, how can we continue having centered objects while confirming to the newer standards?

I could write a table-like construct using divs and css, but that would be extremely clumsy for a little thing like this. I'm looking for a simple solution, where HTML defines the content and css the style!
Similar Threads
Reputation Points: 16
Solved Threads: 9
Junior Poster
ingeva is offline Offline
106 posts
since Jul 2008
Oct 12th, 2008
0

Re: div align="center"

Here is an interesting statistic:
Yahoo has hundreds of HTML/CSS errors that don't comply with standards.
No website is absolutely prefect when it comes to standards. (Not like I'm volunteering to check!!!). I would suggest simply using a less-strict standard. I usually code in XHTML 1.0 Transitional.
Reputation Points: 47
Solved Threads: 47
Posting Whiz
FlashCreations is offline Offline
393 posts
since Sep 2008
Oct 12th, 2008
0

Re: div align="center"

To center a block-type object, within another block type object, use this code on the object that you want to be centered ( i.e. on the inner object ):
HTML and CSS Syntax (Toggle Plain Text)
  1. style="margin-left:auto;margin-right:auto;"
although, tbh, text-align:center; really should work, since an image isn't supposed to be a block-type object.

anyway, for best compatibility, use text-align:center; on the outer object, and margin-left:auto;margin-right:auto; on the image.
Last edited by MattEvans; Oct 12th, 2008 at 11:14 pm.
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
Oct 13th, 2008
0

Re: div align="center"

Click to Expand / Collapse  Quote originally posted by MattEvans ...
To center a block-type object, within another block type object, use this code on the object that you want to be centered ( i.e. on the inner object ):
HTML and CSS Syntax (Toggle Plain Text)
  1. style="margin-left:auto;margin-right:auto;"
although, tbh, text-align:center; really should work, since an image isn't supposed to be a block-type object.

anyway, for best compatibility, use text-align:center; on the outer object, and margin-left:auto;margin-right:auto; on the image.
Thanks! I'll try that! text-align:center doesn't work alone, so probably this was what I needed. I often define images as block because it separates from text with a newline without haveing to use <br /> for instance.

Thank you very much!
Reputation Points: 16
Solved Threads: 9
Junior Poster
ingeva is offline Offline
106 posts
since Jul 2008
Oct 13th, 2008
0

Re: div align="center"

always use
margin-left:auto;
margin-right:auto;

because if u use this code rather then your one then if in any case if browser screen size is change due to any reason then the left and right margin are auto set for equal value according to the size of screen and this one is a better idea or one of the best

and one importent thing is that you should use external css rather then this internal one

-PC(INDIA)
Reputation Points: 10
Solved Threads: 2
Light Poster
cpeeyush1 is offline Offline
29 posts
since Sep 2008
Oct 15th, 2008
0

Re: div align="center"

ok let me make it easier to u in all browsers. jsut use this style in the div .
Quote ...
style="margin:0 auto; text-align:center;"
this margin 0 auto is for firefox and flock, while the text align will work in browsers like ie opera etc cheers
Reputation Points: 10
Solved Threads: 5
Junior Poster in Training
wickedsunny is offline Offline
96 posts
since Oct 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: css problem
Next Thread in HTML and CSS Forum Timeline: IE7 Png trensparency problem.





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC