Hi,
I'm recently new to CSS, at least what formating layouts is concerned. At this moment I'm trying to make a site that will ask the use of CSS for layout.
The site is temporarly in http://www.knowatedge.com/albergue
I have a DIV tag that houses a layout slices made in fireworks. For now I'm only trying to center it on the browser but I get stucked with the differences between IE and Firefox (I use mostly the last one).
I tried to use this solution:
body
{
text-align: center;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}
but it doesn't work.
I made some experiments, and the result is this:
For Mozilla:
body {
background-image: url(images/fundo.gif);
text-align: center;
}
#apDiv1 {
width: 815px;
height: 945px;
margin: 0 auto;
top: 0px;
left: 0px;
z-index: 1;
}
For IE7:
body {
background-image: url(images/fundo.gif);
text-align: center;
}
div#apDiv1 {
position: absolute;
visibility: visible;
z-index: 1;
left: 0px;
top: 0px;
width: 100%;
text-align: center;
margin:0 auto;
}
I don't want to make two versions of the site, one for IE and other for FF.
Do you know of a way to bond these two codes, so that one version works for both browsers?
You can see both version by going to these adresses:
http://www.knowatedge.com/albergue/indexie.html -->For IE
http://www.knowatedge.com/albergue/indexff.html -->For FF
For both, CSS code was validated!
Thanks for your time!
<?xml version="1.0"
<?xml version="1.0" encoding="iso-8859-1"?>
Take that out. It puts IE in quirks (broken box model) mode, ie, it acts like IE5. Without it, both IE6+ and Firefox should behave the same.
Thanks Tyssen, it
Thanks Tyssen, it worked.
It's one of those things that i couldn't imagine... but I'm used to these sort of things on other programming stuff :blushing: