Firefox not setting divs width

ellisd5 · 05-13-2008, 05:28 PM

Hi all,

I have a piece of HTML code here which is a progress bar, As I upload a file to the server, i set the inner divs width to whatever % has upload, here is the HTML and CSS..

Code:

		<DIV ID="uploadStatus" STYLE="display:inline;">

			<span class="uploadStatusText">Upload Staus: </span>
			&nbsp;&nbsp;
			<div class="prog-border"><div class="prog-bar" style="width:0%;"></div></div>
			&nbsp;&nbsp;
			<span class="uploadStatusText">No upload started</span>

		</DIV>

The CSS

Code:

		.prog-border {
			height: 12px;
			width: 205px;
			background-color: #FFFFFF;
			border: 1px solid #000000;
			margin: 0px;
			padding: 0px;
			display:inline;
		}

		.prog-bar {
			height: 10px;
			margin: 0px;
			padding: 0px;
			background: #99CC00;
		}
		.uploadStatusText {
			font-size:10px;
			color:#757575;
			display:inline;
		}

It works fine in IE but firefox doesn't seem to like it, if I reduce the code to just this firefox still doesn't like it

Code:

		<DIV ID="uploadStatus" STYLE="display:inline;">

			<span class="uploadStatusText">Upload Staus: </span>
			&nbsp;&nbsp;
			<div class="prog-border"></div>
			&nbsp;&nbsp;
			<span class="uploadStatusText">No upload started</span>

		</DIV>

So I'm still baffled, what is wrong with the class prog-border anybody know what I'm doing wrong?

TIA,
Dale

logictrap · 05-13-2008, 08:42 PM

try adding this to the prog-bar class:

Code:

display:inline;

Apostropartheid · 05-13-2008, 08:53 PM

The inline style in the first one is overriding rules from the stylesheet. I think if you remove it it’ll be fine.

ellisd5 · 05-14-2008, 10:45 AM

Thanks for you replies guys, seem CyanLight you were right, FireFox doesn't like the display:inline. Trouble is I remove that and the three parts of the display are all on different lines as its display block by default. I changed the div's to span's but that again acts the same in firefox. So I have tried to position them with relative and absolute settings, except Firefox displays different again, it seems to display the prog-border div about 20px, ish lower than the rest. Any ideas whats wrong? Or have a better idea how to get them inline? Suppose I could use a table but if there a css way id rather do that... Current Code...

Code:

.prog-border {
	position: absolute;
	left:100px;
	height: 12px;
	width: 205px;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	margin: 0px;
	padding: 0px;
}

.prog-bar {
	height: 100%;
	margin: 0px;
	padding: 0px;
	background: #99CC00;
}
.uploadStatusText {
	position: absolute;
	font-size:10px;
	color:#757575;
}

Code:

<DIV ID="uploadStatus" STYLE="position:relative;">

	<span class="uploadStatusText" style="left:0px;">Upload Staus: </span>
	&nbsp;&nbsp;
	<div class="prog-border"><div class="prog-bar" style="width:50%;"></div></div>
	&nbsp;&nbsp;
	<span class="uploadStatusText" style="left:350px;">No upload started</span>

</DIV>

Thanks,
Dale

effpeetee · 05-14-2008, 12:59 PM

Have you tried resetting all values thus

Code:

* {
margin: 0;
padding: 0;
border: none;
}

at the start of your css.

Frank

logictrap · 05-14-2008, 06:15 PM

Try this:

Code:

<!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>
<style type="text/css">
<!--
.status-box {
    width: 200px;
    border: 1px solid #eeeeee;
    padding: 0px;
    margin-top: 0px;
    margin-right: 5px;
    margin-bottom: 0px;
    margin-left: 5px;
    float: left;
}
.status-complete {
    background-color: #00CC00;
    margin: 0px;
    padding: 0px;
    width: 10%;
    height: 25px;
    float: left;
}
.status-text-before {
    float: left;
    width: auto;
}
.status-text-after {
    float: left;
    width: auto;
}
-->
</style>
</head>
<body>
<div>
  <div class="status-text-before">Upload Status:</div>
  <div class="status-box">
    <div class="status-complete">&nbsp;</div>
  </div>
  <div class="status-text-after">No upload started </div>
</div>
</body>
</html>