Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts

    IE problems with centeral alignment.

    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:
    Code:
    <!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%20spins%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%20N270%2C%2010-inch%20display%2C%20120GB%20or%20160GB%20hard%20drive%2C%20and%20a%201.3%20megapixel%20webcam%2C%20the%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%20lower-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%20spins%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:
    Code:
    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

    My site is far from finished, but I would like to continue with other development after my design is done.
    Thanks.
    Last edited by Millenia; 05-13-2009 at 10:09 PM.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,700
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there Millenia,

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

    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

  • Users who have thanked coothead for this post:

    Millenia (05-13-2009)

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    45
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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">

  • #4
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Thanks everyone, it works now.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •