css

CSS Style Inheritance

Lets say I want to define 2 styles. .color_red { color: Red; } .banner { display: block; width: 100%; } Is there a way that I can have the h1 style inherit the color_red style? I don't want to have to do <div class="banner color_red">This is my banner.</div> I'd prefer to do something like this... .banner { ... inherit: color_red;...

Firefox,Chrome Anchor Issue - padding removed from container element CSS

I have a div which contains my page content ( #content ) div #content has padding top of 20 px. in the #content div I have an anchor link href="#my_form" that is linked to a form lower down on the same page. When i click the anchor the page scrolls down to the form OK but for some reason the padding is removed from the top of #content...

CSS clearfix problem with Firefox 2 and SeaMonkey

I am using yaml for layout and famous clearfix css to make sure container with floats get extended. Everything works fine with Firefox 3, IE6, IE7, IE8, Opera 9 and Google Chrome, but I have issue with Firefox 1, Firefox 2 and SeaMonkey. The problem is that clearfix container gets extended too much, as you can see on the website: http...

IE Opacity Issues with Z-index

Hi Guys, I have opacity working in ALL Browsers except IE - the problem in IE (6,7,8) is that the color renders as a SOLID :( The CSS I am using is legit per the MS Blog Post on IE Opacity Filter -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=75)"; filter: alpha(opacity=75); The weird thing is that I have my eleme...

CSS Parent/Ancestor Selector

I know this is a shot in the dark, but is there a way, using css only, CSS2, no jquery, no javascript, to select and style an element's ancestor? I've gone through the selectors but am posting this in case I missed something or there is a clever workaround. For example, say I have a table with classname "test" nested inside a div. Is t...

Wide table causing horizontal scrollbar

I have a table inside a couple of nested divs. One column holds an image whose width makes the total width of the page wider than the display and the horizontal scrollbar shows. This cell is from an asp.net ajax popup (on mouseover) and is hidden via javascript, so the scrollbar isn't needed. Is there a way via css/xhtml to make it ...

IE bugs - background color and positioning.

I'm just starting to build a website, and am just fleshing out the css. Two problems: I'm using rgba to get a transparent background, and using a transparent png to emulate this in older browsers. I'm using a cascade like this: rule { background: url(/media/img/white_0.9_pixel.png); background: rgba(255, 255, 255, 0.9); } ...

CSS Layout Problems (with pictures and code) in IE

Hello, I was wondering if anyone could help me troubleshoot some CSS issues I'm running into with the dreaded IE. Here's the undesired layout as rendered by IE... and here's the correct layout (as rendered by Firefox and Chrome)... you can see there are three undesired differences in IE... The left tabs (#header-tabs) get all bu...

Maximize iFrame (so it appears to be the request page)

Hello, how can I (cross-browser compatible) maximize an iFrame so that it appears to be the page in the URL bar even though it is served from a different server? ...

Make text input fields and their labels line up correctly

Here's an excerpt from a fairly standard Rails form: <p> <%= f.label :from_station %> <%= f.text_field :from_station %> </p> <p> <%= f.label :to_station %> <%= f.text_field :to_station %> </p> By default, this renders like this: This doesn't look great since the text fields don't line up. What's the easiest way to m...

Show progress without using an image

I would like to design a progress bar, without using an image (eg animated gif...). Can this be done with just html css and jquery? trying to be creative here :) Update: the progress percentage cannot be determined, so it has to be a loop ...

IE - hidden radio button not checked when the corresponding label is clicked

I just noticed a strange behaviour in IE7. I have radio buttons with associated labels as follows: <input type="radio" name="filter" id="filter_1" value="Activities" checked="checked" /> <label for="filter_1">Activities</label> <input type="radio" name="filter" id="filter_2" value="Services" /> <label for="filter_2">Services</label> ...

How to show images/links on DIV hover?

How can I achieve the affect like here on SO when you hover over a comment: an arrow up to vote up a flag to mark that message if you are the comment author you get option to delete as well How can I make links and images like that show when hovering over a DIV or even a table cell? ...

what's functionality of this css snippet?

-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; I don't see any difference whether adding or removing this snippet. ...

Can a css menu do this?

Is it possible to make a dropdown type menu navigation without using javascript and to show an image next to each items? Also I would like to make this work with a table, so when you hover over a table cell, it would dropdown a list of links with an icon next to each one. I am not sure if this is even possible without the use of javasc...

mod_rewrite messing up includes

Hi. I have the following mod_rewrite rule: RewriteRule ^home/ home.php [L] Fairly simple. When I head to home.php, everything loads fine, but when I head to me.com/home/, the CSS doesn't load. CSS draws from lib/css/home.css which isn't in the same folder.. To clarify, my structure is: /htdocs home.php /lib /css home....

Expanding Select box

Hi All, I was just wondering if anyone out there knows of a way to have a dropdown/select box set to a fixed width i.e. 125px, but when you open it, the dropdown portion will automatically expand to the largest item in the list, and when you select the item, have the dropdown resize back to the 125px size? It does it in FF but no curre...

How to create a tooltip with jquery without a plugin?

Hi everyone, I have used a few different tooltip plugins over the years, but I think its become time to write my own. Simply, I'm not looking for a plugin which has all the options, as I know how I want every tooltip that pops up to look and behave. Most plugins have a range of animation and positions available and I think thats excessi...

Float: left problems while using DIVs?

I have problems aligning the 2 Divs side by side like 2 columns in a table? Sometimes they align correctly but sometimes the Div on the right appears below the left Div, if I refresh the page the div returns to its original place. How can I configure them so that the divs ALWAYS appear side by side? Thanks ...

Textarea first line bold

Hi All, I have a textarea in which I want the first line to be bold (and bigger font) as the first line contains the title. I tried the :first-line pseudo class, this works in IE, but fails in Firefox. Also in IE, enters doesn't work anymore, so I can't break the line. Is this even possible? And if so, how? regards, Henk ...