www.webdeveloper.com
Results 1 to 8 of 8

Thread: Page elements shifting

  1. #1
    Join Date
    Jan 2010
    Posts
    4

    Page elements shifting

    Can anyone help me with this issue I am having? All of my placed items will shift on certain browsers... Is this because the browser is outdated? There must be away around this to have to solid on all platforms... help please! thank you.

    The link below is the site for you to see for yourself...

    http://selcpa.com/

    <!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" />
    <title>Scott E. Lynch CPA</title>
    <style type="text/css">
    <!--
    body {
    background-color: #FFF;
    margin-top:20px;
    }
    .wrap {
    margin: 0 auto;
    height: 632px;
    width: 845px;
    background:url(images/displaybox.jpg)
    }
    .logo {
    margin-left: 15px;
    margin-top: 15px;
    position:absolute;
    }

    .text{
    position:absolute;
    margin-left: 153px;
    margin-top: 195px;
    }

    ul {
    list-style-type: none;
    position: absolute;
    margin-left: -25px;
    margin-top:200px;
    }

    li {
    padding-bottom: 10px;
    list-style-type: none;
    }


    -->
    </style>
    <script type="text/javascript">
    <!--
    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_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_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('images/homelt.png','images/aboutlt.png','images/serviceslt.png','images/contactlt.png')">
    <div class="wrap">
    <div class="logo"><a href="index.html"><img src="images/logo.jpg" width="88" height="88" border="0"></a></div>


    <ul>
    <li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/homelt.png',1)"><img src="images/home.png" name="home" width="65" height="23" border="0" id="home" ></a>
    <li><a href="fix.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/aboutlt.png',1)"><img src="images/about.png" name="about" width="90" height="23" border="0" id="about" ></a></li>
    <li><a href="fix.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','images/serviceslt.png',1)"><img src="images/services.png" name="services" width="81" height="24" border="0" id="services" ></a>
    <li><a href="fix.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contactlt.png',1)"><img src="images/contact.png" name="contact" width="109" height="23" border="0" id="contact" ></a></li>
    </ul>
    <div class="text"><img src="images/textbox.jpg"></div>
    </div>

    </body>

    </html>

  2. #2
    Join Date
    Dec 2009
    Location
    Colorado
    Posts
    104
    Different browsers handle margins and padding differently. It's a wise practice to avoid using them for positioning unless you don't mind things not lining up on different browsers.

  3. #3
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Add:
    Code:
    * {margin: 0; padding: 0;}
    to your CSS. This overrides any browser default margin/padding settings.
    Note: if your layout was dependent upon those settings, you'll need to tweak the spacing.

  4. #4
    Join Date
    Jan 2010
    Posts
    34
    Exactly which browsers are causing the errors? The reset might be the best solution, but it'd be nice to see what kind of shifting your speakign of! Thanks.

  5. #5
    Join Date
    Dec 2009
    Location
    Colorado
    Posts
    104
    I tested the link above in FF3.5 and it was fine. However, in IE6 it was not.

  6. #6
    Join Date
    Jan 2010
    Posts
    4
    Quote Originally Posted by KDLA View Post
    Add:
    Code:
    * {margin: 0; padding: 0;}
    to your CSS. This overrides any browser default margin/padding settings.
    Note: if your layout was dependent upon those settings, you'll need to tweak the spacing.
    Just add this to css in general or under the page properties?

  7. #7
    Join Date
    Jan 2010
    Posts
    4
    Quote Originally Posted by harrierdh View Post
    Different browsers handle margins and padding differently. It's a wise practice to avoid using them for positioning unless you don't mind things not lining up on different browsers.
    whats the best practice on positioning elements without using actual positioning? Sorry I am extremely new to coding.

  8. #8
    Join Date
    Jan 2010
    Posts
    34
    Use a container, to position the page, (set it to a pixel width, then set left and right margin to auto, instead of text-align:center;... use margin: 0 auto; ) then those elements can be positioned using top-left-right-bottom's... percentages or pixels. as long as container doesn't change size. and guarantees that the inside elements will not move around on you.

    A reset (* {margin:0 border:0 etc etc}) is a good way to ensure the browser isn't sneaking in values where you don't want it too. There are premade resets you can use, or you can default by using the *, meaning all. Here is a good start
    Last edited by WebJoel; 01-09-2010 at 11:29 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles