Web design questions ... CSS, etc.

Snagglepus

I created and maintain my rock band's website: a href="http://www.fatalfilm.com" target="_blank"1www.fatalfilm.com/a1b, 21b, 21I used a basic HTML/CSS structure with a little bit of JavaScript and Flash thrown in.b, 21b, 21The site looks fine on any of the browsers I use on my Mac (Firefox, Opera, Safari). But when I view the site at work, where we're stuck with Internet Explorer 6, the site looks like hot garbage:b, 21b, 21img src="http://i29.photobucket.com/albums/c252/davefreeburg/FatalFilmWeb.jpg" 21b, 21b, 21The greyish background (which you should see behind the image of the magazine article) has disappeared, the icons above and below the links have grey backgrounds rather than transparent (PNG files ... odd, same thing happens in Firefox when I save them as GIFs), and no Flash banner on top (that doesn't surprise me though I can view YouTube videos and see Flash banners elsewhere).b, 21b, 21Does the site look like crap for anyone else? If so, what browser/OS are you using?b, 21b, 21I'd like to update the site so that it's a bit more robust across different browsers. I realize that there will be some problems on browsers like IE 6, but most other sites look just fine. Does anyone have any tips? The biggest annoyance is the background behind the content. I've looked at tutorials and other sites and can't see how what I'm doing is fundamentally different from the norm. b, 21b, 21If anyone is a CSS wizard and is interested in looking at what I did, the CSS code is here: a href="http://www.fatalfilm.com/fatalfilm.css" target="_blank"1www.fatalfilm.com/fatalfilm.css/a1 b, 21b, 21Thanks.

voidarelli

Here are a couple suggestions:b, 21b, 211. Use an animated .gif instead of a flash object for the banner/logo. this will load quicker and work across all browsers the same. Otherwise, you could use javascript to detect their browser and embed the flash object accordingly (IE reads embedded flash objects differently than others)b, 21b, 212. The grayish background shows up in IE7. For IE6, here's something that worked for someone else (found it on google):b, 21b, 21ORIGINAL CSS for DIV tag:b, 21.bold .red {b, 21background-color: red;b, 21}b, 21b, 21ADD EITHER OR BOTH UNTIL IT WORKS:b, 21.ext-ie6 .bold .red {b, 21 zoom: 1;b, 21}b, 21b, 21ORb, 21.ext-ie6 .bold .red {b, 21 position: relative;b, 21}b, 21b, 21b, 21Hope that helps!

Snagglepus

Thanks! I'll give those tips a try.

Meep

Welcome to my everyday world! In all seriousness, getting a layout working in IE6 is something I spend way too much time on. A few things:b, 21b, 21- Transparent PNG's won't work in IE6. It can only handle gif's for transparency. There is a workaround by using a conditional IE6 stylesheet with dx:imagetransform links for the png's in it (google for IE6 png fix or something)b, 21b, 21- Can't check the background for IE6 (on a mac here) but a display:block or a positon:relative / position:static on the content / showcontent div might fix it. Most of this is just trial and error though, so it could be a hundred other things.b, 21b, 21- Alternatively, tell your system admin it's time for an IE update and save us all a lot of work!

street_muzik

Wow, I didn't think of IE. I don't even have it. Can someone check my site on IE6? It's my final web design 1 project.b, 21b, 21a href="http://www.batchesbrew.com" target="_blank"1www.batchesbrew.com/a1 b, 21b, 21hyjack over

Snagglepus

/font1

font class="small"1Quote:

/font1

h, 21

b, 21Wow, I didn't think of IE. I don't even have it. Can someone check my site on IE6? It's my final web design 1 project.

b, 21

b, 21

a href="http://www.batchesbrew.com" target="_blank"1www.batchesbrew.com

/a1

b, 21

b, 21hyjack over

b, 21

b, 21

h, 21

font class="post"1b, 21b, 21Your site looks fine in IE 6, as far as I can tell.

street_muzik

Thanks a mil.

Snagglepus

/font1

font class="small"1Quote:

/font1

h, 21

b, 21

b, 21- Transparent PNG's won't work in IE6. It can only handle gif's for transparency. There is a workaround by using a conditional IE6 stylesheet with dx:imagetransform links for the png's in it (google for IE6 png fix or something)

b, 21

b, 21

b, 21

h, 21

font class="post"1b, 21b, 21I'll tinker with that ... thanks. I just created a conditional stylesheet (from a tip I just found a href="http://www.quirksmode.org/blog/archives/2006/08/the_dangers_of.html"1here/a1). Looking like that's going to be useful.b, 21b, 21b, 21/font1

font class="small"1Quote:

/font1

h, 21

b, 21

b, 21- Can't check the background for IE6 (on a mac here) but a display:block or a positon:relative / position:static on the content / showcontent div might fix it. Most of this is just trial and error though, so it could be a hundred other things.

b, 21

b, 21

b, 21

h, 21

font class="post"1b, 21b, 21I tried the "zoom: 1" line that Voidarelli suggested above and it worked well. I can see how you spend a lot of your time doing these sorts of things. Talk about some arcane solutions!b, 21b, 21b, 21/font1

font class="small"1Quote:

/font1

h, 21

b, 21

b, 21- Alternatively, tell your system admin it's time for an IE update and save us all a lot of work!

b, 21

b, 21

h, 21

font class="post"1b, 21b, 21No kidding. It's especially fun now that we're dipping into using social networking sites for marketing (I work at a museum/research center). IE 6 does not like these sites most of the time.b, 21b, 21b, 21Thanks for your help!