SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face CSS web page IFRAME not working in IE6 and IE7 only

    i am having a problem with IFRAME not working in just IE6 and IE7, works fine on safri, firefox and ie8. ie8 is having problems with the css and not positioning the images correctly. i have found other people having the same trouble but the solution in all the forums i have checked so far has been removed... sorry i can't give a link to the page it is still under development and requires a user/password to view it at this time...here is a sample of the iframe code:

    <div id="content_body"><br />
    <div id="reviews_box">
    <div id="reviews">
    <div class="content_header"><iframe src="something.php" height="270" width="749"></iframe></div>
    </div>
    </div>
    <div id="playnow_box">
    <div id="playnow"><br />
    </div>
    </div>
    <br />
    </div>
    <div id="clearthis_contentbody">&nbsp;</div>

    please specify what additional data you may need to help and i will supply it.
    please help.... thanx

  2. #2
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS and HTML sample code that works in firefox and does not work in ie6 and ie7

    this demonstrates the problem, the iframe works in firefox but does not in ie6 and ie7, but works in ie8

    (index.htm) HTML:
    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
    <div id="content_body"><br />
    <div id="reviews_box">
    <div id="reviews">
    <div class="content_header"><iframe src="photo_upload/album.php" height="270" width="749"></iframe></div>
    </div>
    </div>
    <div id="playnow_box">
    <div id="playnow"><br />
    </div>
    </div>
    <br />
    </div>
    <div id="clearthis_contentbody">&nbsp;</div>
    </div>
    </body>
    </html>
    
    (style.css) CSS:
    
    * {
    margin: 0px;
    padding: 0px;
    }
    
    body {
    padding-top: 20px;
    background-color: #000;
    color: #aca9a9;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    text-align: center;
    letter-spacing: 1px;
    }
    
    a {
    color: #fff;
    text-decoration: none;
    }
    
    a:hover {
    color: #ea9a2e;
    }
    
    span {
    display: none;
    }
    
    img {
    border: none;
    }
    
    ul {
    list-style-type: none;
    }
    
    li {
    list-style-type: none;
    }
    
    p {
    margin: 7px 0px 10px;
    text-align: justify;
    line-height: 12px;
    }
    
    .clearthis {
    margin : 0px;
    height : 1px;
    clear : both;
    float : none;
    font-size : 1px;
    line-height : 0px;
    overflow : hidden;
    visibility: hidden;
    }
    
    
    #container {
    margin: 0px auto;
    text-align: left;
    background: url('images/content_bgcolor.gif') #2f2e2e repeat-x 0px 0px;
    border: #860b09 2px solid;
    
    width:778px; 
    voice-family: "\"}\""; 
    voice-family:inherit;
    width:774px;
    }
    
    #container {
    padding: 0px;
    }
    
    #body_image {
    margin: 0px -5px 0px 199px;
    height: 428px;
    width: 575px;
    background: url('images/lexus.png') transparent no-repeat 100&#37; -1px;
    behavior: url(iepngfix.htc);
    z-index: 1;
    position: absolute;
    overflow: hidden;
    }
    
    
    
    /* Page Header */
    
    #page_header {
    width: 774px;
    height: 60px;
    background: url('images/header_background.gif') repeat-x 0px 0px;
    overflow: hidden;
    }
    
    #page_header h1 {
    width: 700px;
    height: 51px;
    background: url('images/superb_motors.gif') no-repeat 42px 12px;
    float: left;
    }
    
    
    
    
    /* Page Menu */
    
    #page_menu {
    margin-bottom: 20px;
    width: 774px;
    height: 30px;
    background: url('images/menu_background.gif') repeat-x 0px 0px;
    }
    
    #page_menu ul {
    height: 30px;
    }
    
    #page_menu li {
    padding: 0px 18px 0px 12px;
    height: 30px;
    background: url('images/menu_list_bg.gif') no-repeat 12px 0px;
    float: left;
    }
    
    #page_menu li a {
    width: 123px;
    height: 30px;
    display: block;
    overflow: hidden;
    cursor: pointer;
    z-index: 2;
    position: absolute;
    }
    
    #page_menu .online a {
    background: url('images/link_1.gif') no-repeat 50% 11px;
    }
    
    #page_menu .downloads a {
    background: url('images/link_2.gif') no-repeat 50% 11px;
    }
    
    #page_menu .community a {
    background: url('images/link_3.gif') no-repeat 50% 11px;
    }
    
    #page_menu .about a {
    background: url('images/link_4.gif') no-repeat 50% 11px;
    }
    
    #page_menu li span {
    width: 123px;
    height: 30px;
    display: block;
    overflow: hidden;
    }
    
    #page_menu li a span {
    display: none;
    }
    
    
    /* Page Forms */
    
    #page_forms {
    border-right: #860b09 2px solid;
    float: left;
    }
    
    #page_forms input {
    padding-top: 5px;
    padding-bottom: 2px;
    color: #c6c4c4;
    background-color: #373837;
    border: #5b5d5b 1px solid;
    font-family: tahoma, arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    }
    
    #page_forms input.button {
    padding: 0px;
    border: none;
    cursor: pointer;
    }
    
    
    /* User Login */
    
    #userlogin_header {
    border-width: 2px 0px;
    border-color: #860b09 #000 #860b09;
    border-style: solid;
    }
    
    #userlogin_header h2 {
    width: 196px;
    height: 29px;
    background: url('images/userlogin_header.gif') no-repeat 50% 0%;
    }
    
    #userlogin {
    height: 235px;
    width: 196px;
    overflow: hidden;
    }
    
    #userlogin form {
    margin: 12px 0px 10px;
    width: 196px;
    text-align: center;
    }
    
    #userlogin form strong {
    display: block;
    width: 70px;
    height: 24px;
    margin-bottom: 3px;
    float: left;
    clear: left;
    }
    
    #field_username, #field_password {
    display: block;
    clear: both;
    }
    
    #button_enter {
    margin: 0px auto;
    width: 40px;
    float: none;
    clear: both;
    display: block;
    }
    
    #field_username strong {
    background: url('images/userlogin_login.gif') no-repeat 50% 6px;
    }
    
    #field_password strong {
    background: url('images/userlogin_password.gif') no-repeat 50% 6px;
    }
    
    #userlogin input {
    margin-right: 2px;
    margin-bottom: 12px;
    width: 122px;
    float: right;
    clear: right;
    }
    
    #userlogin input.button {
    margin: 7px 0px;
    width: 40px;
    height: 18px;
    float: none;
    clear: both;
    }
    
    #userlogin_links {
    padding: 10px 12px 0px;
    border-top: #860b09 2px solid;
    }
    
    #userlogin_links a#register {
    background: url('images/userlogin_register.gif') no-repeat 0px 0px;
    display: block;
    }
    
    #userlogin_links a#notregister {
    background: url('images/userlogin_notregister.gif') no-repeat 0px 0px;
    display: block;
    }
    
    #userlogin_links a strong {
    width: 170px;
    height: 20px;
    display: block;
    cursor: pointer;
    }
    
    
    /* Site Search */
    
    #sitesearch_header {
    border-top: #860b09 2px solid;
    }
    
    #sitesearch_header h2 {
    width: 196px;
    height: 25px;
    /*background: url('images/sitesearch_header.gif') no-repeat 50% 100%;*/
    }
    
    #sitesearch {
    width: 196px;
    border-bottom: #860b09 2px solid;
    }
    
    #sitesearch form {
    margin: 12px 5px 20px;
    width: 186px;
    height: 25px;
    clear: both;
    overflow: hidden;
    }
    
    #sitesearch input {
    padding: 2px 0px;
    width: 154px;
    float: left;
    font-size: 12px;
    }
    
    #sitesearch input.button {
    width: 24px;
    height: 20px;
    float: right;
    }
    
    
    /* Content Body */
    
    #content_body {
    clear: left;
    float: left;
    width: 774px;
    }
    
    
    #clearthis_contentbody {
    width: 774px;
    margin : 0px;
    height : 1px;
    clear : both;
    float : none;
    font-size : 1px;
    line-height : 0px;
    overflow : hidden;
    }
    
    
    
    .content_entry {
    padding: 23px 0px 0px;
    }
    
    .content_entry .thumbnail {
    margin: 5px 0px 15px;
    float: left;
    border: #a09e9e 1px solid;
    }
    
    .content_entry .thumbnail img {
    float: left;
    }
    
    .content_entry .entry_text {
    padding-right: 15px;
    width: 210px;
    float: right;
    text-align: justify;
    }
    
    .content_entry .entry_text h3 a{
    padding-bottom: 5px;
    color: #c71212;
    font-size: 10px;
    font-weight: normal;
    }
    
    /* Recent Reviews */
    
    #reviews_box {
    padding: 15px 10px;
    float: left;
    }
    
    #reviews {
    width: 378px;
    }
    
    
    
    #reviews .content_entry {
    width: 378px;
    }
    
    
    /* Play Now */
    
    #playnow_box {
    padding: 15px 12px;
    float: right;
    }
    
    #playnow {
    width: 351px;
    }
    
    
    
    #playnow .content_entry {
    width: 351px;
    }
    
    #playnow .content_entry .thumbnail {
    margin-left: 3px;
    }
    
    #playnow .content_entry .entry_text {
    padding-right: 10px;
    width: 200px;
    }
    
    
    /* Page Footer */
    
    #page_footer {
    padding: 15px 10px;
    color: #e5e0e0;
    font-size: 12px;
    text-align: center;
    letter-spacing: 0px;
    }
    
    #page_footer a {
    color: #e5e0e0;
    text-decoration: underline;
    }
    
    #page_footer a:hover {
    color: #bb1414;
    }
    Last edited by Paul O'B; Jul 23, 2008 at 14:22. Reason: code tags added

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

    Remove the letter-spacing:1px from the body element and the iframe should appear in IE6.

  4. #4
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    you really know your css, thank you! i figured it would be a simple fix but i couldn't see anything wrong, that fixed it right up alright

  5. #5
    Non-Member
    Join Date
    Jun 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear,
    I am also have the same problem.
    My code is working perfectly allright in firefox but not in ie6. also to mention i call my iframe in EOT technology. So please guide me it there any limitation for EOT anf iframe.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    So please guide me it there any limitation for EOT anf iframe
    Sorry I have no knowledge about EOT in an iframe perhaps someone else can chime in.


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
  •