...

View Full Version : Resolved IE problems with centeral alignment.



Millenia
05-13-2009, 07:40 PM
I'm not familiar with IE, seems I always develop for Firefox. Then edit my code for IE perfection. However, this time I can't seem to achieve this 'IE perfection'...

In IE, the whole site is aligned to the left. While it is supposed to be centeral.

Here is my markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Share the latest Open Source news with others using Opn-Src.">
<meta name="keywords" content="open, source, latest, news, linux, unix, freebsd, new">
<title>Opn Src - The Latest Open Source News</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon"
href="/favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body>
<div class="wrapper">
<h1 class="main">Opn-Src <sup>Beta</sup></h1>
<h1 class="secondary">The latest Open Source news.</h1>
<div class="indent">
<form name="jump" action="">
<select name="menu">
<option value="http://opn-src.org/index.php?display=5">Display 5 articles</option>
<option value="http://opn-src.org/index.php?display=7">Display 7 articles</option>
<option value="http://opn-src.org/index.php?display=10">Display 10 articles</option>
<option value="http://opn-src.org/index.php?display=15">Display 15 articles</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="Go">
</form>
</div>
<div class="indentwithouttheindentbit">
Displaying 5 articles - <a href="http://opn-src.org" class="nodec">Return to default</a></div>


<div class="item">

<p><a class="heading" href="http://lxer.com/module/newswire/ext_link.php?rid=120289">Dell spins lower-cost netbook...</a>
<br><a class="secondh">Dell has announced a lower-cost version of its popular Mini 10 netbook, which runs Ubuntu Linux. The Dell Inspiron Mini 10v sells for $300, offering a 1.6GHz Intel Atom N270, 10-inch display, 120GB...</a>
<br><a class="thirdh">Posted on 13 May 2009 | 6:57 pm</a>
<br><a href="http://twitter.com/home?status=Interesting article: http://lxer.com/module/newswire/ext_link.php?rid=120289" title="Tweet this"><img src="images/twitter.png" alt="Twitter" ></a>
<a href="http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=http%3A%2F%2Flxer.com%2Fmodule%2Fnewswire%2Fext_link.php%3Frid%3D120289&amp; title=Dell%20spins%20lower-cost%20netbook" title="Add post to Blogmarks"><img src="images/blogmarks.png" alt="Blogmarks" ></a>
<a href="http://del.icio.us/post/?v=4&amp;url=http%3A%2F%2Flxer.com%2Fmodule%2Fnewswire%2Fext_link.php%3Frid%3D120289&amp;title=Dell%20spins% 20lower-cost%20netbook" title="Add post to del.icio.us"><img src="images/delicious.png" alt="del.icio.us" ></a>
<a href="http://digg.com/submit?url=http%3A%2F%2Flxer.com%2Fmodule%2Fnewswire%2Fext_link.php%3Frid%3D120289&amp;title=Dell%20spin s%20lower-cost%20netbook&amp;bodytext=Dell%20has%20announced%20a%20lower-cost%20version%20of%20its%20popular%20Mini%2010%20netbook%2C%20which%20runs%20Ubuntu%20Linux.%20The% 20Dell%20Inspiron%20Mini%2010v%20sells%20for%20%24300%2C%20offering%20a%201.6GHz%20Intel%20Atom%20N2 70%2C%2010-inch%20display%2C%20120GB%20or%20160GB%20hard%20drive%2C%20and%20a%201.3%20megapixel%20webcam%2C%20t he%20company%20says." title="Digg this!"><img src="/images/digg.png" alt="Digg" ></a>
<a href="http://www.newsvine.com/_wine/save?u=http%3A%2F%2Flxer.com%2Fmodule%2Fnewswire%2Fext_link.php%3Frid%3D120289&amp;h=Dell%20spins%20lowe r-cost%20netbook" title="Add post to Newsvine"><img src="images/newsvine.png" alt="Newsvine" ></a>
<a href="http://reddit.com/submit?url=http%3A%2F%2Flxer.com%2Fmodule%2Fnewswire%2Fext_link.php%3Frid%3D120289&amp;title=Dell%20spin s%20lower-cost%20netbook" title="Add post to Reddit"><img src="images/reddit.png" alt="Reddit" ></a>
<a href="http://segnalo.com/post.html.php?url=http%3A%2F%2Flxer.com%2Fmodule%2Fnewswire%2Fext_link.php%3Frid%3D120289&amp;title=Dell %20spins%20lower-cost%20netbook" title="Add post to Segnalo"><img src="images/segnalo.png" alt="Segnalo" ></a>
<a href="http://www.spurl.net/spurl.php?v=3&amp;url=http%3A%2F%2Flxer.com%2Fmodule%2Fnewswire%2Fext_link.php%3Frid%3D120289&amp;title=Dell %20spins%20lower-cost%20netbook" title="Add post to Spurl"><img src="images/spurl.png" alt="Spurl" ></a>
<a href="http://www.technorati.com/search/http%3A%2F%2Flxer.com%2Fmodule%2Fnewswire%2Fext_link.php%3Frid%3D120289" title="Who's linking to this post?"><img src="images/technorati.png" alt="Technorati" ></a>

</p>
</div>







<div class="footer">
<a href="/terms">Disclaimer and TOS</a><br>
&copy; Opn-Src 2009 All Rights Reserved
</div>
</div>
</body>
</html>That is how the browser see's it. (It's valid)
now for my CSS:

body {
padding: 0px;
margin: 0px;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
}

h2 {
padding: 0px;
margin: 0px;
}

a {
color: #666666;
}

.wrapper {
width: 600px;
margin-left: auto;
margin-right: auto;
}

.main {
text-align: center;
font-size: 40px;
font-style: italic;
padding-top: 35px;
padding-bottom: 7px;
margin: 0px;
color: #666666;
font-family: Georgia, "Times New Roman", Times, serif;
}

.secondary {
text-align: center;
font-size: 16px;
font-style: italic;
padding: 0px;
margin: 0px;
color: #969696;
font-family: Georgia, "Times New Roman", Times, serif;
}

.footer {
text-align: center;
font-size: 11px;
color: #A3A5A5;
font-family: Georgia, "Times New Roman", Times, serif;
}

.topic {

color: #FFFFFF;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 6px;
font-size: 12px;
}

a.topic {
text-decoration: none;
}

.topiccontainer{
width: 500px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

.topicg {
background-color: #6C6C6C;
color: #FFFFFF;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 6px;
font-size: 12px;
}



.indent {
padding-left: 75px;
border-bottom: 2px solid #D0D0D0;
}

.heading {
font-size: 16px;
color: #179CDC;
text-decoration: none;
}

a:hover.heading{
color: #0B78AD;
}



.content {
font-size: 13px;
}

a.content {
font-size: 13px;
color: #555555;
}

p {
border-bottom: 2px solid #D0D0D0;
padding: 0px;
margin: 0px;
}

p:hover {
border-bottom: 2px solid #D0D0D0;
background-color: #F3F3F3;
}

.small {
font-size: 12px;
}

.secondh {
font-size: 12px;
}

.thirdh{
font-size: 12px;
color: #179CDC;
}

a.thirdh{
font-size: 12px;
color: #179CDC;
text-decoration: none;
}

img {
border: none;
}

.indentwithouttheindentbit {
border-bottom: 2px solid #D0D0D0;
text-align: center;
}

form {
padding: 5px;
margin: 5px;
}

a.nodec {
text-decoration: none;
}

sup {
font-size:18px;
color: #AF0000;
}
As you can see, there's a few pointless styles and some of it is rather primitive.

Can anyone point out what is wrong?
http://opn-src.org (http://opn-src.org/)

My site is far from finished, but I would like to continue with other development after my design is done.
Thanks.

coothead
05-13-2009, 08:13 PM
Hi there Millenia,

IE does not render margin:auto; in Quirks Mode. :eek:

To put it into Standards Compliance Mode change this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

...to this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
coothead

michaelbt2
05-13-2009, 09:28 PM
Try this adjusting the width accordingly. Works with everything I have done.

div#main {
width: 952px;
height: 100%;
margin: 0px auto;
background-color: #FFFFFF;
text-align: left;
}

Place under <body>

<div id="main">

Millenia
05-13-2009, 10:09 PM
Thanks everyone, it works now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum