...

View Full Version : CSS width doesn't work with div when display:inline



tfburges
10-26-2009, 04:15 PM
I've been stuck on this for a while!

I'm tempted to use tables even though there will theoretically be infinitely many rows and I've read tables drastically increase load times.

The code is pretty simple... here's the relevant snippet:
(You'll need to scroll right a bit, sorry!)


<div style="width:100%;height:20px;margin:0px;overflow:hidden;" onmouseover="document.getElementById('ruleStatusBar').innerHTML='<b>When <?php echo $temp[2]; ?> is ' + document.getElementById('<?php echo $temp[2]; ?>_is_<?php echo $n; ?>').value + ' ' + document.getElementById('<?php echo $temp[2]; ?>_to_<?php echo $n; ?>').value + '...</b>';" onmouseout="document.getElementById('ruleStatusBar').innerHTML='';">
<div style="width:15%;height:20px;margin:0px;padding:0px;border:0px;overflow:hidden;display:inline;font:normal 11px sans-serif;"><?php echo $temp[2]; ?></div>
<div style="width:10%;height:20px;margin:0px;padding:0px;border:0px;overflow:hidden;display:inline;"><select name="<?php echo $temp[2]; ?>_is_<?php echo $n; ?>" id="<?php echo $temp[2]; ?>_is_<?php echo $n; ?>" style="font:normal 11px sans-serif;" onChange="document.getElementById('ruleStatusBar').innerHTML='<b>When <?php echo $temp[2]; ?> is ' + document.getElementById('<?php echo $temp[2]; ?>_is_<?php echo $n; ?>').value + ' ' + document.getElementById('<?php echo $temp[2]; ?>_to_<?php echo $n; ?>').value + '...</b>';"><option value="greater than">greater than<option value="less than">less than<option value="changed to">changed to</select></div>
<div style="width:15%;height:20px;margin:0px;padding:0px;border:0px;overflow:hidden;display:inline;"><input type="text" name="<?php echo $temp[2]; ?>_to_<?php echo $n; ?>" id="<?php echo $temp[2]; ?>_to_<?php echo $n; ?>" style="height:13px;padding:1px;font:normal 11px sans-serif;" onkeyup="document.getElementById('ruleStatusBar').innerHTML='<b>When <?php echo $temp[2]; ?> is ' + document.getElementById('<?php echo $temp[2]; ?>_is_<?php echo $n; ?>').value + ' ' + document.getElementById('<?php echo $temp[2]; ?>_to_<?php echo $n; ?>').value + '...</b>';"></div>
<div style="width:15%;height:20px;margin:0px;padding:0px;border:0px;overflow:hidden;display:inline;"><input type="text" name="<?php echo $temp[2]; ?>_ErrorCode_<?php echo $n; ?>" style="height:13px;padding:1px;font:normal 11px sans-serif;"></div>
<div style="width:15%;height:20px;margin:0px;padding:0px;border:0px;overflow:hidden;display:inline;"><input type="text" name="<?php echo $temp[2]; ?>_Abstract_<?php echo $n; ?>" style="height:13px;padding:1px;font:normal 11px sans-serif;"></div>
<div style="width:15%;height:20px;margin:0px;padding:0px;border:0px;overflow:hidden;display:inline;"><input type="text" name="<?php echo $temp[2]; ?>_Description_<?php echo $n; ?>" style="height:13px;padding:1px;font:normal 11px sans-serif;"></div>
<div style="width:15%;height:20px;margin:0px;padding:0px;border:0px;overflow:hidden;display:inline;"><input type="text" name="<?php echo $temp[2]; ?>_Detail_<?php echo $n; ?>" style="height:13px;padding:1px;font:normal 11px sans-serif;"></div>
</div>

It ends up looking like this:
http://img26.imageshack.us/img26/4858/78501710.png

abduraooft
10-26-2009, 04:20 PM
width:15%;height:20px;margin:0px;padding:0px;
border:0px;overflow:hidden;display:inline;font:normal 11px sans-serif; You can't apply width/height to an element having display:inline;. Instead of that display, try setting float:left;

PS: Use of excessive inline CSS is a bad practice.

tfburges
10-26-2009, 04:25 PM
That works great thank you!!! That's what I love about this kinda stuff... always learning something new.

Why is it that (excessive use of) display inline is bad practice? Different browsers handle it differently? Resolution? I usually only use it in controlled situations where width and height are specified and the amount of information and number of elements are limited.

abduraooft
10-26-2009, 04:44 PM
Why is it that (excessive use of) display inline is bad practice? No, I think my reply was not very clear. What I asked is to remove your style tags and make use of external CSS files to write the styling information.

By doing this

You may simplify your markup by keeping the content and style apart
You may save your time while updating the styles
You may save your bandwidth by reducing the overall size of files.

tfburges
10-27-2009, 07:57 PM
Oh of course! Yeah, we're on the same page about that. I just like to start out with style tags if it's something I know I'll need to tinker around with for a bit to get it just right. It gets annoying to constantly go back and forth between 2 files when I'm coding. After I've determined the proper style, I will go through and add the class to my css file and update the elements accordingly! :) Notepad++'s replace all [in all open files] comes in handy for this. Thanks again for the input!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum