Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trouble w/ formatting with Internet Explorer

    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:


    This is what it looks like in IE:



    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
    Code:
    <!-- 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:

    Code:
    @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.memberNavLowerActive: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.titleTextMedium1BLink:HOVER {
    	font-family:arial;
    	font-size:14px;
    	color:#ffffff;
    	font-weight:bold;
    	text-decoration:none;
    }
    A.titleTextMedium2Link,A.titleTextMedium2Link:LINK,A.titleTextMedium2Link:VISITED,A.titleTextMedium2Link:HOVER {
    	font-family:arial;
    	font-size:14px;
    	color:#000000;
    	font-weight:normal;
    	text-decoration:none;
    }
    
    A.titleTextMedium2LinkPast,A.titleTextMedium2LinkPast:LINK,A.titleTextMedium2LinkPast:VISITED,A.titleTextMedium2LinkPast:HOVER {
    	font-family:arial;
    	font-size:14px;
    	color:#999999;
    	font-weight:normal;
    	text-decoration:none;
    }
    
    A.titleTextMedium2BLink,A.titleTextMedium2BLink:LINK,A.titleTextMedium2BLink:VISITED,A.titleTextMedium2BLink: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.titleTextMedium2BLinkPast: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);	
    }

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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">

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by drhowarddrfine View Post
    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?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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?verbos...hp%2Fhome.html


    See the links about validation in my sig below.


    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •