Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question HTML and CSS image spacing problems in IE

    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).

    Code:
     
    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

    Code:
    <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.

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    start your css with
    Code:
    * {margin: 0; padding: 0; }
    Also make sure your page validates.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation more problems

    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
    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
    Code:
    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.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Kenoshi,
    When you start using a stricter DocType you will need to write your divs like this
    Code:
    <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:
    1. a DocType
    2. an element with a width
    3. that elements right and left margins set to auto


    Try it like this instead -
    Code:
    .oshell {
    width: 600px;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Kenoshi (05-17-2009)

  • #6
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cool Resolved

    Thank-you very much for your help everyone.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •