Frames/Margin Problem with Firefox and IE

**karnival8** · Aug 12, 2008 09:41

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

**Paul O'B** · Aug 12, 2008 10:51

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.

**Paul O'B** · Aug 12, 2008 10:59

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>

**Paul O'B** · Aug 12, 2008 12:02

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>

User Tag List

Thread: Frames/Margin Problem with Firefox and IE

Thread Tools

Display

Frames/Margin Problem with Firefox and IE

Bookmarks

Bookmarks

Posting Permissions