Jump to content

Browser differences


danhodge

Recommended Posts

Okay, i was watching videos from the(i think) administrator of this website on youtube, Killerphp, and i came across a problem with the css.

 

If the answer for this could address these points by linking with the numbering, it would be much easier for both of us :)

 

1. Firefox.

 

I can get most of the colors and gradients working fine, unlike on the other browsers, however my sidebar isn't at the side of the text like on other browsers either. The background works.

 

2. Safari and Opera:

 

I can get most colors and ordering done fine, but gradients wont work. Also, the background doesn't work(this is a gradient).

 

Safari is also about 10x better quality than Opera.

 

3. Internet explorer:

 

This doesn't seem to even notice there is an external css sheet involved, which worries me the most because its to my beliefs that Internet explorer is the most widely used browser...

 

4. Chrome:

 

All the gradients and colors work perfectly except the background. Some of the gradients on this one wouldn't even appear on firefox.

 

 

I am refering to -webkit and -moz, but only -moz is working, and not all the gradients work unlike on the tutorials in which everything works.

 

 

What do people think i should focus on to be the working browser, as i use Opera, but i think a lot of people use Internet explorer.

 

Thanks a lot,

Danny

 

 

Oh, and it may be important for me to say that this is using HTML 5 and CSS 3.

Link to comment
Share on other sites

I would say Firefox as it has taken chunks away from the IE Market share. Also they have not managed to create an IE version that shows web sites correctly... although 8 is the best yet. Chrome has a growing base as well.

 

I would say make it like it should be in FF and make sure it looks good and works in all others.

 

In the end each browser is made by different people and different people understand the standards differently so their will always be minor differences. No 4 browsers will ever show a web site exactly alike so don't try, just be sure it comes very close to what you want.

Link to comment
Share on other sites

Perhaps you can post the code you are working with, or post a link to the page? Keep in mind that HTML5/CSS3 are only partially supported on some browsers, so you are likely to have cross browser issues. I'm personally not using CSS3 or HTML5 (except for minor, non-essential items, like rounded corners and drop shadows) until it is better supported across all browsers.

Link to comment
Share on other sites

Ditto that for HTML5 and CSS3, they would be fantastic if all the browsers behaved the same way. Unfortunately that is one of the problems of web design, the fact that they don't all work the same way. LSW gives good advice, use Firefox primarily and if your site is coded correctly and validates, you should only have a few minor tweaks to make in the other browsers if at all.

Link to comment
Share on other sites

3. Internet explorer:

 

This doesn't seem to even notice there is an external css sheet involved,

 

IE does support a stylesheet, so post your code as you must have made an error.

 

Re HTML5/CSS3 have a look at browser support, which is pretty good in Firefox, Safari, Chrome, Opera and IE9 beta:-

http://www.findmebyip.com/litmus/

 

There is a javascript to make earlier versions of IE process the new tags like <header> and <aside> and <video> if you add in teh conditional comment shown here:-

http://blancer.com/tutorials/wp/15301/10-ways-to-make-internet-explorer-act-like-a-modern-browser/

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

All the above means that html5/css3 can be used to a very great extent even though HTML5 and CSS3 are still in the development stage. However, the javascript file, as far as I can see, merely allows the new tags to be styled, ie background, size, font, etc. but doesn't allow the new processing that is required for some of the new tags like <video> that require special processing, but there are other ways to make earlier versions of IE process the new features (the object and embed tags for audio and video).

Edited by Wickham
Link to comment
Share on other sites

Wow thanks guys, this is all very helpful!

 

 

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

 

This is my link to the css page, i copied and pasted it from somewhere else since its one of those things you can copy without it being a copy of someone else's website...

 

 

Since your all saying some browsers dont work great with html 5 and css 3, do you think they will have updates that will synchronize them together in order to all work with it?

 

Also, does anyone know what Opera uses? On the tutorial i was watching, it refered to

-moz-linear-gradient(

and

-webkit-gradient(

, but does Opera fit into either of these? It is the best browser in my opinion, but i see a lot of online games have trouble with it, and im guessing its through things like this...

 

 

Wickham, that website was highly useful, it has shown me that my version of internet explorer doesn't support any of the CSS3 styles, so i guess i am currently downloading the IE9 beta to test this out :)

 

 

 

On another note, if i want a sidebar for the old html and css, what would i need to edit? The sidebar on Firefox isn't moving to the side like it is on other browsers, so i guess its from the HTML 5 and CSS3 update. All i want this sidebar to do at the moment is move to the right hand side of my text. :P My current html code is:

 

<aside>
Sidebar
</aside>

 

And my css is:

 

aside
{
float: left;
width: 200px;
background: blue;
}

 

Please note, i was practicing the new HTML coding here at first, thats why this is so basic, i understand this makes for a terrible sidebar :D

 

Thanks a lot,

Danny

Link to comment
Share on other sites

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

 

This is my link to the css page, i copied and pasted it from somewhere else since its one of those things you can copy without it being a copy of someone else's website...

That's correct and should work, but check that it's all lower case in the filename as servers are case sensitive.

 

Since your all saying some browsers dont work great with html 5 and css 3, do you think they will have updates that will synchronize them together in order to all work with it?

 

IE9 is still being developed and the other main browsers are virtually OK now. There will of course be newer versions.

 

Also, does anyone know what Opera uses? On the tutorial i was watching, it refered to

-moz-linear-gradient(

and

-webkit-gradient(

, but does Opera fit into either of these? It is the best browser in my opinion, but i see a lot of online games have trouble with it, and im guessing its through things like this...

Opera uses -o- but I haven't come across a situation where it's needed yet. -khtml- is for Konqueror. The prefix codes should all be in the style first and the standard code last so that if a browser doesn't need the prefix it will process the last style which is the standard, like

-moz-box-shadow: 7px 7px 5px #888888 ; -webkit-box-shadow: 7px 7px 5px #888888; -khtml-box-shadow: 7px 7px 5px #888888; box-shadow: 7px 7px 5px #888888;

As I understand it, the prefixes are just a temporary solution until HTML5 and CSS3 are officially released (as there may still be some changes to the standards) and the browsers can finalise their processing.

 

Wickham, that website was highly useful, it has shown me that my version of internet explorer doesn't support any of the CSS3 styles, so i guess i am currently downloading the IE9 beta to test this out :)

Remember that you are coding for other users who may have old versions of IE. Have you tested the javascript with IE6,7 or 8? I have. You get the styles and layout showing correctly but tags like multi-columns and video don't work. In other words the javascript makes IE process pre-HTML5/CSS3 styles for the new tags but not the new HTML5/CSS3 features inside the tags.

 

On another note, if i want a sidebar for the old html and css, what would i need to edit? The sidebar on Firefox isn't moving to the side like it is on other browsers, so i guess its from the HTML 5 and CSS3 update. All i want this sidebar to do at the moment is move to the right hand side of my text. :P My current html code is:

 

<aside>
Sidebar
</aside>

 

And my css is:

 

aside
{
float: left;
width: 200px;
background: blue;
}

 

Please note, i was practicing the new HTML coding here at first, thats why this is so basic, i understand this makes for a terrible sidebar :D

 

Thanks a lot,

Danny

 

That's correct. You style aside {...} and code <aside>..........</aside> in the markup, but you must then use the javascript for IE or IE won't show the styles and the layout etc. will be wrecked. Remember to use the new doctype <!DOCTYPE html> not a doctype for HTML 4.01 or XHTML 1.0. It does work in Firefox for me.

Edited by Wickham
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...