CSS - Why Are The Words Not Spread Out?

Hi there

I am busy making a drop shadow for a div on my site. Works great in everything except IE (well there's a surprise).

What I would like to have is a shadow that emanates from a light source directly above the element (figuratively speaking). The shadow will in other words extend in all directions (or ideally to the left, right and bottom, but not the top) from underneath the div.

I can't seem to get the spread right in IE. It seems that in IE I can only have the shadow extend in one direction.

Here is what it looks like in Chrome, Firefox and Safari (what I want it to loo like)


And this is what I have managed to do for IE 7 & 8


And here is the code:
Code:

#myDiv{-moz-box-shadow: 0px 10px 33px #000; -webkit-box-shadow: 0px 10px 33px #000; box-shadow: 0px 10px 33px #000; /* For IE 8 */-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#000000');}

I have been considering using three different elements each with it's own shadow going in different directions. This means a lot of tweaking to only display these elements in IE, and just seems messy in general.

Does anyone have any ideas on how I can solve this in a simpler way?

Any advice would be much appreciated

My site is here...

css here...

I have two .gif files I want to use in the header... the main one (header.gif) should be centered (as it is now)... while the other (header_spread.gif) should repeat on the left and right sides of the centered header.gif... The .gif files are transparent, so I can't use the spread as the entire background... I'd also like to refrain from making header.gif (don't care about header_spread.gif) a background or making the background of header.gif white, and have it in an <img> tag instead so I can dynamically change my header with the seasons... (though if background is the only way, I could have a header class for each season and have my script change it, so that solution would technically work too, but create a larger css file.)

I need help formatting this properly... I can get the spread to work as a background for the entire div header, but that messes up the look of the center gif...

Thanks
Bryan

Hello! Im Using Joomla to build my website. Im using a module and im changing the css styling. There only one problem im having. The tabs on the module align to the left and because i dnt have enough tabs to fill out the space it leave a blank space on the right.

I just want to know how to edit the CSS to make the taps justify / spread out evenly. The makers of the module say any question on customization will be ignored that why i post this question here to see if i could get some help. Its "Tabs Manager GK3" from Gavick

Heres the CSS. Can any1 just make the changes for me please and post it below Thanks in advance!

Code:

.clearfix-tabs{
clear: both;
}

.gk_tab_item_space{
padding: 10px;
}

div.gk_tab-style3 {
position: relative;
}

div.gk_tab_wrap-style3 {
margin: 0 auto;background: #171717;
border: 4px solid #822864;
}

div.gk_tabmenu-style3 {
overflow:hidden;
}

ul.gk_tab_ul-style3 {
list-style-type: none;
margin: -1px 0 0;
padding: 0;
}

ul.gk_tab_ul-style3 li {
background: none;
padding: 0;
float: left;
cursor: pointer;
margin: 0;
position: relative;
}

ul.gk_tab_ul-style3 li span {
background: url('../../images/horizontal/style3/bg_tab.png') repeat-x 0 0;
display: block;
height: 28px;
line-height: 27px;
padding: 0 10px;
font-size: 10px;
color: #000;
text-transform:uppercase;
border: 1px solid #e1e1e1;
border-left: none;
}

ul.gk_tab_ul-style3 li.active span {
background: url('../../images/horizontal/style3/bg_tab-active.png') repeat-x 0 0;
color: #171717;
border: 1px solid #b32784;
}

div.gk_tab_container0-style3 {
clear: both;
}

div.gk_tab_container1-style3 {
overflow: hidden;
}

div.gk_tab_item-style3 {
float: left;
overflow: hidden;
padding: 10px;
}

div.gk_tab_button_next-style3,
div.gk_tab_button_prev-style3 {
width: 24px;
height: 24px;
background: url('../../images/horizontal/style3/b_next.png') no-repeat 0 0;
cursor: pointer;
position: absolute;
top: 43%;
right: 0;
}

div.gk_tab_button_prev-style3 {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 0 0;
left: 0;
right:inherit;
}

div.gk_tab_button_next-style3:hover {
background: url('../../images/horizontal/style3/b_next.png') no-repeat 100% 0;
}

div.gk_tab_button_prev-style3:hover {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 100% 0;
}

.gk_tab_container0-style3,
.gk_tab_container1-style3,
.gk_tab_container2-style3{
position:relative;

}

I have a series of horizontal radio buttons which are generated dynamically from a database record set. There are 3 sets on 3 different rows. The problem is the labels for the buttons are not the same length so when the page is generated the radio buttons do not line up neatly, vertically.

Is there a way of getting a CSS style to put a tab at the end of a word so that the next radio button lines up.

Or alternatively is there an even easier way to do this.

The obvious solution is to nest a two column table with fixed length column and have this repeat, rather than a single row. But there may be a more elegant method.

I've got some words that I need to show up in the margin. However, take the words and rotate them 90 degrees. That's how I need it to show up. Right now, I'm using an image and it's coming out like crap on some browsers and find on others. Is there any way to do this with css?