Results 1 to 1 of 1

Thread: Iframe tag: Different appearance in different browsers

  1. #1
    iift_sam Guest

    Iframe tag: Different appearance in different browsers

    Hi all,

    I'm working on my first website and need inputs on the following:

    1. Browser compatibility: In my computer (IE:7) it looks ok. But when I check on browswershots.org and browsercamp.com; it is looking different. A white horizontal line is coming at the end of each page (I would not like to have that line) and "Time and Date" tag position is shifting to about 150 px right (from what I want). Could not solve these

    Pasting my html and CSS code for reference. Would appreciate the feedback to solve above problems:

    -----------------------------------------------

    HTML:
    HTML Code:
    <!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" xml:lang="en" lang="en">
      
      <head> 
        <title>example</title> 
        <!--[if IE 7]>
        <style>  
          p {
            line-height:20px;
            padding-bottom:0;       
          }
          h1 {
            font-size:20px;
            font-weight:normal;
            color:#fff;
            padding-bottom:0;
          }
          h2 {
            font-size:16px;
            font-weight:nobold;
            color:#999999;
            padding-bottom:0;
            
     }
            #navigation {
            float:left;
            background-color:#0a161b;
            width:948px;
            font-size:12px;
            color:#060e11;
            padding:16px 0px 0px 0px;
          }
            #navigation-links li }
            float:left;
            display:inline;
            font-size:1em;
            padding:0px 20px 10px 0px;
            border:1px solid red;
          }
        </style>
      <![endif]-->
    </head>
    <body>
      } 
      p {
      border: 1px solid black;
      }  
      h1 {
    <iframe style="position:relative; top:376px; left:672px" src="http://free.timeanddate.com/clock/i1raoal9/fs11/fcfff/tc000/pc000/ftb/tt1" frameborder="0" width="179" height="16"></iframe>
      <div id="wrapper">
        <div class="example_header"><img style="position:relative; top:0px; left:0px; width:363px; height:87px" src="/files/theme/Logo.jpg" alt="Logo"></div>
            <div id="navigation">%%MENU%%</div>
        <div id="content-wrapper">
          <div id="contents">
            %%CONTENT%%
              </div>
                <div id="footer">
            <div id="footer-contents">%%WEEBLYFOOTER%%<div>
          </div>
        </div>
      </div>
        <div style='display:none;'>%%TITLE%%</div>
    </body>
    </html>
    --------------------------------------------------

    CSS:
    Code:
    *|* {  
      margin:0pt;
      padding:0pt; 
    }
    body {
      background: #000000;
      background-color:#000000;
      font-family:trebuchet,"arial",verdana;
      font-size:13px;
      color:#000000;
      margin:0;
      padding:0;
    }
    p {
      line-height:1.5;
      padding-bottom:12px;
    }
    h1 {
      font-family:trebuchet,"arial",verdana
      font-size:20px;
      font-weight:normal;
      color:#000000;
      line-height:1.5;
    }
    h2 {
      font-family:trebuchet,"arial",verdana;
      font-size:18px;
      font-weight:normald;
      color:#000000;
      line-height:1.5;
      }
    #wrapper {
      width:960px;
      margin:20pt auto;
    }
    #sitename {
      url(logo.jpg);
      height:63px;
      width:960px;
      font-size:30px;
      color:#000000;
      font-weight:normal;
      padding-top:25px;
    }
    #content-wrapper {
      background:#ffffff;
      float:left;
      width:960px;
      margin-top:5px;
      margin-right:0px;
      padding-bottom:0px;
    }
    #navigation {
      float:left;
      background-color:#0a161b;
      width:948px;
      font-size:12px;
      color:#060e11;
      padding:16px 0px 0 12px;
    }
    #navigation ul {
      float:left;
      padding:0 10px 0 0;
      margin-left:0;
    }
    #navigation li {
      float:left;
      display:inline;
      height:30px;
      font-size:1em;
      padding:0px 20px 6px 10px;
    }
    #navigation a:link  {
      color:#fff;
      text-decoration:none;  
    }
    #navigation a:hover  {
      color:#fff;
      text-decoration:none;  
    }
    #navigation a:visited  {
      color:#fff;
      text-decoration:none;  
    }
    #active a:link  {
      color:#63afde;
      text-decoration:none;  
    }
    #active a:hover {
      color:#63afde;
      text-decoration:none;  
    }
    #active a:visited {
      color:#63afde;
      text-decoration:none;  
    }
    a:link, a:hover, a:visited {
      color:#63afde;
      font-weight:normal;
      text-decoration:none;
    }
    .weebly_header {
      background:transparent url(%%HEADERIMG%%) no-repeat center top;
      float:left;
      width:960px;
      height:314px;
    }
    #contents {
      width:920px;
      min-height:102px;
      height:auto !important;
      height:102px;
      padding:20px;
    }
    #footer {
      float:left;
      width:960px;
      height:56px;  
      margin:20px 0 30px 0;
      background-color:#000;
    }
    #footer-contents {
      float:left;
      font-family:Trebuchet,"Arial",verdana;
      font-size:9px;
      color:#333;
      padding:11px 0px 0 20px;
      width:940px;
      height:28px;
    }
    input {
      background-color:#394c5b;
      border:1px solid #999;
      font-size:12px;
      color:#97c4e0;
    }
    textarea {
      background-color:#ffffff;
      border:1px solid #999;
      font-size:12px;
      color:#97c4e0;
    }
    
    div#commentArea div.blogCommentOwner {
      background: #323242;
      border: 1px solid #505060;
    }
    
    
    /****************************** flyout menus ******************************/
    
    #weebly-menus .weebly-menu-wrap {
      z-index: 5000;
    }
    
    #weebly-menus .weebly-menu {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    #weebly-menus .weebly-menu li {
      float: left;
      clear: left;
      width: 170px;
      text-align: left;
    }
    
    #weebly-menus .weebly-menu li a {
      position: relative;
      display: block;
      width: 100%;
      background: #2a3e4e;
      border-right: 1px solid #394c5b;
      border-left: 1px solid #394c5b;
      border-bottom: 1px solid #394c5b;
      text-decoration: none;
      font-size: 11px;
      font-weight: normal;
      line-height:1;
      padding:5px;
      color: #ffffff;
    }
    
    #weebly-menus .weebly-menu li a:hover {
      background: #2a3e4e;
    }
    
    #weebly-menus span.weebly-menu-title {
      display: block;
      padding: 5px 10px;
    }
    
    #weebly-menus span.weebly-menu-more {
      background: transparent url(http://images.weebly.com/weebly/imag...menu_arrow.gif) no-repeat center top;
      display: block;
      position: absolute;
      right: 5px;
      top: 0;
      font-family: Courier;
      height: 28px;
      line-height: 28px;
      padding:3px 0 3px 0;
    }
    Last edited by is_numeric; 23 Nov 2009 at 12:55 PM. Reason: added code tags

Similar Threads

  1. Role of Meta Title Tag in SEO
    By seotips in forum Search Engine Optimization and Marketing
    Replies: 1
    Last Post: 04 Mar 2009, 02:57 AM
  2. firefox wont refresh an iframe
    By Littlened in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 1
    Last Post: 22 Nov 2006, 03:19 PM

Tags for this Thread

Posting Permissions

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