Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,800 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Building a CSS-friendly workspace in Dreamweaver
- Creating style sheets visually
- Hand-coding styles
- Working with code hinting
- Organizing style sheets with color coding and sections
- Writing global classes
- Eliminating style conflicts
- Deploying styles
- Dealing with browser compatibility issues
Skill Level Intermediate
Before deploying your styles, you need to make sure that they work properly across multiple browsers. Although there is no substitute for actually testing your pages in the browsers themselves, Dreamweaver has a browser Compatibility Check feature that can often find problems in your CSS that you might otherwise miss. This feature also allows you to target specific browsers, allowing you to check your pages against browsers you might not have installed on your system. So here I have the index file open from the 04_05. And I am just going to go ahead and run a browser compatibility check.
You can find that right up here in your Document toolbar. And before I run it, I am going to check on my settings. Now your settings allow you to determine which browsers you want to check against. I am not going to worry about Internet Explorer for Macintosh. And I am not going to worry about Netscape too much either. And notice for other browsers, you determine which version you want to start checking with and then kind of go out from there. So I am going to go ahead and click OK. As soon as I do this it's going to go ahead and run the check for me. And I get to see the results down here in the Browser Compatibility panel. Now I could also just go ahead and go over here and say, Check browser Compatibility.
And I could just hit the play button in this panel, as well; it would give me the same results. Okay, so problems here. It found one error in main.css. Before I move on, I really want to figure out what's going on there. So I am going to switch over, up here in my related files, to main.css, and I'll just switch to Code View, so I can really see what's happening here. Now you can check for browser Compatibility if you're on a HTML file, or if you are on a CSS file. And sometimes you are going to find more information by checking just the styles. So this really isn't a bad idea.
I am going to come in and run another browser Compatibility check. Here I find some specific issues. On line 459, I have an unsupported value called transparent. I don't know about that. Let's go and see. So I am go down to line 459, and sure enough, right there is color transparent. Now transparent is not a proper value for the color property. It is, for background color, but not foreground color. So this particular property actually won't do anything in any of the browsers, so I am just going to go and get rid of that, so I can avoid causing any type of confusion in certain browsers.
Now it's also telling me that on line 1,045, it had trouble parsing the styles. Now that could be a real trouble. So I am going to scroll down to line 1,045. Here we go. And that really looks - hey, look at that. We have got two semicolons in a row here. That's really weird. So I am going to get rid of the extra semicolon. And then I need a semicolon here, so I am going to go ahead and add one here. All right, so that was just a syntax error. It happens when you're typing your CSS. You are going to leave things off, and it's nice to know that Dreamweaver can catch that for you so easily.
I am going to go ahead and save this file. And I'm just going to run the browser Compatibility check one more time. And now no errors come up, good. So we know that at least the external style sheet, from that standpoint, is looking pretty good. I am going to go back to my source code for index.css, and it really doesn't matter whether you're in Code View or Design View, to be quite honest with you. I am going to go right back up and do a Browser Compatibility check again. Okay, so I am not seeing those issues with my external style sheet anymore, but I am seeing something called a Float Drop Problem.
Now what's really cool about this panel is if you notice on the right-hand side it says if a container, including the browser window itself, is not wide enough to accommodate both a float with a specified width and any content with a specific width that follows it, the content after the float will drop below the float rather than wrapping around it. Essentially what's that's trying to say is if the content inside of a float is going to be wider than the float itself, then it's going to cause column drop, or it's going to cause some elements to drop underneath it. That could be a real problem. But I want to know who Dreamweaver thinks it's a problem for? So I am going to look on line 93.
I am going to switch to Source Code. And I am going to scroll down to line 93. And by the way, you can double-click on these. It will take you right to that spot. So it's thinking that my footer is the problem. Well, you know, really, honestly, the footer, it's got these 3 columns 1, 2 and 3. Their width is equal to the width of the footer itself. So what the Dreamweaver is trying to tell me is like, hey, you know, if you put something inside here, this is going to be wider than that. It's going to drop the columns. You didn't know that, right? So it's not always an emergency; sometimes it's just saying, hey, you might want to take a look at this. Now if you do have a real bug, you can click on this View solutions right here, and it's going to take you to Adobe's Web site, to the CSS Advisor, which is sort of an aggregate of all these bugs and issues that come up.
So it's a really nice place to kind of go just check out and read about some browser compatibility issues, and try to find some solutions for it. Now this particular problem doesn't have any type of hacks or solutions that we can use other than the just-don't-do- it solution, but to be honest with you, I know that my footer is going to stay exactly the way it is. I am not going to put any extraneous content in there. And so in this case, it's nice for Dreamweaver to give me a warning about it, but it's really not something I need to be concerned with. So if you're tired of getting messages like this, and I am just going to go back into Dreamweaver here, I can go right over here to the Float Drop problem and right-click and say, you know what, go ahead and ignore that particular issue.
And what it will do is whenever you run a browser Compatibility check, from that moment forward, it will not report back on that problem. It just ignores it. Now from time to time, if you move from one site to another, you might want to turn it back on, because you might want to really see if that is an issue. So I can go right back here to my Browser Compatibility. I can click on this little play button and I can say, Edit Ignored Issues List. When I click on that, it's actually going to open up an Excel Spreadsheet, and it's going to show me any of the conditions that I told it to ignore.
If I wanted to go back to actually reporting on those, all I have to do is delete the issue tag, save the file, and now the next time I check, it will actually go in and check for that specific issue. Now I do want to mention that the Browser Commendably check is not going to pick up on every single error or browser rendering error on your page. And it sometimes is not really going to offer you the specific advice you need in order to fix the problems that it does find. It does, however, do a really great job of picking up on errors and problems within your code that you might have missed, especially when targeting older browsers, or browsers on systems other than the ones installed on your own.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.