Why Does This CSS Not Display in IE correctly?

[plymgary]

Hello everyone,

I'm new to this forum so, hello. 🙂

I have a question with some CSS coding. It displays correctly in Firefox but not in IE. You can see the page here.

This is the CSS code:

/*
 * Copyright 2009 Don Benjamin
 * Licensed under the Apache License, Version 2.0 (the "License"); 
 * you may not use this file except in compliance with the License. 
 * You may obtain a copy of the License at 
 *
 * 	http://www.apache.org/licenses/LICENSE-2.0 
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, 
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
 * See the License for the specific language governing permissions and 
 * limitations under the License.
 */
.searchform-label {
        display: block;
        text-align: left;
        overflow: hidden;
        font-size:1.1em;
        font-family: sans-serif;
        font-weight: bold;
text-decoration:underline;
        padding-top: 4px;
}
.searchform-input-wrapper {
        display: block;
	text-align: left;
        width: 40%;
padding-top: 5px;
padding-bottom: 40px;
}


.searchform-input-wrapper {
        .radio-button-wrapper input {
	float: right;
}


.searchform-input-wrapper .radio-button-wrapper input {
	float: left;
}


#sidebar .searchform-input-wrapper input,
.searchform-input-wrapper input,
.searchform-input-wrapper select{
        width: 100%;
}


.searchform-param {
        clear: left;
}

.searchform-params {
        clear: left;
}
.searchform-controls {
        clear: left;
        text-align: center;
}
.searchform-spoiler {
	width: 100%;
	text-align: left;
	size: 0.5em;
	opacity: 50%;
	margin: 5px;
}

Any idea why things aren't aligning properly in IE?

Any help would be appreciated. Thank you.

Gary 🙂

[dalecosp]

IE has a bug for every day of the week were CSS is concerned.

I recently learned about IE Conditional Comments[url] ... and am using them in my current work, as I have similar issues.

Something like this:

<link rel="stylesheet" href="default.css">
<!-- [if IE] >
   <link rel="stylesheet" href="ie-sux.css">
<![/if] -->

The IE stylesheet merely contains "overrides", of course. Felt dirty at first, but apparently M$, um, recommends it. :rolleyes:

[dalecosp]

Oh, and sorry ... welcome to PHPBuilder! 🙂

[plymgary]

dalecosp;10973452 wrote:

Oh, and sorry ... welcome to PHPBuilder! 🙂

Thank you for taking the time to answer me. 🙂

It was REALLY simple. :o

I changed the width and it all works perfectly now.

.searchform-input-wrapper {
display: block;
text-align: left;
width: 100%;
padding-top: 5px;
padding-bottom: 40px;
}

Thanks again.

[dalecosp]

Well, glad to hear it; I'd keep a note of the fact I gave you for future reference, though.

Things I've discovered recently:

• IE doesn't obey "min-height". You have to use "height" and there could be situations this doesn't work.

• IE decides whether it wants to show a div sometimes whether you have overflow: set or not.

• IE resizes things based on interior content, preferring its own opinions over those of the designer.

[johanafm]

Mainly true for IE6 and 7. If you don't have to support versions before IE8, you're not likely to need conditional comments. But if you do have to use them, make sure you don't just target IE, but rather specific versions of it. Else you risk breaking things for future IE versions.

[dalecosp]

johanafm;10973626 wrote:

Mainly true for IE6 and 7. If you don't have to support versions before IE8, you're not likely to need conditional comments. But if you do have to use them, make sure you don't just target IE, but rather specific versions of it. Else you risk breaking things for future IE versions.

It's a big hornet's nest, to be sure.

My problem right now, they've got me working on sites that have been around for EVER and need a complete rewrite. But, meantime, I have to alter the layout and make everything line up perfectly ... since there are hundreds of errors, IE always goes quirks/compat. mode and it just sucks having to try and work around that. And yes, I could META tag that away, but it still doesn't work in v8 'cause the HTML is so bad.