Ajax Web development and Java client programs

Reduce cross-browser testing issues

By Swati Dhingra

TheServerSide.com

We have already discussed the basic cross-browser compatibility guiding principles to follow in the HTML coding stage, but there are still many specific problems which Web designers often face. Here are some more tips and tricks to help reduce needless work during the cross-browser testing cycle.

CSS related issues with inline elements

Let’s say you want to create a button that looks like:

Initial code

In order to have this button pasted below is the initial code:

<style type ="text/css">
a.buttonlink
{
border:1px solid #99000;
padding: 3px;
}
</style>
<table><tr><td>
<a class="buttonlink" href="">
<img src="testme.jpg" border="0"/></a>
</td></tr></table>
</body>

In the above code there is an anchor link wrapping around an image.

In IE 6.0 and 7.0 the top border is missing:

In Firefox 3.0 the border is missing altogether:

Solution

An anchor (<a>) tag is an inline element. The above problem is caused by different browsers interpreting the application of padding to an inline element differently. The solution to the problem is to float the element.

If we float the anchor (<a>) tag like so:

<style type ="text/css">
a.buttonlink
{
border:1px solid #99000;
padding: 3px;
float:left;
}
</style>
<table><tr><td>
<a class="buttonlink" href="">
<img src="testme.jpg" border="0"/></a>
</td></tr></table>
</body>

Then it behaves like a block element.

Here is how it looks finally in all the browsers:

Margin Consistency on floats across different browsers.

Let’s say you want to create a grid layout using CSS. In order to create CSS layouts you would float div's one after the other. For example:

#firstpane
{
     float:right;
     width: 600px;
     margin-right: 5px;

#secondpane
{
     float:right;
     width: 200px;
}

This is how it should look in a browser:

However, in IE it renders as follows:

In IE the width of the margin is doubled, which means that the element on the left will have that margin stretched out to 10px, which in turn will break the layout.

Solution

To fix it, you just need to put "display:inline;" on your layout divs.

 

#firstpane
 {
     float:right;
     width: 600px;
     margin-right: 5px;
     display:inline;
}

#secondpane
{
     float:right;
     width: 200px;
     display:inline;
}

This fix only affects margins on the same side as the float, but it can still be useful because you never know when there is a need to use the margin on the float side. This is IE specific and will not affect any other browser, hence it can be used safely.

Expanding box problem

Let's say you have a standard layout, with floats placed one after the other, with predefined widths. If an image or long string of text is longer than this width, the layout will break in IE6.

Consider the following code:

#firstpane
{
     float:left;
     width: 600px;
     margin-right: 5px;
     display:inline;

#secondpane
{
     float:left;
     width: 200px;
     display:inline;
}
 

This is how it should appear in a browser:

But, in IE6, it appears as follows:

Solution

Use the overflow property to avoid this. If you place "overflow:hidden;" into the layout divs, the layout won't break in IE6.

The code will look like this:

#firstpane
{
     float:left;
     width: 600px;
     margin-right: 5px;
     display:inline;
     overflow:hidden;
}

#secondpane
{
     float:left;
     width: 200px;
     display:inline;
     overflow:hidden;
}

It is unlikely that you'll have a string long enough to break you're layout, but the probability cannot be omitted altogether. You could also use "word-wrap:break-word;" (only for IE ), but that won’t affect images.

20 Jul 2011

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.