Web Analytics Made Easy -
StatCounter Very different displays in IE and Firefox - CodingForum

Announcement

Collapse
No announcement yet.

Very different displays in IE and Firefox

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

  • Very different displays in IE and Firefox

    Hello

    I am creating a website from scratch and I have attached the attempt ive made

    For some reason the Div elements appear in different positions depending on whather you open them in IE or firefox. They look ok in IE but no in firefox.

    I have attached the css code and also the html file (need to rename from txt to html when downloaded)

    Hope ive made it clear :S

    Thanks
    Attached Files

  • #2
    Could you post a link to your page?
    Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

    Comment


    • #3
      Its only very basic at the moment

      http://www.homepcvisit.com/test3/TEST.html

      Comment


      • #4
        Well, you have a few errors such as missing doctype and closing tags for your paragraphs. The CSS also has semicolons in a few places instead of colons.

        Try this instead:
        Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
        <link rel="stylesheet" href="Test.css" type="text/css" />
        </head>
        <body>
        <div id="header"> </div>
        <div id="wall">
          <p>text</p>
          <p>more text</p>
          <div id="content">
            <p>content</p>
            <p>more content</p>
            <div id="links"> Home | Photo Gallery | Area's Covered | Contact us </div>
            <div id="images"> </div>
          </div>
        </div>
        </body>
        </html>
        Code:
        * {
        	padding:0;
        	margin:0;
        }
        #header {
        	width: 900px;
        	height: 90px;
        	margin-left:48px;
        	margin-right:25px;
        	border:#CCC 3px solid;
        	background-color:#FFF;
        	color:#FF9900;
        }
        #wall {
        	width: 900px;
        	height: 900px;
        	margin-top: 15px;
        	margin-left:48px;
        	margin-right:25px;
        	border:#CCC 3px solid;
        	background-color: #009966;
        	color:#FF9900;
        }
        #content {
        	width: 860px;
        	height: 860px;
        	margin-top: 20px;
        	margin-left: 20px;
        	margin-right: 20px;
        	margin-bottom: 20px;
        	border:#CCC 1px solid;
        	background-color:#FFF;
        	color:#FF9900;
        	position: relative;
        }
        #links {
        	width: 350px;
        	height: 25px;
        	border:#CCC 1px solid;
        	position: absolute;
        	left: 0;
        }
        #images {
        	width: 300px;
        	height: 200px;
        	margin-right: 11px;
        	margin-left: 20px;
        	margin-top: 20px;
        	border:#CCC 1px solid;
        	position: relative;
        	right: 0;
        	float: right;
        }
        Also, when you're applying a margin to every side, just use margin:20px instead of the 4 individual statements.

        Comment


        • #5
          Thanks for the help above

          Ive made some changes based on your suggestions but it still appears differently in IE and firefox. In particular the header and main content elements dont line up in IE but do in firefox?

          Also in IE the whole page is left aligned whereas its centered in firefox

          Have attached the up to date css

          I know its a bit poo but not bad for a very first attempt from scratch

          help is always greatly appreciated
          Attached Files

          Comment


          • #6
            Remove the <HTML> from the very first line. It's throwing IE into quirks mode. Also, use Firefox as your reference browser and get things to work there. Then look to see if IE screws it up.
            Is IE9 a modern browser?
            IE9 is at least 2 years behind the modern web.

            Comment


            • #7
              Hello laurieballard

              IE needs certain fixes or 'hacks' to get it to conform to what you see in Firefox. Which one is right, has been a matter of debate for a number of years but the differences are enough to try the patience of a saint, while we are learning to use CSS-controlled HTML.

              The most common being a so-called 'doubling' of margins & padding in IE. I don't know why the hell Microsoft think we all want these extra pixels in our pages, but the more precise layouts can break down because of this. If you use IE as your primary reference, chances are, other browsers will appear to make a mess of your work and you will end up blaming them, when it is believed it's really IE which is to blame, for adding those extra pixels.

              So the most common change we make is to add something called a global reset. Basically means inserting * {margin:0; padding:0} into the first line of your CSS. This sets everything null; putting IE and other browsers on an equal footing to begin with, so you can start fresh and define margins and padding exactly how you want them. I personally have found I need to add border:0 into this line as well, for some layouts.

              There are a lot more of these 'fixes' for other problems, which you'll no doubt come across, as you get further into it.
              Last edited by Doctor_Varney; Apr 14, 2009, 10:34 PM.
              Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

              Comment


              • #8
                Originally posted by Doctor_Varney View Post
                IE needs certain fixes or 'hacks' to get it to conform to what you see in Firefox. Which one is right, has been a matter of debate for a number of years
                To the contrary, there is no debate about it. It is known, provable and verifiable that IE is the worst browser on the planet. 11 years behind all other browsers in modern standards and practices. Even Microsoft admits it is in catch up mode to the others and tries to be like them but also admits to its shortcomings and failures. Never, ever use IE as a reference for how things should work. It will trip you up and laugh while you fall.
                Is IE9 a modern browser?
                IE9 is at least 2 years behind the modern web.

                Comment


                • #9
                  I just noticed your sig:
                  There can be no such thing as 'web-standards', if two of the world's most popular browsers do not agree.
                  That is not correct if you are trying to quote the W3C. The actual statement goes something is a standard when there are two or more implementations of the method or practice. This is also true of other standards committees, not necessarily web related.
                  Is IE9 a modern browser?
                  IE9 is at least 2 years behind the modern web.

                  Comment


                  • #10
                    Originally posted by drhowarddrfine View Post
                    To the contrary, there is no debate about it. It is known, provable and verifiable that IE is the worst browser on the planet. 11 years behind all other browsers in modern standards and practices. Even Microsoft admits it is in catch up mode to the others and tries to be like them but also admits to its shortcomings and failures. Never, ever use IE as a reference for how things should work. It will trip you up and laugh while you fall.
                    Oh, I've personally known, proven and verified that Microsoft makes the very worst browser on the planet... As far as I'm concerned. What I didn't realise was that MS admitted this. This just makes it even worse.
                    Last edited by Doctor_Varney; Apr 14, 2009, 10:56 PM.
                    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

                    Comment


                    • #11
                      Originally posted by drhowarddrfine View Post
                      I just noticed your sig:

                      That is not correct if you are trying to quote the W3C. The actual statement goes something is a standard when there are two or more implementations of the method or practice. This is also true of other standards committees, not necessarily web related.
                      I'm not trying to quote the W3C. I either quote people correctly or not at all and if I were to quote someone, I would cite the source. That statement merely represents my frustrated opinion.
                      Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

                      Comment


                      • #12
                        Thanks for all the help guys, ive finally got the outline etc to line up in both browsers

                        Just need to get all the text and links to line up within the main box now :S

                        Comment


                        • #13
                          Glad to hear it, Laurie!
                          Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

                          Comment


                          • #14
                            I don't want to make you miserable but you should probably test in IE6 to, seeing as something like 20% of browsers being used are IE6 according to w3c!

                            Comment


                            • #15
                              Hi

                              Sorry to be a pain but have added some more content and its not displaying right !!

                              Have uploaded the file:

                              http://www.homepcvisit.com/test3/TEST.html

                              CSS attached
                              Attached Files

                              Comment

                              Working...
                              X