Cross Browser compatibility?

chiprivers · October 26, 2007

I am working on quite a big project at the present and as non IE users make up quite a large proportion of surfers these days, I am for the first time trying to make my site cross browser compatible. I am specifically looking at making my site work in both IE and Firefox.

The issue I have at present is the simple task of applying a frame to a photo image. Very easy CSS in IE, I am sitting any image inside a <div> with a class="img_frame" where .img_frame{width: 1px; height:1px; padding: 1px 1px 1px 1px; border: 1px solid #99999}. Now in IE this works lovely and puts a nice grey line around the image with a 1 pixel gap. IE allow the div size to expand to allow for the size of the image placed inside of it. How ever, in Firefox, the div remains at 1px square size. If I leave out the width and height size the div becomes too wide?

Any suggestions to make my current approach work or an alternative approach to applying this border that would work in both browsers?

calabiyau · October 26, 2007

Maybe I'm missing something about what you want to do, but why can't you just apply the padding and border to the image itself, without the need for the div?

then in css

img {padding: 1px; border: 1px solid black;}

or you could give your images a class, if there are other images on the page you don't want to effect.

then css:

.gallery {padding: 1px; border: 1px solid black;}

chiprivers · October 26, 2007

Maybe I'm missing something about what you want to do, but why can't you just apply the padding and border to the image itself, without the need for the div?

<img src="youpic.gif"/>

then in css

img {padding: 1px; border: 1px solid black;}

or you could give your images a class, if there are other images on the page you don't want to effect.

<img src="yourpic.gif" class="gallery"/>

then css:

.gallery {padding: 1px; border: 1px solid black;}

This works fine in firefox but not in IE, if I use this new approach, how can I get it to work in IE?

Gafaddict · October 27, 2007

Why not write up seperate stylesheets for each browser? It might seem like a bit of a hassle, but it's really the only way to achieve true cross-browser compatability.

bronzemonkey · October 27, 2007

What do you mean it doesn't work in IE? Works for me.

chiprivers · October 27, 2007

What do you mean it doesn't work in IE? Works for me.

It is displaying a border arounf the photo but without the 1px clearance!

calabiyau · October 27, 2007

Yeah it works in IE 6 for me too. But I just did a test with one image on a blank page. Maybe something else in your css is overriding it somehow.

Wuhtzu · October 27, 2007

Of course there is 1px clearance, you defined

img {

padding: 1px;

border: 1px solid black;

}

Remove padding: 1px and you are in business.... you might even wanna set it to 0 instead of just removing it and this method _works_ in both IE and FF...

dbrimlow · October 28, 2007

The first question I would ask is are you using a DOCTYPE or are you just starting your page with

<html>

Not using a DOCTYPE is basically designing a page for IE only.

Also, 1px is not nearly enough padding to make any noticeable difference. I usually use 4px to 5px padding for photos.

What I have learned is to FIRST test the page in Firefox and get it working as you want it to.

Then, create an IE only css file "IE-only.css" and modify ONLY those specific elements that need to force IE to behave.

You then call the IE-only.css file using an "IE conditional comment", like so:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Whatever</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="realbrowser.css" rel="stylesheet" type="text/css">
<!--[if lt ie 7]><link rel="stylesheet" type="text/css" media="screen" href="IE-only.css"><![endif]-->
<head>
<body>

The conditional comment will apply to any version of IE up to 7.0. And only IE will use it - while the rest of the browsers use the "realbrowser.css" file.

However, you don't need to re-list every Class or ID element that's on the realbrowser.css file in the IE-only.css file ... just those Class or ID elements that need tweaking in IE, and just the PORTIONS of the class or ID element that needs to change to work in IE.

For example, if

.img_frame{padding: 1px; border: 1px solid #99999} works in FF but not IE, then (my guess being width and height are causing the problem).

in the IE-only.css file, I would simply add in the width and height as follows:

.img_frame {width:1px; height:1px}

IE will still use all the elements in the other css file that it likes, but it will also now apply the width and height elements.

What I like about this is that I can create a valid, standards compliant css file for all browsers. Then only modify the four or five elements to make IE work as well. Usually IE only needs sizing and positioning modifying - heights widths, margin, padding - while the other css elements are fine..

Wuhtzu · October 28, 2007

You will notice 1px of clearance when the image border is "floating" 1px away from the image itself.

dbrimlow has a very good point. If you want cross browser compatibility you have to start by writing valid markup, valid css and tell the browser what kind of markup you are writing. This is, as dbrimlow says, done by choosing a doctype and putting it at the top of your documents. Another very important thing, as dbrimlow also says, is to mention the content type of your document.

Doctype: http://www.w3.org/QA/2002/04/valid-dtd-list.html

Content-Type: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

So a valid document might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>		
	<title>Sleek.dk Alpha</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        </head>

<body>		
</body>

</html>

That document will of course have to be saved using UTF-8 encoding to make it valid and dbrimlow's document will have to be saved using ISO-8859-1 encoding. Regarding the doctype, which your markup will reflect, I must strongly recommend HTML 4.01 Strict or XHTML 1.0 Strict.

If you write valid markup to one of those specifications (and style it with valid css) you will be compatible with all modern browsers (Firefox, IE 5.5+, Safari, Opera)

To check if you write valid markup use the W3 Validator: http://validator.w3.org/

To check if you write valid css use Jigsaw Validator: http://jigsaw.w3.org/css-validator/

And you wanna start out validating very early because if you suddenly validate your site when nearing completion you will end up with 300 errors and think "screw this!".

Now back to the older browsers, what about them? What about people using IE5? In my opinion we shouldn't bother writing markup / styles for IE5.0... you have to be very large to call it a browser. It supports almost nothing and almost no one uses it any more.

I hope this might put you on the track writing valid markup

Wuhtzu

dbrimlow · October 28, 2007

And you wanna start out validating very early because if you suddenly validate your site when nearing completion you will end up with 300 errors and think "screw this!".

LOL. Absolutely. BUT! If you do see 300 errors ... @ 150 of them will be the same mistake done 150 times. So don't punk out.

Actually, I learned more about valid markup thanks to those massive error pages and the subsequent debugging.

Wuhtzu · October 28, 2007

Precisely dbrimlow. That is why it is so important to validate each time you do "something new". Validate right after you have done something for the first time, for example created a form. Then you will see the way you did it was not valid and you only have to correct it once instead of correcting it 10 times at the end of your project

chiprivers · October 30, 2007

OK, so I have started over with my coding and attempting to write valid code. I should point out that I have never declared a doc type or validated before so this is all new to me. I am completely self taught with HTML, PHP, CSS etc and I am sure I am going to have to re-educate myself to make sure I am writing valid code.

I am starting of just trying to build a uniform header for my site pages to display a logo and nav bar. I have entered my initial layout script as below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html>
<head>
<title>Template Script</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="header">
<img id="hdr_logo" src="images/hdr_logo.jpg" alt="site logo" title="site logo">
</div>

<div id="nav">
 
</div>

</body>
</html>

I have entered this through the validator as mentioned before and this has all come back fine ;0)

Attached to this I have the following CSS file:

body {width: 95%; font-family: verdana; font-size: 62.5%; text-align: center; padding: 0 0 0 0; margin: 0 auto 0 auto}

/* header display */
/* ============================================ */
#header {width: 100%; height: 78px; padding: 10px 10px 10px 10px; margin: 0 0 0 0}
#hdr_logo {float: left; margin: 20px 15px 15px 15px}


/* nav bar display */
/* ============================================ */
#nav {width: 100%; height: 28px; background-color: #009999;background-image: url(images/navbg.gif); background-repeat: repeat-x; repeat-position: 0px 0px}

this however is not validating and highlighting:

11 #nav Property repeat-position doesn't exist : 0 0

First question for my CSS is should I be declaring any version of CSS as I have done in my HTML?

Secondly, how can I make this repeat position declaration valid? I have checked the CSS reference and it seems to be OK!?

chiprivers · October 30, 2007

My error! should be background-position not repeat-position!!

My questions still stands however about whether I should be declaring a doc type for my CSS?

bronzemonkey · October 30, 2007

No you don't need anything like that for css.

Also you can use a shorthand for your background declaration:

#nav {background:#099 url(images/navbg.gif) 0 0 repeat-x}

Good luck. I'm sure you'll find things easier now that you are using a doctype and aiming for valid code - it will help you avoid many (but not all) problems!

dbrimlow · October 30, 2007

For a true beginner with standards, it is tough. You will have a lot of questions and a LOT of frustration ... we've all been there ... and that's why many of us here try to help as much as possible.

First, let me point you to, in my opinion, "the #1 newbies must have link for understanding css" ... Max Design's "Selectutorial" .

This will easily and very simply explain the crucial rules of css. Once you know the rules, the other links everyone here will point you to will be easier to understand.

Bookmark Max Design. Because when done with selectutorial, you will move on to the "ONLY online resource for newbies to understand the power and beauty of lists" the venerable, we all know and love it, "Listomatic" (which includes Listomatic, Listomatic 2 and Listutorial)!

And THEN, you can move on to the real fun with "Floatutorial".

Good luck.

Dave

TheFilmGod · October 31, 2007

What I have learned is to FIRST test the page in Firefox and get it working as you want it to.

Although I agree with you, I would like to expand on that. Always do a quick test in IE after you do a test on firefox (during your periodic browser test).

- Why? - because finding the problem in the css/html is much easier when you can track it down to a certain area in the code. If you finished a 20 kb html page and it doesn't work in IE, it may be nearly impossible to fix the error!

Sign In

Cross Browser compatibility?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information