www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 28

Thread: Styling a <div> specificlly for IE6?

  1. #1
    Join Date
    Aug 2008
    Posts
    204

    Styling a <div> specificlly for IE6?

    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?

  2. #2
    Join Date
    Dec 2008
    Location
    Denver, Colorado
    Posts
    389
    You could use conditional comments to call an ie6-only stylesheet, and put the offending classes/id's in it:

    Code:
    <!--[if IE 6]><link rel="Stylesheet" type="text/css" href="ie6.css" /><![endif]-->

  3. #3
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    354
    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

  4. #4
    Join Date
    Aug 2008
    Posts
    204
    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.

  5. #5
    Join Date
    Apr 2009
    Location
    NFLD, Canada
    Posts
    42
    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.

  6. #6
    Join Date
    Aug 2008
    Posts
    204
    I thought there would be a way to style so that it leaves the positioning as it is for IE7\FF3 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 !!

  7. #7
    Join Date
    Apr 2009
    Location
    NFLD, Canada
    Posts
    42
    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.

  8. #8
    Join Date
    Aug 2008
    Posts
    204
    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

  9. #9
    Join Date
    Apr 2009
    Location
    NFLD, Canada
    Posts
    42
    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.

  10. #10
    Join Date
    Aug 2008
    Posts
    204
    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.

  11. #11
    Join Date
    Apr 2009
    Location
    NFLD, Canada
    Posts
    42
    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 too 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).

  12. #12
    Join Date
    Aug 2008
    Posts
    204
    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?

  13. #13
    Join Date
    Apr 2009
    Location
    NFLD, Canada
    Posts
    42
    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.
    Engineers aren't boring, we just get excited over boring things.

  14. #14
    Join Date
    Aug 2008
    Posts
    204
    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.

  15. #15
    Join Date
    Apr 2009
    Location
    NFLD, Canada
    Posts
    42
    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.
    Attached Images Attached Images
    Engineers aren't boring, we just get excited over boring things.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles