| 20 | | |
|---|
| | 20 | |
|---|
| | 21 | = FAQ = |
|---|
| | 22 | |
|---|
| | 23 | == How do I get elements to show up consistently in all browsers? == |
|---|
| | 24 | |
|---|
| | 25 | HTML layouts across browsers can be a complex topic. With the UABgrid theme we generally target IE6&7, FF1.5-2.x, Safari/Konqueror. Viewing your code in all three of these browsers is a good way to discover subtle errors in your div layout and CSS. By far, the bug-a-boos come from the CSS and using careless choices, stray data, or false assumptions about the impact of various CSS commands. |
|---|
| | 26 | |
|---|
| | 27 | If you are having a problem with the layout of a section of the page, one of the best ways to get it working is to isolate your code. This is standard programming practice. We don't think twice about isolating our functions and then doing test executions with differnet data until we get it right. Then we move our function back into place and can trust its operation. If the resulting computations still come out wrong, we can be confident that the error is occurring outside the context of the function. Other bad data my be corrupting our input data or we have code elsewhere that is breaking the code in our function of interest. This latter problem is often a problem in interpreted languages (like HTML) where we can't see the effects till run-time. That is, there is no compiler to tell us we're doing something wrong, the error just shows up in the output. When we think of our web pages in the same way as our coding environments then the solutions are pretty simple, even if the tool chain is somewhat more primitive. |
|---|
| | 28 | |
|---|
| | 29 | As an example, let's say we're trying to build a rounded corner background to a text box and we think we have it working but when we look at the page in multiple browsers the bottom of the text area doesn't have the corner images and the containing div background lining up correctly. The problem is either going to be dangling divs in the area we working on, incorrect CSS directives, or something elsewhere on the page. We need to isolate the code just like we do when programming. The browser is the execution environment that takes the function (our HTML) and feeds in data (the CSS) to render an image in the browser. By isolating the code you can test it and the data and see where there error comes from. Once this is working in all execution environments (interpreters a.k.a. browsers) you can move it into place in the full script (entire HTML page). If it messes up after you put it in place then the bug is likely in the HTML or CSS (functions or data) external to the function of interest. |
|---|
| | 30 | |
|---|
| | 31 | You isolate your code by taking the HTML of interest and putting it in it's own page, take the CSS of interest and put it in its own page. Then run the two together. Doing this is a whole lot easier if clean development practices have been followed, ie. you've got relative links to images and css so you can re-root (duplicated and re-locate) page elements with ease. If you haven't been doing that, this also becomes an opportunity to clean up your code. ;) |
|---|
| | 32 | |
|---|
