Forum Moderators: not2easy
I'm having some trouble getting padding to work in the following code, the padding for the 'artmain' division seems to work in IE but not in Firefox.
There is a 10px padding at the top which I think should leave a space between the top of the division and the actual content within the division.
If you have a look at these images you can see there is no gap in the Firefox browser:
code in FF : <> (no gap)
code in IE : <> (gap)
<!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=utf-8" />
<title>Untitled Document</title>
<!--CSS for Article Module-->
<style type="text/css">
.....
#artmain {
width: 683px;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
background-image:url(artmain_bg.gif);
background-repeat: repeat-y;
}
....
.pic_left {
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<!--Article Module Starts Here-->
<div id="articleindex">
<div id="artheadertitle">
<span class="mainheading">GTA IV Date Announced</span>
</div>
<div id="artheadertype"></div>
<div id="artmain">
<p align="justify">
<img class="pic_left" src="../gta_logo.jpg" height="100" width="100" />
After the disappointing delay of the game last autumn
Rockstar Games have finally announced a release date for the highly anticipated Grand Theft Auto IV. The game has apparently been completed and only testing and bug-fixing remain. Furthermore, there should shortly be lots of more info on the game as journalists are invited by Rockstar to play it for the first time. </p>
</div>
<div id="artfooter">
</div>
</div>
<!--Article Module Ends Here-->
</body>
</html>
Please let me know if I'm doing something wrong in my code. I've read that there is a 'quirks' mode in IE which means that it is actually interpreting the padding incorectly, is this the case here?
Either way if someone could provide a solution so this works in both browsers that would be great.
Thanks
Nick
EDIT: Removed irrelevant code
[edited by: SuzyUK at 8:55 am (utc) on Feb. 15, 2008]
[edit reason] no links to Screenshots, thanks [/edit]
I created a new division that acts as a buffer between the content in the artmain division and the blue header section. I gave this a height of 10px.
Then I removed the padding from the artmain division. This now creates a space that shows in both browsers.
#artbuffer {
float:left;
width:713px;
height:10px;
background-image:url(artmain_bg.gif)
}
<div id="artbuffer"></div>
<div id="artmain">
<p align="justify">
<img class="pic_left" src="../gta_logo.jpg" height="100" width="100" />
After the disappointing delay of the game last autumn
Rockstar Games have finally announced a release date for the highly anticipated Grand Theft Auto IV. The game has apparently been completed and only testing and bug-fixing remain. Furthermore, there should shortly be lots of more info on the game as journalists are invited by Rockstar to play it for the first time. </p>
</div>
This is my first post on this forum and I am maybe advanced beginner, so forgive me if I am totally wrong on this. I have learned that when you are specifying padding or margins that you need to do it in a certain order, top, right, bottom, left. I don't know if this is the issue with your padding or not.
SandyK
