Looking to place a small 25px - 25px image at the end of a line of text? Using a DIV (re1DOC) to position the element can make it easier. However, the issue arises when the element displays correctly in IE & Chrome, but not in Firefox. The text shifts slightly, and the div loses its intended position. I've ensured my HTML & CSS are validated with no issues. (The width, height, & background color attributes might not be necessary in my CSS, but they aided in setting it up and will be removed before publishing.)
The HTML:
<!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>Restless Earth</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
</style>
<link href="CSS/RE.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="REbackground"> </div>
<div id="wordbox"> </div>
<div id="textwrapper">
<p> The position of Earth’s continents has changed over time with some landmasses colliding into one another and others moving apart. This shifting process is known as continental drift.</p>
<div id="world"> <img src="images/gcse images/platemovementIMG.gif" width="400" height="210" alt="plate movement"/></div>
<p> The evidence that supports continental drift includes: the jigsaw-fit of many of the land masses, the geological and fossil finds that are the same in different continents and the scientific measurments taken more recently that prove land masses are moving toward, away and alongside eachother. Continental drift is caused by convectional cell movement in the mantle.The position of Earth’s continents has changed over time with some landmasses colliding into one another and others moving apart. </p>
This shifting process is known as continental drift. The evidence that supports continental drift includes: the jigsaw-fit of many of the land masses, the geological and fossil finds that are the same in different continents and the scientific measurments taken more recently that prove land masses are moving toward, away and alongside eachother. Continental drift is caused by convectional cell movement in the mantle.The position of Earth’s continents has changed over time with some landmasses colliding into one another and others moving apart. This shifting process is known as continental drift. The evidence that supports continental drift includes: the jigsaw-fit of many of the land masses, the geological and fossil finds that are the same in different continents and the scientific measurments taken more recently that prove land masses are moving toward, away and alongside eachother. Continental drift is caused by convectional cell movement in the mantle.The position of Earth’s continents has changed over time with some landmasses colliding into one another and others moving apart. This shifting process is known as continental drift. The evidence that supports continental drift includes: the jigsaw-fit of many of the land masses, the geological and fossil finds that are the same in different continents and the scientific measurments taken more recently that prove land masses are moving toward, away and alongside eachother. Continental drift is caused by convectional cell movement in the mantle.<div id="re1DOC"><a href="documents/gcse/REspec.docx"><img src="images/DOC.png" width="25" height="25" alt="download" /></a>
</div>
</div>
</body>
</html>
The CSS:
#REbackground {
height: 100%;
width: 100%;
min-width: 400px;
background-color: #F33;
position: fixed;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
color: #F00;
background-image: url(../images/gcse%20images/eruption1.jpg);
}
#textwrapper {
height: 4000px;
width: 1100px;
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
background-color: #00F;
}
#world {
float: left;
position: relative;
padding: 5px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
background-color: #F00;;
width: 400px;
height: 210px;
}
#re1DOC {
position: relative;
left: 400px;
bottom: 50px;
background-color: #0F0;
width:25px;
height: 25px;
}