Hi everyone, I have validated my CSS and HTML, and I am finding that in internet explorer 6, the page is breaking. Originally, the page was breaking in IE 7 as well, but I found a tip that if you have empty divs, you need to put empty comments ( <!-- --> ) in the div for it to render properly. Please look at http://www.victoriahf.ca/Visions2008/index.php Here's how it looks in IE6: And Here's how it looks in IE7 and Firefox, etc.... Can you tell me why the page is breaking in IE6, but works fine in IE7 and Firefox? Much appreciated, and reps to the correct solution! Thanks
Possibly something to do with your right_column_container width, which isn't as wide as the stuff it contains.. I don't know whether ie would have an issue with that, but we all know it's pretty picky. I'd ditch everything from the p_right_column and just stick in some plain text. If it sits properly in ie, remove the text and start adding the bits into the column bit by bit until you find the bit that's shifting it. It may just be a case of rewriting some of the internal divs for that bit. Also, just curiously, why do you have the 2500 pixel plus and negative margins and the bottom of the left and right columns? Nice looking site though!
The reason for the 2500 margin / -2500 padding is to have equal height columns. Read here: http://www.positioniseverything.net/articles/onetruelayout/equalheight Everything has been sliced to pixel accuracy. I don't have a problem in ie 7, or in firefox 2.x or firefox 3 in Windows, and Safari and Firefox in Mac. This seems to be an IE6 issue. Thank you for responding
Well... first the validation errors should be cleaned up (though much of that is the flash embed - there are better ways of putting flash in a page) - the 'top/bottom margin' trick for equal height columns is almost always a miserable /FAIL/ which is why faux-columns should have been used, your placement of comments could be causing IE6/earlier to mis-place your column AND could also trip the double render and dissapearing content bugs depending on where your floats are (move the comments BEFORE the close tags, not after), your menu's should probably be marked up as lists, you need to ease up on the number of div's, ID's and classes since you've got more of them than should be needed - likewise an axe should be taken to that clearing div since that **** is never neccessary, and I'd axe the scripts too since nothing I'm seeing there should be doing you the least bit of good apart from bloating out the page for no reason or annoying the user with slow animations just to load a frame (and turning accessability into **** in the process)... and get rid of that stupid malfing target attribute while you're at it. Basically you've got 4k of markup doing the job of 2k. There's really no good reason for your markup to be much more than: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Victoria Hospitals Foundation - Visions </title> <link type="text/css" rel="stylesheet" href="screen.css" media="screen, projection" /> </head><body> <!-- empty bold tags below are image sandbags, do not remove --> <div id="container"> <h1> <a href="index.php"> Visions <span>Victoria Hospitals Foundation</span> <b></b> </a> </h1> <div id="when"> Saturday November 15, 2008 <b></b> </div> <a href="/make.donation.htm" class="donate">Please Donate<b></b></a> <ul class="topMenu"> <li><a href="/">VICTORIA HOSPITALS FOUNDATION</a></li> <li><a href="tickets.php">TICKETS</a></li> <li><a href="contacts.php">CONTACTS</a></li> <li><a href="legal.php">LEGAL</a></li> </ul> <ul class="mainMenu"> <li><a href="#">About Visions</a></li> <li><a href="#">Auctions</a></li> <li><a href="#">Raffle</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Volunteers</a></li> <li><a href="#">Sponsors</a></li> </ul> <div id="content"> <img src="images/homepage_main.jpg" width="578px" height="431px" alt=" Visions 2008 - Join us for a gala evening to benefit the Victoria General Hospital Emergency Room " id="homePageMain" /> <!-- #content --></div> <div id="sideBar"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" type="application/x-shockwave-flash" data="swf/tickets.swf" width="220" height="144" > <param name="movie" value="swf/tickets.swf" /> <param name="quality" value="high" /> <a href="tickets.php"> <img src="images/tickets.png" id="ticket_button" width="220" height="144" alt="Tickets" /> </a> </object> <div id="visionsUpdate"> <h2> Visions Update <b></b> </h2> <div class="amount">$399,000</div> <!-- #visionsUpdate --></div> <!-- #sideBar --></div> <div id="footer"> Visions - In support of our hospitals <!-- #footer --></div> <!-- #container --></div> </body></html> Code (markup): Which actually has more CONTENT because you are absurdly image heavy without proper fallback text for much of it. (and no, alt doesn't cut it). Everything else would be in just the CSS. Oh, and I'd SERIOUSLY look at getting some CONTENT in your CONTENT area besides the image, because search engines are likely to reject this site as an empty page - or incorrectly list sidebar or header content. A page with no 'copy' (as in the print term - aka body text) is a miserable /FAIL/ no matter how fancy the graphics are.
Thank you for the great response! I will look into cleaning all of this up. I am a PHP programmer, and this is only my second stab at HTML. Cheers B
Oh, and by the way the scripts are there because the menu, which is presently a JPEG placeholder, will be replaced with a Scriptaculous driven menu. Cheers
Ok, found the problem, thank you. deathshadow, I'm not too concerned about the extra 2K of download time, even for people still using dial up. The method I used for equal column heights works fine in IE 6/7 & Firefox & Safari, so I'm happy there. This site does not require SEO as it is simply a microsite within another site and people will be directed there via a 75,000+ direct mail campaign. HOWEVER, Your points have been noted, and I will use them to better my HTML for future projects. Thanks
Well, in this case it's not so much about download time, as it is you've got TWICE the code you should have for such a simple layout. Less code there is, the less there is to break, less code to make typo's or have validation errors in, etc, etc. I'm still trying to figure out how that even HAPPENS - You're like the fifth or sixth person that's said that to me the past two months - 99.99% of software written in PHP is used to output HTML or to receive input from it - learning php before HTML is a bit like putting the cart before the horse. Is there a reason you want a fat bloated slow and annoying menu script that turns an otherwise decent site into an accessability nightmare and a maintennance headache?
To add to that: unless you need some fancy fade-in-fade-out semi-transparent glowing-like-ectoplasm menu dropdowns, the only JS (or any scripts) you should have in a menu is possibly JS for IE6 to deal with its retardation problem with :hover. And if you DID want the fancy ectoplasm flying-around lighting-up-slowly menu items, it should never be necessary for the basic functioning of the menu itself-- it should sit on top, make the menu goofy and pretty for those with JS enabled browsers, while otherwise being a decent menu for the rest of us (and therefore the blind, those with older browsers, those browsing with their too-hip-to-be-cool mobile phones and pda's and crack-berries, those behind corporate firewalls who are required to block foreign/unrecognised scripts, and of course, for sites that DO care about SEO, teh googlies). Funny, even though SEO itself isn't important for this particular page, writing your site with SEO in mind ends up making your site simply more accessible and usable almost by default, as teh googles are like the most retarded, delayed and crippled users you'll have regularly visiting your site. If teh googles can make sense of a page and use it fully and get all the needed content out of it, then chances are anyone with any set of abilities using any User Agent should also be able to (within reason). Coding issues aside, from the images you've posted, if only IE6 is dropping the sidebar, you simply have float drop (google it). Cleaning up code will not fix this problem in and of itself-- it's part of an IE6 bug (or, a strange way of doing things).
You might try adding something like <!--[if lte IE 6]> <link rel="" href="" type="text/css" media="screen" /> <![endif]--> for example?
Using conditional comments for CSS is usually a miserable /FAIL/ since 99.99% of the time the only 'hacks' needed are tripping haslayout, fixing the double margin on floats with display:inline, and a whole host of other things that can just as easily be done without making invalid CSS or a separate stylesheet. The only time I would advocate using CC's for CSS would be instead of the two or three things you would normally put in a * html hack... Like faking min/max width and height. Adding stuff to the HTML that could just as easily be handled cross-browser in the CSS is always a miserable /FAIL/. I really shake my head going "What the blue blazes are they doing" when I see CC's for every version of IE on layouts that are so piss simple it shouldn't even need IE specific hacks. (see 99% of wordpress, joomla and other off the shelf CSS templates)
^ I'd say it's due to the confusion caused by MS when they tell people that they prefer that people use CC's "in place of hacks." MS doesn't like people using * html. I prefer it because I'd rather any extra garbage sit in the CSS and not the HTML. Adding display: inline to a double-margin'd float is less code than adding all the [!if IE...] stuff. But if you've never heard of that trick, you'd just follow what the good folks of Redmond recommend, right? Cause it's for our own good, right? ^_^
Being that when I install windows I rip out the telnet server, messenger, outlook, I use XP x64 because it's one of the few modern windows to not include WGA (despite my legally owning it), and turn off every goofy graphical option except cleartype and set the bullshit theme back down to windows classic... Let's just say I don't take a lot of advice from the Evergreen State - pretty much given their treatment of 'standards' doing anything how THEY say to do it is just asking for /FAIL/ so far as the internet is concerned. It's like the joke about how someone who has worked professionally in the field of networking for more than a decade could never pass the MSCE test because the networking portion has NOTHING to do with how ANY of it actually works.
I avoid Redmond's dark ways almost entirely... and now that I'm getting the new laptop, Windlows will be virtualised away : ) Might get some driver issues (JAWS and MAGic run on USB for me), and I dunno about IE8... but my soul, it feels cleaner. Or I'm just a dirty hippy on riding in on those open sores : )