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&simple=1&url=http%3A%2F%2Flxer.com%2Fmodule%2Fnewswire%2Fext_link.php%3Frid%3D120289& 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&url=http%3A%2F%2Flxer.com%2Fmodule%2Fnewswire%2Fext_link.php%3Frid%3D120289&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&title=Dell%20spin s%20lower-cost%20netbook&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&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&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&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&url=http%3A%2F%2Flxer.com%2Fmodule%2Fnewswire%2Fext_link.php%3Frid%3D120289&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>
© 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.
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&simple=1&url=http%3A%2F%2Flxer.com%2Fmodule%2Fnewswire%2Fext_link.php%3Frid%3D120289& 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&url=http%3A%2F%2Flxer.com%2Fmodule%2Fnewswire%2Fext_link.php%3Frid%3D120289&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&title=Dell%20spin s%20lower-cost%20netbook&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&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&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&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&url=http%3A%2F%2Flxer.com%2Fmodule%2Fnewswire%2Fext_link.php%3Frid%3D120289&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>
© 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.