css

CSS Performance

Usually when I build a site, I put all the CSS into one file, and all the properties that relate to a set of elements are defined at once. Like this: #myElement { color: #fff; background-color: #000; padding: 10px; border: 1px solid #ccc; font-size: 14pt; } .myClass { font-size: 12pt; padding: 5px; color...

How does CSS formatting in a Google Maps bubble work?

I'm using KML and the GGeoXml object to overlay some shapes on an embedded Google map. The placemarks in the KML file have some custom descriptive information that shows up in the balloons. <Placemark> <name /> <description> <![CDATA[ <div class="MapPopup"> <h6>Concession</h6> ...

How do you dynamically load a CSS file into a Flex application?

I know that you can apply CSS in order to style objects in Flex using the StyleManager: http://livedocs.adobe.com/flex/3/html/help.html?content=styles_07.html You can also load compiled CSS files (SWFs) dynamically: http://livedocs.adobe.com/flex/3/html/help.html?content=styles_10.html However, I'm dynamically creating my CSS files...

XML authoring/cms tool

I am trying to find a good open source XML authoring tool so the work flow between the client and the developers will be a bit more streamlined. We are basically developing a lot of XML driven micro websites for various clients and products. And often the clients want to have a little content change here and there. Sometimes just to cha...

Javascript - loading/busy indicator or transparent div over page on event click

hi, i got a client side javascript function which is triggered on a button click (basically, its a calculator!!). Sometimes, due to enormous data on the page, the javascript calculator function take to long & makes the page appear inactive to the user. I was planning to display a transparent div over entire page, maybe with a busy indica...

CSS formatter NOT based on CSS Tidy?

I can't find a css formatter (web based or Windows app) which formats the css where it puts the open brace on its own line aligned with its close brace, plus indents the attributes. The web based css formatters out here seem to be based on CSSTidy which doesn't do what I want. I don't like this CSSTidy format: .example { font-size: 3em...

How to create div to fill all space between header and footer div

I'm working on moving from using tables for layout purposes to using divs (yes, yes the great debate). I've got 3 divs, a header, content and footer. Thea header and footer are 50px each. How do I get the footer div to stay at the bottom of the page, and the content div to fill the space in between? I don't want to hard code the cont...

Changing the BG Color of a selected link.

I have a menu that I am using and it will change the background color when I hover using a:hover but I want to know how to change the class= line so that it sticks. So from the home if they click contacts the home pages from (a href="#" class="clr") to (a href="#") and Contacts would change from (a href="#") to (a href="#...

How can I center content between a header and footer div?

In a previous question, I learned how to keep a footer div at the bottom of the page. (see other question) Now I'm trying to vertically center content between the header and footer divs. so what I've got is: #divHeader { height: 50px; } #divContent { position:absolute; } #divFooter { height: 50px; position:absolute; ...

What's the best way to truncate a URL so that it fits within a layout

What is the best way to truncate a URL when displaying it within a web page? I don't mean a link but literally displaying the URL as a value to the user, assuming that the text might be in a container of fixed width and you don't want to wrap or run outside of the container? Is it better to truncate from the end, favouring the early pa...

Toggle a CSS property in nested elements

Without using Javascript, is there a way to make a CSS property toggle on and off through nested elements. The problem I'm trying to solve is that I have a number of tags and classes which make some text italic (<em>, <blockquote>, <cite>, <q>, <dfn>, and some other classes), and when one of these is inside another one of these, the ita...

Is there a tool to alphabetize CSS definitions in Visual Studio?

Eric Meyer's advice to keep individual rules alphabetized in a CSS style definition makes sense - there's no "natural" way to order rules, and this makes it easy in a complex definition to make sure you don't define the same thing twice. div.Foo { background:Green; border:1px solid Khaki; display:none; left:225px; ma...

Minimize CSS length holding style of given HTML constant

Suppose A.css styles B.html. What tools/techniques are there to programmatically reduce the size of A.css while holding its styling effects on B.html constant? Here are some techniques I would imagine such a tool using: Remove redundancies in A.css. For example, if the same class is defined twice you can remove the second definition wi...

CSS bleed-through with cfinput type="datefield"

I have a form using multiple <cfinput type="datefield" ...>. They are positioned in such a way that the pop-up CSS calendar should appear over the field for others. However, the text fields for the other dates end up in front of the calendar. This is only an IE issue as Firefox and Safari work just fine. Is there a simple CSS hack or s...

How do I make the footer stretch vertically?

I have a footer that is a 1 x 70px, which is set as the background and tiles horizonally. In cases when the web page does not contain a lot of content on it, it will display the footer above where the footer should be. I want it to fill in with a solid color, so if they scroll down, it won't show the footer, then the white under the foo...

How to make this site work in non-firefox browsers?

This page displays beautifully in firefox but i get all kinds of problems when testing the site in opera or internet explorer, mostly with the menu. I would like to know what techniques have caused this and how to avoid them. Thank you! Edit: Really embarrassing! I forgot to provide a link, sorry :( http://www.jkhbdesign.se/ Edit 2: He...

How can I give each <li> its own bullet image?

I have tried <ul id="contact_list"> <li id="phone">Local 604-555-5555</li> <li id="i18l_phone">Toll-Free 1-800-555-5555</li> </ul> with #contact_list { list-style: disc none inside; } #contact_list #phone { list-style-image: url(images/small_wood_phone.png); } #contact_list #i18l_phone { list-style-image: url(im...

Get All Elements in an HTML document with a specific CSS Class

What's the best way to get an array of all elements in an html document with a specific CSS class using javascript? No javascript frameworks like jQuery allowed here right now, and I could loop all the elements and check them manually myself. I'm hoping for something a little more elegant. ...

What is the best way to center a div on the screen using jQuery?

The title says it all really. ...

When to separate files to save bandwidth

I'm doing some optimising for my site and am trying to figure out just how big some inline code can be before it can justify having it's own file instead of being written inline. My guess on how to measure it would be that the amount of code (CSS or JS in this case) would need to be bigger than the HTTP packets sent and received to get ...