How do I build a simple web page that will act the same on Firefox and explorer

Question

What I am trying to achieve is build out of a

Background image which has some text (in a DIV?) on top of the image.

A smaller image (another DIV?)

and a small menu at the bottom (another DIV....?)

will be placed the same on Firefox and Explorer?!

I am playing around with it for sometime, never satisfied with the differences.

Here is a sketch of what i am trying to achieve

http://www.discocontinental.com/archive/question.html

(not the same size though..)

Can anyone please direct me to some info/tutorial

My situation is that the DIVs that I have are not set the same in the different browsers

Thanks!

Answer 1

Your best bet is to use the absolute positioning, as such i recommend you read the section on absolute positioning on the following page.

http://www.brugbart.com/References/102/ - Position

You may also want to use the z-index property, just remember to both set the z-index of the Basement and the first floor boxes.

Its not a problem to get a website to work cross-browser anymore, unless you support older and broken browsers, which can't be recommended.

Internet Explore 6 is an example of what not to support anymore, because it would simply require to much trickery.

Also remember to include a valid doctype, which will solve a lot of browser specific problems.

http://www.brugbart.com/Articles/4/ - The Importance of Doctypes

I also suggest you get rid of those deprecated elements such as <center> since they only make things more difficult in the long run, generally such elements are deprecated when better alternatives exists. The following article may be of interest:

http://www.brugbart.com/Articles/120/ - How to Center a Website

You should also stop using deprecated attributes, using them will only make it more difficult, one of the many benefits of CSS is that its easier to use and maintain your layout.

The below goes between the body tags:

-----StartCode-----

<div id="Basement">

<div id="Box01"></div>

<div id="Box03"></div>

<div id="Box02"></div>

</div>

-----CodeEnd-----

This is the embedded CSS, i recommend you use a external stylesheet instead. Anyway, this goes between the head tags.

-----StartCode-----

<style type="text/css">

#Basement {

  position: relative;

  width: 400px;

  height: 500px;

  background: url("BG.png") no-repeat;

}

#Box01 {

position: absolute;

top: 50px;

left: 200px;

background: url("BG-A.png") repeat top left;

width: 50px;

height: 50px;

}

#Box02 {

position: absolute;

top: 100px;

left: 100px;

background: url("BG-B.png") repeat top left;

width: 50px;

height: 50px;

}

#Box03 {

position: absolute;

top: 150px;

left: 200px;

background: url("BG-C.png") repeat top left;

width: 50px;

height: 50px;

}

</style>

-----CodeEnd-----