css

CSS set width to fill % of remaining area

Hi all, Sorry for the slightly rubbish title. I could not think how to describe this one better. I am trying to implement the Google Friend Connect members gadget on my site, (just got into the scheme and want to put it in without a major redesign, at least for testing sake). My problem is as follows: I have a container div that has...

HTML table to overlap parent div dynamically

How can i make the inner table to overlap the parent div with 5 px while resizing? my current solution: <div id="crop"> <table style="width:105%; height:105%;"> //table cells </table> </div> problem is that it gets smaller when resizing... how can I make it constantly overlap with 5px; ...

Strategies for dealing with CSS in ASP.Net MVC UserControls

I have just started playing with the ASP.Net MVC framework, and today I created a simple UserControl that uses some CSS. Since the CSS was declared in a separate file and included in the View that called the UserControl, and not in the UserControl itself, Visual Studio could not find any of the CSS classes used in the UserControl. This g...

Two HTML tables side by side, centered on the page

I have two tables on a page that I want to display side by side, and then center them within the page (actually within another div, but this is the simplest I could come up with): <style> #outer { text-align: center; } #inner { text-align: left; margin: 0 auto; } .t { float: left; } table { border: 1px solid black; } #clearit ...

IE adds extra top-margin to every li-element.

I am currently doing IE-hacks on a website I'm working on: http://www.timkjaerlange.com/wip/co2penhagen/ I got a problem with this unordered list. IE seems to add extra top-margin for every li-element, making my navigation look like a flight of stairs: http://dl.getdropbox.com/u/228089/ie-prob.jpg I'm using conditional comments to tar...

Internet Explorer matrix transformation filter problem

As one of my hobby projects, I'm developing an image effects jQuery plugin. It's supposed to allow you to apply a few basic effects to an image, and it does this by using the canvas HTML element (for browsers that support it), or Internet Explorer filters (for, well, Internet Explorer). A demo page is available at: http://sandbox.odynie...

Is there something similiar to YUI grid

I just want to know that is there something similar to YUI grid. ...

Are there any practical reasons to use "em" instead of "pt" font size units?

One CSS rule I have learned is that you should use the relative "em" font-size unit instead of the absolute "pt". The general idea is to set the font-size in your body tag to e.g. "94%" and then set all other elements with an "em" size like this. The reasoning is: you can then change the relative size of all the font sizes on your sit...

Report section style list numbering in CSS?

Now I know about the "normal" CSS list styles (roman, latin, etc) and certainly in years past they were somewhat inflexible in not allowing things like: (a) or a) only a. Now I believe that you can get an effect like the above with the :before and :after pseudo-elements. Is that correct? And whats the browser compatibility like ...

detecting true border, padding and margin from Javascript

Is there a way to detect the true border, padding and margin of elements from Javascript code? If you look at the following code: <html> <head> <style> <!-- .some_class { padding-left: 2px; border: 2px solid green; } --> </style> <script> <!-- function showDetails() { ...

using css to duplicate html elements

Hi, I've been handing a design for a webpage which I'm trying to implement correctly. This design contains navigation elements which are partially or entirely duplicated all over the page - in particular, links to the main 3 categories for navigation are present on the page no less than 4 times. I'm no web design expert, but I don't l...

javascript style.width not working in firefox with transitional doctype

I have a script that animates a small DIV popping up on the page. It all works fine in IE, and in FF if I remove the DOCTYPE, but when the DOCTYPE is XHTML/Transitional, in Firefox, the width does not change. this.container.style.visibility = "visible"; alert("this.container.style.width before = " + this.container.style.width) this.con...

Four nodes with a width of 25% don't fit next to each other?

I have a header node in which four child nodes reside. None have borders, padding nor margins. All four of them have the width:25%; css rule. In Opera it works just fine, in IE the last block flips to the next line sometimes depending on the width of the window. I can solve it by giving one block a width of 24.8%, but Opera interprets t...

Space between two rows in a table?

Is this possible via CSS? I'm trying tr.classname {border-spacing:5em} to no avail. Maybe I'm doing something wrong ? ...

Making an expandable button in HTML

I need to make OK and Cancel buttons in my HTML, and I'd like them to be a fixed width so the two buttons are the same size. For example, like this: <style> button.ok_cancel { width: 50px; background-color: #4274af; font-size: 9px; line-height: 12px; color: #fff; cursor: pointer; text-transform: uppercase; ...

Loading css rules dynamically in Webkit (Safari/Chrome)

Hi all, I currently have issues in Webkit(Safari and Chrome) were I try to load dynamically (innerHTML) some html into a div, the html contains css rules (...), after the html gets rendered the style definitions are not loaded (so visually I can tell the styles are not there and also if I search with javascript for them no styles are fo...

Styling issues with a file input field in firefox

Mornin' all! Not entirely sure whats going on here, I am currently doing the front end for a site with looooads of forms, all styled up and looking pretty in IE, but I've just noticed that in firefox the file input fields aren't responding to any of my styles, all the other types of input fields are fine. I've checked it in Firebug and ...

Vertical Table in a web page.

Hi, I want to switch between vertical and horizontal table layout for same data. Although it is possible to do it by making applying the same CSS for the first column for the vertical layout as the css applied for the header row for the Horizontal layout. Is there is any way where we can make the webpage render the way we like it (Ho...

Stacking Divs with CSS

I know this is particularly difficult with CSS and the current set of browsers, but nonetheless I have the requirement. I need to be able to have 3 divs in a column. Each div should be able to take up a certain percentage of the vertical space (for example, 33%). The contents of each div could end up being larger than the available spac...

CSS display:inline property with list-style-image: property on <li> tags

I'm having a problem using CSS's display:inline property with the list-style-image: property on <li> tags. Basically, I want to output the following: * Link 1 * Link 2 where * represents an image. I'm doing this with the following bit of HTML: <ol class="widgets"> <li class="l1">Link 1</li> <li class="l2">Link 2</li> </ol> ...