css

css div overflow and dynamic horizontal size

I have a web page that shows lots of tabular data and each of these tables needs to be placed on one horizontal line. I have mocked up an example below: <html> <style> .outer{width:300px;height:300px;overflow: scroll;} .inner{white-space: nowrap;} .inline{float: left;} </style> <body> <div class="outer"> <div class="inner"> ...

Specifying Tab-Width?

Is it possible to define the tab-width when whitespace is displayed (say within a <pre> tag or something)? I can't find anything to do this with CSS, but this seems like it would be a pretty common thing to want to do. In my case, the tab width is so wide that it causes some of my code snippets on a page to be too wide. If I could someh...

CSS precedence

My webpage contains: <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <style type="text/css"> td { padding-left:10px; } </style> The referenced stylesheet contains: .rightColumn * {margin: 0; padding: 0;} I have a table in the rightcolumn ID where I want the cells to have a little padding. However, the refere...

IE8's rendering of transparent pngs is FUBARed on my site

I just downloaded the IE8 full release so I could test a site I just created. [Example Deleted] Focus on the left sidebar background image. It is suppose to be a 1x1 semi-transparent .png image that repeats. IE8 renders it as a gradient!!! It get's even wonkier when you try to scroll your window or mouse-over the sidebar. I had alread...

Remove gradients from richfaces controls

I'd like to use the richfaces panel as its basically the right shape and is skinnable, so I can change font, colour etc. However, as part of the default skin the horizontal bar containing the header has a gradient. My design has a flat simple colour with no gradient of any kind. How do I stop richfaces adding a gradient? If possible I...

Coding a Flexible HTML Sports Bracket

Hello, I am trying to create a bracket system using HTML. I've found other solutions, however, most require lots of absolute/relative positioning or tables. I'm looking for a way to make it flexible, so I can just change the HTML to change it from a 16-man bracket to a 64-man bracket. What I have so far (2 examples) Now, I don't see ...

how do you set a max-age for javascript/css?

I just ran Pagetest and it says I need to set a max-age for my JS/CSS. How do I do that? ...

Is it good practice to use typographic quotes on web pages?

Lately I have been seeing an increasing number of design articles encouraging the use of typographic quotes (Curly Quotes) for use in web pages over straight quotes. While I agree typographically, that correct quotes are that much more appealing and add a nice touch to a design, I wonder if it is actually better practice from an encodi...

Is it possible to create these three different layouts with CSS using the same underlying HTML structure?

I have to create a name-value list in HTML. (Actually they are form elements, label and input) How do I build this output so that a web designer can create the following three different layouts without changing the original HTML structure? Variant 1: Name One: Value One Name Two: Value Two Variant 2: Name One: Value One L...

What CSS framework would you recomend?

I'm a software developer, not a designer, but I'm being forced to design websites. In the past, I designed "by hand", never using anyone of these before. Now, I have found that there are a lot of CSS framewoks. I want to give a try to some of these, but I don't know where to begin and I don't want to waste my time. I think the most popu...

Border around specific rows in a table?

I'm trying to design some HTML/CSS that can put a border around specific rows in a table. Yes, I know I'm not really supposed to use tables for layout but I don't know enough CSS to completely replace it yet. Anyways, I have a table with multiple rows and columns, some merged with rowspan and colspan, and I'd like to put a simple border...

Cascading style sheets use "id" or "class"

when styling specific html elements, i tend to always use the class attribute. the css code looks cleaner imo. why do both exist which one should you use and when ? ...

<asp:GridView> width, <div> width

i have the following markup code: <div style="width: 72%; margin: 15px; margin-left: auto; margin-right: auto;"> <center> <div style="border-top: Solid 1px Black; border-left: Solid 1px Black; border-right: Solid 1px Black; padding: 5px; background-color: #EEEEEE;"> </div> <asp:GridView Style="width: ...

stylish HTML list examples

Hi, I have a webpage that has a bunch of very boring HTML lists on it. I'm looking for some examples of ways to style these with CSS to make them look more interesting. So far I've only really found one, and would welcome some other examples. Thanks, Don ...

list background colour screwed up in IE7

Hi, I've styled some unordered HTML lists and their heading to look like this in Firefox: Unfortunately, in IE7, they look like this: The relevant HTML is <div class="list-column"> <h4>Types de pêche</h4> <ul> <li>Pêche en lac</li> <li>Pêche en Rivière</li> </ul> </div> And the CSS is: .list-column ...

Reason for CSS property precedence?

I actually know how the browsers tend to render the following examples (results based on Opera 9.5 and Firefox 3.0), but I don't understand the reason behind them. Take this example, <style type="text/css"> #outer{color:red;} .inner{color:blue;} </style> <div id="outer" class="outer"> <div id="inner" class="inner"> <span>test...

CSS: are class and id interchangeable?

I know others have asked about using class and id in CSS files, such as Div: Class vs Id So I'm aware of the semantic and syntactic differences between class and id: that id should be used for elements that are used only once and class should be used for elements that share attributes in common. But this isn't a hard-and-fast rule, i...

how to have flexible height with fixed width

The page has flexible width from 980px to 1200px Has 3 columns Left column is fixed width Middle Column is flexible and large ( so all the extra width will go into this column) Right column is fixed width Problem Middle Column store a huge articles, however when left and right column is fixed width, it set the height of the whole p...

Is there a way to write content that screen readers will ignore?

I've just been working on a page which needs to be accessible to both sighted and visually impaired users. Some elements of the content, just by the nature of relating only to visual elements, simply do not apply to people using screen readers. For example, a link opens an audio-visual presentation in a new window, but due to circumstanc...

IE 6 & IE 7 Z-Index Problem

http://madisonlane.businesscatalyst.com I'm trying to get the div#sign-post to sit above the div#bottom. This works fine in all browsers except IE6 & IE7. Can anyone see what the problem is here? Also IE6 is displaying an additional 198px to the top of div#bottom. ...