browser compatibility

Discussion in 'Web Design and Development' started by Eleni, Dec 9, 2008.

  1. Eleni macrumors newbie

    Joined:
    Jul 29, 2008
    Location:
    GR
    #1
    I am an amateur in web designing (and love it!) and I made a trial web site for the class I attend (I have not a web host- I upload to them the entire work). I worked the class work at safari, checked it with firefox and netscape( had some problems with how it looked!). But, when I checked the pages with IE and Firefox for windows, there was a disaster... :eek:
    nothing was in place! And I was so sad and disappointed that I do not know what to do... :(:(
    the work has passed in every aspect the validation from W3C...
    what do you do with such erroneous results with different browsers :confused::confused: ?
    I worked entirely with textedit (next week we will learn dreamweaver)
    Do you think it is good to purchase a space for web hosting so I can upload the different trial sites I make so this forum can see and tell me?
    Do you know the "Mac highway" web hosting?
    thank you
    eleni
     
  2. redwarrior macrumors 603

    redwarrior

    Joined:
    Apr 7, 2008
    Location:
    in the Dawg house
    #2
    Others who know more about this will be along, I'm sure, to give you a little direction in this.

    I just wanted to address your question about hosting. You really don't need to purchase hosting at this point. There are services out there that offer free hosting. They, of course, will have ads on your pages. But, if you are just learning and this is not a business, why pay at this point? I have a free account with bravehost.com, but there are others.
     
  3. themoonisdown09 macrumors 601

    themoonisdown09

    Joined:
    Nov 19, 2007
    Location:
    Georgia, USA
    #3
    It's tough to get a website looking good in both Internet Explorer and any other browser. Internet Explorer, especially version 6, is a pain to work with. There are many many hacks in the css code you will probably have to add.

    Maybe if you can upload it to the web, some of us can take a look at it.
     
  4. Eleni thread starter macrumors newbie

    Joined:
    Jul 29, 2008
    Location:
    GR
    #4
    Thank you both for your reply..
    redwarrior I would go to the hosting place you mentioned...
    themoonisdown09 I will upload it pretty soon...
     
  5. redwarrior macrumors 603

    redwarrior

    Joined:
    Apr 7, 2008
    Location:
    in the Dawg house
    #5
    I don't know if this will help you or not, but I test mine out in IE to start with, then once it looks good there, I test it in the other browsers. Since so many people use IE, it's important to have that one down to start with, IMO. And, since the other browsers don't seem to be so picky, they usually look fine.
     
  6. themoonisdown09 macrumors 601

    themoonisdown09

    Joined:
    Nov 19, 2007
    Location:
    Georgia, USA
    #6
    That's really what I do. I use ASP.NET at work, so I do all the testing with Internet Explorer. When it looks good there, I start working with Firefox. After that, I work with Safari.
     
  7. Melrose macrumors 604

    Melrose

    Joined:
    Dec 12, 2007
    Location:
    Elsewhere
    #7
    I have trouble right and left with IE of any version (less with the later version, of course), but not quite to the extent you describe.

    I find that the stricter the standard I work with the less and more subtle the errors become. For example, I have less troubleshooting in XHTML 1.1 than I do in HTML 4.. I start off coding for Firefox and Safari (which are my default environments) and then proof in Opera & Firefox on Windows, and IE 6 and 7 (and sometimes 5.5 if need be). Generally there's only a few minor spacing issues to remedy, usually which are related to IE hacks.

    The thing to keep in mind also is that if you're using stylesheets to design with, one problem can mess up several elements on the page. eg: If you have one element padded by 2px too much, it can create problems much larger than 2px later on. Always make sure your measurements add up correctly.

    Dreamweaver can be very handy, but my recommendation is try not to depend on having an app do the work. Let it do the heavy lifting so to speak, but try to be as involved as possible in the actual coding. It's kind of amusing when you see people use DW and then complain their site is too bloated.
     
  8. themoonisdown09 macrumors 601

    themoonisdown09

    Joined:
    Nov 19, 2007
    Location:
    Georgia, USA
    #8
    If your instructor doesn't have you using a specific standard, I would recommend the XHTML 1.0 Transitional:

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
     
  9. Melrose macrumors 604

    Melrose

    Joined:
    Dec 12, 2007
    Location:
    Elsewhere
    #9
    I didn't think of that.. good point. Always use a proper DOCTYPE :) Not doing so can cause some trouble too..
     
  10. Eleni thread starter macrumors newbie

    Joined:
    Jul 29, 2008
    Location:
    GR
    #10
    I did it... (please be fair with the markup I made... I am brand new to this...)

    the address is http://elenia.bravehost.com/

    the language is greek and I have not upload the files regarding the link, so they do not work...
    I hope you all work with mac since it shows the way I want it...
    I uploaded a picture of the index page, in case you do not see it the way I like...
    but when as I said view it with windows IE... disaster
    thank you so much
    eleni

    why do I see markup that I have not written at the view source of the page????:confused:
     

    Attached Files:

  11. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #11
    You mentioned earlier you might be using DreamWeaver - if you are, it will insert its own code to do certain functions. If you use design view and add advanced elements you'll see "MM_" prefixes in Javascript all over the place, which refers to code templates that were originally created when Macromedia owned the product.

    If this is not what you mean, post the code in question please.

    -jim
     
  12. themoonisdown09 macrumors 601

    themoonisdown09

    Joined:
    Nov 19, 2007
    Location:
    Georgia, USA
    #12
    I just opened your website with Internet Explorer 7, Firefox 3 and Google Chrome. The body of the website on all 3 browsers is off center towards the right. Also on all 3 browsers, the left menu is pushed too far to the left, so you can't read it.

    I'll try and look at your source code to see what's wrong. It does make it a little tricky since all the text is in Greek.
     
  13. themoonisdown09 macrumors 601

    themoonisdown09

    Joined:
    Nov 19, 2007
    Location:
    Georgia, USA
    #13
    I think I got it so let me know if this works for you. I think one of your main problems was that you were giving everything margins. Also, I would recommend that you don't use the "<center>" tags.

    Here is your HTML file:

    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>Hardware & Software - Αρχική</title> 
        <link rel="stylesheet" type="text/css" href="base.css" />
    </head> 
    <body>
        <div align="center">
            <div>
                <img src="logo_eye.gif" alt="Hardware & Software-The Online Store" title="Hardware & Software" width="710" height="207" />
            </div>
            
            <div>
                <p>"Η Αλυσίδα Καταστημάτων που μπορεί να ικανοποιεί και τον πιο Απαιτητικό Πελάτη"</p>
            </div>
            
            <div id="list"> 
                <ol> 
                    <li><a href="list/computer.html">Υπολογιστές</a></li> 
                    <li><a href="list/software.html">Software</a></li> 
                    <li><a href="list/analosima.html">Αναλώσιμα</a></li> 
                    <li><a href="list/periferals.html">Περιφερειακά</a></li> 
                </ol> 
             
                <ul> 
                    <li><a href="mailto:info@software_hardware.gr?subject=Τμήμα Εξυπηρέτησης Πελατών">Επικοινωνία</a></li> 
                    <li><a href="list/prosfores.html">Προσφορές</a></li> 
                </ul> 
            </div>
            
            <div id="paragraph"> 
                <h4>Σύντομο ιστορικό του Καταστήματος</h4> 
                <p>Η εταιρεία Hardware & Software Ε.Π.Ε ιδρύθηκε το 2006 απο τους αδελφούς Ιωάννη και Σωτήρη Κανάκη με έδρα την πόλη του Βόλου. Το πρώτο κατάστημα της εταιρείας λειτούργησε στον Βόλο το 2006.</p> 
                <p>Οι αδελφοί Κανάκη ανταποκρινόμενοι στις απαιτήσεις της αγοράς για προϊόντα σε τιμές σχεδόν στο κόστος αλλά και για άρτια τεχνική υποστήριξη στους πελάτες τους, κατάφεραν το 2007, ύστερα απο προσωπικό αγώνα, επιμονή αλλά και πολλή αγάπη για την δουλειά τους, να ανοίξουν ακόμη 2 καταστήματα στην πόλη του Βόλου.</p> 
                <p>Στα χρόνια που ακολούθησαν, η εταιρία επικέντρωσε τις προσπαθειές της στη βελτιστοποίηση της παροχής υπηρεσιών, δημιουργώντας για τον λόγο αυτό, μια 24ωρη τηλεφωνική γραμμή τεχνικής υποστήριξης, καταφέρνοντας να καλύψει τις ανάγκες των απαιτητικών πελατών της.</p> 
                <p>Το καλοκαίρι του 2008 η εταιρεία εγκαινίασε το 4ο κατάστημα της με έδρα την  Αγχίαλο.</p> 
            </div>
            
            <div class="header"> 
                <h3>Η <em>Προσφορά</em> του μήνα</h3> 
            </div>
            
            <div id="prosfora"> 
                <p>Υπολογιστής με επεξεργαστή Intel Dual Core E1400, σκληρό δίσκο χωρητικότητας 1,28 Terra και</p><p> οθόνη TFT 19 ιντσών, <b>μόνο</b> για τον μήνα Δεκέμβριο <b>400 euro</b></p>
            </div>
        </div>
    </body> 
    </html>
    
    and here is your CSS file:

    HTML:
    body
    {
    	background-color: #FFFFFF;
    }
    
    img
    {
    	margin-top: 10px;
    	border-width: 1px;
    	border-style: solid;
    	border-color: #044476;
    }
    
    p
    {
    	font-family: Verdana,Helvetica, Arial, sans-serif;
    	font-size: 0.95em;
    	word-spacing: 0.2em;
    	color: #023A67;
    }
    
    hr
    {
    	border: none;
    	background-color: #044476;
    	color: #044476;
    	height: 1px;
    	width: 43%;
    }
    
    #list
    {
    	position: absolute;
    	left: 0;
    	/*right: -8em;*/
    	font-family: Verdana,Helvetica, Arial, sans-serif;
    	font-size: 0.8em;
    	line-height: 3em;
    	color: #000080;
    	background-color: #D7D7D7;
    	/*
    	padding-right: 1em;
    	margin-right: 90em;
    	margin-left: 40em;
    	margin-top: 1em;*/
    }
    
    #paragraph
    {
    	font-family: Helvetica,Arial,sans-serif;
    	font-size: 0.8em;
    	width: 500px;
    	margin-top: 12px;
    	border: 1px solid #D4ECFB;
    	background-color: #D4ECFB;
    	color: #005796;
    	padding: 0 20px 5px 20px;
    	text-align: justify;
    }
    
    #prosfora
    {
    	font-family: Helvetica,Arial,sans-serif;
    	font-size: 0.8em;
    	width: 700px;
    	border: 2px solid #AB003C;
    	background-color: #FFFDED;
    }
    
    .header
    {
    	font-family: Helvetica,Arial,sans-serif;
    	font-size: 0.9em;
    	color: #AB003C;
    	text-align:center;
    }
    
     
  14. Eleni thread starter macrumors newbie

    Joined:
    Jul 29, 2008
    Location:
    GR
    #14
    Thank you all so much,
    I used the <center> tag because the teachers where teaching as the logical and physical tags and wanted to use some of them in the work...
    when you viewed it at safari had the same problems? (I think not, right?)
    The course that I am actually attending is learning the dreamweaver, but at the beginning they want as to get a bit of a hang with HTML...
    Dreameaver, will make the code more compatible with the rest of the browsers?

    the margins where so "big" because I saw that worked fine with safari...

    eleni

    themoonisdown09 I saved the above markup and what I saw at my browser was that the links (the grey table with the lists) where all the way to the left...
     
  15. themoonisdown09 macrumors 601

    themoonisdown09

    Joined:
    Nov 19, 2007
    Location:
    Georgia, USA
    #15
    Dreamweaver doesn't necessarily make it more compatible. It just makes it easier and quicker to develop websites. You still have to write your own CSS, but it does have all the options for the specific style popup for you to choose.

    Is that not where it is supposed to be? If it needs to be on the right, change the CSS style from:

    HTML:
    left: 0;
    
    to

    HTML:
    right: 0;
    
     
  16. Eleni thread starter macrumors newbie

    Joined:
    Jul 29, 2008
    Location:
    GR
    #16
    themoonisdown09 please press again the address that I have provided you above...
    I have kept the main changes from you, but made some others...
    please tell me which programm do you use in order to watch the different browsers?

    txs so much
    eleni

    (Your code was so well organized and i noticed you preferred to use position:absolute and then rearrange the spaces between the elements...
    correct?)
     
  17. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #17
  18. memco macrumors 6502

    Joined:
    May 1, 2008
    #18
    There is a lot of incompatibility because the code you're using has some weaknesses. You should look into floats for positioning and should get a handle on how margins and paddings work. This is a good start, and with some work, you'll be able to get it working properly.

    Check out these articles to help:
    1. http://www.sitepoint.com/article/properties-glance-guide/2
    2. http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
    3. http://www.glish.com/css/
    4. http://reference.sitepoint.com/css

    The extra code on your page is because of the host you use; it adds special code for the banner ads. This is a bad thing actually as it could be part of the reason your code is breaking: they don't use proper formatting, and it might be why you have double closing body and html tags.

    I will look over your code and offer some more practical advice as soon as I can.

    Edit:
    I attached what I did in a zip file. I broke the page up into sections: header, content, and footer. There's a div called wrapper around all of that, which controls the width of the page, and also by using "margin: 0 auto;" on the wrapper we can center the page (must be accompanied by "text-align:center;" on the body). If there's something in there you have questions about let me know.

    Oh, I also attached a shot of what that looks like in IE 6
     

    Attached Files:

  19. themoonisdown09 macrumors 601

    themoonisdown09

    Joined:
    Nov 19, 2007
    Location:
    Georgia, USA
    #19
    It's still doing weird things in all the browsers I tried. I don't know how you're seeing the layout correctly, but it's not doing it for me. I tried Safari, Firefox, Google Chrome and Internet Explorer.

    I would suggest reading up on how to use CSS correctly. Here's a great website for learning all about HTML, CSS and more: http://www.w3schools.com
     

Share This Page