Asking this question might make me feel silly, but here goes...

I am creating a site using CSS and XHTML. When I previewed the site in on my computer in Firefox 2.0 and IE 7.0 everything looks fine. But when I obtained shots from browsershots.org to double-check it, the layout in the same browsers is off.

Why, when it is the same exact browser, would the results differ between my computer and everyone else's?

Could be screen resolution, did you try it on your machine with different resolutions ?

Like LNR said, what resolution are you trying it on? Are you positioning things using position: absolute;? Unless used right, that will almost always make things look different in different browsers.

No, I hadn't tried in at different resolutions. So I did, and discovered that anything below a certain resolution and it's off. I didn't do my math correctly, it seems. The container is too large, and my math for the content and sidebar placement must also be off.

... I knew I was going to want to bang my head on my desk. I despise when I get busy and that makes me stupid. Ugh.

Thanks for the help.

I never use position: absolute. But thanks for the suggestion.

I fixed the math issues. I made sure that the site would fit within an 800 x 600 size. But my layout still changes from resolution to resolution. How can I make it so that it remains constant throughout? (You can view the site and CSS code below.)

http://www.jennmurray.com/WV_Life/index.html

body {
background: #c98eb0;
margin: 0;
padding: 7px 7px;
}

#container {
width: 736px;
margin-right: auto;
margin-left: auto;
}

#content {
width: 496px;
float: left;
margin-left: 297px;
padding: 20px 20px;
background: white;
border-right: 200px solid #dedec7;
margin-right: -200px;
}

#sidebar {
width: 170px;
float: left;
padding: 10px 10px;
background: #dedec7;
}

#footer {
height: 30px;
text-align: center;
font-size: 11px;
color: #91125f;
clear: both;
padding-top: 20px;
}

float: left;
margin-left: 297px;

Unless you're using conditional comments for the hacks for IE6 and below, that code right there is going to cause major breakage in IE - that invokes the doubled-float margin bug.

More bad news.. in Firefox at 1280x1024, your layout is pushed off to the right side.

Your #container stops after the header - so it's not containing the rest of your layout, which would make the large left margins unnecessary on the #content div. Remove the extra </div> you have in there following the #header section and make the rest of the adjustments you need to fix margins.

Originally Posted by LadynRed

Your #container stops after the header - so it's not containing the rest of your layout.

*headdesk* You know, I tried to add a border to the #container and noticed that it didn't include my content and sidebar areas. And I went back and read over that code several times, and somehow I missed that extra </div>. (I guess because I had <ul id="nav"> and somehow my brain thought that extra </div> was needed for that. Oye!)

Ok, so I fixed that. And I removed the float: left, margin-left. My next question is, how can I get the sidebar (which is still at the bottom) in place? I changed it from float: left to float: right. So now it's on the right side of the page where it goes, but it's too far down. Negative margins?

(By the way, I really appreciate the help. I am taking a CSS Independent Study--since my college's graphic program fails miserably at teaching CSS. This site is for that, and though I grasp most of CSS I am finding the layout part the most challenging.)

and somehow my brain thought that extra </div> was needed for that. Oye!)

It's always those niggling little things that get ya !

Layouts using CSS can be challenging to master since there are so many ways to do things.

You didn't need to take out the float left, margin-left, you just need the necessary 'fix' in a separate CSS file to make IE behave, and then the conditional comment to feed only IE the 2nd css file. Here's how you kill that bug: http://www.positioniseverything.net/...ed-margin.html

Can we see the code or the modified page ? It's easier for us to see what's going on. Chances are negative margins aren't necessary.

Originally Posted by LadynRed

Layouts using CSS can be challenging to master since there are so many ways to do things.

Yes, it's very confusing. Especially when everyone has a different method or bag or tricks on top of everything else.

Originally Posted by LadynRed

You didn't need to take out the float left, margin-left, <snip> kill that bug.

Well, since I fixed my code so the container includes the #content and #sidebar divs, the content area (which I had used those properties with) went to the left on its own. So unless there's a specific reason to put them back in, I think we're good.

Originally Posted by LadynRed

Can we see the code or the modified page ? It's easier for us to see what's going on. Chances are negative margins aren't necessary.

That would help, huh. :

body {
background: #c9a4ba;
margin: 0;
padding: 7px 7px;
}

#container {
width: 736px;
margin-right: auto;
margin-left: auto;
}

#content {
width: 506px;
padding: 20px 20px;
background: white;
border-right: 200px solid #dedec7;
margin-right: -200px;
}

#sidebar {
width: 170px;
float: right;
padding: 10px 10px;
background: #dedec7;
}

#footer {
height: 30px;
text-align: center;
font-size: 11px;
color: #91125f;
clear: both;
padding-top: 15px;
}

You can also view the updated affect here: http://www.jennmurray.com/WV_Life/index.html

The sidebar is fine on my computer, but I have a widescreen monitor. Anything below my resolution, and it's at the bottom of the page (although it's on the correct side now.)

(Note: The border-right and margin-right properties for the #content div is to make the sidebar as long as the content section, in case you were wondering. One of those tricks I came across.)

That's an interesting border trick, but I suspect it's the source of your problem. I find that the faux columns method is the easiest to implement and it causes no problems. Use the attached background gif and add this to your #container:

background: #dedec7 url(containerbg.gif) repeat-y;

That simplifies your #content to this:

#content {
width: 506px;
float: left;
padding: 20px;
background: white;

Now everything stays put, even down to 800x600.

Yes, that is a better way to even out columns! Thank you!

Ok, so after implementing your solution, bless you, my sidebar was still at the bottom of the page. (Note: I realized that prior to my last comment, I hadn't uploaded my site correctly. So it probably didn't show my sidebar on the bottom right, like I was talking about.)

Anyway...so in order to move it up, I used margin-top. Thus, now I have:

#container {
width: 736px;
margin-right: auto;
margin-left: auto;
background: #dedec7 url(...images/containerbg.gif) repeat-y;
}

#content {
width: 506px;
padding: 35px 20px;
background: white;
}

#sidebar {
width: 170px;
float: right;
padding: 10px 10px;
background: #dedec7;
margin-top: -620px;
}

I already had a separate CSS file for Mr. Evil IE. I also used the margin-top to correctly place the sidebar. (It placed it at the top instead of the bottom, so I only needed a 5px margin.)

But I found I also had to add float: left to my content div. It would load properly, but then when I went over the drop-down menu the content area went to the right of the sidebar! But the float: left seems to have fixed that. So, for IE, I have:

#container {
width: 736px;
margin-right: auto;
margin-left: auto;
background: #dedec7 url(...images/containerbg.gif) repeat-y;
}

#content {
width: 496px;
padding: 20px 20px;
background: white;
float: left;
}

#sidebar {
width: 170px;
float: right;
padding: 15px 15px;
background: #dedec7;
margin-top: 5px;
}

Everything seems to look good now (but feel to point out otherwise):
http://www.jennmurray.com/WV_Life/index.html

On a minor note, my search bar in IE has a larger padding on the bottom than it's supposed to. Any idea how I could fix that?

Much better, but you still have some issues with IE6. The sidebar is overlapping onto the white content area . What I see is that your conditional comment only applies to IE7, but you need to make it work for IE6 and below too.

The only thing you should need in your 'fixes' files for IE is JUST the stuff needed for the hacks. The reason your sidebar was/is dropping is because of the 20px right and left padding. Once you zero that out, the sidebar comes up where it belongs. This is because of IE6's (and below) busted box model. IE 7 doesn't suffer from most of those problems, which is why you typically need 2 'fixes' files, one for IE7 and a 2nd for lower versions. IE 7 doesn't require much in the way of hacks, it still has a few annoying bugs though.

For padding on text inside of #content, it's better to apply the padding to the <p> and Hx elements and avoid putting padding on the containing divs.

Ahhhh. You hath much knowledge.

I'll give this a try as soon as I can. (I'm currently out-of-town.) I hadn't re-checked the site in anything but Firefox 2.0 and IE 7--just didn't have the time before I left. (And I was so happy just to make it work in those two!)

Ok, I'm home now and reading this over. ... Are you saying that I need three CSS files: one for IE7, one for IE6 and below, and one for everyone else? And the one for IE6 and below should not have any padding for the content div?

Also, how are you previewing these in various browsers? Do you use a browsershots.org type site? Or something more handier?

Yes, I'm saying you need more than one CSS file. What that entails though is one MAIN css file that has everything in it, for ALL browsers. The separate file for IE6 & below will contain only those few rules needed to may IE6 (and below) behave, so it will not be a full copy of your main css file. I also have an "ie7fixes" file, but to date it has nothing in it as I have not run afoul of any IE7 bugs.

As for previewing, I have IE6, Firefox 2.0.0.9 and Opera 9.10 installed on my machine. We have IE7 installed on a test machine. For Mac's I have to use something like browsershots.

Then how do you handle certain situations? For instance, I had to use the margin-top property so that the sidebar wasn't at the bottom of the page. But I had to use different numbers for Firefox (-620px) and IE (5px) to get it to the same place. Obviously, you can't have two margin-top properties in the same file. (Or one in the base file and another for IE.)

(Also, I sooo owe you a nice gift basket or something for all this help!)

Yes, you most certainly can have two different values for the same rules in separate files. IE is the only one that will read the conditional comment and go get the separate css file just for it. The values there will be applied by IE.

For instance, this is a typical "iefixes" file that I use:

/* The following selector will be shown only to IE */
* html #content {
margin-left: 210px; /* this is neccessary to avoid float drop in IE PC */
height: 1%; /* this is neccessary if you're using sIFR -- IE drops everything down below the left sidebar from the beginning of the sIFR on ... a dimension is required -- this is the Holly Hack */
}
/* The following selector will be shown only to IE */

* html #nav li a {
height: 1%;
vertical-align: bottom;
}

#sidebar{
display: inline; /* stop doubled float margin bug */
}
.fltlft{
display: inline;
}

This is those same rules in my MAIN CSS file for all other browsers:

#content {
margin: 10px 0px 25px 210px; /* this carves out the space for the navigation and creates the proper content area */
padding: 5px 0px 0 22px;
min-height: 350px;
width: 525px;
}

#nav li a:link, #nav li a:visited {
display: block; /*this makes the A element clickable all the way across (not just on the words) */
height: 20px;
color: #BB0047; /* this is the text color */
font-weight: normal;
text-decoration: none;
margin: 0; /*this creates the space OUTSIDE each button */
padding: 7px 0 2px 7px;
border-bottom: 1px dashed #E0CB96;
}

#sidebar {
background: #fefaee;
float: left;
width: 165px; /* must have a width value */
margin-left: 25px;
padding: 0px;
border-left: 1px solid #dfca93;
border-right: 1px solid #dfca93;
border-bottom: 1px solid #dfca93;
}
.fltlft {
float: left;
margin-right: 10px;
margin-left: 10px;
margin-top: 5px;
padding: 0;
}

Yes, you most certainly can have two different values for the same rules in separate files.

Wow. I had no idea you could that!

IE is the only one that will read the conditional comment and go get the separate css file just for it. The values there will be applied by IE.

Ok. So to me this sounds like there is something in the main CSS file that tells IE that it's instructions are elsewhere. But I don't see anything in the main CSS file that would accomplish that. Or am I not getting what you mean exactly?

So to me this sounds like there is something in the main CSS file that tells IE that it's instructions are elsewhere.

No, the conditional comment that tells IE to go get the other CSS file goes into your HTML.

http://msdn2.microsoft.com/EN-US/library/ms537512.aspx