Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder ellisd5's Avatar
    Join Date
    Jun 2002
    Location
    Uk
    Posts
    160
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Firefox not setting divs width

    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
    Dale Ellis
    __________________

  • #2
    Regular Coder logictrap's Avatar
    Join Date
    Apr 2008
    Posts
    155
    Thanks
    11
    Thanked 3 Times in 3 Posts
    try adding this to the prog-bar class:

    Code:
    display:inline;

    Which came first - the chicken or the egg? The egg... [ticket closed]
    If a tree falls... does it make a sound? Yes.............. [ticket closed]

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    The inline style in the first one is overriding rules from the stylesheet. I think if you remove it it’ll be fine.

  • #4
    Regular Coder ellisd5's Avatar
    Join Date
    Jun 2002
    Location
    Uk
    Posts
    160
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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&#37;;
    	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
    Dale Ellis
    __________________

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Have you tried resetting all values thus

    Code:
    * {
    margin: 0;
    padding: 0;
    border: none;
    }
    at the start of your css.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Regular Coder logictrap's Avatar
    Join Date
    Apr 2008
    Posts
    155
    Thanks
    11
    Thanked 3 Times in 3 Posts
    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>

    Which came first - the chicken or the egg? The egg... [ticket closed]
    If a tree falls... does it make a sound? Yes.............. [ticket closed]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •