css

Should I 'name my page' for the purposes of custom css it needs?

In css should I 'name' my page at the top level - like this : <div class="page_products"> in order to write css specific to that page like this : .page_products h3 { font-color:red; } Note: This is a completely random and probably not useful style override. H3 is the first thing that came into my head. I'm just trying to describ...

Tools to make CSS sprites?

Are there any good tools to make css sprites? IDEALLY I'd want to give it a directory of images and an existing .css file that refers to those images and have it create a big image optimized with all the little images AND change my .css file to refer to those images. At the least I'd want it to take a directory of images and generate ...

IE7 : an excessive margin in form for textarea

I am trying to deal with an IE7 bug in my application. Here is the HTML/CSS code <div style="margin-left: 320px"> <form method="post" action=""><fieldset> <textarea name="prj_comment" id="prj_comment" rows="5" cols="50" style="margin: 0; padding: 0"></textarea> </fieldset></form> </div> In Firefox/Op...

css vertical centering

how could i vertically center a <div> within a <div> ? my code so far: <div style="height:322px;overflow:auto;"> <div style="border: Solid 1px #999999;padding:5px;"> </div> </div> i have tried "top:50%;" and "vertical-align:middle;" without success EDIT: okay so it's been discussed a lot. and i've maybe started another mini ...

Chrome/Safari ignoring my reset rules?

link text In Safari/Chrome it has extra spacing on the left/top of ol's, blockquotes and other elements. I can't isolate this, however when I look in the web inspector in Safari, its picking up a margin-left: of 26px on some elements. I have not specified any such rules, so is this a bug in Web inspector? Can someone enlighten me as t...

Value calculation for CSS

As a web developer you often run into problems that might be solved very easily if there was something like value calculation. I've often wondered why it is not possible to do something like this in CSS: line-height: (height / 2)px; This would solve some problems you run into when you want to vertical align an element, for example. I...

How to fade the background

I was going to look up how to do this, but I don't really know what to call it to look it up, so I was hoping I could describe it here and someone could point me in the right direction. Anyways, I'm looking for how to make it so on a website, when you click on something, a new sorta layer pops up and fades the background. I see sites do ...

How can I make links white?

How can I change the colour of hyperlinks to white in HTML and CSS? ...

HTML DIV and IMG tag spacing in IE vs. FF

I'm having trouble with the layout of a simple HTML page. Please help. Here's the layout I'm going for... orange = body blue/red = frame div green = header image black/white = menu div It looks correct in Internet Explorer, but in Firefox, Safari, and Chrome there's a 4-pixel gap between my image (header) and my div (menu). Inte...

What CSS properties can be applied to which HTML elements

I'm looking for a source/spec that can tell me what CSS properties can applied to which HTML elements. For instance, the css property; "overflow". I know I can apply this to div, p, textarea but what other elements can I apply this too? Is there a spec somewhere I can reference? ...

Positioning Columns With Absolute Positioning Instead of Floats

Hello All, I have read several articles regarding templates for web site content. They all seem to recommend that the columns should be placed on your site via floats. Example: <div id="container" style="width: 1000px;"> <div id="main_content" style="border: solid 1px Black; width: 798px; /* width = 800px -2px for border */ floa...

javascript, css, z-index, div stacking.

I want to create a sort of light/thick box that only acts on a single DIV within a page. When mine fires off the first div(phantom_back) acts as I want it but the second, phantom_top sets its self after phantom_back regardless of its z-index and positioning. What am I doing wrong? Here is what I have so far: <html> <head> <script ...

Can I change or control the color of the IFRAME area before the content loads?

I have a site where portions of the content are loaded into IFrames. The problem I'm having is that the inside content of the iFrame is white until the page itself loads, and the content has a different background color (blue, in this case). So I have these white squares on the screen until the contents load. Is there any way to speci...

IE CSS alignment issues

I have the following CSS that i have "hacked" with PHP because it doesn't align properly in IE7. Is there a better way to do this without resorting to PHP? #Menu { width: 100%; height: 32px; padding-top: <?php if(preg_match('/msie/i', $_SERVER['HTTP_USER_AGENT'])){echo '22px';}else{echo '40px';}?>; p...

How To Overlay a Div on a Container with jQuery opacity

Hi, I have a Container with Opacity 0.3 $('#containerFeatured').css('opacity',0.3) The fact is that when I try to overlay a DIV wrap with images the opacity takes the whole DIV. I tried with z-index but nothing happens. My example here Thank you! ...

How to make a textbox and a textarea same width cross-browsers?

Setting the width of both the textbox (ie. input type="text") and the textarea to 500px doesn't work in IE6 and Chrome, only works fine in FF2 (haven't tested other browsers), IE and Chrome add two pixels to the textbox. Padding and margin is set to 0 on all elements using * { margin: 0px; padding: 0px; } Changing the doctype from xh...

CSS Specificity and normalising your stylesheets after a tight deadline

I have just finished building a heavyweight long sales page, with a lot of elements and varying styles on the page.The CSS has ended up being over specific with its selectors, and there are numerous rounded boxes, background images etc. In short, the CSS is a bit of a mess. (only myself to blame!) Can anyone suggest a method of going th...

How to read the applied css-counter value?

Say you have a css 2.1 counter like ol { counter-reset: section; list-style-type: none; } li:before { counter-increment: section; content: counters(section, ".") " "; } <ol> <li>itemA</li> <!-- 1 --> <li>itemB <!-- 2 --> <ol> <li>itemC</li> <!-- 2.1 --> <li id="foo">itemD...

jquery ui css newbie question

I just for the first time downloaded jquery and jquery-ui to use/learn last night. I figured out how to get it working, and now I am playing around with the downloadable/customizable themes on themeroller...(nice tool). A question about best way of maximizing the use of these tools: I am integrating query/jqueryUI into an existing asp...

centering text problem

I have a navigation layer, and I cannot seem to get the links to center within. This is the stylesheet I am using .Layer1 { position:absolute; width: 10%; height: 95%; list-style-position: outside; list-style-type: disc; background-color: #D2FFFF; } .Layer1 a { font-family: Verdana, Arial, Helvetica, sans-se...