SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Problem in IE

    Hi all...I am simply trying to create a header (colored bar). Every thing is fine, even in IE 8 but when it comes to IE 6, the bar does not appears. The code is simple

    CSS code is

    Code:
    #css
    {
    position:absolute;
    top:0px;
    height:30px;
    right:0%;
    left:0%;
    background-color:#805670;
    border-style:solid;
    border-width:thin;
    border-color:#805670;
    padding-top:12px;
    }
    and I have just added this line in my .php page

    Code:
    <div id="mybio"></div>

    What can be the problem??

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Position: absolute is not the best thing to be using here. It would be better to remove that and do something like this:

    Code:
    #mybio {
      height:30px; /* better not to set a height at all */
      background-color:#805670;
      border:thin solid #805670;
      padding-top:12px;
    }
    I assume you meant to write #mybio rather than #css, as that would not style a div with id="mybio".

    It's better not to set a height on a div, but let the content inside it establish its height, even if you add padding or margins.

    If this doesn't help, then either show us a link or provide the code for the full page.

    I've also moved this to the CSS forum.

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Position: absolute is not the best thing to be using here. It would be better to remove that and do something like this:

    Code:
    #mybio {
      height:30px; /* better not to set a height at all */
      background-color:#805670;
      border:thin solid #805670;
      padding-top:12px;
    }
    I assume you meant to write #mybio rather than #css, as that would not style a div with id="mybio".

    It's better not to set a height on a div, but let the content inside it establish its height, even if you add padding or margins.

    If this doesn't help, then either show us a link or provide the code for the full page.

    I've also moved this to the CSS forum.
    Thnx a ton for your reply. But the problem is still there. Please go to Walknshine.com using ie6. I can see the bar now but positioning has been disturbed of other elements. Can you help me out here??

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The issue in you first example was that you set left:0 and right:0 on the absolute element and IE6 only understand one of those at a time. For IE6 you would have needed to say left:0 and width:100% but of course that would make it too big because of the border so another approach would be better.

    In your second example you haven't taken into account the default margins on the form element in IE which is giving you that gap and you would need form:margin:0 to clear it. You also used #mybio twice in the html which is not allowed as ids must be unique. If you need to use something twice then it needs to be a class but you don't actually need both of those anyway to make that header.

    As Ralph said absolute positioning isn't the best for this and you could have done something more simply with some floats and a semantic structure. here is the header section recoded and a small default reset to get you started.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    /* reset */
    html, body, table {
        margin: 0;
        padding: 0;
        font-size: 100%;
    }
    object, iframe, blockquote, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, fieldset, form, legend, table, caption, th, td {
        margin: 0;
        padding: 0;
        border:none;
    }
    ol, ul {
        list-style: none;
    }
    table {
        border-collapse: separate;
        border-spacing: 0;
    }
    caption, th, td {
        text-align: left;
        font-weight: normal;
        vertical-align:top;
    }
    a img, img {
        border:none;
    }/* remove borders from linked images*/
    input, textarea, select, label {
        font-family:Arial; /* set font-family for IE*/
        vertical-align:middle;
    }
    p,h1,h2,h3,h4,h5,h6,ul {margin-bottom:.75em}
    /* end reset styles */
    body{font-family:Georgia, "Times New Roman", Times, serif;line-height:1.3}
    #header {
        background-color:#805670;
        border:1px solid #805670;
        padding:12px 25px;
        overflow:hidden;/* contain floats*/
        zoom:1.0;/* contain floats in IE7 and under*/
        text-align:center;
    }
    #header h1,#header h2,#header p{
        color:#e2e3e3;
        font-size:18px;
        margin:0;
        float:left;
    }
    #header h2,#header p{
        float:none;
        color:#fff;
        overflow:hidden;
    }
    #header ul{
        margin:0;
        float:right;
    }
    #header ul li{
        float:left;
        margin:0 10px;
        color:#e2e3e3;
    }
    #header ul li a,
    #header ul li a:visited{
        text-decoration:none;
        color:#e2e3e3;
    }
    #header ul li a:hover{text-decoration:underline}
    </style>
    </head>
    <body>
    <div id="header">
        <h1>Walk'n'Shine Welcomes You</h1>
        <ul>
            <li><a href="#">Share&nsb;Popular</a></li>
            <li><a href="#">Get&nbsp;Popular</a></li>
        </ul>
        <p>Auditorium</p><!-- could be an h2 if this is really a heading -->
    </div>
    </body>
    </html>
    The rest of your code needs a tidy up also but I couldn;t tell what direction you were going so have not recoded it. However I can tell you that you should think about removing the deprecated (in strict doctpes) presentational elements such as the font tag (no one uses them these days at all), the align attributes and the use of breaks to make space and non breaking spaces where padding should be used.

    You also have a mismatched font tag and a b tag here:

    Code:
    <font size="-1" face="Arial" > </div>
    
    .....
    
    <b><a href="http://www.walknshine.com/index.php?order=2" class='nav4' >Recent Acts</a></font></font> </div>
        <br />
        <br />
        <div align="right"> </div>
        <br />
        <br />
        </b>
    The font tag isn't closed and the b tag can't go arround a div.

    Hope that helps


Tags for this Thread

Bookmarks

Posting Permissions

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