Hi peeps, I wonder if anybody could help me with this. I am building my photography website and everything was going kind of ok when I discovered that it is completely broken in IE6, I don't think it could be any broken...everything,layout, script etc. The home page is kind of ok, I will need to resize the picture div http://antobbo.webspace.virginmedia.com/photography/testing/home.htm but if you go to the gallery http://antobbo.webspace.virginmedia.com/photography/testing/gallery.htm and try one of th3 first 3 boxes you'll see what I mean Now I am getting really frustrated because I don't even know where to start from to fix this, and I was wondering if anybody has any suggestion at all as to how to get started and if it worth. Is it the case here to change the html code to detect which browser is used and then optimize for IE6? If yes how do I do it? ANy suggestion's the welcome, I am loosing the will to live. Other browsers seem to be coping well with it thanks
Why are you even coding for IE6? It's a decade old browser that has been stamped out of existence for the most part. If you insist on making it IE6 compatible, it's possible via conditionals. Place after all the other css files you use in the <head> element. Target IE 6 ONLY <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]--> Read More Here: http://bit.ly/qIm47v
Hi jjosephs, thanks for that. It's not that I want to code for IE6 but the thing is that many people still have it, that it is to say that potential employers can have it too and surely they will test if one of the websites you add to the portfolio still works with older browser, that's the only reason why I am thinking to do sth for IE6. Your link is really interesting and surely I will follow that, although in my case I really don't know where to start from in the code, everything seems wrong...I don't know if you had a chance to look at it in IE6 but everything falls apart, so I am not sure what to look at first if that makes sense thanks
Start by creating the conditional css6 file. From there, experiment with the paddings, margins, floats, widths and heights of elements that are breaking in IE6 until you get the site to look acceptable in IE6. I took a quick look at your site in IE6 and the issues don't seem major. Off the top of my head, I'd suggest to use explicit heights on the home page to make the images work and changing the font-size on the galleries page the make the words fit. If that doesn't work there's always Google. That's how I deal with most of my cross-browser issues.
thanks jjosephs, although sth pretty odd is happening now. So, I created the css for ie6 and below, and I called ie6-and-down.css, and inserted into the <head></head> HTML: tags so that the page i am testing now looks like this: <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="en"> <title>Photography - Categories</title> <link rel="stylesheet" type="text/css" href="stylesheets/containers.css"> <link rel="stylesheet" type="text/css" href="stylesheets/navigations.css"> <link rel="stylesheet" type="text/css" href="stylesheets/rollover_effects.css"> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="stylesheets/ie6-and-down.css"> <![endif]--> </head> HTML: I removed the backslash form the closure tag because my doctype don't seem to like it (I tried with it and no difference whatsoever) I saved my css in the same folder as the rest of the css I have. Then I copied few things I wanted to change from the containers.css to the IE6 css and mess around a little, changing some values to test this new css, and guess what? the content when I view the site with IE6 doesn't change...ie6 seems to ignore this <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="stylesheets/ie6-and-down.css"> <![endif]--> </head> HTML: althogether. I have been testing this for the past 20 minutes and it just doesn't want to work. So I googled it and I found this other css conditionals http://www.conditional-css.com/usage, inline conditionals if I can call them like that and I tried it and again it doesn't work...that's not normal...I just don't understand why it is not working. If I instead change sth in the normal css I can see the results in, say, firefox straight away...what could it be that it is wrong do you think, that's such an odd thing. My IE6 is version 6.0.2900.5512
Your doctype should not be affected by the conditional. Reason being is that it command is located inside html comments and all the contents inside should be ignored. Although it's been ages since I worked with and html4 doctype. Did you try clearing your browser cache? Try making a big css change that you'll be sure to notice, such as a background color change, clear the cache, and try again. Tell me if that doesn't work.
I just had a look at your website a quick fix is to give width of 1015px to your ul that contains your boxes.
Hi there, believe it or not it works not, without me doing anything. Not sure what's going on but it is fine now. I managed to make few changes and successfully fixed some of the issues: -the boxes display fine now (fhk_kz5 I didn't do that but I reduced the margin between boxes and that fixed all the issues); -on the various pictures pages like http://antobbo.webspace.virginmedia.com/photography/testing/light.htm I managed to align all the pics that were jumbled up before. Few things I couldn't fix: -the home page, I am not sure what to do, the slideshow overlaps the text. In my normal css (containers.css) I have this: /* PICTURE BOX*/ .picture_box_home { clear:both; /* need to add this to make sure the navigation doesn't overlap it. Strangely, this doesn't happen in IE*/ /*background-color:red;*/ border:7px solid #7d003a; width:716px; min-height:541px; margin:5px auto; position:relative; /*background: #000000 url(../images/test1.jpg) no-repeat;*/ } .in_pic { border:4px solid white; width:708px; min-height:533px; margin:0 auto; position:absolute; } .in_pic1 { border:4px solid #7d003a; width:700px; min-height:525px; margin:0 auto; position:absolute; /*background: #000000 url(../images/test1.jpg) no-repeat;*/ } .slideshow { width:700px; min-height:525px; margin:0 auto; position:absolute; } HTML: On the ie6 css (ie6-and-down.css) I have this instead: /* PICTURE BOX*/ .picture_box_home { clear:both; /* need to add this to make sure the navigation doesn't overlap it. Strangely, this doesn't happen in IE*/ /*background-color:red;*/ border:7px solid #7d003a; width:716px; min-height:541px; margin:1px auto; } HTML: which doesn't seem to be enough to fix it. If I look at the home page in IE6 I can't get the rid of the top border even if it is not in the css for IE6..uhm...ANy suggestion? -the javascript on the pictures pages like http://antobbo.webspace.virginmedia.com/photography/testing/light.htm: it is pretty odd because I just can't understand whether it works or not. On this machine (samsung nc10 2gb ram) in IE6 it doesn't seem to be working at all. I click on an image in the navigation and nothings happens at all (although it might be one of those things that if I try tomorrow it works). I have another machine with IE6, an old dell inspiron 1300 (I think 1.5gb ram) and there, anytime I click on a picture in the navigation, the script works in that the big picture in the middle of the page changes but the one on the navigation disappears altogether... again any suggestion on that? ANy chance sb can try that in IE6 pls? thanks a lot
Hi fhk_kz5, I will give it a go tonite when I get home, although,thinking of your suggestion, if I set it to overflow:hidden; HTML: wouldn't it chop off 3/4 of my picture?
uhm, yes it actually didn't work...I made some changes to the home page, hoping to solve the problem but it didn't help. I reduced the size of the box, remove all the position:relative; Code (markup): and position:absolute; Code (markup): but again no joy, still the picture on the home page overlaps everything (IE6 only of course) Ah and I forgot to mention that the script doesn't work either. Say on this page http://www.antobbo.webspace.virginmedia.com/photography/testing/gloom.htm in IE6 the pictures won't change when I click on the left hand-side menu. Sometimes I get an error message at the bottom left of the page and if I click on it it reads sth like "object expected" but I don't get that error all the time...