...

View Full Version : Trouble w/ formatting with Internet Explorer



ryan112ryan
11-23-2009, 06:03 PM
I am trying to work on this site's menu bar, I am coming in after someone had already done most of the coding. The issue is that it looks great in Firefox, but looks awful in IE. The code is below and the website is www.handsoncharlotte.org

In IE it underlines and changes the link color once clicked it. it also it putting this white space in between the blocks and I have no idea why. I am very new to CSS so I am sure its something basic I am missing.


This is what it looks like in FireFox:
http://handsoncharlotte.org/HomePage/index.php/partners/other/ff.jpg

This is what it looks like in IE:
http://handsoncharlotte.org/HomePage/index.php/partners/other/ie.jpg


I am using a Template files (idk why decided to do that but thats how it setup) here is the code for the menu bar

<!-- CSS -->
<style type="text/css">
a:visited {
text-decoration: none;
color: #ffffff;
}

a:active {
text-decoration: none;
color: #ffffff;
}
</style>


<table border="0" cellspacing="0" cellpadding="0" width="140">

<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div style="width: 100%; height: 0px; border-bottom: 1px solid #4b5109;"></div>
</td>
</tr>
<tr>
<td>
<div class="header_nav_button" id="register">
<a href="http://handsoncharlotte.org/HomePage/index.php/aboutus/aboutus.htm" class="primary_link">About Us</a>
</div>
</td>
</tr>
<tr>
<td>
<div style="width: 100%; height: 0px; border-bottom: 1px solid #4b5109;"></div>
</td>
</tr>
<tr>
<td>
<div class="header_nav_button" id="volunteer">
<a href="http://handsoncharlotte.org/HomePage/index.php/volunteer/volunteer.htm" class="primary_link">Volunteer</a>
</div>
</td>
</tr>
<tr>
<td>
<div style="width: 100%; height: 0px; border-bottom: 1px solid #4b5109;"></div>
</td>
</tr>
<tr>
<td>
<div class="header_nav_button" id="hotprojects">
<a href="http://handsoncharlotte.org/HomePage/index.php/businesscares/businesscares.htm">BusinessCares</a>
</div>
</td>
</tr>
<tr>
<td>
<div style="width: 100%; height: 0px; border-bottom: 1px solid #4b5109;"></div>
</td>
</tr>
<tr>
<td>
<div class="header_nav_button" id="login">
<a href="http://handsoncharlotte.org/HomePage/index.php/donate/donate.htm">Donate Now!</a>
</div>
</td>
</tr>
<tr>
<td>
<div style="width: 100%; height: 0px; border-bottom: 1px solid #4b5109;"></div>
</td>
</tr>
<tr>
<td>
<div class="header_nav_button" id="register">
<a href="http://handsoncharlotte.org/HomePage/index.php/programs/programs.htm">Programs</a>
</div>
</td>
</tr>
<tr>
<td>
<div style="width: 100%; height: 0px; border-bottom: 1px solid #4b5109;"></div>
</td>
</tr>
<tr>
<td>
<div class="header_nav_button" id="volunteer">
<a href="http://www.handsoncharlotte.org/sponsors.php?PHPSESSID=f90bf07ae32039373f626f9bf5f3ee4e">Our Sponsors</a>
</div>
</td>
</tr>

<tr>
<td>
<div style="width: 100%; height: 0px; border-bottom: 1px solid #4b5109;"></div>
</td>
</tr>


</table>
</td>
</tr>
</table>



Here is the code of the css file that I pull the menu box styling from:


@charset "UTF-8";
/* CSS Document */

/*
COLOR REFERENCES:
-----------------
Blue: #53bceb;
Darker Green: #4b5109;
Light Green: #d9d954;
Dark Gray: #695e49;
Light Gray: #a19789;
Old Site Yellow: #FEF1A7;
*/

body {
background-color: #fff;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color:#6A6A6A;
}

td {
vertical-align:top;
font-family:arial;
font-size:12px;
color:#6A6A6A;
}
.titleTextLargeB1 {
font-family:arial;
font-size:16px;
font-weight:bold;
color:#ffffff;
}
.titleTextMedium1 {
font-family:arial;
font-size:14px;
color:#ffffff;
font-weight:normal;
}
.titleTextMedium2 {
font-family:arial;
font-size:14px;
color:#6A6A6A;
font-weight:normal;
}
.titleTextMedium1B {
font-family:arial;
font-size:14px;
color:#ffffff;
font-weight:bold;
}
.titleTextMedium2B {
font-family:arial;
font-size:14px;
color:#6A6A6A;
font-weight:bold;
}
.titleTextMedium3B {
font-family:arial;
font-size:14px;
color:#686A90;
font-weight:bold;
}
.titleTextMedium4B {
font-family:arial;
font-size:14px;
color:#6A6A6A;
font-weight:bold;
}
.titleTextMedium5B {
font-family:arial;
font-size:14px;
color:#E7E7E7;
font-weight:bold;
}
.titleTextLarge2B {
font-family:arial;
font-size:16px;
font-weight:bold;
color:#6A6A6A;
}
.titleTextLarge2 {
font-family:arial;
font-size:16px;
color:#6A6A6A;
}
.bodyText {
font-family:arial;
font-size:12px;
color:#6A6A6A;
}
.bodyText3 {
font-family:arial;
font-size:12px;
color:#E7E7E7;
}
.bodyText2 {
font-family:arial;
font-size:12px;
color:#ffffff;
}
.bodyText1 {
font-family:arial;
font-size:12px;
color:#6A6A6A;
}
.bodyTextB {
font-family:arial;
font-size:12px;
font-weight:bold;
color:#6A6A6A;
}
.bodyTextB2 {
font-family:arial;
font-size:12px;
font-weight:bold;
color:#ffffff;
}
.smallText {
font-family:arial;
font-size:10px;
color:#6A6A6A;
}
.smallTextB {
font-family:arial;
font-size:10px;
color:#6A6A6A;
font-weight:bold;
}
.smallTextB {
font-family:arial;
font-size:10px;
font-weight:bold;
color:#6A6A6A;
}
.linkColorTextB {
font-family:arial;
font-size:12px;
font-weight:bold;
color:#006B6B;
}
.highlight {
color:#FF6600;
}

.memberNavActive {
font-family:arial;
font-size:14px;
font-weight:bold;
color:#FF6600;
}

A,A:LINK,A:VISITED,A:HOVER {
font-family:arial;
font-size:12px;
font-weight:bold;
color:#006B6B;
text-decoration:underline;
}
A.smallTextLink,A.smallTextLink:LINK,A.smallTextLink:VISITED,A.smallTextLink:HOVER {
font-family:arial;
font-size:10px;
font-weight:normal;
color:#000000;
text-decoration:underline;
}
A.smallTextLinkPast,A.smallTextLinkPast:LINK,A.smallTextLinkPast:VISITED,A.smallTextLinkPast:HOVER {
font-family:arial;
font-size:10px;
font-weight:normal;
color:#999999;
text-decoration:underline;
}
A.memberNav,A.memberNav:LINK,A.memberNav:VISITED,A.memberNav:HOVER {
font-family:arial;
font-size:14px;
font-weight:bold;
color:#6A6A6A;
text-decoration:underline;
}

A.memberNavActive,A.memberNavActive:LINK,A.memberNavActive:VISITED,A.memberNavActive:HOVER {
font-family:arial;
font-size:14px;
font-weight:bold;
color:#FF6600;
text-decoration:none;
}

A.memberNavLower,A.memberNavLower:LINK,A.memberNavLower:VISITED,A.memberNavLower:HOVER {
font-family:arial;
font-size:12px;
font-weight:bold;
color:#6A6A6A;
text-decoration:underline;
}

A.memberNavLowerActive,A.memberNavLowerActive:LINK,A.memberNavLowerActive:VISITED,A.memberNavLowerAc tive:HOVER {
font-family:arial;
font-size:12px;
font-weight:bold;
color:#FF6600;
text-decoration:none;
}

A.blackLink,A.blackLink:LINK,A.blackLink:VISITED,A.blackLink:HOVER {
font-family:arial;
font-size:12px;
font-weight:normal;
color:#6A6A6A;
text-decoration:underline;
}
A.whiteLink,A.whiteLink:LINK,A.whiteLink:VISITED,A.whiteLink:HOVER {
font-family:arial;
font-size:12px;
font-weight:normal;
color:#ffffff;
text-decoration:underline;
}
A.titleTextMedium1BLink,A.titleTextMedium1BLink:LINK,A.titleTextMedium1BLink:VISITED,A.titleTextMedi um1BLink:HOVER {
font-family:arial;
font-size:14px;
color:#ffffff;
font-weight:bold;
text-decoration:none;
}
A.titleTextMedium2Link,A.titleTextMedium2Link:LINK,A.titleTextMedium2Link:VISITED,A.titleTextMedium2 Link:HOVER {
font-family:arial;
font-size:14px;
color:#000000;
font-weight:normal;
text-decoration:none;
}

A.titleTextMedium2LinkPast,A.titleTextMedium2LinkPast:LINK,A.titleTextMedium2LinkPast:VISITED,A.titl eTextMedium2LinkPast:HOVER {
font-family:arial;
font-size:14px;
color:#999999;
font-weight:normal;
text-decoration:none;
}

A.titleTextMedium2BLink,A.titleTextMedium2BLink:LINK,A.titleTextMedium2BLink:VISITED,A.titleTextMedi um2BLink:HOVER {
font-family:arial;
font-size:14px;
color:#6A6A6A;
font-weight:bold;
text-decoration:none;
}

A.titleTextMedium2BLinkBlue {
font-family:arial;
font-size:14px;
color:blue;
font-weight:bold;
text-decoration:none;
}

A.titleTextMedium2BLinkCalendar,A.titleTextMedium2BLinkCalendar:LINK,A.titleTextMedium2BLinkCalendar :VISITED,A.titleTextMedium2BLinkCalendar:HOVER {
font-family:arial;
font-size:14px;
color:#000000;
font-weight:bold;
text-decoration:none;
}

A.titleTextMedium2BLinkPast,A.titleTextMedium2BLinkPast:LINK,A.titleTextMedium2BLinkPast:VISITED,A.t itleTextMedium2BLinkPast:HOVER {
font-family:arial;
font-size:14px;
color:#999999;
font-weight:bold;
text-decoration:none;
}

A.titleTextLargeTeam, A.titleTextLargeTeam:LINK,A.titleTextLargeTeam:VISITED,A.titleTextLargeTeam:HOVER {
font-family:arial;
font-size:16px;
font-weight:bold;
color:#6A6A6A;
font-weight:bold;
text-decoration:none;
}
.errorText {
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #FF0000;
text-decoration: none;
}

.errorTextBig {
font-family: Arial;
font-size: 16px;
font-weight: bold;
color: #FF0000;
text-decoration: none;
}

.warningText {
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: darkgreen;
text-decoration: none;
}

.calendarBorder {
/* Used for the "current day" on the calendar. (originally pale yellow) */
background-color:#FFFF66;
}

#orange {
color:#FF6600;
}

.cal_Aff_SpecialEvent_Title {
}

.cal_Aff_SpecialEvent {
background-color:#ffff66;
}

.cal_Aff_Project {
}

.cal_Aff_Course {
}

.cal_Corp_Proj {
}

.cal_Corp_Course {
}

.cal_Corp_SpecialEvent {
}

.cal_Ref_Email {
}

.cal_Ref_Full {
}

/* ------------ CUSTOM HOME.HTML ELEMENTS ------------ */

.article_title {
font-size: 18px;
font-weight: 100;
text-transform: uppercase;
color: #6a6a6a;
}

.article_divider {
width: 100%;
border-bottom: 1px solid #53bceb;
}

/* ------------ CUSTOM PAGE_FOOTER.TPL ELEMENTS ------------ */

.header_nav_button {
text-align: center;
vertical-align: middle;
position: relative;
width: 147px;
margin: 0;
padding: 17px 0;
overflow: hidden;
}

.header_nav_button a {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 14px;
font-weight: 100;
color: #fff;
text-decoration: none;
}

.header_nav_button#volunteer {
background-image: url(images/large_button_lightbrown.jpg);
}

.header_nav_button#register {
background-image: url(images/large_button_green.jpg);
}

.header_nav_button#login {
background-image: url(images/large_button_darkbrown.jpg);
}

.header_nav_button#hotprojects {
background-image: url(images/large_button_blue.jpg);
}

drhowarddrfine
11-23-2009, 06:07 PM
You will never get IE to attempt to perform like other far more modern browsers without a proper doctype. Use this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

ryan112ryan
11-23-2009, 07:48 PM
You will never get IE to attempt to perform like other far more modern browsers without a proper doctype. Use this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

I added that to the pages, with no change.... any other suggestions?

Excavator
11-23-2009, 08:05 PM
Hello ryan112ryan,
The Dr is right, you need a DocType Declaration.
The next step would be to validate your code. Have a look at this - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.handsoncharlotte.org%2FHomePage%2Findex.php%2Fhome.html


See the links about validation in my sig below.


...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum