Browser nuances

[Dan]

Is there a site/source that provides info regarding how the different
browsers display and how to properly code for each? Our site
(www.qualitybass.org) has a couple of pages that display differently in IE
than NN (part of top border missing in NN and a table (Standings) that aligns
left in NN although centered in IE). Folks on here say you should be
considerate to users who use different browsers, but since I'm "used to" IE I
don't know what I should do (either with CSS or HTML) to accomodate NN users.
If there's an authoritative source that explains the differences, I'd be
willing to touch up our site so it looks the same to all (or at least the
majority). TIA.

 

[Murray]

Which pages? It's likely you have made some glaring errors in your layout.

The best bet for browser consistency is to learn how to code to standards.
To get that info, start here -

http://www.w3.org

A page that validates will usually display properly in all browsers,
depending on the methods you have used.

 

[Dan]

Thanks, Murray.

Which pages? It's likely you have made some glaring errors in your layout.

The best bet for browser consistency is to learn how to code to standards.
To get that info, start here -

http://www.w3.org

A page that validates will usually display properly in all browsers,
depending on the methods you have used.

 

[Murray]

Wanna show me a page where you are having problems?

 

[Trevor L.]

Hi to all,

This is a topic I am pursuing at the moment. I am finding that Firefox 1.0.1
displays differently from IE6. I don't know about the others as I haven't
downloaded any other browsers as yet (suggestions welcome)

My site is at http://tandcl.homemail.com.au.
Please check out the page Picture Album, then either of the Slideshow
buttons (they only differ in the set of pictures displayed).

In IE6 the images are aligned top-left, in Firefox they are centred with a
small top margin.

So while Murray states "A page that validates will usually display properly
in all browsers,
depending on the methods you have used." in this case, the "usually" doesn't
apply.

So some of the methods I have used must be inconsistent and I would be
interested in finding out more so that I can get consistency
--
Thanks,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Murray]

Your page linked below throws a js error when it loads -

"preload_images" is undefined.

This is coming from this call in the body of the frameset page -

<frameset rows ="72,*" onload="PreLoad()">

There is no such javascript function defined on that page or in the
externally linked js file (external.js), and that is therefore causing the
error.

Just another comment on style - your background image for the center frame
is ~50K itself. This image alone can take about 10 seconds to load on a 56k
dialup. Since your page weight budget is said to be around 40-50K, you have
therefore blown your whole budget on a single background image. I'd
reconsider.

With regard to your specific question, if you browse directly to the pop-up
slideshow page (i.e., without the window being resized and fixed) in either
FF or IE, you will see that the image is not left aligned in IE -

http://tandcl.homemail.com.au/slideshowauto.html?firstslide=1&lastslide=15'

I suppose that the reason it is being placed the way it is in these two
browsers is because of the CSS you have used -

IMG {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FLOAT: left;
BORDER-LEFT: 0px;
BORDER-BOTTOM: 0px
}

I wouldn't float this image at all. Try changing that to this -

IMG {
BORDER: 0;
margin:0 auto;
padding:0;
}

And see what happens.

 

[Trevor L.]

Murray,
I had a look at my site on-line and found PreLoad() in external.js
preload_images is the name of an array defined in that function.

If there is still something wrong, can you instruct/direct me on how to
preload images and also advise me whether it is worth it doing for
thumbnails. I also try to preload my 48 thumbnails and pictures in
album.html. Again, is it worth it and am I doing it correctly? Perhaps I
should only load each larger picture when needed. Is that possible with the
set-up as I have it? Maybe the auto slideshow could load image 2 when image
1 is being viewed, etc.

I have tried many times to reduce the size of the image. I have just had
another try in IrfanView and I have got it down to 18KB. I hope the quality
is reasonable

Yes, I loaded that page directly in IE and sure enough it is centred.

I use the general style of img {float: left ...} for my images so that my
sidebar has images positioned correctly.
My image in slideshowauto has class="none" which is the CSS class .none
{float: none ;}
I may need two classes of img style - one for sidebar and one for
slideshowauto

Thanks for your help and I will experiment more to see if I can get it right
(that is to align the image top-left in both browsers)

BTW,
Do you know if there is any info along the lines Dan was asking for - a
comparison of the various browsers and what works with each. The code you
sent from murraytestsite certainly tests for various conditions. Is that all
there are ?
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Trevor L.]

Murray,

I solved my problem (sort of) by using this CSS
..topleft {position: absolute ; left: 0 ; top: 0 ; float: left }
..lower {position: absolute ; left: 0 ; top: 500px ; text-align: center ;}

Then I put my image in <div class = "topleft"> and the text underneath it in
<div class = "lower">.
It is not perfect because it is absolutely positioned. I would prefer that
the text go immediately under the image, but with my code as it is, I don't
think I can do that. The image replaces another and there is no way knowing
its size (although it is either 600*400 or 333*500

--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Murray]

Trevor:

You don't need to float that image. There is nothing to float it against.

Also, absolutely positioned elements DON'T float.

The better CSS would be like this -

#bodyContent { width:400px; text-align:center; margin:0; }
#bodyContent p { font:bold 13px arial,helvetica,sans-serif; margin:10px; }

and your HTML would be -

<body>
<div id="bodyContent">
<img ...>
<p>This is a caption</p>
</div>
</body>

 

[Trevor L.]

Murray,

I have just got around to trying your suggestion.

Unfortunately, your CSS positions the text following the <img> to the right
of the image (and hidden because the window is not wide enough) not
underneath, so I just removed he float and left it at that

If anyone knows how to position the text immediately below the picture, no
matter what size the picture, that would be great. Otherwise, it does work
in both browsers as is
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Murray]

Oops - sorry. Here is the correct CSS -

#bodyContent { width:400px; text-align:center; margin:0 auto; }
#bodyContent img { display:block; }
#bodyContent p { font:bold 13px arial,helvetica,sans-serif; margin:10px; }