CSS Issue…

[Comrad3]

Hey there!

I’m having issues with my CSS displaying correctly in IE (big surprise)

This is what I want:

This is what my code displays in IE:

This is my code:

HTML:

Payment


Upload your document


Receive your edited document

CSS:

.store_progressbar {

border: 1px solid #000;

width: 293px;

margin-left: auto;

margin-right: auto;

-moz-border-radius: 5px;



/* drop shadow for all browsers, based on code from http://robertnyman.com */

-moz-box-shadow: 3px 3px 3px #000;

-webkit-box-shadow: 3px 3px 3px #000;

box-shadow: 3px 3px 3px #000;

/* For IE 8 */

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

/* For IE 5.5 - 7 */

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}



.store_payment {

display: table-cell;

text-align: center;

font-family: Trebuchet MS;

font-size: 10px;

border-right: 2px solid #000;

padding-left: 3px;

padding-right: 3px;

-moz-border-radius-topleft: 4px;

-moz-border-radius-bottomleft: 4px;

background-color: #5370B8;

color: #eee;

}



.store_upload {

display: table-cell;

text-align: center;

font-family: Trebuchet MS;

font-size: 10px;

border-right: 2px solid #000;

padding-left: 3px;

padding-right: 3px;

background-color: #eee;

}



.store_recieve {

display: table-cell;

text-align: center;

font-family: Trebuchet MS;

font-size: 10px;

text-align: center;

padding-left: 3px;

padding-right: 2px;

-moz-border-radius-topright: 4px;

-moz-border-radius-bottomright: 4px;

background-color: #eee;

}

I’m also using Curvycorners.
http://www.curvycorners.net/

[soap]

Why don’t you float payment, upload and receive left inside progressbar instead of using display:table-cell?

[TT_Mark]

I hate those Microsoft DX hacks. Horrible things that don’t always work out the way you want them to…

[Comrad3]

@Soap


.store_payment {
float: left;
...
}

.store_upload {
float: left;
...
}

.store_receive {
float: left;
...
}


gets me this:

In Firefox, and the same issue as before in IE.

Although I just noticed I spelled “Receive” wrong in about 300 different places. Thank you Notepad++ for making hasty corrections that much easier.

@TT_Mark

Yeah, I completely agree. However I’ve always designed my sites to look the same in all browsers (I know, I know, it doesn’t always have to look alike…) The client likes drop shadow, and he uses IE, so I had to compromise.

Worse comes to worst I can just drop the shadow (facepalm) for IE and go without, but I like the look of it.

[soap]

give the progress bar a background image of just the drop shadow and make sure you clear the floats.

[Comrad3]

I was hoping that I wouldn’t have to do that… But I suppose it’s just about the only thing I can do right now.

[Author]

Posts