...

View Full Version : text-decoration:none in Links for IE??



joanzn
10-27-2011, 10:08 PM
I have some VERY simple code here just to figure out WTF to do for links text decoration in stupid ***** IE!

SO I built a simple menu with images as the menu with javascript onmouse events.


<div id="head">
<ul class="menu">
<li>
<a href="#" onmouseover="" onmouseout=""><img src="" id="1" /></a>
</li>
</ul>
</div>

ok so I made like 5 links like this for the nav menu. then I styled the whole thing so that if floats left an list has no style, at the top with no margin blah,blah,blah. the code for making these links decoration go way for IE isn't working at all.
so far i used :


#head{
height:20px; //height of the imgs
width:1280px; // width of all the imgs floating left
margin:0;
padding:0;
}
//Ive tried all of these combos below
/* .menu li a{
text-decoration:none
}
.menu li a{
text-decoration:none;
}
.menu a{}// tried this alone and with all the pseudo classes as well
.menu li a:link{text-decoration:none}
.menu li a:visited{text-decoration:none}
.menu li a:active{text-decoration:none}
.menu li a:hover{text-decoration:none}
.menu li a:focus{text-decoration:none}
*/

I'm lost and sick of stupid IE .. I wish we didn't have to code for them asswads.
Any Help.. much thanks

Excavator
10-27-2011, 10:23 PM
Hello joanzn,
.menu li a {text-decoration: none;} should work fine. You just have some stuff above it that is messing you up.
You are not commenting your CSS correctly when you use //

joanzn
10-27-2011, 10:36 PM
Ya it doesn't work at all .. this isn't my code i was just typing out all the combos I've used. and i don't have comments // in the code. but ya .. you would think that would work but it doesn't. .. I'll post my actual code in a sec n see what you think

HTML:


<div id="wrapper">
<div id="header">
<ul class="head">
<li><img alt="heading" src="images/header/h1_01.png" /></li>
<li><a href="#" onmouseover="document.getElementById('1').src='images/header/h2_02.png'" onmouseout="document.getElementById('1').src='images/header/h1_02.png'"><img alt="home" src="images/header/h1_02.png" id="1" /></a></li>
<li><a href="#" onmouseover="document.getElementById('2').src='images/header/h2_03.png'" onmouseout="document.getElementById('2').src='images/header/h1_03.png'"><img alt="comment" src="images/header/h1_03.png" id="2" /></a></li>
<li><a href="#" onmouseover="document.getElementById('3').src='images/header/h2_04.png'" onmouseout="document.getElementById('3').src='images/header/h1_04.png'"><img alt="develop" src="images/header/h1_04.png" id="3" /></a></li>
<li><a href="#" onmouseover="document.getElementById('4').src='images/header/h2_05.png'" onmouseout="document.getElementById('4').src='images/header/h1_05.png'"><img alt="search" src="images/header/h1_05.png" id="4" /></a></li>
<li><a href="#" onmouseover="document.getElementById('5').src='images/header/h2_06.png'" onmouseout="document.getElementById('5').src='images/header/h1_06.png'"><img alt="login" src="images/header/h1_06.png" id="5" /></a></li>
<li><img alt="heading" src="images/header/h1_07.png" /></li>

</ul>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>

css:


html
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.back.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='back.png', sizingMethod='scale')";
z-index:-1;
}
body
{
margin:0;
padding:0;
}
#wrapper
{ margin:0 auto 0 auto;
padding:0;
width:1280px;
height:auto;
}
#header
{ margin:0;
padding:0;
height:20px;
width:1280px;
}

.head
{
position:absolute;
margin:0;
padding:0;
width:1380px; /* it's suppose to be 1280px but with the stupid link borders IE f's it up*/
height:20px;
}
.head li
{ margin:0;
padding:0;
list-style-type:none;
float:left;
}
.head li a{text-decoration:none;}
#content{}
#footer{}

Excavator
10-27-2011, 10:52 PM
.head li a {text-decoration:none;} is working.

Could it be what you are seeing is the blue box IE insists on putting around images?
Add this bit to test: .head img {border: none;}

joanzn
10-27-2011, 10:56 PM
Stupid IE want's
img{border:0;}
That took awhile!
thanks fer the help tho!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum