2 Replies Latest reply: Sep 16, 2013 1:22 PM by mytaxsite.co.uk RSS

    Dreamweaver CC Navigation Bar Problem

    Katelyn1994!

      I have just created a website with dreamweaver cc and now my navigation bar is not working correctly in Internet Explorer, but the website works in google chrome perfectly. The images are not on the same line and do not appear. My url is www.schuntingpreserve.com. I have already deleted the spaces between my words such as directions real.jpg to directionsreal.jpg and this did not help. If anyone thinks they might have a solution please comment.

        • 1. Re: Dreamweaver CC Navigation Bar Problem
          Ken Binney MVP

          Hi Katelyn -

           

          Your navigation images are not uploaded to the root folder on your server, or their file names do not match your link code. Also remember that most servers are case sensitive, so check for capitalization errors.

           

          Your page is taking forever to download even on my very high speed connections. You need to resize your large pictures in your graphics program to the approximate size you intend to display them on your page.

           

          Also Google search engines can not read text in images likesummarysummary.png

          • 2. Re: Dreamweaver CC Navigation Bar Problem
            mytaxsite.co.uk MVP

            Further to what Ken Binney has said, you still have lots of errors on your page.  I have tried to clear some of them using %20 for spaces but this is not a permanent solution.  Also, <center>..</center> is not a valid html tag these days so you need to remove it complately.

             

            I suggest use this code for your first page and then see if it works or not:

             

            <!doctype html>
            <html>
            <head>
            <meta charset="utf-8">
            <title>Website Page</title>
            <style type="text/css">
            body {
                  margin-left: 0px;
                  margin-top: 0px;
                  margin-right: 0px;
                  margin-bottom: 0px;
                  background-color: #333333;
            }
            #Container {
                  padding: 0px;
                  height: auto;
                  margin-right: auto;
                  margin-left: auto;
                  border-width: 0px;
                  border-style: solid;
                  background-color: #999999;
            }
            #Holder {
                  padding: 0px;
                  height: auto;
                  width: 900px;
                  margin-right: auto;
                  margin-left: auto;
                  border-width: 0px;
                  border-style: solid;
            }
            #Header {
                  padding: 0px;
                  height: 350px;
                  width: 900px;
                  margin-right: auto;
                  margin-left: auto;
                  border-width: 0px;
                  border-style: solid;
                  background-color: #000000;
            }
            
            #NavBar {
                  padding: 0;
                  height: 32px;
                  width: 900px;
                  list-style:none;
                  margins:0;
            
            }
            #MainContent {
                  padding: 0px;
                  height: 300px;
                  width: 900px;
                  margin-right: auto;
                  margin-left: auto;
                  border-width: 0px;
                  border-style: solid;
                  background-color: #FFFFFF;
            }
            
            #Photo {
                  padding: 0px;
                  width: 900px;
                  margin-right: auto;
                  margin-left: auto;
                  border-width: 0px;
                  border-style: solid;
                  height: 50px;
                  line-height: 0;
            }
            
            
            
            #Left {
                  padding: 0px;
                  float: left;
                  height: 300px;
                  width: 760px;
                  border-width: 0px;
                  border-style: solid;
                  background-color: #000000;
            }
            
            #Right {
                  padding: 0px;
                  float: right;
                  height: 300px;
                  width: 140px;
                  background-color: #333333;
            }
            
            #gallery {
                  padding: 0px;
                  height: 310px;
                  width: 900px;
                  margin-right: auto;
                  margin-left: auto;
                  border-width: 0px;
                  border-style: solid;
                  background-color: #000000;
            }
            #table_horz {
                width: 900px;
                height: 300px;
                overflow: auto;
            }
            
            
            
            #wrapper {
                  background-image: url(My%20Site/Assets/3.jpg);
            }
            #Inside Right {
                  height: 300px;
                  width: 230px;
                  background-color: #333333;
            }
            #Footer {
                  height: 55px;
                  width: auto;
                  background-color: #333333;
            }
            </style>
            <script type="text/javascript">
            function MM_preloadImages() { //v3.0
              var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
            }
            function MM_swapImgRestore() { //v3.0
              var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
            }
            function MM_findObj(n, d) { //v4.01
              var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
              if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
              for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
              if(!x && d.getElementById) x=d.getElementById(n); return x;
            }
            
            function MM_swapImage() { //v3.0
              var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
               if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
            }
            </script>
            </head>
            
            <body onLoad="MM_preloadImages('RatesRealDealRoll.jpg','BookREalRoll.jpg','DirectionsRealRoll.jpg','ContactUSRealDEalRoll.jpg','homebutton2.png','homebutton2.jpg')">
            <div id="Container">
                       <div id="wrapper">
                                  <div id="Holder">
                                             <div id="Header">
                                                        <p style="text-align:center;">
            
                                                                              <label><img src="My%20Site/Assets/logo.png" width="447" height="312"  alt=""/></label>
            
                                                        </p>
                                             <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','homebutton2.jpg',1)"><img src="Homebutton.jpg" alt="" width="180" height="50" id="Image13"></a><a href="RatesRealPage.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','RatesRealDealRoll.jpg',1)"><img src="RatesRealDeal.jpg" alt="" width="180" height="50" id="Image3"></a><a href="Book%20a%20hunt.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','BookREalRoll.jpg',1)"><img src="BookREal.jpg" alt="" width="180" height="50" id="Image4"></a><a href="Directions.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','DirectionsRealRoll.jpg',1)"><img src="DirectionsReal.jpg" alt="" width="180" height="50" id="Image5"></a><a href="Contact%20Us.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','ContactUSRealDEalRoll.jpg',1)"><img src="ContactUSRealDEal.jpg" alt="" width="180" height="50" id="Image7"></a></div>
                                             <div id="NavBar">
                                                        </div>
            
                                             <div id="MainContent">
                                                        <div id="Left"><img src="My%20Site/Assets/facebook%20dad3.png" width="266" height="300"  alt=""/><img src="My%20Site/Assets/summarysummary.png" width="471" height="297"  alt=""/></div>
                                                        <div id="Right">
                                                                   <div id="Inside">
                                                                              <p style="text-align:center;">
            
                                                                                                    <label><img src="My%20Site/Assets/Established%20Poster!!!!!!!!!!!.png" width="103" height="111"  alt=""/></label></p><img src="My%20Site/Assets/inside%20stuff.png" width="140" height="66"  alt=""/><img src="My%20Site/Assets/footer.png" width="140" height="81"  alt=""/><p></p></div>
                                                        </div>
                                             </div>
                                             <div id="Photo">
                                                        <p style="text-align:center;">
            
                                                                              <label><img src="My%20Site/Assets/Photo%20Gallery%20Word%203.png"  alt="" width="300"
              height="49" /></label>
            
                                                        </p>
                                             </div>
            <div id="gallery">
            <div id="table_horz">
            <img src="Background%20Picture%20for%20Website.jpg" width="380" height="300"  alt=""/>
            <img src="Sky.jpg" width="380" height="300"  alt=""/>
            <img src="Dad's%20Pics%201%20003.jpg" width="380" height="300"  alt=""/>
            <img src="Dad's%20Pics%201%20103.jpg" width="380" height="300"  alt=""/>
            <img src="Dad's%20Pics%201%20100.jpg" width="380" height="300"  alt=""/>
            <img src="Dad's%20Pics%201%20131.jpg" width="380" height="300"  alt=""/>
            <img src="pheasant_3.jpg" width="380" height="300"  alt=""/>
            <img src="Dad's%20Pics%201%20083.jpg" width="380" height="300"  alt=""/>
            <img src="Pics%20064.jpg" width="380" height="300"  alt=""/>
            <img src="quail_3.jpg" width="300" height="300"  alt=""/>
            <img src="facebook%20dad.JPG" width="400" height="300"  alt=""/>
            </div></div>
                                             </div>
                                  </div>
                                  <div id="Footer"><p style="text-align:center;">
                                             <label><img src="My%20Site/Assets/footer%202.png" width="246" height="51"  alt=""/></label></p>
                                  </div>
            </div>
            
            </body>
            </html>
            

             

            When you have done it, upload a new file and post back so that CSS can then be checked and validated.

             

            Good luck.