Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DIV question... blast you IE!!! 2

Status
Not open for further replies.
sumilsay

sumilsay

Technical User
Feb 12, 2003
69
CA
okay, i'm trying to center a div tag classed as "content" but it won't let me. when i try to center the div with align="center" it works, but as soon as i add class="content" it loses the align property. i have kinda cut down the problems to the part in my css where i specify width. when i take the width out, everything becomes center, but the div tag is now 100% of the screen. i have a background image in it that can only be 770px wide.
here is my code...

html-
<div align="center" class="content">
<span class="navigation" align="center">
<a href="" class="navigation">Home</a> &nbsp;&nbsp;-
&nbsp;&nbsp;<a href="" class="navigation">Gowns</a> &nbsp;&nbsp;-
&nbsp;&nbsp;<a href="" class="navigation">Bridesmaids</a> &nbsp;&nbsp;-
&nbsp;&nbsp;<a href="" class="navigation">Grad/Prom</a> &nbsp;&nbsp;-
&nbsp;&nbsp;<a href="" class="navigation">Evening/Guest Wear</a> &nbsp;&nbsp;-
&nbsp;&nbsp;<a href="" class="navigation">Mother of the Bride</a> &nbsp;&nbsp;-
&nbsp;&nbsp;<a href="" class="navigation">Viels/Tiaras</a> &nbsp;&nbsp;-
&nbsp;&nbsp;<a href="" class="navigation">Shoes/Gloves/Jewelry</a>
</span>
<br /><br />
<div align="center">
<table>
<tr>
<td>
<img src="images/specials.gif" /><br />
click for sales events and promotions...<br />
</td>
<td>
<img src="images/why_us.gif" /><br />
</td>
<td rowspan="3">
<img src="images/gown.jpg" />
</td>
</tr>
<tr>
<td>
<img src="images/see_us.gif" /><br /><br />
Wedding Bells &nbsp; Bridal Guide<br />
<img src="images/magazines.gif" /><br />
</td>
<td>
<img src="images/our_approach.gif" /><br />
</td>
</tr>
</table>
<img src="images/testimonials.gif" /><br />
</div>
</div>


and here is my css-
div.content{
width:770px;
background-image: url(../images/background.jpg);
font-size:9pt;
}



thanks for your time everyone.
oya... does programming on a mac make a difference? i don't think it would, but with computers, it can sometimes be anything...

okay, thanks.
AP.
 
Sort by date Sort by votes
Try placing the "align" property after the "class" property:

Code: 
<div align="center" class="content">
to
<div class="content" align="center">

-----------------------------------------------
"The night sky over the planet Krikkit is the least interesting sight in the entire universe."
-Hitch Hiker's Guide To The Galaxy
 
Upvote 0 Downvote
to centre align elements correctly in ALL browsers, without using the deprecated tags and attributes, use a complete doctype and add margin:auto to the class for that element.



Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Upvote 0 Downvote
hi ChrisHirst,
i'm not too sure what you mean by using a complete doctype. :S
 
Upvote 0 Downvote
W3Cs Valid DOCTYPES

Common practice is to use just the single line eg;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">.

This however will let IE use its "quirks" mode which is where most of its mis-handling of code take effect. so consequently anyone who designs to this then finds that their nicely laid out page (in IE) "breaks" in other browsers. But by using the full doctype with both lines in place will put IE into "standards" mode and it will behave almost correctly.


Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Upvote 0 Downvote
This should work in all browsers:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>Centered Div</title>
  <style type="text/css">
     .content {
        [b]margin: 0 auto;[/b]
        width: 600px;
        border: 1px solid black;
     }
  </style>
</head>
<body>
  <div class="content">
     Lorem ipsum dolor sit amet, consectetur adipisicing
     elit, sed do eiusmod tempor incididunt ut labore et
     dolore magna aliqua. Ut enim ad minim veniam, quis
     nostrud exercitation ullamco laboris nisi ut aliquip
     ex ea commodo consequat.
  </div>
</body>
</html>
Setting the horizontal margins to "auto" should cause browsers apply enough space on each side to centre the <div>. Well, it should, but it doesn't work on older versions of IE (it does on IE6 with a full DOCTYPE). To get IE5 to behave, you can capitalise on one of its misbehaviours by changing the CSS to this:
Code: 
  <style type="text/css">
     [b]body {
       text-align: center;
     }[/b]
     .content {
        [b]text-align:left;[/b]
        margin: 0 auto;
        width: 600px;
        border: 1px solid black;
     }
  </style>
The [tt]text-align[/tt] property is not supposed to apply to <div>s, but it does in IE. By adding a second [tt]text-align[/tt] rule to the content <div> we make sure that only the div and not its contetns are centred.

-- Chris Hunt
 
Upvote 0 Downvote
Good info, I have been wondering what the problem in my layouts have been. Star for you Chris
 
Upvote 0 Downvote
This may not be relevant any more, but here it goes anyway:

You could also try centering your content div as follows:

Code: 
<style type="text/css">
     .content {
        position: absolute;
        left: 50%;
        width: 600px;
        margin-left: -300px;
        border: 1px solid black;
     }
</style>

This will work more or less cross-browser, I think.

Regards,
Martijn.

In the Beginning there was nothing, which exploded.

--Terry Pratchett, Lords and Ladies--
 
Upvote 0 Downvote
Thingol, while this method appears to work, if you resize the browser, to a smaller size, you'll be missing the left side of the text -- the left margin of the div will be hidden by the browser.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
This centers properly in IE 6 and Mozilla with no DOCTYPE declaration (but still well formed XHTML transitional mark-up):

CSS:

Code: 
body {
	text-align: center;
}

#mainBox {
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

and the html:

Code: 
<body>
<div>this should be centered but the text is left</div>
</body>

the trick is in the margin-left: auto; margin-right: auto; and the text-align:center
josh


Josh Bachynski
Senior Project Manager
SIMIAN Systems Inc.
Office: 1.204.942.8630
Email: josh@simian.ca
Sitellite 4.2 Enterprise Edition - PHP based CMS and Framework
 
Upvote 0 Downvote
The last example works with all valid doctypes as well and was already nicely described by Chris Hunt in one of the above posts.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Which website accessibility tool do you use?
Replies
0
Views
68
tyutghf
tyutghf
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
305
tyutghf
tyutghf
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
88
pendle666
pendle666
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
106
jason.lex
jason.lex
Camila James
  • Locked
  • Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
105
lucasbrown
lucasbrown

Part and Inventory Search

Sponsor

Back
Top