CSS style working fine in FIREFOX, Chrome but not working in IE

Danish_555 · August 8, 2011, 11:52am

Hi,

Here’s the CSS code working fine in all browsers expect I.E.

Please help me as what I am missing.

Here’s the code:

.link-2 { display:inline-block; float:left; line-height:37px; background: url(../images/bg_link.png) top left no-repeat; width:126px; text-align:center; color:#fff; text-transform:uppercase; text-decoration:none; font-size:16px; }
.link-2:hover { background: url(../images/bg_link-act.png) top left no-repeat; text-decoration:none; color:#fff}
/*----------------------------------------Footer Starts Here-------------------------*/
input, select, textarea { font-family:Arial, Helvetica, sans-serif;	font-size:1em;	vertical-align:middle;	font-weight:normal;}
object { vertical-align:top; outline:none}
.alignMiddle{ vertical-align:middle}
.alignCenter{ text-align: center}
.container1{ width:100%}
.clear { clear:both;}
.fleft{ float:left}
.fright{ float:right}
.container {overflow:hidden; width: 100%;}
a img{ border:0px}
img{ vertical-align:top;  }
fieldset{ border:none}

.col-1, .col-2, .col-3, .col-4{ float:left}
footer { color:#2c2e31; font-size:0.875em; background:url(../images/bot.gif) top repeat-x; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
footer .inside{ padding:0px 0 0px 0px }
footer span {color:#0d82a7;}  
footer a {color:#2c2e31; text-decoration:underline}  
footer a:hover {text-decoration:none}
footer h2{color:#000; font-weight:normal; font-size:21px;  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; margin-bottom:13px; line-height:1.2em; text-transform:none}
footer ul *.list-2{margin:0; padding:0; list-style:none;}
footer ul.list-2 li{ margin:0px;  display:block; line-height:28px; overflow:hidden}
footer ul.list-2 li a{color:#000; text-decoration:none; display:block; line-height:28px; background:url(../images/marker.gif) center left no-repeat; padding-left:13px; float:left; font-size:13px } 
footer ul.list-2 .li a{  background:url(../images/icon1.gif) center left no-repeat; padding-left:33px; } 
footer ul.list-2 .li1 a{ background:url(../images/icon2.gif) center left no-repeat; padding-left:33px; } 
footer ul.list-2 .li2 a{ background:url(../images/icon3.gif) center left no-repeat; padding-left:33px; } 
footer ul.list-2 li a:hover { text-decoration:none; color:#0d82a7  }

footer ul.list-1{margin:0; padding:0; list-style:none;}
footer ul.list-1 li{ margin:0px; display:inline; background:url(../images/bg_li1.gif) center left no-repeat; float:left}
footer ul.list-1 li a{color:#797979; text-decoration:none; display:block; float:left; padding:2px 8px 2px 8px; font-size:14px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif} 
footer ul.list-1 li a:hover { text-decoration: underline; color:#797979 }
footer ul.list-1 .first{background:none;}
footer ul.list-1 .first a{ padding-left:0px}
footer ul.list-1 li .current{ text-decoration:underline; color:#797979  }
.link-1 { display:inline-block; float:right; line-height:31px; background:#3f3f3f; padding:0 27px 0 27px; color:#fff; text-transform:uppercase; text-decoration:none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; cursor:pointer; position:relative; font-size:13px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
.link-1:hover {background:#000; text-decoration:none; color:#fff}
.jamp{ width:40px; margin-left:6px}
select{font-size:.84em; color:#2d3331; height:20px}
	
.indent-2{ position:relative; padding-left:20px; float:left}
.rowElem{ height:30px}
.rowElem1{ height:30px; background:url(../images/bg_input.gif) top left no-repeat}
.rowElem2{ height:31px; background:url(../images/bg_input1.gif) top left no-repeat}
.rowElem3{ height:102px; background:url(../images/bg_input2.gif) top left no-repeat}
.block-contact span{ float:right; margin-right:40px}
.input{
   	border:none; 
	background:none;
	width:141px; height:20px;
	font-size:1em;
	color:#000;
	padding-left:14px;
	padding-right:0px;
	padding-top:5px;
	padding-bottom:5px;
}.input1{
   	border:none; 
	background:none;
	width:280px; height:20px;
	font-size:13px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#808080;
	padding-left:16px;
	padding-right:13px;
	padding-top:5px;
	padding-bottom:5px;
}
textarea{
   	border:none; 
	background:none;
	width:280px; height:86px;
	font-size:13px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#808080;
	padding-left:16px;
	padding-right:13px;
	padding-top:5px;
	padding-bottom:5px;
	margin-bottom:11px;
	overflow:auto}
.main {position: relative;	width:950px; margin:auto}
.row .col-1{ width:549px; } 
.row .col-2{ width:92px; } 
.row .col-3{ width:309px; } 
.row .col-1 .col-1{ width:167px; } 
.row .col-1 .col-2{ width:160px; } 
.container1{ width:100%}
.p2{ margin:0 0 37px 0}
/*-------------------------------------------Footer Ends Here-----------------------------------*/

Your any help would be highly appreciated!

chris_upjohn · August 8, 2011, 12:20pm

What exactly are the issues your having as just looking at CSS doesn’t paint the picture we need, is there HTML to go with this that we can use?

Danish_555 · August 8, 2011, 12:23pm

Sorry Sgt,

Please find the html part given below:


<footer>
<div class="main">
       <div class="inside">
            <div class="row">
                <div class="container p1">
                    <div class="col-1">
                    	<div class="container p2">
                        	<div class="col-1">
                            	<h2>Links</h2>

                                <ul class="list-2">
                                    <li><a href="#">Catalog</a></li>
                                    <li><a href="#">Solutions</a></li>
                                    <li><a href="#">Guarantee</a></li>
                                </ul>
                            </div>
                        	<div class="col-2">

                            	<h2>Join In</h2>
                                <ul class="list-2">
                                    <li><a href="#">Sign Up</a></li>
                                    <li><a href="#">Forums</a></li>
                                    <li><a href="#">Promotions</a></li>
                                </ul>
                            </div>

                        	<div class="col-2">
                            	<h2>Follow Us</h2>
                            	<ul class="list-2">
                                    <li class="li"><a href="#">RSS</a></li>
                                    <li class="li1"><a href="#">Twitter</a></li>
                                    <li class="li2"><a href="#">Linkedin</a></li>
                                </ul>

                            </div>
                        </div>
                        <div class="container"><span>Netrex</span> &copy; 2011 | <a href="#">Privacy policy</a></div>
                        <ul class="list-1">
                            <li class="first"><a href="#" class="current">Home</a></li>
                            <li><a href="#">About Us</a></li>

                            <li><a href="#">IT Services</a></li>
                            <li><a href="#">Careers</a></li>
                            <li><a href="#">Newsroom</a></li>
                            <li><a href="#">Resources</a></li>
                            <li><a href="#">Contacts</a></li>
                        </ul>              
                    </div>  
                    <div class="col-2">

                    	<h2>Email Us</h2>
                    </div>
                    <div class="col-3">
                    <form action="" id="form">
                        <fieldset>
                           <div class="rowElem2"><input type="text" class="input1" value="Your Name" onBlur="if(this.value=='') this.value='Your Name'" onFocus="if(this.value =='Your Name' ) this.value=''"   /></div>
                           <div class="rowElem2"><input type="Email" class="input1" value="Your Email" onBlur="if(this.value=='') this.value='Your Email'" onFocus="if(this.value =='Your Email' ) this.value=''"   /></div>
                           <div class="rowElem3"><textarea rows="40" cols="30" class="textarea" onBlur="if(this.value=='') this.value='Message'" onFocus="if(this.value =='Message' ) this.value=''"  >Message</textarea></div>
                            <div class="container">

                               <div class="fleft">
                                  <a href="#" onClick="document.getElementById('form').submit()" class="link-1">submit</a>
                               </div>                                                
                            </div>
                        </fieldset>
                     </form>
                   	</div>
                </div> 
            </div>     
        </div>
    </div> 
</footer>

chris_upjohn · August 8, 2011, 1:19pm

From what i can gather you are trying to use HTML5 elements in IE which won’t work because it doesn’t support HTML5, what you will need to do is 2 things.

You will need to grab the HTML5 reset CSS by Richard Clark which you can find at HTML5 Reset Stylesheet | HTML5 Doctor
The next thing you will need to do is grab the HTML5 Shiv which is what’s called a pollyfill which basically means it emulates the HTML5 elements. Go to the following link html5shiv - HTML5 IE enabling script - Google Project Hosting and throw the <script> tag in you <head> tags.

system · August 8, 2011, 4:11pm

CSS without the markup it’s applied to is typically gibberish.
with that many width declarations and what appear to be PRESENTATIONAL use of classes, I’m not surprised there are issued.
We’d have to see it in a working layout to even TRY to help you.

In general, that looks like a LOT of wasteful CSS – but without the HTML or seeing it live, ANY responses you get here would be nothing more than a wild guess.

– edit – oops, what I get for typing the post, then waiting three hours before hitting submit.

Seeing some markup, I see we have that HTML 5 nonsense, endless wrapping div for christmas only knows what… I’d still have to see it live on a real site, but I suspect that about half your code is unnecessary. (though that’s a given with the pointless HTML 5 tags in place)

Danish_555 · August 9, 2011, 10:09am

Thanks for your replies and sorry for the delay in my response.

I was working on footer section and didn’t integrate it to my template yet.

Now I’ve integrated with my template, its still under work and its sliced, but I’ve put images…

plesae check the live demo.

Untitled Document

PaulOB · August 9, 2011, 10:18am

Where’s the html5shiv that Dresden told you needed for <=ie9 support ? IE won’t work without it.

That’s a lot of code (weight wise) for quite a simple layout. I’m sure Jason will have something to say about that

Danish_555 · August 9, 2011, 10:39am

Its working fine now…thx to you all!!..

system · October 8, 2014, 1:21am