PDA

View Full Version : coding for cross browser???


tony09uk
03-08-2011, 06:34 PM
Can someone please start me in the right direction.... I have got a site completed, except it looks shocking when I try and view it in browsers other than chrome and firefox.

I have run a search regarding this and while I get a lot of pages regarding this subject there is eerrrr....to much, I dont know where to strat, also I dont know what advice is any good.

Can someone please point me in the right direction, either some basics I should know or a good site to reading.

Many thanks

DWcourse
03-09-2011, 12:59 AM
The best advice is to test your site with multiple browsers often during the building process and then you can find and debug problems before they escalate. HTML/CSS etc. is so interrelated that it's very difficult to debug after the fact.

johnMoss
03-09-2011, 05:00 AM
Tony, what version of IE are you using? It shouldn't be as far off as you elicit. The quick answer is you're using newer CSS components that are undefined in older browser versions.

Jim, do you not have a stripped down PDF HTML basics in your product portfolio? I have my favorite learning resources, but am loathe to point them out given you're in the business as it were... I'd rather be promoting yours...

DWcourse
03-09-2011, 02:32 PM
John, I appreciate it but go ahead an point to your resources. My product is a full course (we're looking at breaking it into components but haven't). And, really, the point here is to get people the info not promote ourselves.

tony09uk
03-09-2011, 09:31 PM
I used browsershots.org to see what my site would look like on other O/S etc. I don't think I got as far as the window's O/S before getting disheartened. How many browsers should I run my site through in reality, I ran it run the full list.

I have just started reading css cookbook as it was advised to me to do so some time ago

DWcourse
03-10-2011, 02:21 AM
I use Adobe BrowserLab. I think you can still get a year free.

Personally I check IE 6, 7 and 8 (but 6 may not be worth it anymore), Firefox, Chrome and Safari. I'm not to picky about which versions of FF, Chrome and Safari as they are pretty consistent. Of course, if you get into HTML5/CSS3 then it's another matter.

edbr
03-10-2011, 03:30 AM
i use ietester for earlier versions of ie ,

tony09uk
03-10-2011, 06:18 PM
thanks I will see what it looks like in those specifically. Is it realistic to think I can get it to look identical in all browsers?

I have briefly read about sdomthing called a "reset file" does anyone know what that's about and if a newbie should consider using it?

johnMoss
03-11-2011, 01:36 AM
1) The reset file as it stands now only supports A grade browsers, so in answer to the newbie status, answer is no, it's probably more trouble than its worth. Go check out the discussion I started here on IE 6, I got a lot out of that.
2) IE tester is a real easy browser tool to check your results, get it from here...
http://my-debugbar.com/wiki/IETester/HomePage

d a v e
03-11-2011, 08:17 AM
john i'm puzzled by this "The reset file as it stands now only supports A grade browsers" afiak it simply resets the default values to level the playing field, thus making it easier to reduce browser inconsistencies. not sure how that would rely on using A-grade browsers?

e.g. you can use something like eric meyer's reset ( http://meyerweb.com/eric/tools/css/reset/ ) and it works with pretty much everything - remember of course to add in your own values ;)

johnMoss
03-11-2011, 02:09 PM
I grant you I went out on a limb with this one, by all means correct me if I'm wrong, but resetting sounds like this delicious little catch-all when in fact it's not. Not long ago, I pulled my conclusions from here:

http://developer.yahoo.com/yui/reset/ and

http://developer.yahoo.com/yui/articles/gbs/index.html#history

My impression is one can get lulled into a false sense of security in layout, only to find you may have inadvertently created a bigger mess. I get the impression, at least for now, that there is more continuity in interpretation across browsers by leaving settings alone than with trying to level them out by force. A simpler solution in this case (and tackling the question as a fellow newbie) is to take the approach of a degree of caution in utilizing more advanced nuances of CSS until smart enough to write better code to start with. End-runs and such around potential obstacles etc...

Great thread, I hope we get some more input here:-D

tony09uk
03-12-2011, 03:08 PM
there are some great points here, and things i really wanna look into further, when i have some time. But so far i am still struggling with a simple issue.

Basically i have viewed my site in IE 6 and it looks aweful. I have set a group of tabs above a div. In IE6 those tabs look like they are at different heights and not connected to the div below, how do i fix that?

Ricky55
03-12-2011, 08:58 PM
Of course you should use a reset, its totally crucial unless you want to repeat styles.

As Dave correctly pointed out the point of a reset file is to zero out a browsers defaults. Using a reset file just ensures that you are starting from a blank canvas.

The one I use is based on Eric Meyers which is pretty much what everyone uses with their own mods / additions.

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

You couldn't be wrong on this one John IMO.

tony09uk
04-06-2011, 07:57 PM
I have used a reset file for the first time and I agree after seeing my site i different browsers prior to using and seeing it after using it, the reset file is a useful piece of code.

Yet i have got a couple of problems regarding this though.

One of the item in there was <strong>. When I added this label to a word, that word was unaffected. This was rectified by removing the <strong> tag from the reset file. What was I doing wrong.

Next it was my assumption that by adding this reset file to the css it would perform the same across all browser's. When I preview it in browser labs in some browsers there are still a few unfortunate differences, doesn't the rest fale over-ride the browser default settings?

DWcourse
04-06-2011, 08:16 PM
The issue is that strong doesn't mean bold (although all browsers render it that way and it replaced the bold tag).

And you can still get browser differences? What ones are you seeing.

gentleone
04-06-2011, 08:20 PM
One of the item in there was <strong>. When I added this label to a word, that word was unaffected. This was rectified by removing the <strong> tag from the reset file. What was I doing wrong.
You didn't do anything wrong. The strong tag had probably a rule deceleration of font-weight: normal in the css reset. By default the strong tag is bold, but the reset style override this.

Next it was my assumption that by adding this reset file to the css it would perform the same across all browser's.
If that was the case, then we would live in perfect web design/development world ;)
No, unfortunately it doesn't work like that. A reset is just like mentioned earlier in this thread to zero out the default styles so that you can build upon a clean sheet.
It should also be the first thing you should do when starting to build a website. If you implement a reset in a existing site then you'll likely will have problems.
A css reset brings you much closer to cross-browser consistency (especially in standard compliant browsers), but is not the overall solution. There is also the variety browser bugs that cause display differences.

tony09uk
04-07-2011, 11:31 AM
in ie6 my images show up on 3 seperate rows, they are meant to be on two and the images at the bottom of my page are pushed below the line of text which they are meant to be aligned with. There are a couple of other slight variations. But i thought it would be best focusing on these first as they zre the most obvious

gentleone
04-07-2011, 12:11 PM
post some code (HTML & CSS)!

tony09uk
04-08-2011, 08:40 AM
OK, after a look around it seems the answer is put in a specific style sheet <!--if IE6-->command. This seems to pop up when i google the question.
Is this the way to go? and if it is what happens with my other style sheets on the page? does IE 6 ignore them? or does it read them as well? if it does read them won't that mess things up and if it doesn't what about the style sheet i have on there that is for an area of my page which I have no problems with (thus don't need to make a specific style sheet for?).

I was going to put some code on but at this moment I have been advised to tidy it up first. So that is what i'm doing, then I will, happily (and am sure I've got a lot wrong lol, Oh well thats what i'm here for)

tony09uk
04-08-2011, 10:34 AM
Right I haven't as yet tidied up the CSS, but I have put it on line to show what I am on about, My issues are mainly with IE 6, although firefox 3.0 seems to move things about as does opera and more recent firefox Im using chrome10

tony09uk
04-12-2011, 08:03 PM
I have tried everything I can think of to get around the problems shown in the attached image, can someone please advise?

As you can see from the text, the top image is from google chrome (the way I want it) the next is from Firefox then IE6. Unfortunatly I have to get it right in IE 6 :(

johnMoss
04-12-2011, 08:24 PM
OK, after a look around it seems the answer is put in a specific style sheet <!--if IE6-->command. This seems to pop up when i google the question.
Is this the way to go? and if it is what happens with my other style sheets on the page? does IE 6 ignore them? or does it read them as well? if it does read them won't that mess things up and if it doesn't what about the style sheet i have on there that is for an area of my page which I have no problems with (thus don't need to make a specific style sheet for?).


Anytime you use browser specific commands, the browser only pays attention to, and thus alters the CSS , for whatever you have placed inside the script, overiding other "pertinent" CSS styles present. All else remains unmolested. It is definitely the way to go, IE 6 is infamous for issues, and we got into this about a month ago, all but out the door in usage. Currently down to single digit percentage use by the public, and the bulk of that in China. Throw in the necessary 'If' command that makes the page work in IE 6 and you're good to go...

domedia
04-12-2011, 09:01 PM
If it's just alignment issues, you don't need a stylesheet for IE6.

Knowing how to code for different browsers is a key skill in your toolbox.
It's essential for making stuff on the web :)

If you post a URL, we can tell/help you make it cross browser.

DWcourse
04-13-2011, 12:36 AM
post some code (HTML & CSS)!

Or better yet give us a link so we can check it out.

johnMoss
04-13-2011, 12:50 PM
Knowing how to code for different browsers is a key skill in your toolbox.
It's essential for making stuff on the web :)

But don't we run into non-recognized newer commands that a work-around is all but implied?

domedia
04-13-2011, 02:45 PM
But don't we run into non-recognized newer commands that a work-around is all but implied?
John, sometimes this Norwegian brain is low on caffeine :)
Can you rephrase please?

Ricky55
04-13-2011, 08:03 PM
Not wanting to sound rude John but a lot of what you state is either really badly worded and difficult to understand or just plain ill-informed.


But don't we run into non-recognized newer commands that a work-around is all but implied?


What does that mean?

I'd check this out:
http://www.plainenglish.co.uk/

tony09uk
04-13-2011, 09:27 PM
If your willing to take a look to help, I will send you a link... happily. Well I would if I could, but there is a slight problem that the web space I have recently bought seems to have a control panel that is not easily navigable. When I have worked out how to upload a page I will add the link for you to view :D

tony09uk
04-14-2011, 08:50 PM
I went to upload my page for everyone to critique, but I cant seem to get my server information right. Can someone please give me directions as to what information DW is asking for and where I find it on the CP? Ive been trying different things for about two hours.

edbr
04-15-2011, 01:17 AM
usually the address is ftp.your_domain password and user are the same as your login for your control panel.
is it cpanel ?

DWcourse
04-15-2011, 01:47 AM
http://www.dreamweaverclub.com/define-your-site.php