site that has coding tips for common IE problems?

Sun, 2010-08-15 23:05

#1

Deuce

Offline

Guru

Timezone: GMT-6

Joined: 2005-11-20

Posts: 4416

Points: 1835

Why not post your code and

Why not post your code and see if we can help you?
A link would be better, but if you don't have one, at least provide all HTML and CSS using the code tags.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Sun, 2010-08-15 23:07

#2

Ed Seedhouse

Offline

Guru

Timezone: GMT-8

Joined: 2005-12-14

Posts: 3544

Points: 643

You can start at the Position

You can start at the Position is Everything site.

Ed Seedhouse

Posting Guidelines

High on a hill, in Wrangellia.

Mon, 2010-08-16 00:31

#3

tebk77

Offline

Regular

Timezone: GMT-5

Joined: 2009-05-16

Posts: 31

Points: 33

coding for middle column drop problem

Okay, here is the URL:
http://www.frankfordfriendsschool.org/_TESTnav4.html
(ALSO please note problem with the navigation "buttons" width doesn't work. Everyone has told me to use % measurement but it turns out goofy.)

Here is the .html file (all css styles are in here EXCEPT FOR NAVIGATION BAR styles):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="keywords" content="Frankford Friends School, Quaker school for grades K to 8, Frankford Friends, Quaker school, Quaker education, education, Philadelphia, Frankford neighborhood, Frankford Quaker school" />
  <title>FFS TEST Home + Navbar page</title>
 
<link href="navigationTEST4.css" rel="stylesheet" type="text/css" /> 
 
<style type="text/css">
/* These styles would normally go in an external style sheet */
 
/* Universal style rule */
*{
  /* Block all browser default margins and padding */
  margin:0;
  padding:0;
}
 
#wrapper {
	position:relative;
	width:740px;
	background-color:#fff;
	margin:0 auto; /* horiz. centers the wrapper */
	margin-top:20px;
	text-align:center; /* for IE 5 and 6 browsers  */
}
 
body {
	margin-left:auto;
	margin-right:auto;
	background-color:#5c5cad;
	text-align:left;
}
 
#header { /* FFSmasthead */
	margin:0 auto;
	width:100%;
	background-color:#fff;
	text-align:left;
}
 
#layer1 { /* links UPPER RT CORNER of masthead */
	position:absolute; 
	z-index:10;
	visibility:visible; 
	right:20px; 
	top:27px;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size:11px;
	font-weight:normal;
	color:#ffdf9c;
	text-align:right;
}
 
#photos {
	clear:both;
	display:block;
	margin-top:28px; /* height of navbar */
	width:700px;
	margin:0 auto;
}
 
#container { /* contains left, content, right columns */
	width:700px;
	background-color:#fff;
	margin:20px auto 20px auto;
	text-align:left;
}
 
#leftcolumn{ /* Remember, content left margin must match this width */ 
	margin:0;
	width:155px; 
	float:left;
} 
 
#rightcolumn{ 
	margin:0;
	width:155px;
	float:right;
}
 
#content{ /* middle column */
	margin-top:0;
	margin-left:170px;  /* Left margin must be larger than leftcolumn div width - 155 */
	margin-right:170px; /* Right margin must be larger than rightcolumn div width - 155 */
	padding:0 2px 0 2px;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size:12px;
	color:#000;
	text-align:center; 
}
 
#content h1{ /* FIRST headline in content section */
	font-size:11px;
	font-weight:bold;
	color:#003399;
}
 
#content h2{ /* headlines that follow first */
	margin-top:10px;
	font-size:11px;
	font-weight:bold;
	color:#003399;
}
 
#content p{ /* text goes under headline */
	margin:0;
	font-size:10px;
	font-weight:normal;
	color:#000;
	text-decoration:none;
}
 
 
#footer{
	clear:both;
	width:700px;
	background-color:#ffcc66; /* yellowish orange */
	margin:40px auto 20px auto;
	padding:5px 0 5px 0;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, Sans-Serif;
	color:#000;
}
 
a:link {text-decoration: none}
a:visited {text-decoration: blue}   /* CHANGE THIS COLOR LATER */
a:active {text-decoration: yellow}  /* CHANGE THIS COLOR LATER */
a:hover {text-decoration: underline; color: red;} /* CHANGE THIS COLOR LATER */
 
</style>
 
 
</head>
 
<body>
 
<div id="wrapper">
 
	<div id="header">
    	<a href="index.html"><img src="/images/FFSmasthead.jpg" alt="Frankford Friends School" /></a><br />
    </div>
 
    	<div id="layer1">CONTACT<br />
        				CALENDAR<br />
                		DIRECTIONS<br />
        </div>
 
 
<div id="navbar"> 
<ul> 
	<li class="selected"><a href="#" id="home">HOME</a></li> 
 
    <li><a href="#">ABOUT FFS<!--[if gte IE 7]><!--></a>
    <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
        	<li><a href="#">About Option1</a></li>
  			<li><a href="#">About Option2</a></li> 
  			<li><a href="#">About Option3</a></li> 
  			<li><a href="#">About Option4</a></li> 
  		</ul><!-- End About drop-down menu --> 
  		<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li><!-- End About -->
 
    <li><a href="#">ADMISSION<!--[if gte IE 7]><!--></a>
    <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
        	<li><a href="#">Admission Option1</a></li>
  			<li><a href="#">Admission Option2</a></li> 
  			<li><a href="#">Admission Option3</a></li> 
  			<li><a href="#">Admission Option4</a></li> 
  		</ul><!-- End drop-down menu --> 
  		<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li><!-- End Admission -->
 
    <li><a href="#">ACADEMICS<!--[if gte IE 7]><!--></a>
    <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
        	<li><a href="#">Academics Option1</a></li>
  			<li><a href="#">About Option2</a></li> 
  			<li><a href="#">About Option3</a></li> 
  			<li><a href="#">About Option4</a></li> 
  		</ul><!-- End drop-down menu --> 
  		<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li><!-- End Academics -->
 
    <li><a href="#">PARENTS<!--[if gte IE 7]><!--></a>
    <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
        	<li><a href="#">Parents Option1</a></li>
  			<li><a href="#">About Option2</a></li> 
  			<li><a href="#">About Option3</a></li> 
  			<li><a href="#">About Option4</a></li> 
  		</ul><!-- End drop-down menu --> 
  		<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li><!-- End Parents -->
 
    <li><a href="#">ALUMNI<!--[if gte IE 7]><!--></a>
    <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
        	<li><a href="#">Alumni Option1</a></li>
  			<li><a href="#">About Option2</a></li> 
  			<li><a href="#">About Option3</a></li> 
  			<li><a href="#">About Option4</a></li> 
  		</ul><!-- End drop-down menu --> 
  		<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li><!-- End alumni -->
 
    <li><a href="#">GIVING<!--[if gte IE 7]><!--></a>
    <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
        	<li><a href="#">Giving Option1</a></li>
  			<li><a href="#">About Option2</a></li> 
  			<li><a href="#">About Option3</a></li> 
  			<li><a href="#">About Option4</a></li> 
  		</ul><!-- End drop-down menu --> 
  		<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li><!-- End Giving -->
</ul> 
</div>
<!-- END NAVBAR -->
 
    			<div id="photos"><img src="/images/3col-photos.jpg" alt="3 school photos" /><br /></div>
 
                	<div id="container">
 
                		<div id="leftcolumn"><img src="/images/Lpic.jpg" alt="drawing of future FFS building" /><br /><br /></div>
                			<div id="rightcolumn"><img src="/images/Rpic.jpg" alt="red school building" /><br /><br /></div>
                				<div id="content"><img src="images/eventsbox.jpg" alt="NEWS AND EVENTS" />
 
                                    <h1><a href="calendar.html">School Starts Monday, September 28, 2010 (Full Day)</a></h1>
 
                                    	<h2><a href="Schoolsupplies_2010.2011.pdf">School Supplies List for 2010-2011</a></h2>
                                    		<h2><a href="tax.html">Pennsylvania businesses: give to the FFS Scholarship Fund instead of paying state taxes!</a></h2> 
                                    	<p><a href="tax.html">Applications for the 2010 EITC tax credit program will be accepted beginning on July 1. Apply early - credits will run out quickly!</a></p>
 
                                        <br />
 
                      </div><!-- end content -middle column -->
 
                	</div><!-- end container -->
 
 
                <div id="footer">
                    	&nbsp;FRANKFORD FRIENDS SCHOOL &nbsp;|&nbsp; 1500 ORTHODOX ST. &nbsp;|&nbsp; PHILADELPHIA, PA 19124 &nbsp;|&nbsp; 215.533.5368 &nbsp;|&nbsp; </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%46%72%61%6e%6b%66%6f%72%64%46%72%69%65%6e%64%73%40%76%65%72%69%7a%6f%6e%2e%6e%65%74%22%3e%46%72%61%6e%6b%66%6f%72%64%46%72%69%65%6e%64%73%40%76%65%72%69%7a%6f%6e%2e%6e%65%74%3c%2f%61%3e%27%29%3b'))</script><p>&nbsp;<br />
                </div>
 
 
 
</div><!-- end wrapper -->
 
 
</body>
</html>

Here is the .css code:

/* navigationTEST4.css */ 
 
 
/********** Navbar division styles **********/ 
#navbar{
  background:#fff;
  width:700px; /* height:21px; do not need this since height is listed below? */ 
  top:150px;  /* Same as masthead div height */ 
  margin-right:20px;
  margin-left:20px;
  padding-bottom:4px;
} 
 
 
/* Remove bullets from ul in the navbar */ 
#navbar ul{ 
  list-style-type:none; 
} 
 
/* List items in the navbar */ 
#navbar li{ 
  float:left; 
  /* Required for drop-down menus */ 
  position:relative; 
}
 
/* Applies to navbar links, unvisited and visited */ 
#navbar a, 
#navbar a:link, 
#navbar a:visited{ 
  text-decoration:none; 
  font-family:Verdana, Geneva, Arial, Sans-Serif; 
  font-size:11px; 
  color:#333399; /* blue text */ 
  background:#fff; /* white bkgrd */
  display:block; 
  height:21px;
  width:20%;  /* HOW SPREAD OUT LINKS IN NAVBAR and center each topic in each section?? */
  border-right: solid 1px #333399; 
  line-height:20px; 
  text-align:center; 
  outline-style:none; 
} 
 
/* Navbar hover, active, and current page links */ 
/* other navbar links when selected will have the blue bkgrd and yellow text */ 
#navbar a:hover, 
#navbar a:active, 
#navbar li.selected a:link, 
#navbar li.selected a:visited{ 
  background:#333399; /* blue */ 
  color:#ffcc33; /* yellow text */
} 
 
/* Drop-down menu styles */ 
/* Applies to drop-down menus in navbar */ 
#navbar li ul{ 
  position:absolute; 
  z-index:100; 
  visibility:hidden; 
  border-bottom: solid 2px #999; 
} 
 
/* Make drop-down visible on navbar hover */ 
#navbar li:hover ul, 
#navbar li a:hover ul{ /* IE6 hack */ 
  visibility:visible; 
  top:21px;
  left:0; 
} 
 
 
/* Applies to links on the drop-down menu */ 
#navbar li:hover ul li a, 
#navbar li a:hover ul li a{ /* IE6 hack */ 
  background:#ccc; /* Removes background image */ 
  color:#000; 
  text-align:left; 
  display:block; 
  width:21em;  /* was 19em */ /* HOW DO I MAKE THIS SO WIDTH WILL FIT THE WIDEST TEXT?? */
  padding:0 0 0 6px; /* was 1em */
  height:auto; 
} 
 
/* Hover on drop-down menu links */ 
#navbar li:hover ul li a:hover, 
#navbar li a:hover ul li a:hover{ /* IE6 hack */ 
  background: #aaa; 
  color:#000; 
} 
 
/* IE6 hack applies to its table drop-down */ 
#navbar table { 
  margin:-1px; 
  border-collapse:collapse; 
  position:absolute; 
  top:0.5em; 
  left:0; 
  z-index:100; 
}
 
#home {
color:blue!important;
background:#FFF!important;
border-left:solid 1px #333399!important;
}

site that has coding tips for common IE problems?

Why not post your code and

You can start at the Position

coding for middle column drop problem

New forum topics

User login

Navigation