...

View Full Version : HTML and CSS image spacing problems in IE



Kenoshi
05-14-2009, 10:09 PM
Hello, I am having a problem with a website I am trying to make in IE. The website renders exactly the way I want it to in FireFox but in Internet Explorer the the images are oddly spaced. I have the margins set to 0, the padding set to 0 and I have made sure that spaces are not the problem.

Here is my CSS code (sorry about the bad formatting of this post I am new to this website).



body
{
text-align:center;
background-color:black;
margin: 10 0 0 0;
}


div.oshell
{
position:absoulute;
bottom:100px;
top:20px;
width:600px;
align:center;
padding:0;
margin:0 auto;
text-align:left;
}

div.shell_top
{
padding:0;
margin: 0 0 0 0;
}



div.shell
{
position:absoulute;
width:600px;
background-color:#cccccc;
padding:0;
margin: 0 0 0 0;
}


div.banner
{
padding:0;
margin: 0 0 0 0;
}
img.banner
{
padding:0;
width:100%;
height:100px;
align:center;
margin: 0 0 0 0;
}


div.menu
{
padding:0;
margin: 0 0 0 0;
height:50;
}


img.menu
{
padding:0;
width:200;
height:50;
float:left;
margin: 0 0 0 0;
}


div.content
{
padding:0;
margin: 10 10 10 10;
}




div.footer
{
padding:0;
font-size:8px;
margin: 10 20 0 20;
}


div.shell_bottom
{
padding:0;
margin: 0 0 0 0;
}


and my HTML code looks like this



<html>
<head>
<link rel=stylesheet type="text/css" href="webpage.css">
<title>
Aaron Peddle
</title>
</head>


<body>
<div class=oshell>





<div class=shell_top>
<!-- TOP CURVY THING GOES HERE (OPTIONAL)--><img src=top.jpg>
</div>





<div class=shell>




<div class=banner>
<img src=banner.jpg class=banner>
</div>




<div class=menu><img src=button1.jpg class=menu><img src=button2.jpg class=menu><img src=button3.jpg class=menu></div>




<div class=content>
<!-------------PUT CONTENT IN THIS DIV------------->



</div>




<div class=footer>
<!--PUT FOOTER STUFF IN HERE-->
footer footer footer footer footer footer footer footer
</div>




</div>








<div class=shell_bottom>
<!-- BOTTOM CURVY THING GOES HERE (OPTIONAL)--><img src=bottom.jpg>
</div>




</div>


</body>
</html>


If anyone has any ideas on how to fix the code for a 'proper' render in IE, the would be greatly appreciated, I have been stumped on this thing for a while now.

twodayslate
05-15-2009, 05:11 AM
start your css with


* {margin: 0; padding: 0; }

Also make sure your page validates.

abduraooft
05-15-2009, 11:12 AM
Fix your document with a right DOCTYPE! (http://www.alistapart.com/articles/doctype)

Kenoshi
05-17-2009, 04:06 AM
okay, I validated my webpage, thanks for telling me about that I had never heard of it, but from validating I changed somethings to what it told me to and now my 'oshell' div is not centering properly in ff OR ie. In ff it is is aligned to the left. In ie it is aligned to the right.

here is the validated html code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" >
<link rel=stylesheet type="text/css" href="webpage.css">
<title>
Aaron Peddle
</title>
</head>


<body>
<div class=oshell>





<div class=shell_top>
<!-- TOP CURVY THING GOES HERE (OPTIONAL)--><img src="top.jpg" alt="&nbsp">
</div>





<div class=shell>




<div class=banner>
<img src=banner.jpg class=banner alt="banner">
</div>




<div class=menu><img src="button1.jpg" class=menu alt="button 1"><img src="button2.jpg" class=menu alt="button 2"><img src="button3.jpg" class=menu alt="button 3"></div>




<div class=content>
<!--PUT CONTENT IN THIS DIV-->



</div>




<div class=footer>
<!--PUT FOOTER STUFF IN HERE-->
footer footer footer footer footer footer footer footer
</div>




</div>








<div class=shell_bottom>
<!-- BOTTOM CURVY THING GOES HERE (OPTIONAL)--><img src="bottom.jpg" alt="&nbsp">
</div>




</div>


</body>
</html>


and here is the css


body
{
text-align:center;
background-color:black;
margin: 10px 0 0 0;
margin:0 auto;
}


div.oshell
{
position:absolute;
bottom:100px;
top:20px;
width:600px;
padding:0;
margin-left:auto;
margin-right:auto;
text-align:left;
}

div.shell_top
{
padding:0;
margin: 0 0 0 0;
}



div.shell
{
position:absolute;
width:600px;
background-color:#cccccc;
padding:0;
margin: 0 0 0 0;
}


div.banner
{
padding:0;
margin: 0 0 0 0;
}
img.banner
{
padding:0;
width:100%;
height:100px;
text-align:center;
margin: 0 0 0 0;
}


div.menu
{
padding:0;
margin: 0 0 0 0;
height:50px;
}


img.menu
{
padding:0;
width:200px;
height:50px;
float:left;
margin: 0 0 0 0;
}


div.content
{
padding:0;
margin: 10px 10px 10px 10px;
}




div.footer
{
padding:0;
font-size:8px;
margin: 10px 20px 0 20px;
}


div.shell_bottom
{
padding:0;
margin: 0 0 0 0;
}


Thanks.

Excavator
05-17-2009, 04:23 AM
Hello Kenoshi,
When you start using a stricter DocType you will need to write your divs like this
<body>
<div class="oshell">



For now though, the reason it's not centering is you've absolutely positioned it with a top and bottom coordinate.
To center an element you need 3 things:

a DocType
an element with a width
that elements right and left margins set to auto


Try it like this instead -

.oshell {
width: 600px;
margin: 0 auto;
padding: 0;
text-align: left;
}

Kenoshi
05-17-2009, 08:45 PM
:)Thank-you very much for your help everyone.:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum