www.webdeveloper.com
+ Reply to Thread
Results 1 to 8 of 8
  1. 01-07-2010 11:35 AM #1
    poi11628
    poi11628 is offline Registered User
    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>
    Reply With Quote Reply With Quote
  2. 01-07-2010 12:17 PM #2
    harrierdh
    harrierdh is offline Registered User
    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.
    Reply With Quote Reply With Quote
  3. 01-07-2010 12:54 PM #3
    KDLA's Avatar
    KDLA
    KDLA is offline Registered User
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,166
    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.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)
    Reply With Quote Reply With Quote
  4. 01-07-2010 01:08 PM #4
    iRedMedia's Avatar
    iRedMedia
    iRedMedia is offline Registered User
    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.
    Reply With Quote Reply With Quote
  5. 01-07-2010 02:20 PM #5
    harrierdh
    harrierdh is offline Registered User
    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.
    Reply With Quote Reply With Quote
  6. 01-07-2010 04:26 PM #6
    poi11628
    poi11628 is offline Registered User
    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?
    Reply With Quote Reply With Quote
  7. 01-07-2010 04:29 PM #7
    poi11628
    poi11628 is offline Registered User
    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.
    Reply With Quote Reply With Quote
  8. 01-07-2010 08:37 PM #8
    iRedMedia's Avatar
    iRedMedia
    iRedMedia is offline Registered User
    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 10:29 PM.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

     

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles