css

How can I force WebKit to redraw/repaint to propagate style changes?

I have some trivial JavaScript to effect a style change: sel = document.getElementById('my_id'); sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected'); return false; This works fine with the latest versions of FF, Opera and IE, but fails on the latest versions of Chrome and Safari. It affects two descendants,...

jQuery carousel transformation

How can I transform jQuery carousel to show 3x3 square of images instead of 1x3? From: <- |image| |image| |image| -> To: |image| |image| |image| <- |image| |image| |image| -> |image| |image| |image| My source code is like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x...

CSS and browser compatibility

There are many ways we can deal with CSS browser compatibility issue. Such as using Box model design or developing different style sheets for different browsers or using Dynamic CSS techniques (writing PHP script in CSS file). Is there any way that we can know that Style which is being executed in the browser is supported by that brows...

CSS image percentages behaving wildy

I hope it's not a conflict in my CSS styles somewhere, but on my page (http://www.marioplanet.com/product.htm) I'm trying to apply a CSS rule to all images with a class of FancyBox to shrink them from 25% of their original size. Now, I've heard that this may just be applying to the containing table cell, so please tell me if this is the...

how to draw a vertical line between two option boxes using css

I have two option boxes populated. I would like to display a vertical straight line between the two and in middle of the line write "OR". I do not remember where but I've seen this be done in some place. Basically the user will be able to select either of these two option boxes. I've placed the code on jsbin. ...

Any program to combine several images into one for use with CSS and to reduce round trip count?

I'm looking at ways to reduce the quantity of Round Trips to my site for my clients. Right now I have several images that I think should be combined into a single image like this: http://aspnetajax.componentart.com/common/themes/20101/Office2010Silver/Static.png and then spit out some CSS like this: http://aspnetajax.componentart.co...

Which HTML5 reset CSS do you use and why?

Which HTML5 reset CSS do you use and why? Is there one that you've found to cover more cases? I've started using HTML5 Doctor's: http://html5doctor.com/html-5-reset-stylesheet/ It seems to work, but I'm wondering if there is something better out there. ...

Mass CSS adaptation to IE 7

I've got 5k lines of CSS for Firefox, Opera and sometimes IE 8. After all that, account told me, that it has to work properly under IE 7. How can I do it, without rewriting 40% of code? ...

Reusing jQuery UI CSS to create Widget Boxes Side-by-side

I'd like to recycle jQuery UI css to create widgetboxes that are side by side and also multiple rows... Ideal: [] [] [] [] My try so far ends up getting all the UI widgetboxes coalesced on top of each other. Even using tables to try forcing the distinct cells.. Here is the unsuccessful code for each cell: <div id="1" class="ui...

Make A List Item Clickable (HTML/CSS)

Hi, So I'm trying to make each list-item on my site clickable but I'm not sure what is the best way to do it. Please help me out. So here is the relevant HTML: <ul> <li>Backpack <a href="#" title="Buy on Amazon" target="_blank"><img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent(...

css overflow-x:auto to show only when width less than certain amount

my <html style="overflow-x:hidden; overflow-y:hidden inside have a div with overflow-x:auto; overflow-y:scroll; min-width:960px; but when my browser viewing mode is larger than 960px, it still showing the horizontal scroll bar. how to make the horizontal scoll bar only show if necessary when width less than 960? ...

Firefox loading all css files referenced in conditional comments

I have a regular css file plus two IE specific css files. In Firebug in Firefox I noticed the same div is getting properties from the three files. Why is Firefox loading iestyle.css & ie6style.css? <!--[if IE 7]> <link rel="stylesheet" type="text/css" media="all" href="iestyle.css" /> <![endif]--> <!--[if lt IE 7]> <link rel="style...

using jquery Validation.

I'm using jquery Validation. I am trying to control where the error message will appear. How can i do that? 10x ...

how to use css and <li> to make a 1 to 50 pixel square with no border

I'd like to use different sized squares from a to make pie shapes, but I'm having trouble with the css to make a square one pixel in height and width with no borders. Here is my current css #q-graph {position: relative; width: 300px; height: 300px; margin: 1.1em 0 3.5em; padding: 0; background: #DDD; border: 2px solid gray; list-st...

Aligning div css properties

<form> <div id="data" name="data" class='checkbox' style='overflow:auto;width:30%;border:1px solid #ccc;height:550px;margin-left:10px;display:inline;'></div> <div name="r_data" id="r_data" > </div> </form> In the above i populate the data dynamically from jquery. What should be the seco...

Margin/Padding where there shouldn't be

Web site: http://www.srstage.d19.us * { padding: 0; margin: 0; } works, but that is for every element I've worked out this hacky solution: #header { margin-bottom: -30px; margin-top: -20px; } The problem is there is a space at the top and under the header image. However, all the relevant elements including body seem to have its ma...

Clearing last floated element in each row

I have a set of divs with variable heights that have been floated left. When there are too many of said divs on a single line, the next div wraps to a new row (as it should). The problem I'm having is that the new row is started at an offset x position on the new row, such that the div is beneath the last div in the previous row that has...

create html box with custom UI

I need to create a specifci of 600px x 800px dimension and I need the box with its very own scroll bar with custom UI. i dont want to use the browser's scrollbar as that would not gel with the rest of the design. Can anyone help me with this? ...

Replace Button Text With Image?

I'm trying to find out how to replace the input text with a image. I can't use background: url(.../.../); because I am using CSS3 Gradients. I thought with using multiple backgrounds I am able to add another one that has a transparent image but then the rest of the background gradients disappear. Can anyone help me? ...

a:hover - using images in text navigation

Hey there! I'm trying to code my navigation on my portfolio and am looking for a simpler way of doing this than using background position and css sprites. Basically I want navigation similar to that of this website: http://www.ernesthemingwaycollection.com/ where when you hover over the navigation, a bar appears below it. Is there a s...