newbie: HTML Passed validation, BUT

Discussion in 'HTML' started by Jeff, Nov 26, 2005.

  1. Jeff

    Jeff Guest

    Hey

    I'm testing this on IE, 6.0 (but I want my code to work on all modern
    browsers: Opera, FireFox, IE, Netscape Navigator)

    I've tested my html at http://validator.w3.org/ and it's validated
    successful, But the page isn't displayed correctly in Internet Explorer, It
    works great on Opera. The problem is that the IFRAME gets wider than div
    it's placed with in (much wider than the border of the div). The width of
    this IFRAME is from its left position of the div and takes up the rest of
    width of the browser window. I thought that based on the CSS data this
    IFRAME should stop 190px from the right end of the browser window

    As you can see from my CSS data, the CSS data for the IFRAME contains this
    attribute & value: "width:100%;" I set it this way because I thought that it
    then will fill the div (position:relative;) it's placed within...

    What must I fix to make this works on Microsoft Internet Explorer (version
    6.0)?

    Please give some advice on this problem

    Below are my index.php and styles.css files...

    Index.php
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org./TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <link rel="StyleSheet" type="text/css" href="styles.css"
    media="screen" />
    <title>Hello world</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
    />
    </head>
    <body>
    <div id="container">
    <div id="calendar">
    <p>2006</p>
    </div>
    <div id="submenu">
    <p>SUbMenu</p>
    </div>
    <div id="content">
    <iframe id="content2">
    </iframe>
    </div>
    </div>
    </body>
    </html>

    styles.css:
    #container {
    height:400px;
    background-color:#FFD000;
    position:relative;
    }

    #calendar {
    background-color:#DDF;
    border:2px solid #00C;
    position:absolute;
    right:0px;
    top:100px;
    width:175px;
    }
    #submenu {
    background-color:#DDF;
    position:absolute;
    left:0px;
    top:0px;
    width:175px;
    text-align:left;
    }
    #content2 {
    width:100%;
    background-color:#FDD;
    }

    #content {
    margin:0 190px;
    background-color:#C0C0C0;
    position:relative;
    }
     
    Jeff, Nov 26, 2005
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. dee
    Replies:
    9
    Views:
    515
    Joseph Byrns
    Apr 15, 2005
  2. Anand
    Replies:
    2
    Views:
    906
    Anand
    Sep 11, 2003
  3. Replies:
    0
    Views:
    1,371
  4. Jeff Tchang
    Replies:
    0
    Views:
    245
    Jeff Tchang
    Nov 18, 2008
  5. Bill
    Replies:
    3
    Views:
    1,790
    Michael Rudolf
    Mar 14, 2010
Loading...

Share This Page