...

View Full Version : Firefox not setting divs width



ellisd5
05-13-2008, 06: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..

<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

.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

<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, 09:42 PM
try adding this to the prog-bar class:


display:inline;

Apostropartheid
05-13-2008, 09: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, 11: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...


.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&#37;;
margin: 0px;
padding: 0px;
background: #99CC00;
}
.uploadStatusText {
position: absolute;
font-size:10px;
color:#757575;
}

<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, 01:59 PM
Have you tried resetting all values thus


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

at the start of your css.

Frank

logictrap
05-14-2008, 07:15 PM
Try this:



<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum