Design Challenges

Div layers show up different in IE and Firefox

As Web designers, we must test our pages in multiple browsers to ensure that the design looks as intended for every user. Recently I have been using layers since they provide such usefulness and freedom of design. As well, they provide a way to increase search engine optimization, as they allow you to bring your text closer to the top of your code.

Layers are great, until recently when my layers where showing up approximately 20 pixels off in firefox versus Internet Explorer. I search deep and hard within my code at first and further on Google. My searches finally paid off as I came across a great forum which finally provided the right answer. In order to get your layers to display properly on both browsers, you must double up on your css. That is, you must specify different positions for both IE and Firefox. It is a pretty simple code change in your css file, you simply add the tag !important to the line meant for firefox. IE simply ignores this tag while firefox renders this it.


Happy layering – example below:

.floating-text{
position:absolute;
left:155px;
top:118px !important;
top:96px;
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
}