PDA

Click to See Complete Forum and Search --> : CSS IE Button issues

Okilian
10-28-2008, 12:53 PM
Hello there,

I recently took my buttons and made them into CSS style buttons, making it a bit easier for me to add/change them. I looked at them through firefox and they were looking great (I was a happy camper). However, upon further expection, they are not working on my Internet Explorer along with front page itself. I will attach some images to show how they are looking and how I want them to look for all browsers.

Here is the CSS menu
.outer a, .outer div, .outer li, .outer ul, .outer body{
margin: 0;
padding: 0;
font-family: Verdana, Helvetica, Arial, sans-serif;

}
div.menu{
width: 144px;
}
div.menu ul{
list-style: none;
text-indent: 0px;

}
div.menu li{
margin-top: 0px;
}
div.menu a{
font: 20px Verdana;
padding: 0px;
color:#E2BF00;
display:block;
padding: 0px 40px;
height: 36px;
text-decoration: none;
background: url('http://utbluecrew.com/menu/images/button1.gif');
}
div.menu a:hover{
background: url('http://utbluecrew.com/menu/images/button2.gif') no-repeat right;
padding: 0px 40px;

}
div.menu a:active{
background: url(http://utbluecrew.com/menu/images/button3.gif) no-repeat right;
padding: 0px 40px;
}


Here is the HTML for a test page i'm using

<html>

<head>
<body background="images/plainbgrnd.jpg">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>University of Toledo Blue Crew</title>




</head>


<div align="center">
<table border="0" width="95%" height="843" cellspacing="0" cellpadding="0">
<tr>
<td align="center" colspan="2"><font size="6" face="Arial">
<a href="http://utbluecrew.com/index.html">
<img border="0" src="images/242_ToledoRocketsLogoLarge.jpg" width="148" height="105" align="left"></a><b><br>
&nbsp;</b></font></td>
<td align="center"><font size="6" face="Arial">
<img border="0" src="http://utbluecrew.com/images/BANNER3.jpg" width="645" height="144" align="left"></font></td>
</tr>
<tr>
<td width="2080" height="699" align="left" valign="top" rowspan="2">




<p align="center">




<head>
<link rel="stylesheet" href="/menu/menu_style.css" type="text/css" />
</head>
<div class="outer">
<div class="menu">
<ul>
<li><a href="http://utbluecrew.com/members.html" target="_self">Members</a></li>
<li><a href="http://utbluecrew.com/alumni.html" target="_self">Alumni</a></li>
<li><a href="http://utbluecrew.com/photo.html" target="_self">Photos</a></li>
<li><a href="http://utbluecrew.com/video.html" target="_self">Videos</a></li>
<li><a href="http://utbluecrew.com/calendar.html" target="_self">Calendar</a></li>
<li><a href="http://utbluecrew.com/traditions.html" target="_self">Traditions</a></li>
<li><a href="http://utbluecrew.com/links.html" target="_self">Links</a></li>
<li><a href="http://utbluecrew.com/faq.html" target="_self">FAQ</a></li>
<li><a href="http://utbluecrew.com/feedback.html" target="_self">Feedback</a></li>
<li><a href="http://utbluecrew.com/donations.html" target="_self">Donation</a></li>
</ul>
</div>
</div>

<td width="27" height="699" align="left" valign="top" rowspan="2">




<img border="0" src="images/line3(a).gif" width="27" height="501" align="right" hspace="0"></td>
<td width="81%" height="21" align="center" valign="top">






<img border="0" src="images/line1(b).gif" width="675" height="27" align="left" hspace="0"><tr>
<td width="81%" height="672" align="center" valign="top">






&nbsp;



</body>
Okilian
10-28-2008, 12:57 PM
Here are the two difference.

The site is

www.utbluecrew.com (http://www.utbluecrew.com)


Thanks for any help. I'm pretty new into CSS, so any help be very appreciated.
Okilian
10-28-2008, 01:09 PM
I figured it out. It was a padding issue, but now it brings up another question.

How can I get the text over enough so that it does not cover up the button image, but doesn't create more space.
Okilian
10-28-2008, 01:23 PM
And I figured it out to a point where I am happy.

.outer a, .outer div, .outer li, .outer ul, .outer body{
margin: 0;
padding: 0;
font-family: Verdana, Helvetica, Arial, sans-serif;

}
div.menu{
width: 144px;
}
div.menu ul{
list-style: none;
text-indent: 0px;

}
div.menu li{
margin-top: 0px;
}
div.menu a{
font: 20px Verdana;
padding: 0px;
color:#E2BF00;
display:block;
text-indent:28px;
text-align:center;
padding: 0px 0px;
height: 36px;
text-decoration: none;
background: url('http://utbluecrew.com/menu/images/button1.gif');
}
div.menu a:hover{
background: url('http://utbluecrew.com/menu/images/button2.gif') no-repeat right;
padding: 0px 0px;

}
div.menu a:active{
background: url(http://utbluecrew.com/menu/images/button3.gif) no-repeat right;
padding: 0px 0px;
}