Posts Tagged “css”

My most recent title on Lynda.com is about creating search engine friendly sites. In the title, I demonstrate how to optimize sites that contain heavy amounts of Flash content. I’ve written about Flash SEO here, as well as on InsideRIA, and also wrote a book called Search Engine Optimization for Flash (for those of you who want detailed info on Flash SEO).

One issue in my Lynda title is that the examples worked in Safari and not FireFox (I fixed that by the way, and the new files/movies should be on the Lynda site now, or very soon). The problem actually had nothing to do with Flash- it was a FireFox issue regarding the way the browser handles CSS percentages. Because of the issue, FireFox was not rendering the Flash content or the alternate content I set up. Not cool.

Here’s the solution- FireFox needs to have percentages setup for every parent element of the element that is to use CSS percentages. So if <div id=”flashContent”> is inside of <div id=”someOtherDiv”>, and you want the flashContent div to take up 100% of the browser window, you have to set someOtherDiv to be 100% as well, along with the element(s) that div is in (maybe just the body tag, for example), and the html tag. Here’s an example of the CSS rule you’d need to use:

html,body,div#someOtherDiv,div#flashContent {
width:100%;
height:100%;
}

So remember, when you’re using percentages for an element in CSS, always also use percentages for each of that elements parents, all the way up through the html tag.

Last week, I decided to update our website design, due to a complaint from someone who couldn’t view it in Internet Explorer. If you’re into web design, chances are Internet Explorer has caused more than a few headaches. At least it has for me. Aside from making our new site less busy and cranking up the sexiness to 11, my main goal was creating a site that actually worked in Internet Explorer, even though I hate IE with all my soul.

So, as expected, I ran into an annoying problem. When I tried to style the rollover buttons on our new site (see the navigation links at the top right of the redesigned site for an example) to have no background color until rolled over, they worked great in Safari and Firefox on Mac and PC, but didn’t work at all in IE. Nice! After trying many different solutions, and getting to a point of insanity searching for an answer, I finally found it on the Microsoft Developer Network site.

Here’s what I learned- in Internet Explorer, in order to have a CSS background change when you roll over a link (using the a:hover pseudo selector), you also need to set the background property of the link when you’re not rolling over. So, the a tag needs to have a background color or background image, if you want to have a background color or image for a:hover. That’s it! What I ended up doing is creating a 1 x 1 pixel transparent .png file, and one that was a white pixel. While that may not be the best solution, since you have to wait for the white pixel image to load the first time you roll over, it works for now, and I’m happy.