Join Chris Converse for an in-depth discussion in this video Optimizing CSS for IE 7 and 8, part of Creating an Interactive Animated Timeline with jQuery.
Now in our CSS, we use some CSS3 properties that aren't going to work…inside of IE 7 and 8. So let's come over here to our project files.…Let's open up timelineie7_8.css in our text editor.…Let's come in here and let's redefine some of those properties.…And if you remember back to the HTML file. We added in an IE conditional statement to…target Internet Explorer if its under version 9.…And here we had a link to our IE 7 and 8. So let's come back here and let's add in…some rules to overwrite some of those properties.…
So first we're going to target the timeline navigation.…So we'll type .timeline nav. We're going to set the width here to 100%.…Next we're going to target the timeline nav a:first-child.…We're going to set border-left-width to four pixels.…
Next, we're going to set the Timeline Nav, a.selected, since we can use…semi-transparent colors. IE 7 and 8 don't support RGBA.…We're going to come in here and just set the color of the text to black, and the…background color to white. Next, we'll target the, labels inside of…
- Preparing the artwork
- Setting up the project files
- Creating the HTML containers
- Adding content into the HTML containers
- Styling the timeline with CSS
- Adding jQuery to your project
- Adjusting the layout with jQuery
- Adding navigation elements
- Animating the content based on navigation
- Adding autostart and screen size detection features
Skill Level Intermediate
1. Creating the Web Graphics and HTML Content
Adding content to the HTML3m 15s
2. Adding CSS Styles for Layout and Positioning
3. Finalizing Layout and Animating Panels with jQuery
Animating the background4m 24s
4. Making the Design Responsive
5. Adding an Autostart and Screen Size Detection
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.