css

Sandbox Theme Center Menu Elements

The theme is here (the page is a live preview) http://www.plaintxt.org/themes/sandbox/ I've been trying with all mixtures of text-align: center; and margin: 0 auto; I just can't seem to move the elements of the menu into the center of the page. Any help would be great :) ...

CSS Shadows all four sides of div

I want to achieve this in CSS - not CSS3 as I want it to be supported by all browsers ie a div containing content, with the shadows on every side. The top area will be used for navigation. I have searched for tutorials but so far to no avail. Help! ...

Why is the CSS class and jQuery getting stuck when moving the cursor quickly over targeted selector when using .hover(), .addClass() & .removeClass()?

I created an h1 element that gets a class added to it and removed from it with a duration of 300ms when the mouse hovers over and off of it's containing DIV #logo using jQuery's .hover() method in concert with jQuery UI's .addClass() and .removeClass() methods. It works splendidly but only when the user hovers over #logo and stops to w...

What is WebKit and how is it related to CSS?

More recently, I have been seeing questions with the tag "webkit". Such questions usually tend to be web-based questions relating to CSS, jQuery, layouts, cross-browers compatibility issues, etc... So what is this "webkit" and how does it relate to CSS? I have also noticed a lot of -webkit-... properties in the source code for various w...

Margin Bottom Not Working

What is preventing margin bottom from working here? http://jsfiddle.net/cq8VC/1/ I just want the active one to be jumping up in the air about 10px. ...

How to create a dropdown-menu that is wider than its title?

Here's the basic structure of my menu. I cannot change that. <ul> <li><span>Bedroom</span></li> <li><span>Kitchen</span> <ul> <li><span>Pot</span></li> <li><span>Panholder</span></li> </ul> </li> <li><span>Garden</span></li> </ul> Here's the layout I want to achieve: Bedroom | ...

How to add hover effect to menu using jQuery

Hi. I've got the top menu on this page, implemented as a list (UL with ID "top-nav"): http://bit.ly/dzVXB1 I've been wrestling with it and trying to figure out how to add a fade-in/fade-out effect using jQuery when the user hovers over it. So instead of the background image changing instantly, it would fade in slowly. Here's the HTML:...

Use css to position an element in the center but with an offset

I have a link with an image behind it, the image is supposed to be centered. I need to position the link AND image so they are in the horizontal center, but offset to the left by a number of pixels. I have a fixed-width site which is centered in the middle of the page, these links must be in the same location regardless of screen resolu...

Applying Custom Style to ASP.Net Calendar control

I want to apply custom css to my calendar control. I have applied the same at corresponding locations for e.g. e.Cell.CssClass = "highlight"; clndrEvt.TodayDayStyle.CssClass = "currentDay"; clndrEvt.OtherMonthDayStyle.CssClass = "OOB"; clndrEvt.NextPrevStyle.CssClass = "dayTitle"; However when i render the control, my styles are not ...

If I use "getElementById" to alter a CSS style of a single object, how do I alter all elements that inherit the style?

All the examples I've seen use "getElementById" to get the single element, and then change that style for that singular element. I'm in the situation where I need to modify all the matching elements on the page with a style. I need to change the font size, height, and width. How do I do this, and is jQuery required or optional? The r...

html/css: table borders appearing on screen but not in printout?

Below is a test HTML file. It displays fine on screen but when I "print" or "print preview" in Firefox 3.6.8 or IE 7.0, the table borders do not appear. What am I missing? <html> <head> <style type="text/css"> body { background: black; font-family: arial, sans-serif; color: white; } ...

CSS: Keeping background scroll

I have a problem. My css body background looks like this: background: url(../doubletwo.jpg) top center repeat-x #000; background-attachment: fixed; doubletwo.jpg is 8px × 580px now im starting adding more content to my site, and after the 580px has ended, it displays the color #000. I want to like keep the background STUCK and shoul...

Changing Radio Buttons image, help.

Hey guys. I'm not much of a programmer, but still need to do some coding. Now I have a problem with changing Radio Button Image with jQuery. I've got this code of the web but it still doesn't work. It changes the Radio button images, but when I try to select, it changes only the picture of the first radio box.(every time) Here's my HTM...

Absolutely positioned element jumping down on :active - but why??

I have an anchor with a piece wrapped in <em> tags so that I can absolutely position then on top of the anchor background sprite, which sits off to the left of the rest of the anchor text. Everything is well, except on :active the absolutely positioned bit is jumping down about 20 pixels. And I'm having a tough time diagnosing this one...

Strange CSS behavior

Sorry for the length of the post. This is quite a weird problem and I want to give as much info as possible. I have the following css rules I am using for a horizontal navigation menu. The menu is created using ASP:repeaters and a database table of items. #nav { margin: 0px; padding:0px; list-style-type: none; heigh...

.slideDown() content below jumps (isn't fluid)

So I'm writing a simple page that I want to be able to slide some content down when a button is clicked. Unfortunately this also causes some issues with the button I have underneath the sliding content. When I click the first button to slide content down, it works fine. As soon as I click the 2nd button, it slides the first content up, a...

Problems with a button tag on IE7 styled with a sprite, inline-block and text-indent -9999px

I am have buttons like this: <button type="button" class="img img_button_bla" onclick="...">Bla!</button> The img class is: .img { display:inline-block; border:0 none; background-image:url(/i_common/master.png) !important; /*regular sprite image*/ background-image:url(/i_common/master.gif); /*sprite image for ie*/ } The img_button...

footer height 100% on vertically centered page.

http://www.stuartflake.com is the site that I am working on. The footer element contains the menu, the background is gray. The content of the page is centered vertically by div#position the css for this is #position { text-align:center; position:absolute; top:50%; left:0; width:100%; height:1px; display:block; } My problem is that I ...

Amusing Ways to Abuse IE's Rendering

It's really no secret to anyone who has done some web design that Internet Explorer does some funky things with rendering. There's probably lots of examples of weird bugs and workarounds out there, but I'm curious about something slightly different. Instead of bugs that people have to hack around, what bugs have you run into that can act...

HTML + CSS fancy box planning

Hi. I've got box in PSD (not PNG) which looks like this: I don't know how to crop it into box. I mean - it has to be class, because there'll be few types, with diffrent width (and of various heights of color bar too). With content it has to look like this: So - how much images it'll take? Sorry about this obscure brief - but I just...