Forum Moderators: not2easy
* {
padding: 0px;
margin: 0px;
}
#main
{
width: 100%;
text-align: center;
}
#wrapper
{
width: 984px;
}
#header
{
padding: 0px;
width: 984px;
height: 150px;
text-align: center;
}
#content
{
background-position: center;
border: 1px solid #000000;
width: 982px;
background-image: url('images/background.gif');
background-repeat: repeat-y;
}
#left
{
width: 181px;
float: left;
}
#middle
{
width: 580px;
float: left;
padding: 0px 10px 0px 10px;
}
#right
{
width: 181px;
float: left;
padding: 30px 5px 30px 5px;
}
#footer
{
width: 984px;
height: 75px;
padding: 10px 0px 0px 0px;
}
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<body>
<form id="form1" runat="server">
<div id="main">
<div id="wrapper">
<div id="header">
Header
</div>
<div id="content">
<div id="left">
Navigation
</div>
<div id="middle">
Page Title
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="right">
Right Hand Content
</div>
</div>
<div id="footer">
Footer
</div>
<!-- wrapper --></div>
<!-- main --></div>
</form>
This worked great in IE, but completely broke in Firefox. The faux columns didn't appear, the page wasn't centered, and some of the footer leaked up into the "content" div. So I made some changes and it's working OK in both browsers, but not perfectly. I will indicate the lines that changed to make it clearer.
* {
padding: 0px;
margin: 0px;
}
body ****CHANGE (Added background here so Firefox wouldn't ignore)
{
background-position: center;
background-image: url('images/background.gif');
background-repeat: repeat-y;
}
#main
{
width: 100%;
text-align: center;
}
#wrapper
{
margin: 0px auto 0px auto; ****CHANGE
width: 984px;
}
#header
{
padding: 0px;
width: 986px; ****CHANGE
height: 150px;
}
#content
{
width: 984px; ****CHANGE (took background image out)
}
#left
{
width: 182px; ****CHANGE
float: left;
padding: 25px 5px 0px 5px;
}
#middle
{
width: 580px;
float: left;
padding: 0px 10px 0px 10px;
}
#right
{
width: 182px; ****CHANGE
float: left;
padding: 30px 5px 30px 5px;
}
#footer
{
width: 986px; ****CHANGE
height: 75px;
padding: 10px 0px 0px 0px;
clear: both; ****CHANGE
}
The markup remains unchanged.
Adding "auto" for left and right margins on the "wrapper" div seems to have fixed the centering problem.
The reason for increasing the width of header and footer is that the background was not entirely hidden in IE when the window was resized (small vertical lines of the background would appear on either side of the header and footer). However, when I increased their widths, the problem went away in IE but began to appear in Firefox where it hadn't before (sigh). I have double-checked my image to ensure that it is 984 pixels wide, and GIMP insists that it is.
The "clear: both" was added to the footer to prevent it from leaking up into the "content" div. I honestly don't understand why this works.
Finally, the background image for the faux columns was added to the "body" tag because Firefox didn't display it when it was in the "content" div.
Maybe I'm just missing something, or there is a deeper misconception I don't understand yet. But I'm now afraid to even try the site in other browsers. Any help would be immensely appreciated, even if it's just a reference to another source of information. I have been searching the web, and it seems like such a simple design shouldn't break so easily.
Much of your struggle with other browsers is caused by ... bugs and features in IE. The easier solution is to go about it in entirely the opposite direction.
Ditch IE till the very last, don't even look or care at what it does, it's easy enough to fix it. (Yeah, I know most of your visitors use, it but this is the easiest path forward and avoids the mess you're in.
Now only add what actually does something (if it doesn't do what you seek: drop it back out, and try to understand why, it'll teach you how a browser is supposed to react to CSS)
Much of your trouble seems to be related to the box model (IE's is broken), the real one (including pictures is here): [w3.org...]
Also an element won't expand in a standards compliant browser cause it contains a (number of) float(s). It'll collapse to nothing (and hence any background, border etc might not do what you think they would do. The clear on an element that's not floated helps stretch the parent.
I personally use Firefox in this stage cause I like a few plugins: web developer toolbar (allows me a.o. to hover and see what element is where without having to add borders or backgrounds, and even see what the browser made of my CSS) and firebug.
Next once it works in the one browser you chose, test it in as many other browsers except for IE that you can get your hands on. It's the best guarantee it'll work on those game consoles, phones, fridges, ...
Finally test it in both IE6 and IE7 and it'll be broken in most real cases.
Now I'd use conditional comments without a doubt so I can limit the impact of any addition to just that one browser and not need to test it all over again in all the others. I just fix it so that it looks nice in each. Typically IE6 needs much more work than IE7, but it too has it own set of annoyances.
Wonder if IE's non-conforming behavior was an intentional Microsoft attempt to force out other browsers since 5, 5.5, and even 6 came out when it was relatively dominant in the browser world. Hmmmmmm.....
IE6 is old. Really old. It might be just that, although I'd prefer they had fixed IE6 years ago instead of letting a number of these bugs continue to haunt us.
Other browsers don't have large user populations that persist to swear by old versions. I'm not sure why 1/3rd of my IE using visitors s still today on IE6, while IE8 is already looming beyond the horizon. Perhaps we need fixed browsers instead of always new versions that don't get accepted by the user population at large.
