Hi everyone,

Having some browser compatibility issues with my site, http://www.oxidephoto.ca.

It works great in IE7. Perfect, even.

It's very, very close in Firefox, but the fact that it's not perfect is driving me mental. If you look at it in Firefox, go into one of the albums, then into, say, Black and White, then go into any picture, and you'll notice the entire site wrapper shift like 5 pixels to the left. I can't imagine at all what might cause that. The same stylesheet is being loaded in all cases, and the code for each page is virtually identical. Can someone have a look? Stylesheet follows:

* {
 margin: 0;
 padding: 0;
}
body {
 margin: 0;
 background-color: #333333;
 /* background-image:url('images/decay.jpg');
 background-repeat:no-repeat;
 background-position:top;
 background-attachment:fixed;
 */
 color: #404040;
 font: 62.5% "Lucida Grande", Verdana, Arial, sans-serif; /* Resets 1em to 10px */
 text-align: center;
}
img {
 border: 0;
}
a:link, a:visited {
 color: #7f807b;
 text-decoration: none;
}
a:hover {
 color: #404040;
}
hr {
color: #bed2d2;
}
#wrapper {
 margin-left: auto;
 margin-right: auto;
 position: relative;
 width: 800px;
}
#header {
 text-align: left;
 width: 800px;
}
#header p {
 clear: both;
 text-align: center;
 font-size: 1.2em;
 /* allows you to add a few words below the breadcrumbs */
}
#gallery-name {
 float: left;
 padding: 10px;
 }
#search-container {
 float: right;
 white-space: nowrap;
 margin: 18px 0 0 0;
 height: 30px;
}
#search-container input {
 border: 2px solid #4dc4e6;
 float: left;
 padding: 4px;
 vertical-align: top;
}
#search-container input.submit {
 width: 82px;
 height: 30px;
 cursor: pointer;
 background: #fff url(images/search-btn.png);
 margin: 0 0 0 4px;
 padding: 0 0 4px 0;
 border: none;
}
#breadcrumbs {
 clear: both;
 margin: 0;
 font-size: 1.3em;
 min-height: 24px;
 border: 1px solid #039acb;
 background: #01B4E2 url(images/blue-gradient.gif) repeat-x;
 color: #fff;
}
#breadcrumb_links {
 float: left;
 display: inline;
 padding: 4px 0 0 25px;
}
#breadcrumb_links a {
 color: #fff;
 text-decoration: underline;
}
#breadcrumb_links a:hover, #slideshow a:hover {
 color: #fff;
 text-decoration: none;
}
#thumbnail-container {
 margin: 10px 0 0 0;
}
.collection {
 padding: 10px;
margin: 0 0 0;
 float: left;
 border: 1px solid #bed2d2;
 width: 178px;
 height: 150px;
 background: #eeeeee;
 }
 
.collection2 {
 padding: 10px;
margin: 10px 0 0;
 border: 1px solid #bed2d2;
 height: 150px;
 background: #eeeeee;
 } 
.documentation {
 padding: 10px;
margin: 10px 0 0;
 border: 1px solid #bed2d2;
 background: #eeeeee;
 } 
 
 .collection2 img {
 border: 1px solid #01B4E2;
 
 padding: 3px;
 background: #fff;
}
.collection2 img:hover {
 background: #eaeae0;
 border: 1px solid #ff6600;
}
.collection2 p {
 margin: 4px 0 0 0;
 line-height: 1.5em;
}
.collection2 h2 {
 margin: 5px 0;
 padding: 0;
 font-size: 1.4em;
}
.collection2 h2 a {
 color: #01B4E2;
}
.collection2 h2 a:hover {
 color: #ff6600;
}
.collection img {
 border: 1px solid #01B4E2;
 align: center;
 padding: 3px;
 background: #fff;
}
.collection img:hover {
 background: #eaeae0;
 border: 1px solid #ff6600;
}
.collection p {
 line-height: 1.5em;
}
.collection h2 {
 margin: 5px 0;
 padding: 0;
 font-size: 1.4em;
}
.collection h2 a {
 color: #01B4E2;
}
.collection h2 a:hover {
 color: #ff6600;
}
/* Begin Large Picture Page Section */
#big-picture-container {
 border: 1px solid #bed2d2;
 margin: 10px 0 0 0;
 padding: 10px 0 20px 0;
 background: #eeeeee;
}
#picture-caption {
 /* ideally, no padding and width is equal THUMB_LARGE image 
 padding: 0 80px;
 */
  width: 70%;
 margin: 0 auto 6px;
 font-size: 1.3em;
 text-align: center;
 color: #4b4c57;
}
.date {
  width: 70%;
 margin: 0 auto 0;
 text-align: center;
 font-size: 1.1em;
 letter-spacing: 1px;
 color: #8689a2;
}
.right {
 text-align: right;
 display: inline;
 }
 
#prev-link-container {
 width: 15%;
 text-align: left;
}
#next-link-container {
 width: 15%;
 text-align: right;
}
#nav-link-img-prev, #nav-link-img-next {
 margin: 5px 0 0;
 padding: 6px 15px;
 font-size: 1.1em;
}
#nav-link-img-prev {
 float: left;
 display: inline;
}
#nav-link-img-next {
 float: right;
 display: inline;
}
#nav-link-img-prev a {
 border: 1px solid #fff;
 padding: 5px 15px;
 color: #01B4E2;
 background: #ffffff;
}
#nav-link-img-next a {
 border: 1px solid #fff;
 padding: 5px 15px;
 color: #01B4E2;
 background: #ffffff;
}
#nav-link-img-prev a:hover, #nav-link-img-next a:hover {
 border: 1px solid #039acb;
 background: #01B4E2 url(images/blue-gradient.gif) repeat-x;
 color: #fff;
}
#picture-holder {
 clear: both;
 margin: 10px 0 0 0;
}
#picture-holder img {
 margin: 4px;
 padding: 3px;
 background: #fff;
 border: 1px solid #dfded6;
}
#picture-holder a:hover {
 white-space: normal;
}
#picture-description {
 margin: 6px auto 6px;
 padding: 0 80px;
 /* ideally, no padding, but width equal to THUMB_LARGE image */
 text-align: center;
 font-size: 1.1em;
}
#exif_toggle {
 margin: 0 0 20px 0;
 padding: 0;
}
#exif-toggle-container {
}
#exif_table {
}
#exif_data {
 margin: 0 auto 0;
 text-align: left;
}
#exif_data td {
 padding: 0 20px;
}
/* End Large Picture Page Section */
#no-pictures-msg {
 margin: 0 0 200px;
 padding: 80px 0;
 font-size: 1.4em;
 text-align: center;
}
#rss-image {
 margin: 0;
 padding: 0;
 display: inline;
}
.errors {
 margin: 0 0 15px 0;
 padding: 8px 8px 8px 30px;
 border: 1px solid #e3071f;
 font-size: 1.1em;
 color: #000;
 background: #f5a7ab url(images/null.gif) no-repeat 5px 5px;
}
.meta-header {
 margin: 0;
 padding: 0;
 color: #404040;
 font-size: 90%;
}
.page_link {
 padding-left: 1px;
 padding-right: 1px;
 text-decoration: none;
}
.print {
}
div.large-thumb-toolbar {
 padding: 15px 0;
 text-align: center;
}
div.large-thumb-toolbar a {
 padding: 0 4px;
}
.photos-large {
 margin: 0 0 20px 0;
}
ul.slides {
 margin: 0 0 10px 0;
 padding: 0;
 border: 1px solid #bed2d2;
 background: #eeeeee;
}
ul.slides li {
 /* width is calculated by PHP in the HTML, style is applied inline */
 float: left;
 margin: 0 0 0 13px;
 padding: 10px;
 display: inline;
 text-align: center;
}
ul.slides li img {
 border: 1px solid #01B4E2;
 background: #fff;
 padding: 3px;
}
ul.slides li a {
 display: block; /* display:block required to make anchor tag's border surround img in Firefox */
}
ul.slides li img:hover {
 background: #eaeae0;
 border: 1px solid #ff6600;
}
.checkbox {
 clear: both;
 margin: 4px auto 0;
 padding: 0;
}
.thumbnail p {
 padding: 0 6px;
 margin: 4px 0 0 0;
 line-height: 1.2em;
 font-weight: bold;
 height: 2.5em;
 overflow: hidden; /* width is equal to the width of the thumbnail image, set inline in album.php */
}
 

/* Begin Footer Section */
#footer {
 clear: both;
 padding: 10px;
 margin: 10px 0;
 border: 1px solid #bed2d2;
 background: #eeeeee;
 font-size:9px;
}
#pagination {
 float: left;
 width: 40%;
 text-align: left;
 margin: 0 0 10px 0;
 font-size: 1.3em;
 font-weight: bold;
 height: 23px;
 clear: left;
}
.page_link {
}
#pagination a {
 text-decoration: none;
 color: #4dc4e6;
}
#pagination a:hover {
 text-decoration: none;
 color: #ff6600;
}
option {
 padding: 0 4px;
}
#download-selected {
 margin: 0 0 10px 0;
 padding: 0;
 float: right;
 display: inline;
 width: 168px;
 text-align: right;
 clear: right;
}
#download-selected input.submit {
 margin: 0;
 padding: 0 0 0 26px;
 float: right;
 display: inline;
 cursor: pointer;
 background: #fff url(images/carrot_sel3.png) no-repeat 0 50%;
 border: none;
 font-weight: bold;
 color: #4dc4e6;
 width: 168px;
 height: 23px;
}
#navigation-container {
 float: left;
 width: 40%;
 text-align: left;
 margin: 0 0 10px 0;
 white-space: nowrap;
 clear: left;
}
#sort-control {
 float: right;
 text-align: right;
 margin: 0 0 10px 0;
 display: inline;
 clear: right;
 width: 46%;
}
#sort-control span {
 float: left;
 margin: 0 0 0 8px;
 display: inline;
 font-size: 1.2em;
}
#change_sortby {
 margin-left: 5px;
}
#rss-tag-container {
 float: right;
 width: 40%;
 text-align: right;
 clear: right;
 font-size:9px;
}
#link-back {
 clear: both;
 text-align: center;
}
#link-back a {
 color: #01B4E2;
}
.credit {
 font-size: 90%;
 text-align: center;
}
.credit a {
 color: #01B4E2;
}
.clearfix:after {
 clear: both;
 display: block;
 content: ".";
 height: 0;
 visibility: hidden;
 background-color: #333333;
}
.clearfix {
 display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
 height: 1%;
}
/* End hide from IE-mac */

As well, if, for example, you go into one of the albums and get to where it prompts for black and white or color, look at the division between colour and the "need a photographer" box. In IE7, it's 2 pixels wide, as the divider is just two borders of the two elements touching. In Firefox, the division between "colour" and "black and white" is 2 pixels wide, but between "colour" and "need a photographer", it's 1, and again, I can't imagine why that might be.

Finally, if you load the site up in IE6, everything is WRECKED. IE6, according to the W3C, commands a 34.5% market share as of October 2007, so I really can't justify telling IE6 users to bugger off or upgrade, just to see my site. This might be a lot of work, but is someone interested in helping me work out how to get it to load properly in IE6? I'd be willing to compensate someone for their time with this.

Thanks for any and all help.

SHydroxide

I feel for you mate. I had a similar problem recently with a client's site. They took ownership of the code a while back, edited the CSS, asked me to drop a few more pages in because it required PHP coding and about a week later we noticed it had all gone screwy in IE6. OK, so my standard response is "Hey, get a legal version of Windows" but unfortunately you can't always be that crude and I did feel responsible because although the client had edited the CSS and admitted he might have screwed it up I wasn't about to start reverse engineering the CSS file.

Now, I'm not a big fan of bug fixing a CSS file so I decided to use PHP to detect the browser and load an individual CSS file for each of the main browsers:

1. Internet Explorer 6.
2. Internet Explorer 7.
3. Firefox.

And the site now looks fine, the problem now though is every time I edit the CSS file I have to edit 4 files in total.

I have also on the past user PHP within a CSS file and it worked a treat and even managed to pull values from a database but what practical us ethat would be I have no idea...

Hope that's of some use...

Originally Posted by Harlequin

SHydroxide

I feel for you mate. I had a similar problem recently with a client's site. They took ownership of the code a while back, edited the CSS, asked me to drop a few more pages in because it required PHP coding and about a week later we noticed it had all gone screwy in IE6. OK, so my standard response is "Hey, get a legal version of Windows" but unfortunately you can't always be that crude and I did feel responsible because although the client had edited the CSS and admitted he might have screwed it up I wasn't about to start reverse engineering the CSS file.

Now, I'm not a big fan of bug fixing a CSS file so I decided to use PHP to detect the browser and load an individual CSS file for each of the main browsers:

1. Internet Explorer 6.
2. Internet Explorer 7.
3. Firefox.

And the site now looks fine, the problem now though is every time I edit the CSS file I have to edit 4 files in total.

I have also on the past user PHP within a CSS file and it worked a treat and even managed to pull values from a database but what practical us ethat would be I have no idea...

Hope that's of some use...

I imagined that would be the end result, but I'm on the Mac, so have a hell of a time coding for IE6 when I can't test. Like I said, anyone who can help me pull this off (write me a stylesheet, in other words :P) will be handsomely rewarded.

The easiest way to consider a particular look in all browsers and not get yourself into a total mess with a few pixel differences here and there, is to realise;

That nobody other than you, will look at the site using different browsers from the same machine.

It it looks about the same, isn't severely "broken" and is completely useable, nobody will ever notice that there are minor differences.

You can't afford to be a perfectionist when cross browser differences are concerned.

If you don't mind me asking, which browser did you mainly test the site in while you were developing it?

Originally Posted by wayfarer07

If you don't mind me asking, which browser did you mainly test the site in while you were developing it?

Firefox, honestly. I pulled it up in IE7 and realized all the stuff that was bugging me was different there.

But, you have to pull it up in IE6 to realize that it's not a few pixels different. It's WRECKED in IE6, so I think that's worth some consideration, don't you?

The reason it's 'wrecked' in IE6 is due to float drop. Because of IE's broke-to-heck box model, the box widths plus padding are making the collections too wide for the container they sit in, so IE drops the last one down to where it has room. You'll have to either narrow narrow the divs by a few pixels, reduce the padding (you've got 20px per box), or change the width in your IE css file to accommodate it's bad behavior.

Originally Posted by LadynRed

The reason it's 'wrecked' in IE6 is due to float drop. Because of IE's broke-to-heck box model, the box widths plus padding are making the collections too wide for the container they sit in, so IE drops the last one down to where it has room. You'll have to either narrow narrow the divs by a few pixels, reduce the padding (you've got 20px per box), or change the width in your IE css file to accommodate it's bad behavior.

How do you specify a different stylesheet for IE6?

Conditional Comments

Just do as LadynRed suggests and reduce the padding slightly. IE6 can't add up, it calculates the box model completely differently to other browsers.

Identical in all browsers is, as suggested above, not worth the effort. You may be comparing your site in lots of different ones but your visitors aren't. As long as the layout isn't broken the quality of the coding and design are far more important than a couple of pixels shift.

OK, so my standard response is "Hey, get a legal version of Windows"

What does that have to do with their browser?

"What does that have to do with their browser?" you need a legal copy of windows to update to IE7 (unless you use the standalone hacked version)

But the fact they're still using IE6 or even 5.5 may be a matter of choice, either theirs or their employer's. It doesn't mean they have an illegal copy of Windows.

Or they could be running Windows 2000