Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

browser compatibility

E

Eleni

macrumors newbie
Original poster
Jul 29, 2008
5
0
GR
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
 
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.
 
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.
 
Thank you both for your reply..
redwarrior I would go to the hosting place you mentioned...
themoonisdown09 I will upload it pretty soon...
 
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.
 
redwarrior said:
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.
Click to expand...

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.
 
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.

Eleni said:
next week we will learn dreamweaver
Click to expand...
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.
 
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">
 
themoonisdown09 said:
If your instructor doesn't have you using a specific standard, I would recommend the XHTML 1.0 Traditional:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Click to expand...

I didn't think of that.. good point. Always use a proper DOCTYPE :) Not doing so can cause some trouble too..
 
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:
 

Attachments

  • Picture 2.gif
    Picture 2.gif
    186.7 KB · Views: 77
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
 
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.
 
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;
}
 
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...
 
Eleni said:
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
Click to expand...

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.

Eleni said:
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...
Click to expand...

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;
 
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?)
 
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
 

Attachments

  • mthelp.zip
    3.1 KB · Views: 84
  • Picture 1.png
    Picture 1.png
    111.2 KB · Views: 69
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
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back