css

Floating variable-width list items without having contents wrap

I'm having a little trouble having this behave exactly as I want across all browsers, but I swear I've done this before: <!html> <head> <style type="text/css"> div { width:300px; } ul { list-style:none; margin:0; padding:0; } li { margin:0.25em 0.5em 0.25em 0; background:transparent url(http://cdn.iconfinder.net/data/ico...

Append "..." when a string is larger than desired

I'm looking for a good way to append "..." when I need to gracefully display a string that is too large and doesn't fit in the space that I want. The way that I'm currently doing that is looking for a max length of characters that will fit in the space, then cut the string to that length and append the "..." . All that in the server-si...

Debugging divs and the box model

Is there a browser plug-in I can use to help me determine why my tags and css styles don't render the way I expect them to? It would be really great if I could browse to my test page, and activate a plug in that would show me the dimensions and location of each div box. ...

How to encrypt HTML, CSS and JavaScript to prevent theft

Possible Duplicate: What are some good ways to prevent people from copying my source code? Hi, I am looking into ways to 'encrypt' my HTML and CSS code so that a visitor cannot simply 'View Source' and plagiarize it. Thanks. ...

CSS: How do I wrap text with no whitespace inside a <td>?

I've used: word-break:break-all; table-layout:fixed and the text wraps in Chrome but not Firefox. Update: I decided to change the design so it didn't need the wrap; trying to sort out a CSS fix/hack was proving too frustrating and time consuming. ...

how to achieve word wrap effect that stackoverflow has in preview box

Hey guys, I have a preview box much like the one stackoverflow uses, for submitting material that updates in real time. The problem is that a really long word hangs on the outside. Does stackoverflow use a jquery plugin to wrap long words in the preview box or a css rule? ...

IE6 form / div float issues

Having some nasty issues with IE6 and reading my div form layout, the html: <form id="brochureForm" name="brochureForm" action="/how-it-works/request-a-brochure/" method="post"> <div class="row"> <div class="label"> <label for="szName">Name</label> </div> <div class="field"> ...

IE7: Item doesn't float

I am attempting to float a span to the right within an h2 element. In IE8 and Firefox this works fine; in IE7 it is not floating. The HTML: <h2> <span id="spanA"> /*Should be floated to the right*/ <span id="spanB"> <span id="spanC"> </h2> The CSS: #spanA{ float: right; } Any ideas as to what could be wrong? ...

Making a div content to "bleed" on the bottom (or prevent the background image to render)

Okey so basically I have: <div id="content"> ... content of arbitrary size ... </div> <div id="content_bottom"></div> The style is: #content { background: transparent url(content_tile.png) center top repeat-y; width: 800px; } #content_bottom { background: transparent url(content_bottom.png) center top no-repeat; hei...

Best way to code an HTML/CSS/JS tab navigation system (no images)

Hi, I'm coding a tab system for my website that must be entirely CSS/HTML/JS (without using any images). Problem is, I keep hacking the code until when I'm finished its just a mess. I don't know whether to use positioning, or float the tabs or what. Basically one of the big problems is that after I take away the bottom-border CSS of t...

How can be printed ordered list from number 6 with html only?

Hi, How can be printed ordered list from number 6 with html only (if its not possible how should be done)? Example: 6.home 7.place 8.etc.. 9.etc.. Thanks ...

How to make Joomla main content and modules columns match height dynamically?

Hi I have a Joomla site with a template that has 2 columns. One for the main content and the other for modules. On different pages either the content column is shorter than the module column or vice versa. How can I ensure that the 2 columns are always of the same height so that they both meet up equally at the footer on any page? ...

image slicing - one large image or a succession of smaller images

Hi, I'm chopping up a new design into valid HTML/CSS. This particular design has several images that are very detailed and I'm debating on how to approach dividing them up. Here is a link to a folder containing the different options I see. There are four aptly named images - bg.brickLeft, bg.brickMiddle, bg.brickMiddle, bg.combined. ...

JQuery Cycle Plugin and CSS Sprite - no hover registered with Opera

Using JQuery Cycle plugin to create a rotating background. Also using Blueprint for CSS The images are within an absolutely positioned DIV z-index:1. Another absolutely positioned DIV is placed right on top of this one with z-index:999. Within the top DIV is a CSS Sprite Menu. The sprite menu works with every browser I've tested, FF3...

CSS3 border-radius clipping issues

I have a div with border-radius set to some value (let's say 10px), and a nested div that is the full width and height of its parent. <!-- ... --> <style type="text/css"> div.parent { display: block; position: relative; width: 100px; height: 100px; border-radius: 10px; background: #0000ff; overflow: hidden; ...

How to highlight a currently selected item/section in Wordpress with CSS (maybe PHP too)?

I would like to have the currently displayed Page or Recent post highlighted with CSS. Something like this: PAGES: ...Home ...About <--current page ...Contact RECENT POSTS: ...post1 <-- current post the user is seeing. ...post2 ...post 3 I used to accomplish that assigning an unique id to the body tag to make each page unique f...

jQuery Serialscroll CSS problem

Hi there, I'm having a terrific problem with an implementation of serialscroll. I've set it so that each list item is 100% width, to get a full screen slideshow going. You can check out the full code here: http://www.reverenddan.net/so/ The CSS is fairly simple: #slideshow { width: 100%; height:100%; margin: 0; padding: 0; position:...

Font-size differences in input fields on FF 3.5 for Mac?

I've noticed while testing my website that the font-size in fields on FF 3.5 on Mac's is bigger than on FF 3.5 for windows or any other browser. Is there a way to style this or fix it? I've tried setting input { font-size: XXpx; } to no avail! ...

HTML | Mobile and CSS media types

Below are my stylesheets for my mobile site: <META name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <META name="HandheldFriendly" content="true" /> <link type="text/css" rel="stylesheet" media="screen and (min-device-width: 481px)" href="css/smartmobile.css" /> <link type="text/css" rel="sty...

IE8 not animating jQuery menu properly

Hi all I am having a real headache. I have written a small and simple menu which employs simple animation (fade in/fade out) powered by jQuery. My issue is that the animation, when bviewed in ie8 looks awful - while the animation is running big ugly black borders are visible around the text (take a look at the link below you will see w...