Web Design Forums

JesseLY · 01-05-2008, 14:32

Hi folks...

My layout is created using nested DIV tags with background images in each. It all works perfectly, except in IE 6. None of the BG images display in IE 6.

Any suggestions on what I'm doing wrong?

Here's the link to the page:
Untitled Document

Here's the link to the CSS:
http://www.jesseyoung.com/baker/styles.css

Thanks!

-Jesse

xENo · 01-05-2008, 14:45

While I don't have the time to help you pinpoint your problem, I can suggest using shorthand CSS for your declarations.

For example:

Code:

background-image: url(images/right.jpg);
background-repeat: repeat-y;
background-position: right top;

Can become:

Code:

background: transparent url(images/right.jpg) right top repeat-y;

I would always use two values (horizontal and vertical) for background positions. That may be your IE problem.

Also, the "clearfix" you're using... I've never known it to work in IE. As a result, your containers may have no height, and hence no background image.

StumpyXL · 01-05-2008, 14:47

IE6 = Junk.
Browsers should all be designed based on standards, if they are not they are junk.

roto · 01-05-2008, 15:31

Quote:

Originally Posted by StumpyXL

IE6 = Junk.

I can think of a few more choice words, but you're on target.

StumpyXL · 01-05-2008, 15:34

I just started designing strictly CSS about 3 months ago. I have learned IE7 has made leaps and bounds, FireFox is solid as usual but IE6 DESTROYS everything I create, I hate and wish it would die. The only thing MS did worth a crap since XP Pro was IE7. They should sell their corp. to Google so it can be saved.

roto · 01-05-2008, 15:56

Quote:

Originally Posted by StumpyXL

The only thing MS did worth a crap since XP Pro was IE7. They should sell their corp. to Google so it can be saved.

Ermm, that's not happening anytime soon. I'm sure you know they were in talks with Yahoo! Then again, I understand what you are trying to say.

StumpyXL · 01-05-2008, 16:24

Yeah, you know honestly, Google is doing EVERYTHING right. Providing FREE business email solutions. Free high end applications. New software monthly. People love their jobs there, I mean hell if I had a multimillion dollar compnay I would sell it for shares. Google is doing the PC would good.

MS is going too "user friendly" and not following the rest of the standards. If they try to go proprietary they are in BIG trouble!

xENo · 01-05-2008, 16:38

After a few years, you start to design around IE6's limitations. I can't wait til I no longer have to worry about them.

I wrote an article about it on mentallyretired.com if you search for "ie6 death blow". I would post a link but spam settings here won't let me.

StumpyXL · 01-05-2008, 17:01

If I ever met IE6 I would punch him in the face.
Heh... If it was a person.

JesseLY · 01-05-2008, 17:41

Uh...well, that's all nice, folks - but does anyone actually have a solution to my problem?

-Jesse

StumpyXL · 01-05-2008, 17:45

Use IE6 Exceptions and code specifically for IE6.

xENo · 01-05-2008, 18:16

Quote:

Originally Posted by JesseLY

Uh...well, that's all nice, folks - but does anyone actually have a solution to my problem?

-Jesse

Did you try what I suggested above? I'm not really gonna do your homework for you... just help along.

To be honest, theres about a million things that need fixing in your markup and CSS, but I'm going for the ones that seem the most obvious.

digipaint · 01-05-2008, 18:17

try position:relative on .thumbnail

cgl · 02-05-2008, 01:12

xENo was right when he said this:

Quote:

Originally Posted by xENo

As a result, your containers may have no height, and hence no background image.

If you set .top, .tlc and .trc to width: 100% it will work.

BTW clearfix works fine in IE.

xENo · 02-05-2008, 02:10

Quote:

Originally Posted by cgl

BTW clearfix works fine in IE.

I still don't trust it. lol

It's always been iffy for me in browsers other than IE, and in IE I cant remember if I ever got it working. I was probably doing it wrong, trying to avoid the "hide from ie-mac" hack...

cgl · 02-05-2008, 08:16

Quote:

Originally Posted by xENo

I still don't trust it. lol

It's always been iffy for me in browsers other than IE, and in IE I cant remember if I ever got it working. I was probably doing it wrong, trying to avoid the "hide from ie-mac" hack...

If you used an early version it may have been a little wonky - the latest version is problem free. (No fooling!) I just used it for a project last week.

If anyone doesn't know what we're talking about, clearfix is a group of css rules used to clear floats without extraneous markup.
Info here:
perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack/

01-05-2008, 14:32	#1 (permalink)
JesseLY Registered User Join Date: May 2007 Location: Seattle Posts: 28	IE 6 problem with BG images in DIVS Hi folks... My layout is created using nested DIV tags with background images in each. It all works perfectly, except in IE 6. None of the BG images display in IE 6. Any suggestions on what I'm doing wrong? Here's the link to the page: Untitled Document Here's the link to the CSS: http://www.jesseyoung.com/baker/styles.css Thanks! -Jesse

01-05-2008, 14:45	#2 (permalink)
xENo Jack of all trades Join Date: May 2008 Location: Orange County, CA Posts: 51	While I don't have the time to help you pinpoint your problem, I can suggest using shorthand CSS for your declarations. For example: Code: background-image: url(images/right.jpg); background-repeat: repeat-y; background-position: right top; Can become: Code: background: transparent url(images/right.jpg) right top repeat-y; I would always use two values (horizontal and vertical) for background positions. That may be your IE problem. Also, the "clearfix" you're using... I've never known it to work in IE. As a result, your containers may have no height, and hence no background image.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

01-05-2008, 14:47	#3 (permalink)
StumpyXL Registered User Join Date: Apr 2008 Location: Ohio Posts: 61	IE6 = Junk. Browsers should all be designed based on standards, if they are not they are junk.

01-05-2008, 15:34	#5 (permalink)
StumpyXL Registered User Join Date: Apr 2008 Location: Ohio Posts: 61	I just started designing strictly CSS about 3 months ago. I have learned IE7 has made leaps and bounds, FireFox is solid as usual but IE6 DESTROYS everything I create, I hate and wish it would die. The only thing MS did worth a crap since XP Pro was IE7. They should sell their corp. to Google so it can be saved.

01-05-2008, 16:24	#7 (permalink)
StumpyXL Registered User Join Date: Apr 2008 Location: Ohio Posts: 61	Yeah, you know honestly, Google is doing EVERYTHING right. Providing FREE business email solutions. Free high end applications. New software monthly. People love their jobs there, I mean hell if I had a multimillion dollar compnay I would sell it for shares. Google is doing the PC would good. MS is going too "user friendly" and not following the rest of the standards. If they try to go proprietary they are in BIG trouble!

01-05-2008, 16:38	#8 (permalink)
xENo Jack of all trades Join Date: May 2008 Location: Orange County, CA Posts: 51	After a few years, you start to design around IE6's limitations. I can't wait til I no longer have to worry about them. I wrote an article about it on mentallyretired.com if you search for "ie6 death blow". I would post a link but spam settings here won't let me.

01-05-2008, 17:01	#9 (permalink)
StumpyXL Registered User Join Date: Apr 2008 Location: Ohio Posts: 61	If I ever met IE6 I would punch him in the face. Heh... If it was a person.

01-05-2008, 17:41	#10 (permalink)
JesseLY Registered User Join Date: May 2007 Location: Seattle Posts: 28	Uh...well, that's all nice, folks - but does anyone actually have a solution to my problem? -Jesse

01-05-2008, 17:45	#11 (permalink)
StumpyXL Registered User Join Date: Apr 2008 Location: Ohio Posts: 61	Use IE6 Exceptions and code specifically for IE6.

01-05-2008, 18:17	#13 (permalink)
digipaint My Brand New Computer! Join Date: Mar 2007 Location: London Posts: 236	try position:relative on .thumbnail

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)