CODEWITHSUNDEEP
htmlcssinternet-explorer-7alignmentcenter
Kelly
Kelly

Reputation: 153

Page not centering in IE7

Works fine in Safari but IE7 it left aligns. http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&item=160653524585#ht_500wt_1372

Any way of making it so it centres in IE too? Thanks

.container {
width:980px;
background-position: center;
padding: 0;
margin: auto;
font-family: "Trebuchet MS";
font-size: 12px;
}


</style>
</head>
<body>
<div class="container">

<div class="clear">dfgfdg</div>

</div>

EDIT:

Anybody got an eBay account to test on too? Cheeky I know but am sure a lot of people would benefit!

EDIT 2:

This code still renders to the left and is really annoying because it can be done:

.wrapper 
{
margin: 0 auto 0 auto;
width: 980px;
text-align: center;
}


.container
{
width: 100%;
text-align: left;
}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<div class="wrapper">
<div class="container">
your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.your content here.
</div>
</div>
</body>
</html>

Renders this: http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&item=160653524585#ht_500wt_1156

Example of centered page on eBay: http://stores.ebay.co.uk/Argos-Outlet (have checked code and seems to use same code as suggested below but still can't get it to work at all.

Upvotes: 1

Views: 1813

Answers (5)

Dee
Dee

Reputation: 255

Change margin: auto; to margin: 0 auto 0 auto;

To make the text aligned to the left, put text-align: left;

Upvotes: 0

paterter
paterter

Reputation: 1

You can wrap you div with another one with this:

.wrapper 
{
margin: 0 auto 0 auto;
width: 980px;
text-align: center;
}

.container
{
width: 100%;
text-align: left;
}

and then the html will go like this:

<div class="wrapper">
  <div class="container">
    your content here.
  </div>
</div>

Upvotes: 0

Jan Wiemers
Jan Wiemers

Reputation: 341

.center {
    position: absolute:
    margin-left: -490px;
    left: 50%;
}

<div class="center">&nbsp;</div>

This centers the DIV as well

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34853

You should just be able to do this:

.clear{
    text-align:center;
}

Works for me when I put IE9 into IE7 mode. (No way to test on real IE7.)

Upvotes: 0

user926352
user926352

Reputation:

Solution: http://jsfiddle.net/vonkly/GweVX/

CSS

.container {
    width: 100%;
    padding: 10px 0; /* have some north + south padding */
    background-color: #feefee; /* enter your background color */
}
.aligner {
    display: block;
    width: 980px;
    margin: 0 auto; /* centers this element */
    text-align: center; /* centers the text */
}

HTML

<div class="container">
    <div class="aligner">
        Lorem ipsum dolar sit amet, amet sit dolar ipsum lorem.
    </div><!-- /aligner -->
</div><!-- /container -->

Upvotes: 3

Related Questions