Fri, 2010-08-20 22:40
I would like to say first that I solved the problem that I kept running into with I.E., but perhaps in the future I can do things better with my css coding. I'm more so looking for guidance by the pro's, let me know if I'm doing this right 
While putting together the css code for a side menu I kept on running into problems with I.E. (i.e. displayed my
- further down then what i set the absolute positioning to, and furthermore you will see a black div line covering the last list item "Logout (oneeezy)" .. I put that there as a "cover" to go over the last grey bottom border (for design purposes only). It works fine in all the other browsers!
VIEW IN INTERNET EXPLORER:
http://phone7forum.com/styles/celticdreams/template/test_no_ie.html
(as you can see it comes out looking messed up. If you look at the top right side of the URL bar you will see an image of a broken page, if you click on it, it will fix the problem automatically (switch to ie's compatibility mode). As I was happy to see progress I still was not completely happy because I didn't want my users to have to do that..
While further investigating the matter I started playing around with the header information in the HTML. Particularly this bit of code:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Here is the page with the newly added "IE=Emulate7" code placed in the tag.
VIEW IN INTERNET EXPLORER:
http://phone7forum.com/styles/celticdreams/template/test_ie7.html
To my dismay it didn't effect my page one bit! It did however take away the "broken page image" on the top right side of the URL to change to ie's compatibility mode.. So in one last hope of desperation I changed it to "IE=Emulate8" in the tag.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
And volllllahhhhhh!!!! It works like a charm! 
VIEW IN INTERNET EXPLORER:
http://phone7forum.com/styles/celticdreams/template/test_ie8.html
Further more, this also made some things change up on my main website for the better http://www.phone7forum.com , but I won't get into those..The point I'm trying to make here is that little bit of code "IE=EmulateIE8" in my fixed more problems then what I thought possible and I am forever greatful!
Now..., my questions to the CSS pro's,
1. Did I do everything correct in my CSS code?
2. Is everything correct in my tag in my html?
3. Is there a better way to avoid the I.E. compatibility issue or is this the best way known to date?
I feel like I've came along way with my CSS lately and I'm REALLY trying to get it down (hence why i broke this issue down like this) Thankyou guys for all of your feedback in advance and I hope this helps some other poor soul in the future!
Here is all my original code for the finished product, the css and html are located on the same page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?xml version="1.0" encoding="utf-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-language" content="en-gb" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="resource-type" content="document" /> <meta name="distribution" content="global" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> <title> My Side Bar! </title> <style> /* SIDE BAR (beginning) */ .myClear { clear: both; } #sidebar { width: 300px; height: auto; font-family: trebuchet ms, Arial, Helvetica, sans-serif; position: relative; display: block; } #sidebar h3 { padding-top: 0px; margin-top: 15px; font-family: trebuchet ms, Arial, Helvetica, sans-serif; font-weight: bold; border: 0; font-size: 20px; color: #fff; text-shadow: #0060ae -1px -1px 0px; text-transform: uppercase; letter-spacing: -.5px; } #side_topLeft { background: url(/styles/celticdreams/theme/images/test/top_left.png); width: 28px; height: 53px; float: left; display: block; } #side_topMid { background: url(/styles/celticdreams/theme/images/test/top_mid.png); width: 226px; height: 53px; margin: 0; padding-top: 0; float: left; display: block; } #side_topRight { float: left; background: url(/styles/celticdreams/theme/images/test/top_right.png); width: 43px; height: 53px; display: block; } #side_midMain { background: url(/styles/celticdreams/theme/images/test/mid_main.png); width: 295px; height: auto; float: left; } #side_midMain ul { list-style: square; color: #fff; font-size: 13px; font-weight: bold; line-height: 1.2em; margin: 10px 10px 10px 35px; text-transform: uppercase; } #side_midMain a { text-decoration: none; color: #44bbff; } #side_midGrey { background: url(/styles/celticdreams/theme/images/test/mid_grey.png); background-repeat: repeat-x; width: 265px; height: 23px; padding: 0; <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/wink.png" title="Wink" alt="Wink" class="smiley-content" /> margin-left: 3px; float: left; display: block; } #side_botLeft { background: url(/styles/celticdreams/theme/images/test/bot_left.png); width: 28px; height: 43px; float: left; } #side_botMid { background-image: url(/styles/celticdreams/theme/images/test/bot_mid.png); width: 226px; height: 43px; margin: 0; padding-top: 0; float: left; } #side_botRight { float: left; background: url(/styles/celticdreams/theme/images/test/bot_right.png); width: 43px; height: 43px; } #avatar { float: left; position: absolute; display: block; width: 80px; height: 78px; margin: 0; padding: 0; left: 25px; top: 70px; border: 1px solid #FFF; padding: 1px; background: #000; } #accountMenu { position: absolute; left: 118px; top: 72px; } #accountMenu ul{ list-style: none; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 11px; color: #4d5255; margin: 0; padding: 0; } #accountMenu li { margin: 0; padding: 0 0 1px 0; border-bottom: 1px solid #17191b; line-height: 14px; width: 140px; vertical-align: middle; } #accountMenu a { display: block; text-indent: 3px; width: 140px; vertical-align: middle; color: #4d5255; background-image: url(/styles/celticdreams/theme/images/test/arrow_a.png); background-position: right; background-repeat: no-repeat; } #accountMenu a:hover { display: block; width: 140px; vertical-align: middle; color: #ffffff; background-image: url(/styles/celticdreams/theme/images/test/arrow_hover.png); background-position: right; background-repeat: no-repeat; } #cover { position: absolute; margin: 0; padding: 0; background: #000; width: 140px; height: 3px; left: 118px; top: 150px; display: block; } #controlPanel { float: left; padding-top: 87px; padding-left: 14px; background: #000; } #controlPanel ul { list-style: none; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 12px; color: #fff; margin: 0; padding: 0; } #controlPanel li { margin: 0; padding: 0 0 1px 0; line-height: 36px; width: 242px; vertical-align: middle; } #controlPanel a { padding-top: 5px; text-indent: 15px; letter-spacing: -.5px; text-shadow: #0060ae -1px -1px 0; display: block; width: 242px; color: #ffffff; background-image: url(/styles/celticdreams/theme/images/test/button_control_panel.png); background-position: right; background-repeat: no-repeat; } #controlPanel a:active { background-image: url(/styles/celticdreams/theme/images/test/button_control_panel2.png); background-position: right; background-repeat: no-repeat; } /* SIDE BAR (end) */ </style> </head> <body> <div id="sidebar"> <div id="side_topLeft"></div><div id="side_topMid"> <h3>My Account</h3></div><div id="side_topRight"></div> <div id="side_midMain"> <div id="side_midGrey"></div> <div id="avatar"> <img src="/styles/celticdreams/theme/images/test/avatar.jpg" alt="oneeezy" width="80px" height="78px" /> </div> <div id="accountMenu"> <ul> <li><a href="">Chat</a></li> <li><a href="">Members</a></li> <li><a href="">My Posts</a></li> <li><a href="">New Messages</a></li> <span id="noBorder"><li><a href="">Logout (oneeezy)</a></li></span> </ul> </div> <div id="cover"></div> <div id="controlPanel"> <ul> <li><a href="">User Control Panel</a></li> <li><a href="">Moderator Control Panel</a></li> <li><a href="">Administrator Control Panel</a></li> </ul> </div> </div> <div id="side_botLeft"></div><div id="side_botMid"></div><div id="side_botRight"></div> </div> <p class="clear" /> </body> </html>
http://oneillwebs.com/ ~ yes, my personal website built purely with tables which needs to be updated heavily
(before i knew anything!)
Sat, 2010-08-21 00:36
#1
oneeezy wrote: 1. Did I do
1. Did I do everything correct in my CSS code?
2. Is everything correct in my tag in my html?
These are questions that can be answered to a large extent by the W3C HTML and CSS validators. However you have a nasty error in your HEAD section that makes it impossible for the CSS validator to scan your CSS.
3. Is there a better way to avoid the I.E. compatibility issue or is this the best way known to date?
The number one most important way is to have VALID html and VALID CSS.
Valid html is the first and most important thing you need to do. You should validate frequently and there are a number of browser add ons for firefox that make this easy and quick.
Empty elenments styled to clear floats are almost never necessary.
New pages should use STRICT document types, not transitional as you have. Get rid of this:
<?xml version="1.0" encoding="utf-8"?>
It is not necessary and you have it in the wrong spot. If you put it in the right spot it will break IE6. So lose it. You are not sending xhtml to anyone anyway. No matter what you think your server will only send slightly broken html to browsers.
Make your page strict and valid, and make sure it works as intended in standards compliant browsers. Then come on back and ask again how to fix it if it's still not right in IE. It will be much easier to fix then.
Sat, 2010-08-21 10:01
#2
ahh
thanks ed for the reply,
That is the same header that came packed into the phpBB bulletin board software that i'm editing.. so you think i should still take it out? What was the major issue you were talking about in my head tag that won't allow the css validator to work? the xml version="1.0" encoding="utf-8" ???
When you said:
"Empty elements styled to clear floats are almost never necessary."
are you referring to the <p class="clear" /> that i wrote? What would be a better method? I ask because I learned this method from Lynda.com and it seemed legit. But, if there is a better way to do it i'd like to learn.
thankyou for your knowledge 
http://oneillwebs.com/ ~ yes, my personal website built purely with tables which needs to be updated heavily
(before i knew anything!)
Sat, 2010-08-21 18:49
#3
oneeezy wrote: That is the
That is the same header that came packed into the phpBB bulletin board software that i'm editing.. so you think i should still take it out?
Well yes, it is completely unnecessary and even if put before the doctype where it belongs it then breaks IE6 and sends it back into "quirks" mode where it pretends to be IE5.
It would have been helpful for you to let us know you were working with a CMS type product in the first place, though, as I would likely have used slightly different wordings. Alas, these products often come with "skins" that are done by third parties and are often utter c**p. Just because you can code php and mysql does not mean that you understand how html works as, alas, all too many "designers" seem to believe.
What was the major issue you were talking about in my head tag that won't allow the css validator to work? the xml version="1.0" encoding="utf-8" ???
As I recall you have an invalid LINK tab. But if you use the validator it will flag all the errors and you can learn to fix it yourself, which is what you should do. You must start to check both your html and css frequently as you write it. It will save you endless toil and trouble.
We are not here to hold your hand, but to guide you towards good methods. If you can't figure out what the validator is telling you (and it can sometimes be obtuse) then ask about it here, but at least try to figure it out on your own first. We learn better when we think hard for ourselves, and if other people just tell us out of the blue we will likely forget what they say if we don't understand why their advice works.
When you said:
"Empty elements styled to clear floats are almost never necessary."
are you referring to the <p class="clear" /> that i wrote? What would be a better method? I ask because I learned this method from Lynda.com and it seemed legit. But, if there is a better way to do it i'd like to learn.
The preferred way is to make sure that the element that encloses the floated elements has "overflow:hidden" applied to it in the CSS, as explained at Gary Turner's site, which can also serve as a model of well written code. If that's what "Lynda.com" is telling you, you should avoid that site. Their home page, for example, could be used as an example of bad and wrong design and bad and wrong html coding. Not a good sign.
We generally recommend the "HTML Dog" tutorials as at least they do not set out to teach you wrong methods directly.
We have a links page here on the site that you should browse. These links have been vetted by experts and are less likely to mislead you than the vast sea of sites that might as well be purposly designed to teach bad coding practices. Not that we don't make mistakes though, so keep your critical eyes open even with our links.
Mon, 2010-08-23 05:07
#4
check it out.. got the html
check it out.. got the html all correct and changed it strict, html validated
now, when i tried to get my css corect i get this: css validater
It's saying that the text-shadow doesn't exist..., it exists in everything except I.E. (sigh...) but hopefully i.e. will catch up soon. But other then that does everything look pretty legit now?
Thanks for guiding me
http://oneillwebs.com/ ~ yes, my personal website built purely with tables which needs to be updated heavily
(before i knew anything!)
Mon, 2010-08-23 05:37
#5
oneeezy wrote: now, when i
now, when i tried to get my css corect i get this: css validater
It's saying that the text-shadow doesn't exist..., it exists in everything except I.E. (sigh...) but hopefully i.e. will catch up soon. But other then that does everything look pretty legit now?
Well, they are CSS3 rules and the validator is for CSS2 so of course it will throw errors. You can't use CSS3 and expect the same results cross browser because many of the most used browsers don't do CSS3, or only do part of CSS3.
This is not a problem if you can live with some slight differences, but if you can't you have to stick with CSS2 and even then there will still be cross browser differences, just smaller ones. I believe Firefox has full CSS3 support in the 4.0 release which is still in beta. I don't know if IE9 will support them but IE8 and before never will.