Web Analytics Made Easy -
StatCounter I need some help with padding and margin issue browser incompatibilities - CodingForum

Announcement

Collapse
No announcement yet.

I need some help with padding and margin issue browser incompatibilities

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • I need some help with padding and margin issue browser incompatibilities

    I'm just learning using HTML and CSS together. I have used a tutorial from W3C that's for HTML 4.01, which is outdated I know but I'm trying to learn and making it easier by using the tutorial and an easier set of HTML tags.

    The site looks fine and the way I want it in Opera 12.15, IE 11.589.

    Click image for larger version

Name:	Image1.jpg
Views:	1
Size:	47.8 KB
ID:	2283611

    The site looks like this in Chrome 53.0.2785.116 m. and Firefox 43.0.01.

    Click image for larger version

Name:	chrome-look.jpg
Views:	2
Size:	47.3 KB
ID:	2283612

    The photo is different because I have a Javascript that switches photos on load or reload.

    I'm sure there is something wrong with my code but I don't know what it is. I've read a lot of sites about browser incompatibilities and how to work around it but I tried a lot of padding and margin reset code but it doesn't seem to be helping at all.

    Keep in mind that I am new and learning so I don't want to be bashed for terrible and outdated code. lol Solutions are welcome because I don't know what to do right now. The reason why I have images is because I don't have a host right now but will later on. I'm going to post some code here. I have a Dropbox account but prefer not to post it in public with all due respect.

    HTML Index code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title> Ancient Coin Junk Yard </title>
    <style>
    * margin:0;padding:0;
    </style>
    <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
    
    <!-- Site navigation menu -->
    
    <ul class="navbar">
      <li><a href="index.html"><u>HOME</u></a>
      <li><a href="articles.html"><u>ARTICLES</u></a>
      <li><a href="gallery.html"><u>GALLERY</u></a>
      <li><a href="links.html"><u>LINKS</u></a>
    </ul>
    
    <br>
    
    <!-- Main content -->
    
    <h1><u>ANCIENT WHITESHEET!!</u></h1>
    
    <script language="JavaScript">
    <!--
    
    /*
    Random Image Script- By JavaScript Kit (http://www.javascriptkit.com) 
    Over 400+ free JavaScripts here!
    Keep this notice intact please
    */
    
    function random_imglink(){
    var myimages=new Array()
    //specify random images below. You can have as many as you wish
    myimages[1]="img/r-coins/anastasius-ae-follis.jpg"
    myimages[2]="img/r-coins/constantine-2-caesar-votive-5.jpg"
    myimages[3]="img/r-coins/agrippa-reshoot.jpg"
    myimages[4]="img/r-coins/magnentius.jpg"
    myimages[5]="img/r-coins/roman-republic-ae-semis.jpg"
    myimages[6]="img/r-coins/Plautilla.jpg"
    
    var ry=Math.floor(Math.random()*myimages.length)
    if (ry==0)
    ry=1
    document.write('<img src="'+myimages[ry]+'" border=0>')
    }
    random_imglink()
    //-->
    </script>
    <br>
    <hr>
    
    <p>Welcome to my personal website devoted to ancient coins.
    
    <p>For over a year I've been kicking around the idea of making a personal website for ancient coins. The main idea is to showcase many coins that I possess as well as housing any articles that I feel like writing as the time goes by. 
    
    <p>I once heard that we are merely custodians for the ancient relics of the ancient world.
    
    <address>Web database started,<br>
    May 17th, 2014.</address>
    
    <hr>
    
    <p><b><u>11-16-2015:</b></u> Finally resumed work on my personal website. I've finished adding pages to each section as well as adding coins to every gallery category. It may be the right time to show a preview to friends.
    
    <hr>
    
    <p><b><u>05-17-2014:</b></u> Initial design plans of setting the basic template. Finally decided to go for a plain, fast and economic site that uses very little bandwidth. It also has a 90s type design style coded in the latest HTML 4.0. The index also has a random image loader. Everytime the page is loaded, a coin out of six will be loaded.
    
    <hr>
    
    </body>
    </html>

    CSS Code for index and other pages

    Code:
    body {
      margin-left: 0%;
      padding-left: 13%;
      font-size: 1.0em;
      font-family: "Times New Roman",
            Times, serif;
      color: black;
      background-color: white }
    ul.navbar {
      list-style-type: none;
      padding: 0;
      margin: 0;
      position: absolute;
    top: 2em;
      left: 1em;
      width: 10%;
       }
    h1 {
      font-family: "Times New Roman",
            Times, serif; }
    ul.navbar li {
      background: grey;
      margin: 0.5em 0;
      padding: 0.3em;
      border-right: 1em solid black }
    ul.navbar a {
      text-decoration: none }
    a:link {
      color: blue }
    a:visited {
      color: blue }
    address {
      margin-top: 1em;
      padding-top: 1em;
      border-top: thin dotted }
    
    pre {
        display: block;
        font-family: "Times New Roman",
            Times, serif;
        white-space: pre;
        margin: 1em 0;
    }

  • #2
    You are doing yourself no favors studying HTML 4.01 Transitional. It's like walking around the U.S. speaking Latin. Sure it's a language, but no one understands you. Learn HTML5 period.

    And by the way Your CSS does not style an image you have used an attribute to do that
    document.write('<img src="'+myimages[ry]+'" border=0>')
    this attribute, border, is no longer an attribute in HTML5; it belongs to CSS styling and document.write() is a large No-No.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

    Comment


    • #3
      HTML 4 transitional was for use in 1997/8 to convert from HTML 3.2 to HTML 4 so that you didn't have to switch immediately from one to the other but could transition.
      Stephen
      Learn Modern JavaScript - http://javascriptexample.net/
      Helping others to solve their computer problem at http://www.felgall.com/

      Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

      Comment


      • #4
        I've been converting the code to HTML 5. Some of it is going to require some thinking for sure but I already have a good deal of it done.

        That Javascript code with document.write() is going to be difficult at best converting it to the new coding style with HTML 5. I'm going to try to deal with that last but seems like it needs a complete rewrite. I don't have the skill to deal with that yet.

        Tomorrow I will post some more code if you guys don't mind. One reason why I'm converting to HTML 5 in hopes that it can help me resolve the issues I'm having. So far, it seems like Firefox and Chrome does not support body margins and padding, apparently. Although margins and padding works as expected on everything else. So, you guys think you have enough knowledge to help me trouble shoot if I can't solve it soon?

        Comment


        • #5
          1. To resolve browser compatibility issues use CSS HACKS code(for safari, opera, Firefox, chrome etc..)

          2. For example... the top menus list like home, articles, gallery ---remove the bullet points at L.H.S. of menus
          Click image for larger version

Name:	screenshot_1.jpg
Views:	2
Size:	47.3 KB
ID:	2270487


          3.USE CSS HACKS FOR CHROME

          @supports (-webkit-appearance:none)
          {
          ul li{
          list-style:none;
          }
          }
          4.USE CSS HACKS FOR FIREFOX

          @supports (-moz-appearance:meterbar) {
          }

          THESE DIFFERNT DIFFERENT HACKS USE IN YOUR STYLESHEET
          Click image for larger version

Name:	Screenshot_2.jpg
Views:	1
Size:	42.8 KB
ID:	2270488

          To resolve browser compatibility issues you can see more steps in website: Browserhacks.

          Comment


          • #6
            Originally posted by VwishSolution View Post
            1. To resolve browser compatibility issues use CSS HACKS code(for safari, opera, Firefox, chrome etc..)
            This is bad advice. You don’t need any “hacks” if you’re coding properly in the first place. CSS hacks are for n00bs.
            Stop solving problems you don’t yet have!

            Comment


            • #7
              Here is the updated code to HTML 5, it needs more work for sure but I'm getting closer to getting it complete. I do want to try to avoid hacks if I can because one day those hacks may not be supported or something similar and it would suck if suddenly browsers didn't support it anymore and my site would be messed up perhaps.

              Code:
              <!DOCTYPE html>
              <html>
              <head>
              <meta charset="UTF-8" />
              <html lang="en-US">
              <title> Ancient Whitesheet </title>
              <link rel="stylesheet" href="style.css">
              </head>
              
              <body>
              
              <!-- Site navigation menu -->
              
              <nav>
              <ul>
                <li><a href="index.html"><u>HOME</u></a>
                <li><a href="articles.html"><u>ARTICLES</u></a>
                <li><a href="gallery.html"><u>GALLERY</u></a>
                <li><a href="links.html"><u>LINKS</u></a>
              </ul>
              </nav>
              
              <!-- Main content -->
              
              <h1><u>ANCIENT WHITESHEET!!</u></h1>
              
              <script language="JavaScript">
              
              /*
              Random Image Script- By JavaScript Kit (http://www.javascriptkit.com)
              Over 400+ free JavaScripts here!
              Keep this notice intact please
              */
              
              function random_imglink(){
              var myimages=new Array()
              //specify random images below. You can have as many as you wish
              myimages[1]="img/r-coins/anastasius-ae-follis.jpg"
              myimages[2]="img/r-coins/constantine-2-caesar-votive-5.jpg"
              myimages[3]="img/r-coins/agrippa-reshoot.jpg"
              myimages[4]="img/r-coins/magnentius.jpg"
              myimages[5]="img/r-coins/roman-republic-ae-semis.jpg"
              myimages[6]="img/r-coins/Plautilla.jpg"
              
              var ry=Math.floor(Math.random()*myimages.length)
              if (ry==0)
              ry=1
              document.write('<img src="'+myimages[ry]+'">')
              }
              random_imglink()
              //
              </script>
              
              <br>
              
              <hr>
              
              <p>Welcome to my personal website devoted to ancient coins.</p>
              
              <p>For over a year I've been kicking around the idea of making a personal website for ancient coins. The main idea is to showcase many coins that I possess as well as housing any articles that I feel like writing as the time goes by.</p> 
              
              <p>I once heard that we are merely custodians for the ancient relics of the ancient world.</p>
              
              <address>Web database started,<br>
              May 17th, 2014.</address>
              
              <hr>
              
              <p><b><u>11-16-2015:</b></u> Finally resumed work on my personal website. I've finished adding pages to each section as well as adding coins to every gallery category. It may be the right time to show a preview to friends.</p>
              
              <hr>
              
              <p><b><u>05-17-2014:</b></u> Initial design plans of setting the basic template. Finally decided to go for a plain, fast and economic site that uses very little bandwidth. It also has a 90s type design style coded in the latest HTML 4.0. The index also has a random image loader. Everytime the page is loaded, a coin out of six will be loaded.</p>
              
              <hr>
              
              </body>
              </html>

              CSS Code


              Code:
              body {
                position: relative;
                margin-left: 0em;
                padding-left: 10em;
                font-size: 1.0em;
                font-family: "Times New Roman",Times, serif;
                color: black;
                background-color: white; }
              
              nav ul {
                list-style-type: none;
                padding: 0em;
                margin: 0em;
                position: absolute;
                top: 2em;
                left: 1em;
                width: 10%;
                 }
              
              h1 {
                font-family: "Times New Roman",
                      Times, serif; }
              nav ul li {
                background: grey;
                margin: 0.5em 0;
                padding: 0.3em;
                border-right: 1em solid black }
              nav ul a {
                text-decoration: none }
              a:link {
                color: blue }
              a:visited {
                color: blue }
              address {
                margin-top: 1em;
                padding-top: 1em;
                border-top: thin dotted }
              
              pre {
                  display: block;
                  font-family: "Times New Roman",
                      Times, serif;
                  white-space: pre;
                  margin: 1em 0;
              }
              
              P {
                  border: 0px;
                  padding: 0px;
                  margin-left: 10px;
              }
              Thanks for all the help so far.

              Comment

              Working...
              X