5 Replies Latest reply on Jul 12, 2010 12:33 AM by elliotjnewmans

    Page layout only works in Firefox

    elliotjnewmans

      http://www.elliotnewman.com/index/test6.html

       

      Seems to work fine in Firefox, but not Safari or Opera. I added the "thumbs_wrapper" div and the "next_image" and "previous_image" div, and since then the layout has gone awol... spent a while trying to work it out but I seem to be getting nowhere fast.

       

      Thanks for any help

      Elliot (total "noob" as they say)

        • 1. Re: Page layout only works in Firefox
          Ben M Adobe Community Professional

          Let's start with the validation: http://validator.w3.org/

           

          First, <a> tags must go around the text that are links, an entire div cannot be a link so the <a> tags need to go inside the <div> tags.  Your entire menu at the top has this issue.

           

          Next, <font> tags are deprecated in XHTML / HTML5 and the attributes you have after are also not valid. Using inline styles as you have this code:

           

          <font color="#FFFFFF"><font size="+1">Mighty Pitons</font color></font size>
          

           

          Should be rewritten as:

           

          <span style="color:#FFF;font-size:larger;">Mighty Pitons</span>

           

          I wouldn't personally use "larger" but I think that is the only equivalent to what you are trying to accomplish.  Typically I would use em's throughout my pages to keep things in perspective, but larger should do the trick.  The other valid values can be found here: http://www.w3schools.com/CSS/pr_font_font-size.asp

           

          Lastly, your wrapper div is not closed out (missing </div>) before the </body> tag.

           

          Try clearing out those errors first and we will see where we are just to make sure the browsers are not being picky with your code.

          • 2. Re: Page layout only works in Firefox
            elliotjnewmans Level 1

            hey,

             

            Ok, so I think I have done all of that, however, the nav bar text now 

            seems to have gone darker (?) and I am not really sure what I am doing 

            when it comes to working out the closing divs, how do I know what line 

            to put that on for the wrapper div? for now I just stuck it at the 

            bottom (?)

             

            noob-out.

            • 3. Re: Page layout only works in Firefox
              Ben M Adobe Community Professional

              The closing div is fine and in the right place.  But the menu should not have changed color at all.  Let me take a look at your menu and post back.

              • 4. Re: Page layout only works in Firefox
                Ben M Adobe Community Professional

                Ok, as promised I took a look at your menu.  The one thing that has changed because you validating your code is now the links will only work when the user moves their mouse over the text.  But I do not believe this is what you originally intended.  The way to get the menu to act as you want would be to use list values like this:

                 

                <!DOCTYPE HTML>
                <html>
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <title>Untitled Document</title>
                <style type="text/css">
                ul#menu
                {
                margin:0;
                padding: 0;
                }
                #menu li
                {
                float:left;
                list-style-type: none;
                }
                #menu a:link, #menu a:visited
                {
                display:block;
                color:#CCC;
                background-color:#000;
                text-align:center;
                padding:8px 25px 0px 25px;
                text-decoration:none;
                text-transform:uppercase;
                word-spacing: 0.2em;
                letter-spacing: 0.1em;
                }
                #menu a:hover, #menu a:active
                {
                background-color:#333;
                }
                #menu_right { float: right; }
                
                </style>
                </head>
                
                <body style="font-family: Optima;">
                <div id="navbar_menu">
                <div id="menu_right">
                <ul id="menu">
                <li><a href="#home">Contact</a></li>
                </ul>
                </div>
                <ul id="menu">
                <li><a href="#home">Home</a></li>
                <li><a href="#news">About</a></li>
                <li><a href="#contact">Gallery</a></li>
                <li><a href="#about">visual Effects</a></li>
                <li><a href="#">Print Sales</a></li>
                <li><a href="#">News</a></li>
                </ul>
                </div>
                </body>
                </html>
                
                 
                

                 

                If you copy what is in the body and what is in the style and put that in place of your divs, you can eliminate the CSS in your header for each menu option and you can have the user click anywhere on the button to make the link work.  As far as the color goes I have looked through the document and none of the changes should have effected the color.  If you are still noticing it, post screenshots if you can of what you are seeing.

                • 5. Re: Page layout only works in Firefox
                  elliotjnewmans Level 1

                  Thanks. I'll post that when I get back from work. I now have two pages 

                  with slightly different methods it seems, after nancy helped diagnose 

                  my div obsession.