wraybm1 Posted January 23, 2007 Share Posted January 23, 2007 Page at http://www.ccicenter.org/new_site/wordpress/weblog/In Firefox and Opera this page is fine, but in IE 7 the footer <div> is slid to the right almost all the way.And in IE 6 the corner ribbon <div> sits ontop of the scrollbar.What is going on? Have the natural laws of the universe turned their backs on us? Or have I screwed up?Please Help. Link to comment Share on other sites More sharing options...
S@m Posted January 23, 2007 Share Posted January 23, 2007 In no way is this directed at you, but more towards the entire community.I really wish that people would listen when I suggest using conditional commenting, and create 3 style sheets.Why?1.) IE is garbage2.) IE is garbage3.) IE is garbageYou need to have a link to your "regular" style sheet (For Firefox, Opera, etc)Then you need this: <!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen, projection" href="style_IE.css" /><![endif]--><!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen, projection" href="style_IE7.css" /><![endif]--> The first If sets up your style sheet for IE 6 and below. Mainly 6 because IE5...forget about it.The second If sets up your style sheet for IE7.As you are finding out, IE6 and IE7 render things quite differently. That's another reason NOT to fill your style sheets full of hacks. IE6 may not see them, but IE7 might. Makes for a real headache.Hope this helps! Hollar if you need more help. Link to comment Share on other sites More sharing options...
wraybm1 Posted January 23, 2007 Author Share Posted January 23, 2007 you need this:<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen, projection" href="style_IE.css" /><![endif]--><!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen, projection" href="style_IE7.css" /><![endif]--> I inserted that code in my header, minus the comment markers, and uploaded it. I tried fooling around with the IE specific style sheets and it doesn't appear to have taken effect.I'm not really sure what sort of code that is that you gave me, it turns up pink in dreamweaver. Anyway I'm using wordpress and the original style sheet is being brought in with a call to a function. Can I just overwrite that with a straight up URL of my original? Link to comment Share on other sites More sharing options...
S@m Posted January 23, 2007 Share Posted January 23, 2007 Well, you need to adjust the paths to the location of your style sheet.And, leave the comment bits in there. That is supposed to be there. :)To see if it is working properly, change the body background color to something else for IE. Leave the Firefox one alone. Refresh, it should be different. You won't see any change if you just copy your original style sheet and rename it to whatever. Whatever elements are giving you trouble in IE is what you need to adjust. (In the correct style sheet)So, if something is goofy in IE6, adjust the IE 6 style sheet, but leave the others alone.Make sense? Link to comment Share on other sites More sharing options...
wraybm1 Posted January 23, 2007 Author Share Posted January 23, 2007 Well, you need to adjust the paths to the location of your style sheet.And, leave the comment bits in there. That is supposed to be there. Ok, I understand all the latter stuff...(i.e. style sheets must be different etc...) I don't understand however what the code that you gave me is... why it needs to be inside comments... and where it should go. I put it in the header right. But I tried changing the background in the IE style sheet and it didn't work. Let me know what is wrong. Sorry... I've got some things very clear but other are obfuscated. Link to comment Share on other sites More sharing options...
mattrd Posted January 23, 2007 Share Posted January 23, 2007 Ok, I understand all the latter stuff...(i.e. style sheets must be different etc...) I don't understand however what the code that you gave me is... why it needs to be inside comments... and where it should go. I put it in the header right. But I tried changing the background in the IE style sheet and it didn't work. Let me know what is wrong. Sorry... I've got some things very clear but other are obfuscated.the commented code is called a conditional comment. It comments out different blocks of code depending on what browser you're using. The first line for instance will be commented out in all browsers except IE6. The 2nd line will be commented out in all browsers except IE7. Understand? So the first line will load the ie6 stylesheet only if the page is being viewed in ie6. the 2nd line will load the ie7 but will only load it if being viewed in ie7. in other browsers such as firefox or opera, these lines will be commented out, thus not loading the ie stylesheets. Link to comment Share on other sites More sharing options...
wraybm1 Posted January 23, 2007 Author Share Posted January 23, 2007 the commented code is called a conditional comment.Wow that is awesome, I have never heard of that before. I learn something new every day. Stay tuned for my real problem... fixing these damned <divs> Link to comment Share on other sites More sharing options...
S@m Posted January 23, 2007 Share Posted January 23, 2007 Thanks mattrd!Did everything work out for you? Just holler if you need more help. No worries. Link to comment Share on other sites More sharing options...
wraybm1 Posted January 24, 2007 Author Share Posted January 24, 2007 Thanks mattrd!Did everything work out for you? Just holler if you need more help. No worries. No the conditional comments don't seem to be working. I change things and nothing happens. IE still seems to be responding to the main stylesheet. Help. Link to comment Share on other sites More sharing options...
S@m Posted January 24, 2007 Share Posted January 24, 2007 Do you have a link to your site you are working on so I can see what you have? Link to comment Share on other sites More sharing options...
wraybm1 Posted January 24, 2007 Author Share Posted January 24, 2007 Do you have a link to your site you are working on so I can see what you have?Sorry... yeah it's at http://www.ccicenter.org/new_site/wordpress/ Link to comment Share on other sites More sharing options...
S@m Posted January 25, 2007 Share Posted January 25, 2007 Hmmm....I see that you have IE 6.0 and 7.0. Try taking the ".0" off.I would use relative path(s) instead of the entire url in your links.I'm not sure if I have the correct path, might want to double check that, but here is what I come up with: <link rel="stylesheet" type="text/css" media="screen, projection" href=".wp-content/themes/frametheme/style.css" /><!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen, projection" href="new_site/wordpress/wp-content/themes/frametheme/style_IE.css" /><![endif]--><!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen, projection" href="/wordpress/wp-content/themes/frametheme/style_IE7.css" /><![endif]--> A way to check if it is working or not is put this in each style sheet: body {display:none;} Only do that to 1 style sheet @ a time, then test that browser. If it is working correctly, nothing should show up. Link to comment Share on other sites More sharing options...
FaNo Posted January 25, 2007 Share Posted January 25, 2007 how can i do it for firefox? instead of "lte IE6" or "IE7" how would i say for firefox?? Link to comment Share on other sites More sharing options...
FaNo Posted January 25, 2007 Share Posted January 25, 2007 could you explain a bit more where does this code go?<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen, projection" href="style_IE.css" /><![endif]--><!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen, projection" href="style_IE7.css" /><![endif]-->in the comments where? does it go in the html file?? do i need to use <script></script> ??some help please. Link to comment Share on other sites More sharing options...
S@m Posted January 25, 2007 Share Posted January 25, 2007 how can i do it for firefox? instead of "lte IE6" or "IE7" how would i say for firefox??That's the thing. Firefox (and other standards compliant browsers) are just that. They play by the rules and IMO they are superior to stupid IE. :)Your origional (or main) css link will do the trick. The commented links are to detect for IE version(s) only. Your default style sheet is what Firefox will read from.Make sense?could you explain a bit more where does this code go?<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen, projection" href="style_IE.css" /><![endif]--><!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen, projection" href="style_IE7.css" /><![endif]-->in the comments where? does it go in the html file?? do i need to use <script></script> ??some help please.Sure!That code is designed to detect and serve IE a different style sheet than the default style sheet. The reason you want to do this is because IE doesn't play by the rules. 10px padding for Firefox may turn into -3px padding for IE to get the same result. You will want to keep the code exactly as you have it above. (with comment code)All of that code goes in your <head>like this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>Your Page</title><meta name="description" content="" /><meta name="keywords" content="" /><meta name="categories" content="" /><meta name="robots" content="index,follow" /><link rel="stylesheet" type="text/css" media="screen, projection" href="style.css" /><!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen, projection" href="style_IE.css" /><![endif]--><!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen, projection" href="style_IE7.css" /><![endif]--></head> There isn't a huge population using IE7 just yet, so I wouldn't worry a whole lot about it. But, it might be a good idea to set yourself up for an easy update now. Link to comment Share on other sites More sharing options...
wraybm1 Posted January 26, 2007 Author Share Posted January 26, 2007 Hmmm....I see that you have IE 6.0 and 7.0. Try taking the ".0" off.I would use relative path(s) instead of the entire url in your links.I'm not sure if I have the correct path, might want to double check that, but here is what I come up with:body {display:none;} Hey the relative paths don't work... not even in the regular (uncommented) style link. And I still (after many hours of guess and check) haven't seen an ounce of evidence that these conditional comments even work.isn't there a way to do this with javascript? ... I don't have much faith in these conditional comments. Link to comment Share on other sites More sharing options...
S@m Posted January 26, 2007 Share Posted January 26, 2007 Trust me. They work.I develop every site with them to avoid what you have happening. (no offense)Use your absolute path in there. I don't know how your file directories are set up. Copy my code in that includes the doctype and such. Only insert your path to your style sheet(s).Set this for your background for the IE 6 style sheet: body {background-color:#ffcc00;} (should be a yellowish color)put your IE7 background: body {background-color:#000;} should be black.You do have 3 separate style sheets right? Link to comment Share on other sites More sharing options...
wraybm1 Posted February 13, 2007 Author Share Posted February 13, 2007 Ok... with your help I got it to work... but now how the heck do I get the IE7 stylesheet to "move my div back 'round"???? I've read that there is something with the margin "auto" setting not being recognized in IE7. What's the dillio? Link to comment Share on other sites More sharing options...
S@m Posted February 13, 2007 Share Posted February 13, 2007 Well, that's the beauty of having your style sheets set up this way. You can make any adjustments to your IE7 style sheet without affecting the other browsers.With IE, it's anyone guess as to what makes it work. It's just a game of trial and error.Glad to see you got everything working! Link to comment Share on other sites More sharing options...
otenjoxi Posted February 13, 2007 Share Posted February 13, 2007 Hello,I did not really care to read *all* of the replies, but I noticed the mention of conditional comments; these are marvelous!Please use the following link to learn more about them, directly from Microsoft:http://msdn.microsoft.com/workshop/author/...comment_ovw.aspGood luck with your endeavors.DustinP.S. Internet Explorer's support of CSS (version 6 and below) is horrid. IE 7 has improved some things, but there are still some of the good, 'ol fashion bugs there. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now