CSS Forum

**cfgcjm** · 12-04-2007, 11:20 PM

I'm new to using CSS (just leaving the table era) so excuse my naive sense of things. I'm trying to move an image vertically (via margin-top) in CSS and it's working in IE but not in firefox. I've tried padding-top and that won't work either. Below is my code for both the CSS and the HTML.

CSS

Code:

@charset "utf-8";
/* CSS Document */

body {
    margin:9px 9px 9px 9px;
    padding:0;
    background:white;
    }
    
#Errorbkg{
background-image:url('images/errorbkg.jpg');
width:570px;
height:170px;
padding:0px;
margin-top:10%;
margin-left:auto;
margin-right:auto;
vertical-align:middle;
}

#Erroricon{
background-image:url('images/erroricon.png');
width:103px;
height:97px;
margin-top:30px;
margin-left:23px;
}

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">
<title>Untitled Document</title>
<link href="error.css" rel="stylesheet" type="text/css">
</head>
<body>
     <div id="Errorbkg";>
          <div id="Erroricon";>
          </div>
     </div>
</body></html>

**Sydpix** · 12-04-2007, 11:45 PM

Try this. You had two errors in your HTML.

I used this <div id="Errorbkg" >

Instead of this <div id="Errorbkg";>

I added a comment to the area you will need to edit.

CSS

Code:

@charset "utf-8";
/* CSS Document */

body {
    margin:9px 9px 9px 9px;
    padding:0;
    background:white;
    }
    
#Errorbkg{
background-image:url('images/errorbkg.jpg');
width:570px;
height:170px;
padding:0px;
margin-top:2%;/* Increasing or Decreasing this % changes verticle alignment*/
margin-left:auto;
margin-right:auto;
vertical-align:middle;
}

#Erroricon{
background-image:url('images/erroricon.png');
width:103px;
height:97px;
margin-top:30px;
margin-left:23px;
}

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">
<title>Untitled Document</title>
<link href="error.css" rel="stylesheet" type="text/css">

</head>
<body>
     <div id="Errorbkg"> 
          <div id="Erroricon" >Your Image
          </div>
     </div>
</body>

</html>

**cfgcjm** · 12-05-2007, 12:20 AM

I made those changes but in firefox the image still wont move...any ideas?

**vangogh** · 12-05-2007, 12:40 AM

Is it errorbkg that's not moving?

Technically your html is empty of content. You're using css to add background images, but the divs themselves in the html have nothing inside them. That would give them a height of 0, which would also give your entire page a height of 0.

on errorbkg you have the margin-top set as 10%. 10% of 0 is still 0, which is what I think might be the problem.

Is this online? If so feel free to post a link. I find it easier to troubleshoot if I can see the page.

I'm not entirely sure the above is the problem, but it's easy enough to test by changing the margin-top of errorbkg to something absolute like px. If that gets the image to move down then it will probably also move down once you add more content to the page.

**cfgcjm** · 12-05-2007, 01:01 AM

Yes, that was my problem...I was trying to apply style effects to an object that wasn't really in the html. Sorry, i really didn't even think about that. So problem is solved.

**vangogh** · 12-05-2007, 01:18 AM

Glad to have helped. The only reason I guessed right is because I've done the same myself. Sometimes the obvious is the hardest thing to see.