EzDevInfo.com

Make Div Width Equal To Child Contents

I have a layout similar to:

<div>
    <table>
    </table>
</div>

I would like for the div to only expand to as wide as my table becomes.

How to make twitter bootstrap menu dropdown on hover rather than click

I'm using bootstrap for the first time and really liking it - but one thing I'd like to do is have my menu automatically drop down on hover over, rather than having to click the menu title. I'd also like to lose the little arrows next to the menu titles.

CSS rule to disable text selection highlighting

For anchors that act like buttons (for example, Questions, Tags, Users, etc. at the top of the Stack Overflow page) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text?

I realize this could be done with JavaScript, and a little googling yielded the Mozilla-only -moz-user-select option.

Is there a standard-compliant way to accomplish this with CSS, and if not, what is the "best practice" approach?

Set cellpadding and cellspacing in CSS?

In an HTML table, the cellpadding and cellspacing can be set like this:

<table cellspacing="1" cellpadding="1">

How can the same be accomplished using CSS?

Horizontally center a div in a div

How can I horizontally center a div within a div using CSS (if it's even possible)?

The outer div has 100% width:

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

How can I make the cursor a hand when a user hovers over a list item?

I've got a list, and I have a click handler for its items:

<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

How can I change the mouse pointer into a hand pointer (like when hovering over a button)? Right now the pointer turns into a text selection pointer when I hover over the list items.

When to use margin vs padding in CSS

When writing CSS, is there a particular rule or guideline that should be used in deciding when to use margin and when to use padding?

Need an unordered list without any bullets

I have created an unordered list, and I am appending and removing list items using jQuery.. I feel the bullets in the unordered list are bothersome, so I want to remove them. Is it possible to have a list without bullets?

Vertically align text next to an image?

Why won't vertical-align: middle work? And yet, vertical-align: top does work.

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

Make div 100% height of browser window

I have a layout with two columns - a left div and a right div.

The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now the background-color ends at the last piece of content in that div.

I've tried height:100%, min-height:100%; etc.

Which characters are valid in CSS class names/selectors?

What characters/symbols are allowed within CSS class selectors? I know that the following characters are invalid, but what characters are valid?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

Is the recommendation to include CSS before JavaScript invalid?

In countless places online I have seen the recommendation to include CSS prior to JavaScript. The reasoning is generally, of this form:

When it comes to ordering your CSS and JavaScript, you want your CSS to come first. The reason is that the rendering thread has all the style information it needs to render the page. If the JavaScript includes come first, the JavaScript engine has to parse it all before continuing on to the next set of resources. This means the rendering thread can't completely show the page, since it doesn't have all the styles it needs.

My actual testing reveals something quite different:

My test harness

I use the following Ruby script to generate specific delays for various resources:

require 'rubygems'
require 'eventmachine'
require 'evma_httpserver'
require 'date'

class Handler  < EventMachine::Connection
  include EventMachine::HttpServer

  def process_http_request
    resp = EventMachine::DelegatedHttpResponse.new( self )

    return unless @http_query_string

    path = @http_path_info
    array = @http_query_string.split("&").map{|s| s.split("=")}.flatten
    parsed = Hash[*array]

    delay = parsed["delay"].to_i / 1000.0
    jsdelay = parsed["jsdelay"].to_i

    delay = 5 if (delay > 5)
    jsdelay = 5000 if (jsdelay > 5000)

    delay = 0 if (delay < 0) 
    jsdelay = 0 if (jsdelay < 0)

    # Block which fulfills the request
    operation = proc do
      sleep delay 

      if path.match(/.js$/)
        resp.status = 200
        resp.headers["Content-Type"] = "text/javascript"
        resp.content = "(function(){
            var start = new Date();
            while(new Date() - start < #{jsdelay}){}
          })();"
      end
      if path.match(/.css$/)
        resp.status = 200
        resp.headers["Content-Type"] = "text/css"
        resp.content = "body {font-size: 50px;}"
      end
    end

    # Callback block to execute once the request is fulfilled
    callback = proc do |res|
        resp.send_response
    end

    # Let the thread pool (20 Ruby threads) handle request
    EM.defer(operation, callback)
  end
end

EventMachine::run {
  EventMachine::start_server("0.0.0.0", 8081, Handler)
  puts "Listening..."
}

The above mini server allows me to set arbitrary delays for JavaScript files (both server and client) and arbitrary CSS delays. For example, http://10.0.0.50:8081/test.css?delay=500 gives me a 500 ms delay transferring the CSS.

I use the following page to test.

<!DOCTYPE html>
<html>
  <head>
      <title>test</title>
      <script type='text/javascript'>
          var startTime = new Date();
      </script>
      <link rel='nofollow' href="http://10.0.0.50:8081/test.css?delay=500" type="text/css" rel="stylesheet">
      <script type="text/javascript" src="http://10.0.0.50:8081/test2.js?delay=400&amp;jsdelay=1000"></script> 
  </head>
  <body>
    <p>
      Elapsed time is: 
      <script type='text/javascript'>
        document.write(new Date() - startTime);
      </script>
    </p>    
  </body>
</html>

When I include the CSS first, the page takes 1.5 seconds to render:

When I include the JavaScript first, the page takes 1.4 seconds to render:

I get similar results in Chrome, Firefox and Internet Explorer. In Opera however, the ordering simply does not matter.

What appears to be happening is that the JavaScript interpreter refuses to start until all the CSS is downloaded. So, it seems that having JavaScript includes first is more efficient as the JavaScript thread gets more run time.

Am I missing something, is the recommendation to place CSS includes prior to JavaScript includes not correct?

_{It is clear that we could add async or use setTimeout to free up the render thread or put the JavaScript code in the footer, or use a JavaScript loader. The point here is about ordering of essential JavaScript bits and CSS bits in the head.}

Make a div fill the height of the remaining screen space

I am currently working on a web application, where I want the content to fill the height of the entire screen.

The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom.

I have a header div and a content div. At the moment I am using a table for the layout like so:

CSS and HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}

<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

The entire height of the page is filled, and no scrolling is required.

For anything inside the content div, setting top: 0; will put it right underneath the header. Sometimes the content will be a real table, with it's height set to 100%. Putting header inside content will not allow this to work.

Is there a way to achieve the same effect without using the table?

Update:

Elements inside the content div will have heights set to percentages as well. So something at 100% inside the div will fill it to the bottom. As will two elements at 50%.

Update 2:

For instance, if the header takes up 20% of the screen's height, a table specified at 50% inside #content would take up 40% of the screen space. So far, wrapping the entire thing in a table is the only thing that works.

How to remove close button on the jQuery UI dialog?

How do I remove the close button (the X in the top-right corner) on a dialog box created by jQuery UI?

Adding HTML entities using CSS content

How do you use the CSS content property to add html entities?

I have a number of links which I make into a breadcrumb style list by adding an arrow before each.

<div class="breadcrumbs">
    <a>One</a>
    <a>Two</a>
    <a>Three</a>
</div>

Which has the following style applied to it:

.breadcrumbs a:before {
    content: '> ';
}

The problem is that when the breadcrumb list gets long and wraps to the next line, the arrow is left on the preceding line. The obvious solution is to change the space into a non-breaking space, but this doesn't work:

.breadcrumbs a:before {
    content: '> ';
}

It actually outputs   onto the screen. I've got around this with other strange characters (like ») by pasting the character in directly, but how do you paste a   ?