...

View Full Version : Nested DIV tag problem in Firefox



Napalm
01-28-2007, 07:31 PM
I would like to kindly ask for help with a problem concerning nested DIV tag. The problem is that the result is correct in IE, but incorrect in Firefox.

This is the CSS file I use:

* {
margin: 0px;
padding: 0px;
}

body {
background: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

#container {
width: 770px;
margin: 0 auto;
}

#title {
width: 770px;
height: 200px;
background: #000000;
}

#logo {
width: 285px;
margin-left: 30px;
margin-top: 30px;
}

This is the code for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>SMX</title>
<link href="SMX_Black.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="title">
<div id="logo">
<a href="http://smx.wz.cz"><img src="SMX_transparent.gif" alt="SMX" width="225" height="140" border="0" longdesc="http://smx.wz.cz" /></a>
</div>
</div>
</div>
</body>
</html>

I expected that the contents of the "logo" div, which means one image, would have margins on the top and on the left, but it is the "title" div, which is a rectangle with black background, being shifted in Firefox. In IE and in Macromedia Dreamweaver design view, everything works well; you can see the strange behavior here: http://jiri666.wz.cz/Index.html

Thank you in advance for any suggestions.

_Aerospace_Eng_
01-28-2007, 07:45 PM
If the first element in the parent element has a top margin then the top margin is applied to the parent element so you should get rid of margins in #logo and use padding instead.

#logo {
width: 255px;
padding-left: 30px;
padding-top: 30px;
}

Napalm
01-29-2007, 05:39 AM
If the first element in the parent element has a top margin then the top margin is applied to the parent element so you should get rid of margins in #logo and use padding instead.

#logo {
width: 255px;
padding-left: 30px;
padding-top: 30px;
}

Thank you so much, I appreciate your quick and kind help a lot :) :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum