Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the biggest headaches you'll run into when designing web pages is the dreaded browser compatibility problems with your CSS. Your styles might look great in the latest version of Opera, but IE 7 might render your floats totally wrong. Keeping track of and knowing how to fix these compatibility errors is almost a full-time job in and of itself. That's why I'm a pretty big fan of the browser compatibility check in Dreamweaver. When you run the browser compatibility check on your page or pages, Dreamweaver checks your site structure and your CSS to see if any browser compatibility issues are going to come up.
Dreamweaver will even offer you advice on how to fix them. Even better, you can target specific browsers, so that you can limit the number of errors that it's checking to just test the browsers that you're targeting for your site. So I have the Index file open and I'm going to check out running a browser check on this page. There are couple of different places that you can do this, but one of the easiest is just to come up to your document toolbar and right here we have Check Browser Compatibility. Now, I'm going to grab that pull- down menu, and I want to go to my Settings right here. When I do that, notice that I can choose which browser I want to check against and the earliest version that I want to check for.
So with Internet Explorer, maybe I really don't care what's going on with the 5.0 versions, and truth to be told, I really don't. With Firefox, maybe you're going to check from versions 2.0 and up. For maybe Netscape, well, I am not going to check at all. Sorry, Netscape, I had to do it. For Opera, maybe you're going to check version 8 and above, and for Safari, maybe you're going to check 2 and above. All right! So I'm going to go ahead and click OK, and as soon as you do that, it's going to run a browser compatibility check whether you wanted to or not. So when you set those settings, just be prepared for this panel to open up. You'll notice that the Browser Compatibility panel is docked with the remainder of your Results panels.
You could also come to this panel directly and run the check from here. you don't have to do it from the document toolbar. Now, you're going to see a list of any errors that it found right over here on the left-hand side. On the right-hand side, it's going to give you a summary of that error. Now you might find something cryptic like this, Found 1 errors in main.css, but it doesn't tell me what that error is. Well that's because it found the error in an external file. main.css is a totally separate file, but you know what, that's where all my CSS is.
So I want to go find out what the problem is. I'm going to switch over up here in my related files to main.css, and I'm just going to run a browser compatibility check on this page as well. I can see that it has an unsupported value called Transparent and that's on line 384. So again, that's kind of nice. It shows you exactly where that is. If I scroll down to line 384, I can see that I've got the tourBadge and I'm setting the color for that to transparent. Now you'll notice that's really only affecting a lot of the older browsers, although Internet Explorer 7 and 8 apparently don't support that value as well.
Well what we have going on in that particular element is a transparent PNG file. So really that rule is just covering our bases anyways. So what I'm going to do is so that I don't have to keep dealing with this particular issue. I'm going to right-click this and I'm going to tell Dreamweaver from hence on to ignore that particular issue. So if you're running up against a bug that is showing up all the time, but you know isn't going to negatively affect your page, you can have Dreamweaver ignore it so that you don't have to constantly see that. I'm going to go back to Index, click the Source Code, and I'm going to run that browser compatibility check again. Okay, cool! We're not seeing the external error anymore, but we are seeing a couple of other errors.
Well, one of the problems here is Unscrollable Content Bug and Z-Index Bug. Now, what is up with that? Well again if you select the error, you'll get a summary of that error out to the right and it will tell you which browsers it's going to affect and what the likelihood is that, that error is going to cause you problems. In this case, Internet Explorer 6.0, it's very possible that this Unscrollable Content Bug is going to come up to bite us. Same thing for the Z-Index Bug. It's going to affect Internet Explorer 6.0 and 7.0 and the likelihood is very likely. Now, notice that both of these are line 11 and 12, so they're related.
If I take a closer look at my Code View, I can see that those two div tags actually have that green underline under them. If I hover it, Dreamweaver is letting me know which of those two errors is affecting those elements. Okay. So really what the problem is, is I think the header has a Z-Index property on it and that helps objects stack one on top of the other. Truth to be told, the header is the only positioned element on that part of the page, so I don't really need the Z-Index for that. So what I'm going to do is come over here and click in my header graphic, hold down my Alt key on the PC, Command+ Option on the Mac, and I'm just going to find the offending rule, and in this case there it is right there, #header and I can see that it has a Z-Index of 10.
I'm going to click on that. It's going to take me into Code View, and let me minimize that a little bit just to get it out of the way, and I'm just going to highlight the Z-Index rating, and I'm going to get rid of that. As a matter of fact, the main header above it, its position is relative, but the header, which is inside this one, really should be positioned relative to the wrapper. So I'm going to get rid of that as well. That rule really isn't doing me any good. Now, I'll do a Save All there, and I will come back to my browser compatibility check, click on my Source Code and run it again. Now, you can see those underlines go away, and that problem has been resolved. Great! There is one more problem and this is a Float Drop Problem.
Now, if the summary over here isn't enough information for you, you'll notice that there's a little blue link that says View Solution to the Float Drop Problem on Adobe.com. If you click on that, it's going to take you to Adobe's web site to something called the CSS Advisor. Adobe's CSS Advisor is a repository of information for different browser bugs and it's a really good place to go to learn a little bit more about making your CSS cross browser compatible. There's articles, forums, and specific bug information like we're seeing here.
Float Drop - floated elements drop below their expected position. We can see a problem. There is some solutions for them, detail descriptions, and even code examples to kind of help you work your way through those issues. So this is a really nice resource. There are even links here to other articles online that show you different tutorials and tips in dealing with some of these different problems. Now in reading up on this problem a little bit, it's typically triggered by longer unbroken characters that just can't fit within that width anymore.
So if I close my browser and go back into Design View and kind of go down into my footer, I see that I don't really have any text that's in any kind of danger of butting up against the edge of these columns. So I think for this one I'm safe. And really it's only going to affect Internet Explorer 6.0 and 7.0, so if I were going to do a fix for that, I'd probably pass-in a conditional statement that's only going to target those specific browsers. So I think we're okay. Now, one more thing before we move on, earlier we told Dreamweaver to ignore the Transparent value on the Color property.
Those types of exceptions are stored in an XML file named appropriately enough Exceptions.xml. From time to time you might want to turn those back on or even go in there and see which problems you've added to the exception list. It's really easy to do. You can simply right-click any issue that comes up, and you can say Edit Ignored Issues List. That's going to open up this Exceptions.xml file. There are some nice instructions in the form of comments here that tell you how to manually add code to instruct Dreamweaver to ignore certain values or properties.
You can see for example it says cssvalue property="color". It's going to ignore any problems with that. If you want to remove that it's easy enough. You can just delete it from the file, save the file and the next time you run your browser compatibility check, Dreamweaver will show those errors again. So there's an amazing amount of flexibility associated with the browser compatibility check. Now, this check is not going to pick up on every error or browser rendering issue. It also might not give you exactly the information you need to fix the problems that it finds.
It does, however, offer you the invaluable service of catching the majority of those issues and it's a great way of learning about some of those browser issues that you might otherwise have not known about.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.