hello My website is looking good in firefox, opera, IE7 and lower, but in IE8 is in total chaos. Can You tell me how to fix this problem. Thank you
If you are using CSS then you will have to either add a seperate stylesheet, or add some hacks to your current one for it to look the same on IE. My suggestion is to add a seperate one and google a "if IE, then" code to put in your head. Then tweak the IE CSS stylesheet until it looks ok on IE.
Without seeing the website in question, nobody can tell you how to 'fix' the 'problem' Though: 1) IE8 is still in beta, if your page works right in all the other browsers you should NOT be fixing your page to work in it, you should be filing a bug report with Microsoft. That's what a BETA is for. (and then the same people hacking their pages to work will cry foul when the final comes out and nothing is fixed - RIGHT) 2) If it doesn't work in IE8 dimes to dollars you have outdated outmoded markup or a design that is a fat bloated accessability /FAIL/ - though that's a wild guess without actually seeing the site in question. 3) KB Studio's advice - don't take it. 99% of the time IE conditionals in the markup are a giant bloated /FAIL/ and rarely if ever actually neccessary. Bottom line... URL? Code samples? Pictures of what's wrong?
Ok, your site has the usual laundry list of 'issues' - some of them technical, some of them just outdated methodologies that were a bad idea a decade ago, and have no place today. First thing that stands out are all the vague numbered styles effectively used as if they were presentational markup. Pretty much ALL of that needs to get the axe and the question becomes which rubbish WYSIWYG did you have churn this out for you? (Don't worry, I call ALL WYSIWYG editors rubbish) Even IF you were designing the page using tables for layout there is NO reason for that page to be more than.... two tables total, so that's pretty much a bad sign before we even get into layout issues. Multiple redundant appearance declarations, presentational markup, px metric fonts on the content being an accessability /FAIL/ and as I've said about a great many sites at 127 validation errors you don't even have HTML, you have gibberish. The issues are truly clear if you look at the code to text ratio - you've got 33k of markup for only 7k of content - easily three or more times more HTML than should be needed for such a simple layout. I'd be throwing it out and starting over from scratch to even TRY to address any sort of cross browser issues.
deathshadow is correct. fyi, you can go to the Microsoft board and see my thread about the latest update to the IE8 trainwreck.
I'm curious as to why you think that there should not be more than 1 tables on that site? Is it because everything else should be done in CSS? The reason I am asking, is that I am getting ready to design my first site from scratch. I normally use the WYSIWYG crap Looking at that site, I probably would have had a lot more than 2 tables. I purchased a book from Amazon about designing from scratch, and I think it must have been written in the 70's. Do you have any recommendations of a good source to learn the basic layout principals. I 'm familiar with the ww3 school site but it assumes you know what you are doing before you start. Oh and Xpoker, I didn't mean to hijack your thread. There is a good chance that deathshadows' reply will help you too. Thanks, Zeek
I've found upwards of 99% of the books out there are outdated outmoded rubbish written like it was still 1997. In fact so far I've only seen one shining exception: Build Your Own Web Site The Right Way Using HTML & CSS by Ian Lloyd. Dan Schulz (you'll see him around these parts, he's also a mentor over at sitepoint) recommends the book to people starting out, and he's one of the few people I actually value the opinion of on this stuff (the apprentice has now become the master...). I thumbed through it at Barnes and Noble and it seemed to be a good place to start out on the right foot. The reason I said two tables even if using tables for layout is because there are only two major divisions - the three large columns and the little two column area in the sidebar... Though it now appears that the layout on the side has been completely changed in a manner that should take no tables at all - oh wait, the subpages are still the old layout. Here's some tips on using a table: If it's only going to have one TD, don't use a table, use a DIV. If it's only going to be one TD per TR, don't use a table, use a DIV. One of the common definitions of a table is an orderly arrangement of data into rows and columns. In markup, I expand that to say that if there isn't more than one column, don't use a table even if you are using tables for layout. an excellent example of table abuse can be seen on the best-poker-tools.html page of that site. This: <table width="580" border="0" align="center" cellspacing="10" bgcolor="#0099CC"> <tr> <h3><td width="577" height="21" class="style44"><div align="center"> TEXAS CALCULATEM </div></td></h3> </tr> <tr> <td height="202" valign="top" bgcolor="#FFFFFF" class="style21"><p align="center"> <!-- SuperPokerAffiliates Media --> <a href="http://www.superpokeraffiliates.com/_page?data=513878_130_3_458_MyRjSlcyWlBJU0tWaw%3D%3D"rel="nofollow" target="_top"><img src="http://www.superpokeraffiliates.com/_media?data=513878_130_3_458_MyRjSlcyWlBJU0tWaw==" alt="Best Poker Tools" width="468"height="60" border=0 rel="nofollow"></a> <!-- END SuperPokerAffiliates Media --> </p> <p align="center">TexasCalculatem is more than just a poker odds calculator, providing hand odds and pot odds on the table as you play. TexasCalculatem uses advanced mathematical algorithms to consider opponents, position, fold depth, pot odds giving you surprisingly good advices! It´s a very customizable poker tool.</p> <p align="center">Click on the banner to get your TexasCalculatem, one of the best poker tools for odds calculating.</p></td> </tr> </table> Code (markup): Is a prime example of using a table for no good reason, AND is invalid markup. You can't put a H3 AROUND a TD, the only thing that can come after a TR is a TD, TH or /TR Since that's a header that should probably just be a TH not a TD with a H3 Style44 and Style21 - surest sign of a wysiwyg and always begs the question "What the **** does that mean?" Vague meaningless classnames that don't tell you WHAT the element is ends up just as bad as using presentational markup. Just as in MODERN markup the tags should say what something is and not how it appears, likewise the classes and ID's should do the same thing. Fixed element heights - instantly made of /FAIL/ because elements should auto-adjust to the height of their content... especially since CONTENT should be formatted in a dynamic and not a fixed font. The only reason it's NOT a problem on this page is because a table is being abused and height on tables is treated as min-height. align="center" - declare it once on the wrapping element of the whole section instead of each and every time! Much less that's presentational markup, something that should have been abandoned a decade ago, and has had no real place in site design for five or so years now. If I was to write that exact same box, my markup would be: <div class="subSection"> <h2>TEXAS CALCULATEM</h2> <div class="content"> <a class="superPokerAffiliatesMedia" href="http://www.superpokeraffiliates.com/_page?data=513878_130_3_458_MyRjSlcyWlBJU0tWaw%3D%3D" rel="nofollow" > <img src="http://www.superpokeraffiliates.com/_media?data=513878_130_3_458_MyRjSlcyWlBJU0tWaw==" alt="Best Poker Tools" width="468" height="60" /> <!-- .superPokerAffiliatesMedia --></a> <p> TexasCalculatem is more than just a poker odds calculator, providing hand odds and pot odds on the table as you play. TexasCalculatem uses advanced mathematical algorithms to consider opponents, position, fold depth, pot odds giving you surprisingly good advice! It´s a very customizable poker tool. </p><p> Click on the banner to get your TexasCalculatem, one of the best poker tools for odds calculating. </p> <!-- .content --></div> <!-- .subsection --></div> Code (markup): Which is not only easier to read because of the formatting, it shaves about 200 bytes off the original, and would do so every time you make a box that looks like that on the page - which being that same style appearance comes up seven times on that page... It would need css to function, which would go something like this: .subSection { background:#09C; padding:0 10px 10px; text-align:center; } .subSection h2 { color:#FFF; padding:10px 0; font:bold 120%/120% arial,helvetica,sans-serif; } Code (markup): Which offsets our code savings except you'd only need that CSS ONCE for all seven of those boxes - meaning that for every one past the first we save bandwidth, and if you wanted to reskin all those boxes you only have to edit it in one place. In any case, as I've often said the problem was NOT tables for layout, it was people ABUSING tables by throwing them around every single element they come across... and the people who ended up bloating out pages throwing tables around everything often end up bloating out pages throwing DIV's at everything while still using presentational markup - net result zero actual improvement. Seriously, 90% of the coders out there doing non table layouts would have rewritten that table to use twice as many div and four times as many classes as I did above - for no good reason resulting in it being even more code, then made wild claims about it 'loading faster'. (More code NEVER loads faster!) Boils down to overthinking the solution to the simplest of problems. ... and for people just starting out it's not their fault - as the majority of books and websites on the subject are filled with that type of nonsense. You're just following bad examples.
Many thanks deathshadow.!! I really appreciate you taking the time to provide this detailed post. I'm sure others will certainly benefit from it as well. I will definatley get the book. I reckon not many people care or even realize about the inner workings of a web site. We all concentrate on "the Looks" Thanks again!! Zeek