12 Replies Latest reply on Aug 29, 2012 12:27 PM by Hyde1216

    Wide Screen Layout Bug?

    Hyde1216

      Hi, it's me again,

       

      I recently put up an update for the website that I have been working on that makes the site mobile friendly. Three different layouts, 1 each media query, but now I'm facing a problem that is kind of strange to me. I'm hoping there is an easy fix for this, it seems like something that could be fixed by readjusting the meda queries min-width and max-width, but after tinkering around with it for a bit I had no luck.

       

      I am using Dreamweaver 5.5, the site works on Desktops, Tablets, and Phones, but the problem is on some computers (from what I seen, only on the wide screen computer) the website layout is mixed up and out of place. Anyone who might come to this thread to help me might look at the site on their monitors and see that the site works fine, while others who are most likely using a wider screen monitor will see the problem that I am facing.

       

       

      http://showcasenc.com/

       

       

      Above is the website that I am trying to get fixed up, would anyone be able to help me pinpoint the problem? As usual, I greatly appreciate any and all help offered.

       

      I'm sorry to have made frequent trips to this board for help, but this recent update that I have been working on (making the site mobile friendly) has been stressful and challenging. The people from this forum have been of tremendous help and I'm already very thankful. I feel I'm nearing the end of this update process, I just need to get some of these bugs (like the one described above) cleaned up.

        • 1. Re: Wide Screen Layout Bug?
          Jon Fritz II Adobe Community Professional & MVP

          Everything looks right here on my 23" wide screens, do you know what browser was being used when it was getting jumbled?

          1 person found this helpful
          • 2. Re: Wide Screen Layout Bug?
            Hyde1216 Level 1

            Actually I do, oddly enough, I managed to see the person who was testing move her mouse pointer down and click the E for Internet Explorer out of the corner of my eye.

             

            Wow that was a great point you brought up, I just now tested it on Internet Explorer just now and it's giving me the glitched look, I guess it has nothing to do with it being wide screen. How would I go about fixing this?

            • 3. Re: Wide Screen Layout Bug?
              Jon Fritz II Adobe Community Professional & MVP

              Hmm, I'm still not seeing anything out of place in IE 9.0.8112 in Windows.

               

              What version of IE and OS are you running?

              1 person found this helpful
              • 4. Re: Wide Screen Layout Bug?
                Hyde1216 Level 1

                Internet Explorer version 8.0.6001.18702

                 

                 

                [EDIT]

                 

                 

                Microsoft Windows XP

                 

                Professional

                 

                Version 2002

                 

                Service Pack 3

                • 5. Re: Wide Screen Layout Bug?
                  Ken Binney Adobe Community Professional & MVP

                  I share Jon's experience

                   

                  In Firefox, I can spread my viewport across 8 monitors (4 over 4) with perfect rendering.

                  Hopefully someone wiser than I can suggest some CSS fixes for IE.

                  • 6. Re: Wide Screen Layout Bug?
                    Hyde1216 Level 1

                    I'm going to update my IE and see what happens. After seeing Jon's last post, I get this feeling it has to do with my IE being outdated.

                     

                    [EDIT]

                     

                    Turns out that I am unable to update mt IE to the latest version without Windows Vista or Windows 7.

                    • 7. Re: Wide Screen Layout Bug?
                      Nancy OShea Adobe Community Professional & MVP

                      Pre-IE9 browsers do not support CSS3 media queries. 

                       

                      As a workaround, you can insert a Conditional Comment pointing to your desktop.css file.  Be sure to put this below all other  style sheet links and above the closing </head> tag in your Template.

                       

                       

                      <!--[if lt IE 9]>
                      <link rel="stylesheet" type="text/css" href="path/Desktop.css" media="all" />
                      <![endif]-->
                      

                       

                       

                      Nancy O.

                       


                      • 8. Re: Wide Screen Layout Bug?
                        Hyde1216 Level 1

                        That didn't seem to fix it, should I delete this part of the coding:

                         

                        <!--[if lte IE 7]>

                        <style type="text/css">

                        html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/

                        </style>

                        <![endif]-->

                         

                        Before putting that in the coding?

                        • 9. Re: Wide Screen Layout Bug?
                          Nancy OShea Adobe Community Professional & MVP

                          No.  That hack is for the "has layout" bug in IE6.  

                           

                           

                          Nancy O.

                          • 10. Re: Wide Screen Layout Bug?
                            Hyde1216 Level 1

                            Maybe I just input it wrong then, here is what I have:

                             

                             

                             

                            <!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">

                            <head>

                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                            <!-- TemplateBeginEditable name="doctitle" -->

                            <title>Untitled Document</title>

                            <!-- TemplateEndEditable -->

                             

                            <!-- TemplateBeginEditable name="head" -->

                            <meta name="description" content="" />

                            <meta name="keywords" content="" />

                             

                            <!-- TemplateEndEditable -->

                            <meta http-equiv="Content-Language" content="en-us" />

                                    <meta http-equiv="imagetoolbar" content="false" />

                                    <meta name="MSSmartTagsPreventParsing" content="true" />

                                    <meta name="doc-class" content="Living Document" />

                                    <meta name="distribution" content="global" />

                                    <meta name="coverage" content="Worldwide" />

                                    <meta name="author" content="Elisa Adam" />

                                    <meta name="Copyright" content="Copyright (c) 2009-2010 Showcase Construction Co. a Design &amp; Build custom new home builder. All Rights Reserved." />

                             

                                    <meta name="classification" content="http://showcasenc.com" />

                                    <meta name="abstract" content="New home builder specializing in designing and building new custom homes." />

                                    <meta name="viewport" content="width=device-width" />

                            <link rel="stylesheet" type="text/css" href="../_css/jqueryslidemenu.css" />

                            <link rel="stylesheet" type="text/css" href="../_css/jqueryslidemenu2.css" />

                             

                            <!--[if lte IE 7]>

                            <style type="text/css">

                            html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/

                            </style>

                            <![endif]-->

                             

                            <!--[if lt IE 9]>

                            <link rel="stylesheet" type="text/css" href="path/Desktop.css" media="all" />

                            <![endif]-->

                             

                            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

                            <script type="text/javascript" src="../Scripts/jqueryslidemenu.js"></script>

                            <script type="text/javascript" src="../Scripts/jqueryslidemenu2.js"></script>

                            <link href="../_css/jqueryslidemenu2.css" rel="stylesheet" type="text/css" />

                            <link href="media.css" rel="stylesheet" type="text/css" />

                            <link href="../_css/jqueryslidemenu2.js" rel="stylesheet" type="text/css" />

                            <link href="../_css/jqueryslidemenu3.css" rel="stylesheet" type="text/css" />

                            </head>

                            • 11. Re: Wide Screen Layout Bug?
                              Nancy OShea Adobe Community Professional & MVP

                              Put your Conditional Comment just above the closing </head> tag like this:

                               

                               

                              <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
                              <script type="text/javascript" src="../Scripts/jqueryslidemenu.js"></script>
                              <script type="text/javascript" src="../Scripts/jqueryslidemenu2.js"></script>
                              <link href="../_css/jqueryslidemenu2.css" rel="stylesheet" type="text/css" />
                              <link href="media.css" rel="stylesheet" type="text/css" />
                              <link href="../_css/jqueryslidemenu2.js" rel="stylesheet" type="text/css" />
                              <link href="../_css/jqueryslidemenu3.css" rel="stylesheet" type="text/css" />
                              
                              <!--[if lt IE 9]>
                              <link rel="stylesheet" type="text/css" href="path/Desktop.css" media="all" />
                              <![endif]-->
                              
                              </head>
                              
                              
                              

                               

                              Adjust the path/filename to your own desktop.css file.

                               

                               

                               

                              Nancy O.

                              • 12. Re: Wide Screen Layout Bug?
                                Hyde1216 Level 1

                                Oh, I'm a little mad at myself for not catching that. Thank you for your help, this fixed the internet Explorer issue the site was having, which was pretty much the biggest issue I was having with the site coding.

                                 

                                Thank you again!