Hone down the problem as much as possible
Rather than posting a giant mess of code, see if you can hone down your example to just the code relevant to the problem at hand. Here are some basic steps:
- Take the page where the problem lies.
- Remove all unnecessary CSS.
- Remove all unnecessary JavaScript.
- Remove all unnecessary content.
- If you have files that are relevant to the page (e.g. a JS library), make sure you link to them as described above.
An example
A forum user was asking for help with a photo site they were building. There was a problem with hover and the navigation in IE. They provided a poorly-phrased question and no code. They did provide a link to their website. This is what the source code looked like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no"/>
<meta http-equiv="imagetoolbar" content="false"/>
<title>photo - Newark Airport, shortly before taking off</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="shortcut icon" href="/photoblog-a/images/smile.ico" type="image/x-icon"/>
<link type="text/css" media="screen" rel="stylesheet" href="/photoblog-a/css/default.css"/>
<link type="text/css" media="screen" rel="alternate stylesheet" title="gray-theme" href="/photoblog-a/css/gray.css" />
<link type="text/css" media="screen" rel="alternate stylesheet" title="white-theme" href="/photoblog-a/css/white.css"/>
<link type="text/css" media="screen" rel="alternate stylesheet" title="black-theme" href="/photoblog-a/css/black.css"/>
<script type="text/javascript" src="/photoblog-a/js/jquery_1-3-2.js"></script>
<script type="text/javascript" src="/photoblog-a/js/jquery_do-timeout.js"></script>
<script type="text/javascript" src="/photoblog-a/js/styleswitch.js"></script>
<script type="text/javascript">
var iPhotosL = 16;
var iPhNo = parseInt(1);
var iPhNoP = parseInt(iPhNo+1);
var sCurrPage = "page1"
var iLastPg = 10
var sCurrSection = "section4"
var iLastSect = 9
</script>
<script type="text/javascript" src="/photoblog-a/js/pb.js"></script>
</head>
<body>
<h1>
photo - Newark Airport, shortly before taking off
</h1>
<noscript>noscript</noscript>
<div id="wrapper">
<div id="share">
<a href="http://www.facebook.com/share.php?u=http://www.example.com/photoblog-a/section4/page1/photos.jsp?pn=1" target="_blank"><img src="/photoblog-a/images/btn_fb.png" alt="share - Facebook" width="20" height="20" /></a> <a href="http://twitter.com/home?status=http://www.example.com/photoblog-a/section4/page1/photos.jsp?pn=1" target="_blank"><img src="/photoblog-a/images/btn_twitter.png" alt="share - twitter" width="20" height="20" /></a> <a href="http://del.icio.us/post?url=http://www.example.com/photoblog-a/section4/page1/photos.jsp?pn=1" target="_blank"><img src="/photoblog-a/images/btn_delicious.jpg" alt="share - del.icio.us" width="20" height="20" /></a>
</div>
<div id="clrTheme">
color theme:
<ul>
<li><a href="#" id="chClrBlack">black</a> </li>
<li><a href="#" id="chClrWhite">white</a> </li>
<li><a href="#" id="chClrGray">gray</a> </li>
<!--<li><a href="#" id="chClrBeige">beige</a></li>-->
</ul>
</div>
<div id="showTN">
<a href="photos.jsp?tn=pb">go to thumbmails</a>
</div>
<div id="SlideShow">
<a id="lnSlideShow" href="#">run slide show</a>
</div>
<div id="photo">
<a class="photo_link photo_link_next" href="photos.jsp?pn=2"><span>next</span></a>
<img id="photoImg" class="photo" src="images/1.jpg" alt="photo 1 -- Newark Airport, shortly before taking off" />
<div class="captions">
Newark Airport, shortly before taking off
</div>
</div>
<div id="nav">
<div class="navInnerLeft">
<span class="nav-left"><<</span>
</div>
<div class="navInnerRight">
<a class="nav-right" href="photos.jsp?pn=2
">>></a>
</div>
<div id="navAll">
<ul>
<li>
<span><span class="hide">photo </span>1 </span>
</li>
<li>
<a href="photos.jsp?pn=2"><span class="hide">go to photo </span>2</a>
</li>
<li>
<a href="photos.jsp?pn=3"><span class="hide">go to photo </span>3</a>
</li>
<li>
<a href="photos.jsp?pn=4"><span class="hide">go to photo </span>4</a>
</li>
<li>
<a href="photos.jsp?pn=5"><span class="hide">go to photo </span>5</a>
</li>
<li>
<a href="photos.jsp?pn=6"><span class="hide">go to photo </span>6</a>
</li>
<li>
<a href="photos.jsp?pn=7"><span class="hide">go to photo </span>7</a>
</li>
<li>
<a href="photos.jsp?pn=8"><span class="hide">go to photo </span>8</a>
</li>
<li>
<a href="photos.jsp?pn=9"><span class="hide">go to photo </span>9</a>
</li>
<li>
<a href="photos.jsp?pn=10"><span class="hide">go to photo </span>10</a>
</li>
<li>
<a href="photos.jsp?pn=11"><span class="hide">go to photo </span>11</a>
</li>
<li>
<a href="photos.jsp?pn=12"><span class="hide">go to photo </span>12</a>
</li>
<li>
<a href="photos.jsp?pn=13"><span class="hide">go to photo </span>13</a>
</li>
<li>
<a href="photos.jsp?pn=14"><span class="hide">go to photo </span>14</a>
</li>
<li>
<a href="photos.jsp?pn=15"><span class="hide">go to photo </span>15</a>
</li>
</ul>
</div>
</div>
<div id="sideNavOuter">
<div id="sideNav">
<p class="hide">PAGES IN THIS SECTION:</p>
<div class="pages">
<div class="pagesLeft">
<ul>
<li class="mainDimmed">page 1</li>
<li><a href="/photoblog-a/section4/page2/photos.jsp">page 2</a> </li>
<li><a href="/photoblog-a/section4/page3/photos.jsp">page 3</a> </li>
<li><a href="/photoblog-a/section4/page4/photos.jsp">page 4</a> </li>
<li><a href="/photoblog-a/section4/page5/photos.jsp">page 5</a> </li>
<li><a href="/photoblog-a/section4/page6/photos.jsp">page 6</a> </li>
<li><a href="/photoblog-a/section4/page7/photos.jsp">page 7</a> </li>
<li><a href="/photoblog-a/section4/page8/photos.jsp">page 8</a> </li>
<li><a href="/photoblog-a/section4/page9/photos.jsp">page 9</a> </li>
<li><a href="/photoblog-a/section4/page10/photos.jsp">page 10</a> </li>
</ul>
</div>
<div class="clearFloats"> </div>
</div>
<div class="divider"></div>
<p class="hide">SECTIONS:</p>
<div id="navSections">
<ul>
<li>
<a href="/photoblog-a/section1/page1/photos.jsp" >CA, NY, Switzerland<br/> » 2000-2005</a>
<!-- <span class="red"><br /> - new</span>--> </li> <li>
<a href="/photoblog-a/section2/page1/photos.jsp" >India <br/> » Feb 2007</a>
<!-- <span class="red"><br /> - new</span>--> </li> <li>
<a href="/photoblog-a/section3/page1/photos.jsp" >Jersey City, NYC<br/> » March - Dec 2007</a>
<!-- <span class="red"><br /> - new</span>--> </li> <li>
<span class="main sectionsLinks">Chile <br/> » Dec 2007 - Jan 2008</span>
<!-- <span class="red"><br /> - new</span>--> </li> <li>
<a href="/photoblog-a/section5/page1/photos.jsp" >South Beach<br/> » Jan 11, 2008</a>
<!-- <span class="red"><br /> - new</span>--> </li> <li>
<a href="/photoblog-a/section6/page1/photos.jsp" >Jersey City, NYC<br/> » March - July 2008</a>
<!-- <span class="red"><br /> - new</span>--> </li> <li>
<a href="/photoblog-a/section7/page1/photos.jsp" >Air Show<br/> » May 25, 2008</a>
<!-- <span class="red"><br /> - new</span>--> </li> <li>
<a href="/photoblog-a/section8/page1/photos.jsp" >Chile <br/> » July 2008</a>
<!-- <span class="red"><br /> - new</span>--> </li> <li>
<a href="/photoblog-a/section9/page1/photos.jsp" >Jersey City, NYC <br/> » August 2008 - Dec 2008</a>
<!-- <span class="red"><br /> - new</span>--> </li>
</ul>
</div>
<div class="divider"></div>
<p class="hide">OTHER LINKS:</p>
<div id="navBottom">
<ul>
<li><a href="/photoblog-a/feedback.jsp?section=section4&page=page1&pn=1" >feedback</a></li>
<li><a href="/" >home</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I took the time to help this user. It took me three hours to reduce their original code into this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
a.photo_link { position:absolute; display:block; top:5px; width:296px; height:402px; z-index:600; border:solid 1px yellow;}
a.photo_link_prev {left:5px;}
a.photo_link_next {right:5px;}
a.photo_link_prev:hover { background:url('http://example.com/photoblog-a/images/prev2.png') 15px 170px no-repeat; }
a.photo_link_next:hover { background:url('http://example.com/photoblog-a/images/next2.png') 238px 170px no-repeat; }
</style>
</head>
<body>
<a class="photo_link photo_link_prev" href="photos.jsp?pn=10"></a>
<a class="photo_link photo_link_next" href="photos.jsp?pn=12"></a>
<img class="photo" src="http://example.com/photoblog-a/section4/page1/images/11.jpg" alt="text equivalent of image goes here"> />
</body>
</html>
Once we had that, solving the problem was much easier (It turned out to be a bug in IE8, which could be addressed by adding a transparent background image to the navigation link.)
The moral of the story
By making a bare bones example to demonstrate your problem, you:
- more often than not find the cause of the problem yourself
- show anyone who is considering answering your question that you don’t expect them to do all the work.
This will dramatically increase your chances of getting a reply to your question.