Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 579
  • Last Modified:

Why the difference between FF and IE ??

Hi

I have a DIV which holds child DIV's.
In FF the DIV's are placed nicely with a small gap of 2px. The same page, same CSS in IE7 looks terrible, the gap is more likely 20px ??

Why the difference - anyone who can help me fix it ??

See attached screencaps

The "Children" are styled "scanner_portlet" and are placed in "content"

Cheers,
Mark
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
 
* {
	margin: 0;
	padding: 0;
}
 
body {
	margin: 0px;
	background: #002F43 url(images/bg01.jpg) repeat-x;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #B9B9B9;
}
 
h1, h2, h3 {
	margin-bottom: 1.5em;
}
 
h1 {
	font-size: 2em;
}
 
h2 {
	font-size: 1.4em;
}
 
h3 {
	font-size: 1em;
}
 
p, ul, ol {
	margin-bottom: 1.5em;
	line-height: 180%;
}
 
ul, ol {
	margin-left: 3em;
}
 
blockquote {
	margin-left: 3em;
	margin-right: 3em;
}
 
a {
	color: #8AC800;
}
 
a:hover {
	text-decoration: none;
}
 
strong {
	color: #D7D7D7;
}
 
img.left {
	float: left;
	margin: 5px 25px 0px 0px;
}
 
img.right {
	float: right;
	margin: 5px 0px 0px 25px;
}
 
/* Background */
 
#bg1 {
	background: url(images/bg02.jpg) no-repeat center top;
}
 
#bg2 {
	background: url(images/bg03.jpg) no-repeat center top;
}
 
#bg3 {
	background: url(images/bg04.jpg) repeat-y center top;
}
 
#bg4 {
	background: url(images/bg05.jpg) no-repeat center top;
}
 
#bg5 {
	background: url(images/bg06.jpg) no-repeat center bottom;
}
 
/* Header */
 
#header {
	width: 900px;
	height: 145px;
	margin: 0px auto;
	text-transform: lowercase;
	color: #FFFFFF;
}
 
#header h1 {
	float: left;
	margin: 0px;
	padding: 70px 0px 0px 25px;
	font-size: 40px;
}
 
#header h1 sup {
	font-weight: normal;
}
 
#header h2 {
	float: right;
	margin: 0px;
	padding: 95px 25px 0px 0px;
	font-size: 14px;
}
 
#header a {
	text-decoration: none;
	color: #FFFFFF;
}
 
/* Header2 */
 
#header2 {
	width: 900px;
	height: 88px;
	margin: 0px auto;
}
 
/* Menu */
 
#menu {
	float: left;
}
 
#menu ul {
	margin: 0px;
	padding: 34px 0px 0px 0px;
	list-style: none;
	text-transform: lowercase;
}
 
#menu li {
	float: left;
}
 
#menu a {
	padding-left: 50px;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
}
 
/* Search */
 
#search {
	float: right;
}
 
#search form {
	margin: 0px;
	padding: 35px 80px 0px 0px;
}
 
#search fieldset {
	margin: 0px;
	padding: 0px;
	border: none;
}
 
#search input.text {
	width: 160px;
	background: none;
	border: none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #AEC38B;
}
 
#search input.button {
	display: none;
}
 
/* Page */
 
#page {
	width: 846px;
	margin: 0px auto;
	padding: 40px 0px 0px 0px;
}
 
/* Content */
 
#content {
	float: left;
	width: 850px;
}
 
.post {
}
 
.post .title {
	height: 49px;
	background: url(images/img02.gif) no-repeat;
}
 
.post .title h2 {
	float: left;
	padding: 12px 0px 0px 24px;
	font-size: 24px;
	text-transform: lowercase;
}
 
.post .title h2 a {
	text-decoration: none;
	color: #FFFFFF;
}
 
.post .title h2 a:hover {
	color: #8AC800;
}
 
.post .title p {
	float: right;
	padding: 12px 24px 0px 0px;
	font-size: 15px;
	font-weight: bold;
	color: #343434;
}
 
.post .entry {
	padding: 30px 23px 0px 23px;
}
 
.post .meta {
	height: 70px;
	clear: left;
	margin: 0px 23px;
	padding: 15px 0px 0px 0px;
	border-top: 1px solid #262626;
}
 
.post .meta .credit {
	float: left;
}
 
.post .meta .links {
	float: right;
}
 
.post .meta .links .more {
	padding-left: 17px;
	background: url(images/img05.gif) no-repeat left center;
}
 
.post .meta .links .comments {
	padding-left: 19px;
	background: url(images/img04.gif) no-repeat left center;
}
 
/* Sidebar */
 
#sidebar {
	float: right;
	width: 436px;
}
 
#sidebar ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
 
#sidebar li {
	background: url(images/img03.gif) no-repeat;
	padding: 0px 23px 20px 23px;
}
 
#sidebar li ul {
}
 
#sidebar li li {
	padding: 8px 0px;
	background: none;
	border-bottom: 1px solid #262626;
}
 
#sidebar h2 {
	margin: 0px;
	padding: 16px 0px 30px 0px;
	text-transform: lowercase;
	font-size: 14px;
	color: #FFFFFF;
}
 
/* Footer */
 
#footer {
}
 
#footer p {
	margin: 0px;
	padding: 20px 0px;
	text-align: center;
	text-transform: lowercase;
	color: #566D77;
}
 
#footer a {
	color: #8097A1;
}
#scanner_div {
	width:230px;
 
}
 
.scanner_portlet {
	width:160px;
	height:40px;
	background-image:url('images/scanner_portlet_background.png');
	margin: 3px 3px 0px 0px;
	position:relative;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	font-size:10px;
	overflow:visible;
	padding-left: 25px;
	float:left;
	border: dotted #000000 2px;
}
 
.scanner_portlet_look {
	width:160px;
	height:40px;
	background-image:url('images/scanner_portlet_background.png');
	margin: 3px 3px 0px 0px;
	position:relative;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	font-size:10px;
	overflow:visible;
	padding-left: 25px;
	float:left;
	border: dotted #CC6600 2px;
}
 
.scanner_portlet_opdateret {
	font-style:italic;
	color:#CCCCCC;	
}

Open in new window

css-ff.jpg
css-IE.jpg
0
trg_dk
Asked:
trg_dk
  • 7
  • 4
  • 3
1 Solution
 
myderrickCommented:

1. Add margin:0; to the "content"

2. You can not use position relative and float at the same time. They are all position elements

remove one -- preferrably postion : relative....

Recheck and let us see what happens and let us know.

MD
.scanner_portlet {
	width:160px;
	height:40px;
	background-image:url('images/scanner_portlet_background.png');
	margin: 3px 3px 0px 0px;
	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	font-size:10px;
	overflow:visible;
	padding-left: 25px;
	float:left;
	border: dotted #000000 2px;
}

Open in new window

0
 
trg_dkAuthor Commented:
>myderrick:
I removed relative and added margin:0> but with the same result !

Any ideas ??
0
 
myderrickCommented:
What does this do? Is it wrapping the content DIV?
#page {
      width: 846px;
      margin: 0px auto;
      padding: 40px 0px 0px 0px;
}
Is the site live?

MD
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
trg_dkAuthor Commented:
Honestly I got the template from some free css layout site - so I dont know

Guess it could be messing things up !?

No the site is on a closed server (intranet)

Thanks,
Mark
0
 
trg_dkAuthor Commented:

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
 
* {
	margin: 0;
	padding: 0;
}
 
body {
	margin: 0px;
	background: #002F43 url(images/bg01.jpg) repeat-x;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #B9B9B9;
}
 
h1, h2, h3 {
	margin-bottom: 1.5em;
}
 
h1 {
	font-size: 2em;
}
 
h2 {
	font-size: 1.4em;
}
 
h3 {
	font-size: 1em;
}
 
p, ul, ol {
	margin-bottom: 1.5em;
	line-height: 180%;
}
 
ul, ol {
	margin-left: 3em;
}
 
blockquote {
	margin-left: 3em;
	margin-right: 3em;
}
 
a {
	color: #8AC800;
}
 
a:hover {
	text-decoration: none;
}
 
strong {
	color: #D7D7D7;
}
 
img.left {
	float: left;
	margin: 5px 25px 0px 0px;
}
 
img.right {
	float: right;
	margin: 5px 0px 0px 25px;
}
 
/* Background */
 
#bg1 {
	background: url(images/bg02.jpg) no-repeat center top;
}
 
#bg2 {
	background: url(images/bg03.jpg) no-repeat center top;
}
 
#bg3 {
	background: url(images/bg04.jpg) repeat-y center top;
}
 
#bg4 {
	background: url(images/bg05.jpg) no-repeat center top;
}
 
#bg5 {
	background: url(images/bg06.jpg) no-repeat center bottom;
}
 
/* Header */
 
#header {
	width: 900px;
	height: 145px;
	margin: 0px auto;
	text-transform: lowercase;
	color: #FFFFFF;
}
 
#header h1 {
	float: left;
	margin: 0px;
	padding: 70px 0px 0px 25px;
	font-size: 40px;
}
 
#header h1 sup {
	font-weight: normal;
}
 
#header h2 {
	float: right;
	margin: 0px;
	padding: 95px 25px 0px 0px;
	font-size: 14px;
}
 
#header a {
	text-decoration: none;
	color: #FFFFFF;
}
 
/* Header2 */
 
#header2 {
	width: 900px;
	height: 88px;
	margin: 0px auto;
}
 
/* Menu */
 
#menu {
	float: left;
}
 
#menu ul {
	margin: 0px;
	padding: 34px 0px 0px 0px;
	list-style: none;
	text-transform: lowercase;
}
 
#menu li {
	float: left;
}
 
#menu a {
	padding-left: 50px;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
}
 
/* Search */
 
#search {
	float: right;
}
 
#search form {
	margin: 0px;
	padding: 35px 80px 0px 0px;
}
 
#search fieldset {
	margin: 0px;
	padding: 0px;
	border: none;
}
 
#search input.text {
	width: 160px;
	background: none;
	border: none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #AEC38B;
}
 
#search input.button {
	display: none;
}
 
/* Page */
 
#page {
	width: 846px;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
}
 
/* Content */
 
#content {
	float: left;
	width: 850px;
	margin:0;
}
 
.post {
}
 
.post .title {
	height: 49px;
	background: url(images/img02.gif) no-repeat;
}
 
.post .title h2 {
	float: left;
	padding: 12px 0px 0px 24px;
	font-size: 24px;
	text-transform: lowercase;
}
 
.post .title h2 a {
	text-decoration: none;
	color: #FFFFFF;
}
 
.post .title h2 a:hover {
	color: #8AC800;
}
 
.post .title p {
	float: right;
	padding: 12px 24px 0px 0px;
	font-size: 15px;
	font-weight: bold;
	color: #343434;
}
 
.post .entry {
	padding: 30px 23px 0px 23px;
}
 
.post .meta {
	height: 70px;
	clear: left;
	margin: 0px 23px;
	padding: 15px 0px 0px 0px;
	border-top: 1px solid #262626;
}
 
.post .meta .credit {
	float: left;
}
 
.post .meta .links {
	float: right;
}
 
.post .meta .links .more {
	padding-left: 17px;
	background: url(images/img05.gif) no-repeat left center;
}
 
.post .meta .links .comments {
	padding-left: 19px;
	background: url(images/img04.gif) no-repeat left center;
}
 
/* Sidebar */
 
#sidebar {
	float: right;
	width: 436px;
}
 
#sidebar ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
 
#sidebar li {
	background: url(images/img03.gif) no-repeat;
	padding: 0px 23px 20px 23px;
}
 
#sidebar li ul {
}
 
#sidebar li li {
	padding: 8px 0px;
	background: none;
	border-bottom: 1px solid #262626;
}
 
#sidebar h2 {
	margin: 0px;
	padding: 16px 0px 30px 0px;
	text-transform: lowercase;
	font-size: 14px;
	color: #FFFFFF;
}
 
/* Footer */
 
#footer {
}
 
#footer p {
	margin: 0px;
	padding: 20px 0px;
	text-align: center;
	text-transform: lowercase;
	color: #566D77;
}
 
#footer a {
	color: #8097A1;
}
#scanner_div {
	width:230px;
 
}
 
.scanner_portlet {
	width:160px;
	height:40px;
	background-image:url('images/scanner_portlet_background.png');
	margin: 3px 3px 0px 0px;
 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	font-size:10px;
	overflow:visible;
	padding-left: 25px;
	float:left;
	border: dotted #333333 2px;
}
 
.scanner_portlet_look {
	width:160px;
	height:40px;
	background-image:url('images/scanner_portlet_background.png');
	margin: 3px 3px 0px 0px;
 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	font-size:10px;
	overflow:visible;
	padding-left: 25px;
	float:left;
	border: dotted #CC6600 2px;
}
 
.scanner_portlet_opdateret {
	font-style:italic;
	color:#CCCCCC;	
}

Open in new window

0
 
trg_dkAuthor Commented:

<?php
require_once("./inc/func.php");
 
$term = _g("term");
$term = strlen($term) > 0 ? $term : "021";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TRG Scanner Overvågning</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link type="text/css" href="theme/ui.all.css" rel="Stylesheet" />	
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery-ui-personalized-1.6rc6.js"></script>
<script type="text/javascript">
	
	function getDiv(id,headtxt,updatetxt)
	{
		return "<div class='scanner_portlet' id='scanner_portlet_"+ id +"'><div class='scanner_portlet_header' id='scanner_portlet_header_"+ id +"'>"+ headtxt +"</div><div class='scanner_portlet_opdateret' id='scanner_portlet_opdateret_"+ id +"'>"+ updatetxt +"</div></div>";
	}
	
	function getScannerList(update)
	{
		//$("#ajaxopdatering").html("<img src='images/ajax_wait.gif'>Opdaterer fra serveren...");
		$.ajax({
			type: "GET",
			url: "ajax/ajax.php?action=scanopdatering&term=<?php echo $term ?>&rnd="+ Math.random(),
			dataType: "xml",
			success: function(xml) {
				$(xml).find('scanner').each( function(){
					var $scanner = $(this);
					var id = $scanner.find('id').text();
					var headtxt = "Bil : "+ $scanner.find('bil').text() +" - Chauffør : "+ $scanner.find('chauf').text() ;
					var updatetxt = $scanner.find('minutes_since').text() ;
					if(!update){
						var newdiv = getDiv(id, headtxt, updatetxt )
						//$("#scanner_div").append( newdiv );
						$("#entry").append( newdiv );
					} else {
						if( $("#scanner_portlet_opdateret_"+ id).html() != updatetxt ){
							$("#scanner_portlet_opdateret_"+ id).html(updatetxt);	
							$("#scanner_portlet_"+ id).addClass("scanner_portlet_look");
							setTimeout("$(\"#scanner_portlet_"+ id +"\").removeClass(\"scanner_portlet_look\")", 5000 );						
						}
					}
				});
				//$("#ajaxopdatering").html("");
			}			
		});
		
		setTimeout("updateScan()", 30000);
	}
	
	function updateScan()
	{
		getScannerList( true );
	}
 
	
</script>
</head>
<body onload="getScannerList(false);">
 
 
<div id="bg3">
	<div id="bg4">
		<div id="bg5">
			<div id="page">
				<div id="content">
					<div class="post">
						<div class="title">
							<h2><a href="#">Scan Scan Scan for helvede</a></h2>
							<p>10.14.08</p>
						</div>
						<div class="entry" id="entry">
						  
					  </div>
					</div>
				</div>
				<!-- end #content -->
			  <!-- end #sidebar -->
			  <div style="clear: both; height: 40px;">&nbsp;</div>
			</div>
			<!-- end #page -->
		</div>
	</div>
</div>
<!-- end #bg3 -->
<div id="footer">
	<p>&nbsp;</p>
</div>
<!-- end #footer -->
</body>
</html>

Open in new window

0
 
myderrickCommented:
In your HTML i do not see -  scanner_portlet.

Kindly confirm which div has the items creating the space.

You have an empty...Try
.post { margin:0; padding:0
}
 
MD
0
 
yessirnosirCommented:
@trg_dk:  it appears the 30px top padding on .post .entry is causing the gaps. How does it look if you do this:
.post .entry {float:left;  /* added for FF */
      padding: 0px 0px 0px 23px;  /* changed top padding from 30px to 0 */
}

@MD "You can not use position relative and float at the same time. They are all position elements"
that statement is completely false.  Using both float and position:relative in the same style is very common.  see for example the left and right columns of this layout http://www.cssplay.co.uk/layouts/3cols.html  In fact I'd say I have position:relative on most of my floats, in order to establish a new containing block for the child divs inside the floated divs.   Think before you post!
0
 
yessirnosirCommented:
Hi again trg_dk.... I was digging a little deeper and it turns out the key part of the prior post was the addition of float:left;    The 30px padding change isn't necessary once you add float:left.  But the reason I was a bit confused is that there is a second issue with padding/margins between the heading and the rest of the layout.  IE and FF are collapsing the margins differently.  In FF the bottom margin on the h2 and the p (Scan Scan Scan for helvede & 10.14.08) are pushing the rest of the layout down, while IE is ignoring those bottom margins.  If you put "margin:0;" on each of the .post .title h2 and .post .title p that will make the gap be consistent in both browsers.

Have attached the test code I'm using.  You'll notice some silly colors have been added... that is just a troubleshooting aid that can really help figure out what's going on.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
 
* {
	margin: 0;
	padding: 0;
}
body {
	margin: 0px;
	background: #002F43 url(images/bg01.jpg) repeat-x;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #B9B9B9;
}
h1, h2, h3 {
	margin-bottom: 1.5em;
}
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.4em;
}
h3 {
	font-size: 1em;
}
p, ul, ol {
	margin-bottom: 1.5em;
	line-height: 180%;
}
ul, ol {
	margin-left: 3em;
}
blockquote {
	margin-left: 3em;
	margin-right: 3em;
}
a {
	color: #8AC800;
}
a:hover {
	text-decoration: none;
}
strong {
	color: #D7D7D7;
}
img.left {
	float: left;
	margin: 5px 25px 0px 0px;
}
img.right {
	float: right;
	margin: 5px 0px 0px 25px;
}
/* Background */
 
#bg1 {
	background: url(images/bg02.jpg) no-repeat center top;
}
#bg2 {
	background: url(images/bg03.jpg) no-repeat center top;
}
#bg3 {
	background: url(images/bg04.jpg) repeat-y center top;
}
#bg4 {
	background: url(images/bg05.jpg) no-repeat center top;
}
#bg5 {
	background: url(images/bg06.jpg) no-repeat center bottom;
}
/* Header */
 
#header {
	width: 900px;
	height: 145px;
	margin: 0px auto;
	text-transform: lowercase;
	color: #FFFFFF;
}
#header h1 {
	float: left;
	margin: 0px;
	padding: 70px 0px 0px 25px;
	font-size: 40px;
}
#header h1 sup {
	font-weight: normal;
}
#header h2 {
	float: right;
	margin: 0px;
	padding: 95px 25px 0px 0px;
	font-size: 14px;
}
#header a {
	text-decoration: none;
	color: #FFFFFF;
}
/* Header2 */
 
#header2 {
	width: 900px;
	height: 88px;
	margin: 0px auto;
}
/* Menu */
 
#menu {
	float: left;
}
#menu ul {
	margin: 0px;
	padding: 34px 0px 0px 0px;
	list-style: none;
	text-transform: lowercase;
}
#menu li {
	float: left;
}
#menu a {
	padding-left: 50px;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
}
/* Search */
 
#search {
	float: right;
}
#search form {
	margin: 0px;
	padding: 35px 80px 0px 0px;
}
#search fieldset {
	margin: 0px;
	padding: 0px;
	border: none;
}
#search input.text {
	width: 160px;
	background: none;
	border: none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #AEC38B;
}
#search input.button {
	display: none;
}
/* Page */
 
#page {
	width: 846px;
	margin: 0px auto;
	padding: 40px 0px 0px 0px;
}
/* Content */
 
#content {
	float: left;
	width: 850px;
}
.post {
}
.post .title {
	height: 49px;
	background: cornflowerblue url(images/img02.gif) no-repeat;
}
.post .title h2 {margin:0; /*added to avoid margin collapse differences IE vs FF */
	float: left;
	padding: 12px 0px 0px 24px;
	font-size: 24px;
	text-transform: lowercase;
}
.post .title h2 a {
	text-decoration: none;
	color: #FFFFFF;
}
.post .title h2 a:hover {
	color: #8AC800;
}
.post .title p {margin:0; /*added to avoid margin collapse differences IE vs FF */
	float: right;
	padding: 12px 24px 0px 0px;
	font-size: 15px;
	font-weight: bold;
	color: #343434;
}
.post .entry {background:pink;float:left;
	padding: 30px 0px 0px 23px;
}
.post .meta {
	height: 70px;
	clear: left;
	margin: 0px 23px;
	padding: 15px 0px 0px 0px;
	border-top: 1px solid #262626;
}
.post .meta .credit {
	float: left;
}
.post .meta .links {
	float: right;
}
.post .meta .links .more {
	padding-left: 17px;
	background: url(images/img05.gif) no-repeat left center;
}
.post .meta .links .comments {
	padding-left: 19px;
	background: url(images/img04.gif) no-repeat left center;
}
/* Sidebar */
 
#sidebar {
	float: right;
	width: 436px;
}
#sidebar ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#sidebar li {
	background: url(images/img03.gif) no-repeat;
	padding: 0px 23px 20px 23px;
}
#sidebar li ul {
}
#sidebar li li {
	padding: 8px 0px;
	background: none;
	border-bottom: 1px solid #262626;
}
#sidebar h2 {
	margin: 0px;
	padding: 16px 0px 30px 0px;
	text-transform: lowercase;
	font-size: 14px;
	color: #FFFFFF;
}
/* Footer */
 
#footer {
}
#footer p {
	margin: 0px;
	padding: 20px 0px;
	text-align: center;
	text-transform: lowercase;
	color: #566D77;
}
#footer a {
	color: #8097A1;
}
#scanner_div {
	width:230px;
}
.scanner_portlet {background:yellow;
	width:160px;
	height:40px;
	background-image:url('images/scanner_portlet_background.png');
	margin: 3px 3px 0px 0px;
	position:relative;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	font-size:10px;
	overflow:visible;
	padding-left: 25px;
	float:left;
	border: dotted #000000 2px;
}
.scanner_portlet_look {
	width:160px;
	height:40px;
	background-image:url('images/scanner_portlet_background.png');
	margin: 3px 3px 0px 0px;
	position:relative;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	font-size:10px;
	overflow:visible;
	padding-left: 25px;
	float:left;
	border: dotted #CC6600 2px;
}
.scanner_portlet_opdateret {background:lime;
	font-style:italic;
	color:#CCCCCC;
}
</style>
</head>
<div id="bg3">
  <div id="bg4">
    <div id="bg5">
      <div id="page">
        <div id="content">
          <div class="post">
            <div class="title">
              <h2><a href="#">Scan Scan Scan for helvede</a></h2>
              <p>10.14.08</p>
            </div>
            <div class="entry" id="entry">
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
              <div class='scanner_portlet' >
                <div class='scanner_portlet_header' >"+ headtxt +"</div>
                <div class='scanner_portlet_opdateret' >"+ updatetxt +"</div>
              </div>
            </div>
          </div>
        </div>
        <!-- end #content -->
        <!-- end #sidebar -->
        <div style="clear: both; height: 40px;">&nbsp;</div>
      </div>
      <!-- end #page -->
    </div>
  </div>
</div>
<body>
</body>
</html>

Open in new window

scannerportlet.jpg
0
 
myderrickCommented:
@Yessirnosir

Sorry if I couldn't explain myself properly.

What I meant was that in his particular case Position: relative was playing no role. floats and positions are both positioning elements so unless you need to shift the div there is no need to put them together.

Applying position: relative to an element without specifying top, bottom, left, right values does nothing to change it's position.

Sorry if it seems to have been a wrong advice.

MD
0
 
yessirnosirCommented:
MD "unless you need to shift the div there is no need to put them together."
that isn't really accurate.  position:relative is sometimes used to shift the div, but at least as often, it is used to change the position of nested children divs.  So it is often necessary to put float and position:relative together, even if you aren't trying to shift the div.  
0
 
trg_dkAuthor Commented:
>yessirnosir - I will test your solution monday - have left the office some hrs ago. 00:37 here in DK so I'm off to bed.

Thanks for your time both of you :-)
0
 
trg_dkAuthor Commented:
>myderrick - the portlet div's are added by JS from AJAX call so they dont exist in the html. :-)
0
 
trg_dkAuthor Commented:
Sorry for the delay in accepting your answer :-)
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 7
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now