css

html input cursor color

Hi everyone How to change the color of content in html input type text while entering some value. And also the cursor color when it has focus. ...

Variable height header with scrollable content area filling remaining viewport area

I've seen versions of this simple problem raised a dozen times here and elsewhere on the web, but I haven't seen a solution that works for me yet so I'm asking it again. I want a webpage with a variable height full width header (height based on contents). Below that I want a content area that fills the rest of the browser viewport. If t...

CSS - Class hierarchies???

Hi, I have a site with a customer front end, which has a catalogue, homepage, contact page, about us page and so on. There is also an administration front end. I would like to implement a kind of hierarchy where any elements within an element with class "admin" will inherit properties set in the admin stylesheet and anything else inheri...

How to change cell's background color in SlickGrid ?

I was trying to change cell's background color with custom formatter like this: var myCellFormatter = function(row, cell, value, columnDef, dataContext) { if ((row + cell) % 5 == 1) { return "<div style='background-color:green'>" + value + "</div>"; } else { return value; } }; but this does not color the wh...

HTML: Menus as UL instead of DIVs?

I recently created a menu for a web page where buttons are DIV elements. I've been Googling around and see that many people create UL lists and each button is a LI element. What benefit is using an UL and LIs instead of just DIVs? Is it somehow better for SEO? Does this have to do with "semantic" markup? Any compelling reason to rewrite ...

Fadeout and Fadein into the same space

I want to fade out #lg-image and fade in #column-left and #column-right into the same space as #lg-image was. Is this possible? Thank you ...

CSS compilers and converting IE hacks to conditional css

Skip to bottom for question, but first, a little context. So I have been looking into CSS compilers (like Sass & Less) for a while, and have been really interested in them, not because they help me understand anything easier (I've been doing css for a couple of years now) but rather they cut down on cruft and help me see things easier. ...

CSS Float statement

.float1 { float: left; width: 50%; height: 50%; } .float2 { float: right; width: 50%; height: 50%; } .float3 { float: left; width: 50%; height: 50%; } .float4 { float: right; width: 50%; height: 50%; } .clear { clear: both; } HTML: <div class="float1">Float 1</div> <div class="float2">Float 2</div> <div class="clear"></div> <div c...

Why is the dropdown menu aligned to the left?

I am working on a dropdown navigation for a site and am having some trouble with the dropdown portion aligning with the parent category - it shifts all the way to the left. Here is the html: <ul class="dropdown"> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="about">About Us</a> <ul class="sub-menu"> <li><a...

asp.net-mvc feature - one css file per (view / master-page / user-control)

I'm trying to implement the following feature: I want just one css file to be attached for any page that I rendered. For example take StackOverflow site. For the questions page, we will have questions.css file. so.com/questions ---> questions.css so.com/question/1234/title ---> question.css so.com/about ...

Use any CSS compiler (Sass, Less) to generate the selector

So I've recently been playing around with CSS compilers, but I have no idea how (or if it's possible) to dynamically generate pieces of a selector. For instance, let's say I wanted to make mixins to get display: inline-block; to work cross browser. I would have to do the styles, yeah, but I would have to do the IE6/7 selector hacks ...

IE8 alignment in div issue

How to align the the button in center of div in IE8. Works fine in IE7 but not in IE8 <div id="dPopupFooter" style="background-color: #d9d9d9; position: absolute; z-index: 5; bottom: 0px; width: 100%; height: 30px; border-top: solid 1px #acacac; text-align: center; padding-top: 3px;"> <table><tr><td><xrx:CustomButton id="bt...

setting css font-family to a safe handwriting font

In CSS, I usually go with the usual font-family: Arial, Helvetica, sans-serif; For a little change, I'm going for a font that looks like handwriting. Can some of the expert CSS folks here suggest what would be some of the safest fonts (most widely available in most browsers) that look like hardwriting ...

Is it possible to have a transparent photoshop image render in CSS?

Is it possible to have a transparent photoshop image render in CSS? I tried saving as jpg and gif with transparency selected but when I overlay it in css it shows the background color behind it and not the image which is under it. I played with the z-index and it didn't help. Thanks ...

IE7 rendering bug: Heading before a floated list

Can somebody please explain this IE7 bug to me? It occurs in Standards and Quirks mode rendering, it does not occur in Firefox, Chrome or IE8 (though switching the rendering engine via IE8 developer tools will provoke it). Here's the HTML to reproduce the behavior: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/...

Dynamic positioning inside relative div

I'm trying to get a color picker javascript widget working in a page with a bunch of "stuff" in it that I can't change. Some of the "stuff" is causing the color picker to appear well below the link when clicked. I've reduced it to a simple example below. <html> <head> <script type="text/javascript"> function setPos(aname,dname) { ...

How to set a dynamic width on a floating div?

I have a div container with 3 div elements inside (A, B, and C). I'll know the width of the container and the width of A and B) the problem is that in some cases B won't be there in which case I need C to expand to fill the rest of the container. How would I do this with straight css or am I going to need to use javascript to calculate...

How much multiple style sheets slow down to website?

Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"...

is it a good idea to give background color or img to non transparent images?

like img { background-color:color: color matched to the theme} or img { background-image:url (a very very tiny gif image with the text "image loading") } I'm thinking in the benefit of this when user access site on slow connection then background color will give clue about something is there which is diffrent than text content.. ...

How to give border to any element using css without adding border-width to the whole width of element?

How to give border to any element using css without adding border-width to the whole width of element? Like in Photoshop we can give stroke- Inside , center and outside I think default css border properties is center like center in photoshop, am i right? I want to give border inside the box not outside. and don't want to include bo...