Styling a <div> specificlly for IE6?

@WhiteDragonApr 14.2009

I have a div setup that looks fine in FF3 and IE7 but in IE6 it’s way off. Is there a way to style the <div> for IE6 without it affecting it’s positioning for the other browsers?

to post a comment

CSS

27 Comments(s) _↴

@6StringGeekApr 14.2009 — #You could use conditional comments to call an ie6-only stylesheet, and put the offending classes/id's in it:

[CODE][/CODE]

@CaptainkewlApr 15.2009 — #I agree with the above suggestion. Also remember that if your using floats for your layout, if you put display:inline in the css, it will increase compatibility with IE6 without affecting anything else

@WhiteDragonauthorApr 15.2009 — #I wanted this <div> to be touching the corner of another <div> and in just IE6 it won't look as it does in IE7 and FF3, arrrgh.

@lystarApr 15.2009 — #Conditional comments as mentioned above are the way to go. Avoid CSS hack methods if at all possible.

If you're still having issues can you could provide an image of what you're trying to accomplish?

Did you make sure to link the IE6 only spreadsheet AFTER the normal one. If you didn't than your normal stylesheet will just overwrite the IE6 version you commented in.

@WhiteDragonauthorApr 15.2009 — #I thought there would be a way to style so that it leaves the positioning as it is for IE7FF3 but adjust it to where it should be for IE6. Here is a link

http://www.thecreativesheep.ca/site/indexpage12.html

You see a little blue box in the bottom right hand corner when viewed in IE6 you'll see it's not touching the corner by it's off !!

@lystarApr 15.2009 — #Take a look at this: Conditonal Comments w/ Internet Explorer

If you use a conditional comment to target only IE6, you can insert the IE6 only styling rules wherever you want. I don't have a copy of IE6, so I can't view your page with it / help you figure out what IE6 is doing wrong.

I would recommend tweaking the page so it looks right in IE6 (make sure you're playing with a backup of your page and not the original)

Then take whatever rules you needed to get the job done, dump them into a new css file and comment in a <link> element to load the IE6 css AFTER you link to your normal css file.

@WhiteDragonauthorApr 15.2009 — #Yeah that seems like the best solution. Maybe you can help me with something else, for me that web page link the background images load slow or don't load at all in FireFox 3 how is it for you ? Referring to the link in message #6

@lystarApr 15.2009 — #Right now, I'm using FF3.

The page loaded quickly for me, though I should note I'm at work on my companies super fast connection.

The file size on the header image is 222KB, which is probably the issue. Most people these days are on a fairly fast connection and it probably won't be an issue.

Try playing with different compression levels and find a happy medium between quality and file size.

I should tell you too that your left border isn't lining up with the header (its sticking to far left) in my browser. Screen Resolution 1280x1024.

@WhiteDragonauthorApr 15.2009 — #Yeah the page loads terrible slow for me but I'm doing this on dial - up but all the images are loading ? I understand that one of the left borders is not lined up, which I will fix I just have a concern with the loading.

@lystarApr 15.2009 — #As far as I can tell all the images are loading.

There is a gray box with "creativesheep_logo" written in it... should there be an image there, or is it just a placeholder?

Dial-up is definitely your issue. I wouldn't worry [I]too[/I] much about it, unless you know that a lot of your target audience is using a dial-up connection.

If you use Fire Fox as your normal browser, check out the Firebug plug-in. It will let you look at the source HTML and CSS of any webpage AND let you edit it (read only) in place so you can test out different code before saving it. I think you'll find it especially helpful on a dial-up connection because you won't have to keep uploading files or refreshing pages while you are tweaking your layouts. Of course it won't help you develop for IE6 or 7 but it is one of the best plug-ins for a web developer to have installed (in my opinion anyway).

@WhiteDragonauthorApr 15.2009 — #So it's mostly my dial up connection which is why I can't load the images. I'm going to try browser shots and see if that loads the images. I am currently using firebug it does help but how can I edit a css live for a style sheet only for IE6?

@lystarApr 15.2009 — #Images not loading at all for you is weird. I can't really explain that one, unless there's some time-out issue occurring.

Do you have a screenshot of what the page -should- look like? Maybe there are graphics not loading for me that I'm just not noticing without a reference.

As for firebug, like I said, it can't really help you solve IE issues. That was kind of an off-topic aside to make sure you were aware of the plug-in.

@WhiteDragonauthorApr 15.2009 — #Do you mind if you show me a screen shot of what you're seeing you can send it to me privately if you don't mind.

@lystarApr 15.2009 — #See the attached file... I had to compress it a lot to get it under the 100kb file restriction on the forum. Should get the idea across though.

[upl-file uuid=f9e50ff0-e119-43ba-9dae-4484e792e043 size=90kB]sitecap.jpg[/upl-file]

@WhiteDragonauthorApr 15.2009 — #Yup everything loads as it should. So then it must be something on my end hmmm, I wonder how I can fix so I can see it how you are seeing it, most of my audience will be viewing my site as they do with many sites not on dial-up so I'm a very small percentage I just would like to be able to view it as you see it on dial-up and I can't figure out how to be able to do that.

I hope you don't mind but if you have either or both IE6 and IE7 could you show me screen shots of one or other or both?

@lystarApr 15.2009 — #I've got IE7 on this machine. Give me a few minutes and I'll get you a screenshot.

@WhiteDragonauthorApr 15.2009 — #Alright, thank you

@lystarApr 15.2009 — #Interesting....

IE7 is choking on the site right now.

Status bar is at ~50% and it says 1 item remaining.

There is also an image error box in that gray block.

The blue box you were talking about is there as well.

Again, sorry for the high compression.

[upl-file uuid=6a88390c-2a3f-4505-bffa-9513d1e0265a size=89kB]sitecap_ie.jpg[/upl-file]

@WhiteDragonauthorApr 15.2009 — #Alright, it loads good you don't have IE6 right ? There is one problem since flash is not working how come you're not seeing that and the same thing happens here that little flash icon with the text?

@lystarApr 15.2009 — #The odd thing is, I do have flash installed in Firefox.

IE is chugging away trying to find your flash file. Do you have one uploaded? or is the <object> just a placeholder until you get your flash content uploaded?

I'm guessing that there is something not right in your html for the <object> element. I can't really get into trying to debug it right now. I'm at work, so I can do little more than browse.

Try cutting the flash object out of the source for now and see what happens.

If the page suddenly works, then you know there is an issue in the <object> markup.

@WhiteDragonauthorApr 15.2009 — #Don't worry, I have the flash element turned off so there is nothing wrong with your browser or mine in that respect ?

What I am concerned about is why with IE7 we are both not seeing the "get flash icon" with the text associated with it but in FireFox it shows up.

@lystarApr 15.2009 — #Are you sure the conditional comments you have it wrapped in are correct?

Honestly, conditional comments are something I have yet to master. It usually takes me 3 or 4 tries to get them right.

It seems to me that IE7 is trying to find and load the flash file (thats why in my screenshot, its still showing that there is 1 object left to load). Its not understanding that you have the file disabled... which is what leads me to believe there is something funky happening with your conditionals.

@WhiteDragonauthorApr 15.2009 — #;-) No I have turned off the flash object. Don't worry nothing is wrong with your browser or mine ? What I had mentioned is if you view the page in FF3 then in IE7 do you see in FF3 there is a "Get flash" icon with some text how come that is not showing up in IE7 ?

@lystarApr 15.2009 — #Yeah I understand what you are saying. But what I'm saying is that icon is not showing up because IE doesn't understand that you have the flash disabled even though you do. It is still trying to load a non-existent flash movie.

@WhiteDragonauthorApr 15.2009 — #Oh I understand is there something I could add to my code so that IE understands and shows that error message that is seen in FireFox 3 ?

Edit: How come I can see the error fine, locally in IE7 ?

@lystarApr 16.2009 — #Sorry for the slow reply.

If you can see the error in IE7 locally then the error is probably in whatever path you have set for the flash file. Have you linked the object tag to any local directory?

@WhiteDragonauthorApr 16.2009 — #No I haven't linked the object tag to local directory, that is what I don't understand.

Also in #CSS _↴

back to default FF and NN doing something very wierd.newbie CSS question: emulate frameset?

Success!

Help @WhiteDragon spread the word by sharing this article on Twitter...

Tweet This

Styling a <div> specificlly for IE6?

27 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Styling a <div> specificlly for IE6?

27 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

27 Comments(s) _↴

Also in #CSS _↴