How do i make my site works with all browsers

Discussion in 'Web Design' started by junery00, May 8, 2013.

to remove all ads.
  1. junery00

    junery00 New Member

    Messages:
    39
    hi i recently upload my site from dreamweaver to my host , but i'm having some issues with the images , I check my page with different browsers and the images on my site some look scramble in my site , is there a easy way to fix that?
     
  2. leroy30

    leroy30 New Member

    Messages:
    485
    Well there's no magical wand waving technique that I know of. You simply need to test test test in all major browsers before you do a launch!
     
  3. junery00

    junery00 New Member

    Messages:
    39
    sorry I think i post the wrong question , ok here is what i'm facing with my site i upload it and to my host but there is only the images im my container id having problem , some images appear scramble when i try with a different browser
     
  4. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    you've said the same thing.
    and on both times failed to give us a live link, ie the website in question
    also "different" browser could be anything, so be specific. if its firefox say so, if its ie 6,7,8,9,or 10 say so. and "scramble" is also up for interpretations.
     
  5. FrontPage97

    FrontPage97 New Member

    Messages:
    71
    Also test how your site looks under different browser zoom settings (75%, 100%, 125%, etc) With your browser open, hit Ctrl plus the "+" or "-" sign to quickly change zoom settings. Different computer users use different browser settings.
     
  6. Edge

    Edge Member

    Messages:
    461
    Well given that you haven't actually provided a link to your site and you seem to think we are telepaths then the only advice I can give which I know will remove any problems is to delete the site.
     
  7. dynaweb

    dynaweb New Member

    Messages:
    3
    Try a good sitebuilder man

    For those without much technical HTML knowledge, I recommend a solution that is easier than Dreamweaver. For example, my web host offers a Sitebuilder Plan that uses an easy drag&drop interface. Here is a Demo to see what I am referring to.

    Otherwise, if you stay with Dreamweaver (or Expression Web) you may want to hire a web designer to assist you. I am sure you can come into contact with one locally or on this web forum.
     
    Last edited: May 9, 2013
  8. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    Probably uploaded in the wrong FTP mode, images should use Binary mode NOT ASCII mode.

    And please NOBODY should use Parallel's site builder for anything other than a personal 'hobby' website.
     
  9. junery00

    junery00 New Member

    Messages:
    39
  10. junery00

    junery00 New Member

    Messages:
    39
    here is my html

    <!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>Untitled Document</title>
    <style type="text/css">
    </style>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    -->
    </style></head>

    <body bgcolor="#FFFFFF">
    <div id="Outline">
    <div id="pic_2">
    <div align="center"><img src="images/Computer-Repair-wilmington-NC.jpg" width="287" height="200" /></div>
    </div>
    <div id="Header">
    <div align="center">
    <div id="mac_logo">
    <p><img src="images/Windows-Vista-vs-Mac-OS-X-Video-Demonstration-21.png" width="260" height="260" /></p>
    <p><strong>We repair MAC and WINDOWS</strong></p>
    </div>
    <img src="images/baner.jpg" width="573" height="96" /></div>
    </div>
    <div id="tex_pic">
    <p><img src="images/Computer-Repair-Sacramento.jpg" width="231" height="219" /></p>
    <strong>The Best Service in Los Angeles Ca we provide the following services.
    <li>Virus Removal </li>
    <li>Software </li>
    <li>Hardware </li>
    <li>Upgrades </li>
    <li>Hard Disc </li>
    <li>Memory </li>
    <li>Fans </li>
    <li>Motherboard </li>
    <li>Power Suplly </li>
    <li>Broken Screen
    <h1> HABLAMOS ESPANOL</h1></li></strong>
    <p>Call to make an Appointment </p>
    <p>Loreto @ 213.884.7056</p>
    <p>Gabriel @ 323.448.8941 </p>
    <div id="coms"><img src="images/compus.jpg" width="532" height="180" /></div>
    <p>or send us a <a href="mailto:[email protected]">E-mail</a></p>
    </div>
    </div>
     
  11. junery00

    junery00 New Member

    Messages:
    39
    and here is my css style

    @charset "UTF-8";
    /* CSS Document */

    #Outline {
    height: 800px;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    text-align: left;
    background-color: #FFF;
    font-size: 9px;
    }
    #Header {
    padding: 0px;
    height: px;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    background-color: #FFF;
    }
    #Footer {
    height: 25px;
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    }

    #text1 {
    margin: 0px;
    padding: 0px;
    height: 200px;
    width: 200px;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    position: absolute;
    left: 60px;
    top: 300px;
    }
    #tex_pic {
    height: 240px;
    width: 250px;
    font-size: 16px;
    }

    #text_1 {
    height: 200px;
    width: 200px;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    position: absolute;
    left: 10px;
    top: 100px;
    }

    #pic_2 {
    height: 200px;
    width: 200px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    position: absolute;
    left: 700px;
    top: 120px;
    margin: 0px;
    padding: 0px;
    }

    #Outline #tex_pic strong li h1 {
    color: #F00;
    }
    body {
    background-color: #66CCFF;
    }

    #mac_logo {
    height: 250px;
    width: 300px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    left: 700px;
    top: 350px;
    font-size: 16px;
    position: absolute;
    }

    #coms {
    height: 180px;
    width: 400px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    position: absolute;
    left: 550px;
    top: 600px;
    }
     
  12. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    Get rid of those position: absolute; rules


    NOW!!!!!!!!!!!!!!!!!!!!!!!!!!



    That is WHY it doesn't work
     
  13. junery00

    junery00 New Member

    Messages:
    39
    thats the problem correct, what positions do you suggest or can help
     
  14. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
  15. Frank

    Frank New Member

    Messages:
    117
    Even with such a simple website, the HTML code produced no less than 17 errors. Check for yourself on http://validator.w3.org/#validate_by_input.

    I would suggest to either hire a professional, or educate yourself via a beginner's course at for example http://w3school.com. My signature page contains tutorials to sharpen your skills further.
     
    Last edited: May 21, 2013
  16. TheLIWebGuy

    TheLIWebGuy New Member

    Messages:
    5
    I like to use http://www.browserstack.com and I also use an old PC next to my mac to constantly test ..
    I try to make sure that all the sites I work on work on ie8 and up
    you will go crazy designing all the way back to ie5!

    start with the hardest browser and work your way forward from there ... good luck!
     

Share This Page