Hi! I'm having a slight problem. You see, this is my first webpage; I continued to edit it, 'till the layout looked somehow ok. The design was all based off viewing it from Google chrome. When I borrowed a friend of mines computer, I was greatly shocked... None of it was centered anymore... The browser he had was IE.
Could anyone care to explain, and if possible, help me with solving this probleme of mine? :)
Here's the test.css file:
@charset "utf-8";
/* CSS Document */
body {
background-color:#000;
font:"Arial Black", Gadget, sans-serif;
color:#0C0;
display:inline;
}
div.ex
{
padding:10px;
border:0px solid yellow;
width:640px;
margin:0px auto;
border-bottom:0px;
border-top:0px;
height:400px;
}
div.h
{
text-shadow:#CCC;
text-align:center;
width:640px;
padding:10px;
border:5px solid gray;
margin:0px auto;
}
div.big
{
width:1000px;
padding:10px;
border:0px dotted gray;
margin:0px auto;
}
div.m
{
text-shadow:#1003FF;
text-align:left;
width:140px;
height:400px;
padding:10px;
border:0px solid gray;
margin:0px auto;
position:absolute;
float:left;
}
div.m2
{
text-shadow:#CCC;
text-align:left;
width:140px;
height:400px;
padding:10px;
border:0px solid gray;
margin:0px auto;
float:right;
}
div.foo
{
text-shadow:#CCC;
text-align:center;
width:640px;
padding:10px;
border:0px solid gray;
margin:0px auto;
}
div.img
{
margin:2px;
border:0px solid #FFF;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}Thanks in addvance! :)