css

What is the best practice for CSS-styled menu markup?

So, I've been 'collecting' CSS menus for a while now (another term would be 'borrowing', yet another would be 'blatantly ripping off'), to learn from them and to potentially reuse some of the leetness in my own projects. Being an oldschool HTML purist, I love the idea of styled <ul>s and <ol>s, and the better menus and tab interfaces te...

Overflow:hidden dots at the end

Let's say I have a string "I like big butts and I cannot lie" and I cut it with overflow:hidden, so it displays something like this: "I like big butts and I cann" cutting off the text. Is it possible to display this like this: "I like big butts and I cann..." using CSS? Thanks. ...

Align a <div> to the top, and one to the bottom of a table

I'm having trouble with some vertical CSS positioning. I would like to create a page with the following layout: B AAA AAA AAA C AAA A is a grid (table) of data B is aligned to the top of the grid C is aligned to the bottom of the grid How do I get B and C to align correctly? EDIT: Sorry for the confusion about Div/Table tags! I...

Matching Sizes to Font Family Failsafe in CSS

I have a page that is using a non-standard font and arial as a fail safe. Does anyone know if there is a way to set the font-size conditionally to the font? <style type="text/css"> body { font-family: Calibri, arial, sans-serif; font-size: 1em, .9em, .9em; /* Where 1em would be for Calibri and .9 would be for arial and sans...

Which browsers support font embedding.

I've been reading about the @font-face rule and trying to work out if it's worth using it in a project to render "franklin gothic medium" for title instead of something like sIfr. I figured that for browsers that don't support it I could make it fall back on Arial. The thing is that I'm having trouble getting a definitive answer about w...

<ol> with numbers another color

<ol> <li>test</li> <li>test</li> </ol> will show as: test test I want to have numbers coloured and text black! I can edit the css, but I do not have access to the HTML. ...

CSS in sharepoint

I need to apply a CSS to a Sharepoint site (WSS3.0) based on the theme applied to a site. The CSS would be saved at root site in 'Document Library'. How do I apply the CSS programmatically on the page? Thanks! ...

How do I vertically align text next to an image with CSS?

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> CSS is so annoying. ...

Strict DOCTYPE affecting spacing between images.

I am having problems with my image spacing when I switched to XHTML Strict DOCTYPE. The following code - which uses Yahoo's reset stylesheet to kill off all default browser padding - leaves a gap of about 4 pixels between the two images below but ONLY when I use the strict doctype. Why is this? It is only a problem in Chrome and Firefo...

Setting the height of a SELECT in IE

IE seems to ignore the height set in CSS when rendering a HTML SELECT. Are there any work around's for this or do we have to just accept IE will not look as good as other browsers? ...

Is it possible to set CSS for combined classes?

Say I have the following: tr { background: #fff; } tr.even { background: #eee } tr.highlight { background: #fec; } Is it possible to specify a 4th background (#fea) instead of having highlight simply overwrite even? <tr class="even highlight"> <!-- ... --> </tr> Once CSS3 is supported, nth-child might work. But, a...

What is the best way to clear the CSS style "float"?

I'm pretty accustomed to clearing my floats by using <br style="clear:both"/> but stuff keeps on changing and I am not sure if this is the best practice. There is a CSS hack (from positioneverything) available that lets you achieve the same result without the clearing div. But... they claim the hack is a little out of date and instead ...

CSS alignment of text of HTML INPUT radio element.

I have an input[type="radio"] element inside a block container of fixed width. The supporting text for the input element does not fit in a single line, and falls over to two or more lines. For example: <div class="leftBlock"> <input type="radio" name="foo" value="bar" id="option" /> This is a rather long supporting text that doe...

Multiple javascript/css files: best practices?

I have about 7 Javascript files now (thanks to various jQuery plugins) and 4-5 CSS files. I'm curious as to what's the best practice for dealing with these including where in the document they should be loaded? YSlow tells me that Javascript files should be--where possible--included at the end. The end of the body? It mentions that t...

Problems with jQuery UI Datepicker

Ok, I've rolled my own theme, I've made a custom jQuery UI pack (progress bar, date picker, slider) and installed it all. Seems to (mostly) work except for two things: When my page first loads the datepicker div is visible; and The text "Next" and "Prev" are visible in large font underneath my icons. None of the examples seem to have...

CSS text replace with image, need hyperlink

I am using the text-indent technique to replace my h1 tag with my website's image as so: <h1 title="Homepage">My logo</h1> #header h1 { float: left; background: transparent url('../images/logo.png'); width: 214px; height: 64px; text-indent: -9999px; } The only problem is that I want to still have the new image act as a hyperlink. I t...

fluid layout pattern creation for web pages

I would like to have each and every page on my site to have skeleton structure as mentioned below. Based on the template selected by user(saved choice/default css); the appearance of the page changes. I am planning to use 960.gs or blueprint css framework for layout handling. I am newbie to CSS and layouts. Best example for my requiremen...

How do I unset an element's CSS attribute using jQuery?

If I set a CSS value on a specific element using: $('#element').css('background-color', '#ccc'); I want to be able to unset that element-specific value and use the cascaded value, along the lines of: $('#element').css('background-color', null); But that syntax doesn't seem to work -- is this possible using another syntax? Thanks i...

Mininum and Maximum value of Z-INDEX

I have a DIV in my HTML page. I am showing this DIV based on some condition. But DIV is displaying behind any HTML element where I pointed the mouse cursor. I have tried all value for Z-INDEX property from 0 - 999999. Can anyone tell me why this is happening? Is there any minimum or maximum value of Z-INDEX property of CSS? For examp...

Change border color on <select> HTML form.

Is it possible to change the border color on a <select> element in an HTML form? The border-color style works in Firefox but not IE. I could find no real answers on Google. ...