SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Frames/Margin Problem with Firefox and IE

    Hi All,
    I am building a website that has traditional nested frames. I am staying away from iFrames for search engine purposes.

    I am having a problem lining up a fixed background and content on both IE and Firefox. I can get everything to line up perfectly in Firefox but then IE misaligns everything. When I try to line it up in IE it still doesn't line up perfectly and then screws it up on Firefox.

    The style I am using is:
    body { margin: 0px 0px 0px 0px; background: url(img/content_bg.jpg) top center fixed no-repeat; background-attachment: fixed;}

    It's being used on this page:
    therestaurantdesigngroup.com/new/main.htm (Look at it in IE and FF, currently it's working in FF only)

    The entire site with frames is
    therestaurantdesigngroup.com/new/ (Look at it in IE and FF)

    If you want to look at the source files download them here:
    therestaurantdesigngroup.com/new/mbaweb.zip

    I am not worried about the bottom frame at this time. I want to fix main.htm first.

    Thanks!
    Ryan

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I am building a website that has traditional nested frames. I am staying away from iFrames for search engine purposes.
    Then do yourself a favour and stay away from frames as well as they are just as bad - if not worse.

    No one uses frames these days except beginners or sites that are over ten years old (or very advanced sites that know what they are doing). It's just not a viable proposition and fails on nearly every count you wish to make. The perils of frames are well documented on the web and that's why virtually nobody uses then today.

    I have looked at your main page in Firefox and IE and it looks broken in both so I don't really know how it was suppose to look. The individual page looks much the same in both browsers so again I don't know what you want it to look.

    If you repeat a background image on the body then it will be 1px out when the window is at an odd pixel size. Therefore its best not to use backgrounds on the body that have to match exactly with the content. This demo explains the problem.

    If you are talking about the fact that the scrollbar on the center frame offsets the layout then you will need to increase the header width to compensate.

    However, I urge you to ditch the frames before you go any further and use a proper site with a complete stand alone page for every page in the site. This is better for SEO and your visitors and is also much easier to manage.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you are talking about the 1px jog then you will need to create a page wrapper to go around that table and apply the image you had in the body to that element instead/

    e.g.
    Code:
    html,body {  margin:0;padding:0 }
    .wrap{
        width:850px;
        background: url(http://www.therestaurantdesigngroup.com/new/img/content_bg.jpg) top center  no-repeat;     
    }
    Code:
        <div class="wrap">
            <table width="800" height="546" cellpadding="0" cellspacing="0">
                <tr>
    etc........
    etc...
      </table>
    </div>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    A frameless site
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    html,body {  margin:0;padding:0 }
    h1,h2,h3,h4,h5,h6,p{margin:0 0 1em 0}
    body{
        background:#000 url(http://www.therestaurantdesigngroup.com/new/img/bg.gif) repeat 0 0;
        font-size:14px;
      color: white;
        padding:20px 0;
    }
    #wrap{
        width:800px;
        background: url(http://www.therestaurantdesigngroup.com/new/img/content_bg.jpg) no-repeat 50&#37; 102px;     
        margin:auto;
        border-bottom:1px solid #fff;
        height:648px;
        overflow:auto;
    }
    #header{
        width:800px;
        height:102px;
    }
    strong.jobs{color:#fc0}
    h2.celebrate{margin:0}
    #main{
        text-align:center;
        padding:10px 20px 20px
    }
    * html #main{height:1%}/* haslayout fix*/
    </style>
    </head>
    <body>
    <div id="wrap">
        <div id="header">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="102">
                <param name="movie" value="http://www.therestaurantdesigngroup.com/new/top.swf">
                <param name="quality" value="high">
                <embed src="http://www.therestaurantdesigngroup.com/new/top.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="102"></embed>
            </object>
        </div>
        <h1><img src="http://www.therestaurantdesigngroup.com/new/img/middle_content_animation.jpg" alt="Michael Blackman and Associates"></h1>
        <div id="main">
            <h2 class="celebrate">Celebrating 25 years in business!</h2>
            <p>Coffee Shops - Bars and Clubs - Restaurants - Casinos - Hotels<br>
                <strong class="jobs">We do all jobs big or small!</strong></p>
            <p> The Restaurant Design Group and Michael Blackman and Associates is a full service restaurant designer and equipment dealer specializing in commercial kitchen equipment and dining room packages. We offer a one-stop-shop to the restaurant owner who wants a single source response.</p>
            <p> We provide a full service to complete your project. While our main objective is kitchen design, and dining room and equipment sales, we can provide or refer you to any trade required to complete your project anywhere in the United States.</p>
        </div>
    </div>
    </body>
    </html>


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
  •