why browser problems? 1

[drkside2]

Hi, I made a homepage with the help of CSS, but with a suprise, I got very diffrent result between IE 6.0 and Firefox 0.9, thous that I have placed everything with
position:relative, and then margin coordinates, don't they have the same pixel size or what ??!?!?!?

another thing, I tried to begin from zero, and see where they go diffrent when adding a new CSS line.... I thought it would go some lines before I find the changes, but I was wrong...try to view these CSS code...

body{
text-align: center;
margin: 40px auto;
font-size: 11px;
}

they will show diffrent size on the page....whats wrong, how can I make a website, when they can't even show this in the same way???

to see my site (still test)

http://w1.409.telia.com/~u40934249/fall.html

any help to this problem will be appricieted, thnx in advance

 

[tviman]

Welcome to the world of web design. Unfortunely, there's not much you can do except live with the fac that you'll have to jump through hoops to make your pages look the same in all browsers.

By the way, if you take the time you'll find that IE is the oddball - your site will look virtually the same on all other browsers. Thank Bill Gates for that one!

There's always a better way. The fun is trying to find it!

 

[RISTMO]

A while after using css to position elements on a page became popular, this was an unpopular view (I think maybe because using css was the "new technology" it was thought of as "better"?), but I still hold it -- Use tables with css instead of plain css. Using tables means that regardless of whether the viewer's browser supports css fully (or at all -- some don't), at least the structure of the page is the same. You can make it look the exact same, too. It's easier (my opinion), and has far less problems, and virtually none of the browser integration problems (far as I can tell).

Rick

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.cashfutures.com/

http://www.word-tools.com/

 

[BillyRayPreachersSon]

>> Using tables means that regardless of whether the viewer's browser supports css fully, at least the structure of the page is the same.

But using tables doesn't make for a very accessibility-friendly page - something which using CSS and no tables would avoid. I do, however, agree with you that [extensive] tabular layout without tables isn't always easy.

Personally, I use tables when either:

1. Accessibility isn't an issue, or
2. The data / content begs for a tabular layout (timesheet data, for example)

Hope this helps,
Dan

 

[RISTMO]

However, when the page looks like this one does in Firefox, tables are definately more accessible ;-).

Rick

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.cashfutures.com/

http://www.word-tools.com/

 

[BillyRayPreachersSon]

The page layout being broken in FireFox does not mean that tables are more accessible.

I would say it meant either the developer didn't know how to, was not required to, or didn't care to get it working correctly using CSS.

IMHO, the page in question does not require any tables to get it working correctly in most v4+ browsers, as there's not much in the way of tabular data on the page.

This is, of course, just my opinion ;o)

Dan

 

[RISTMO]

Sure, if it were recoded, it could display properly. I only meant that if this is how it's going to look, it's better off with tables. I don't really use css-only to design sites. I haven't tried much lately, but back when it was just starting to become popular, I didn't think there was enough browser support for css to be able to switch to it, so it didn't seem worth the effort to figure out. Tables were just always "easier" for me. The main reasons I heard recommending switching were for search engines and for "accessibility". But if a browser can't correctly parse a table, is it going to do much better with css?

Rick

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.cashfutures.com/

http://www.word-tools.com/

 

[tviman]

I'm going to have to side with RISTMO on this one. Sure, you can code just about any web page and not use a single table - but there's a trade off when it comes to who's paying the bills. I can layout a form page faster using tables than with any other method and not have to worry about how different browsers will render the page.



There's always a better way. The fun is trying to find it!

 

[Vragabond]

I'll go with Dan on this one. CSS can make pages look the same on all browsers and those pages are much easier to maintain and easier to read. But in the same way as bad table coding can lead to a badly designed page, bad css coding can lead to same thing. The problem is only, that people can quicker understand and comprehend tables and thus have less problems. Also, there is much less options with tables -- you have columns, rows, width and height. With CSS you have a lot of commands and you have to know when to apply which to which element. As long as you understand the basics, you can create a page that will look the same in all the current browsers. Here be some pointers:

1. Always specify correct DOCTYPE. This will switch standards mode in browsers (as opposed to quirks mode) and will help you throughout the design.

2. Know what goes to which element. With our friend here, he did not know where to apply the margin: auto, to get the page centered. While we were used to telling container to keep everything in the center, the margin: auto works differently. It has to be applied to the element that will be centered.

3. Understand when to use certain property. When to use left, right, top and bottom for positioning and when to use margins is an eternal struggle for many. Basic rule of the thumb is to rather use normal positioning when you define container size which you are positioning and marins when you want your elements to expand as far as possible. Relative and absolute positioning are another problems.

4. Try to avoid using negative values. Negative values disturb the flow of the document and should be avoided as much as possible.

5. Take into account default behaviour of elements. Paragraph tags have margins, lists have default padding, etc. If you don't understand what is causing your elements to behave in a certain way, don't try to fix it on your own.

6. Code for standards compliant browser (N7, M1, O7) and test/correct your code for those more frivolous (IE).

That being said, here be somewhat corrected version of our friends website, showing ok in my IE and Mozilla:

Fall Studio

 

[drkside2]

Hi, thnx all and especially Vragabond for taking some of your time, to help me....thnx again, it worked fine, and I will reread the css, and check what I wrote wrong, and how to think in the future

but I ask one thing, when I downloaded the page...to my comp, the menu got mixed into a smaller area only in Mozilla 1.7 and firefox 0.9...why? how can I correct this...

so I should design in the future for Mozilla and such, then re correct in Ie? but one question, if I am forced to have different css code, for each broser, diffrent values, is there a way to make a specefic code only appear for a browser and not for the other?

thnx alot

 

[drkside2]

hi, thnx...I solved the problem with the menu, I copyed the code by viewing the source code, and mixed files, don't know what....but it worked

thnx!!

 

[drkside2]

nope, the problem is still there, I think if you visit my site again, you can see it, I dind't change the code, but apperntly everytime I move the file from harddrive to internet, or vice versa, it collapses...what is the problem? :/

http://w1.409.telia.com/~u40934249/fall.htm

thnx

 

[BillyRayPreachersSon]

You could modify your source code so that it validates using the following links. That way, you can be sure that one of the validation errors isn't causing the problem.

To validate the HTML, visit this link:

http://validator.w3.org/

and enter your URL. To validate the CSS, visit this link:

http://jigsaw.w3.org/css-validator/

and enter your URL.

You will notice at the moment, neither HTML nor CSS validate.

Hope this helps,
Dan

 

[Vragabond]

First, regarding your question about separate stylesheets. I haven't used any of the fixes for IE on your page, and seldom do that. But when you code for Mozilla your syntax is better and there is more possiblity that it will run in IE than vice versa.

And now for your problem. You are apparently using some program that formats your CSS. At the bottom of your CSS you have to references, which are IE hacks:

 HTML UL LI {
	FLOAT: left; HEIGHT: 1%
}
 HTML UL LI A {
	HEIGHT: 1%
}

This is how they look in your code. They should have a leading star in order to only work in IE and be ignored by other browsers. Change that and it will work:

* HTML UL LI {
	FLOAT: left; HEIGHT: 1%
}
* HTML UL LI A {
	HEIGHT: 1%
}

 

[Foamcow]

Way too much emphaisis is put on trying to make pages look identical on different browsers.
Make the pages work on all browsers by correctly applying valid CSS and HTML. So long as a page works in a browser, surely it doesn't matter if it looks slightly different in another browser?

http://www.targetgroup.co.uk

http://www.avoncrusade.co.uk

http://www.almanzora.com

 

[figmatalan]

And check your logs. Most of the sites I've done are visited by IE5/IE6 99.5% of the time. You can't please all of the people all of the time, so if the pages look OK in IE5/6 then I'm happy enough.

OK, MS may not follow the standards properly and they may do things there own way, but spending hours and hours writing browser specific things for the .5% of visitors that dont use IE isnt particularly economical is it?

 

[Vragabond]

When it comes to browser statistics, I would rather believe logs like this one from W3Schools:

http://www.w3schools.com/browsers/browsers_stats.asp

My pages have a huge percentage of Mozillas, because I and my friends use that browsers and thus the logs are not to be fully trusted. Anyway, encouraging people to code only for IE is plain wrong. MS IMHO wants their browser to render code differently than others and use proprietary code because when you control more than 80% of the market, it is beneficial to you that pages display differently on your product. This way, most people will make sure 80% sees the correct version and 20% doesn't. In this way, when you code (badly) just for IE, you're helping them in their efforts.

Everything is not so grim however. I can write a page and test it entirely in IE and know it will appear the same (or more or less the same) in standards compliant browsers. Actually, this is not so much a browser issue as it is issue with bad coding (and bad browsers letting you get away with it).

 

[Foamcow]

Agreed Vragabond.
In my exerience the only times you are going to hit real problems with CSS and cross browser rendering is when you are trying to make pixel identical pages.
Speaking personally I find this is mainly due to the way that IE's interpretation of the box model and what the term "width" means.

That said, it is true to say there are inconsistncies between browsers such as Opera and Mozilla. The way in which each handles the height of DIV's springs to mind. But there are easy workarounds that are both practical and valid.

http://www.targetgroup.co.uk

http://www.avoncrusade.co.uk

http://www.almanzora.com

 

[figmatalan]

I didnt quite mean ignore other browsers, I just meant look at the browsers people are using to look at the site(s) you code.

If the logs for your sites show 70% IE and 20% Moz, double check in Moz too. As has been mentioned though, if you follow the rules you wont have much tweaking to do anyway.

As the old saying goes, the good thing about standards is that there are so many of them!

 

[vongrunt]

My $.02...

Friend of mine just came with self-made presentation CD. Nothing fancy - set of static .HTM pages for navigation, toc and intros, lotsa links to powerpoint presentations, word documents etc. Everything worked in ff0.9 and O7.51, subdirectories "didn't work" in IE6. Reason? Each .htm contained the following line:

<!-- saved from url=(0022)[URL unfurl="true"]http://internet.e-mail[/URL] -->

Now, I'm not Borg hater or something but all these smart IE features drive me nuts.