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 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts

    Angry CSS width doesn't work with div when display:inline

    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!)
    Code:
    															<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:
    Last edited by tfburges; 10-26-2009 at 04:16 PM. Reason: (You'll need to scroll right a bit, sorry!)

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    tfburges (10-26-2009)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    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.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    1. You may simplify your markup by keeping the content and style apart
    2. You may save your time while updating the styles
    3. You may save your bandwidth by reducing the overall size of files.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    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!


  •  

    Posting Permissions

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