Browser Issue - IE, Of Course

[Lupine Predator]

Hi, everyone. I just stumbled on this group, and I hope someone can
help me with this. I'm self-taught, and I've just started working on
a part-time basis doing web sites.

A simple little site I built is causing problems in IE. Rather than
trying to explain it, I'll post the link. If you check this site in
Firefox or Opera, it's beautiful. But IE just screws everything up.

Can anyone suggest a fix for this?

Thanks in advance for any help anyone can give me. Here's the link:

http://www.deborahsprintshop.com

Now, I need to go and start reading through this group. I might learn
a thing or fifty in this place!

 

[dorayme]

Hi, everyone. I just stumbled on this group, and I hope someone can
help me with this. I'm self-taught, and I've just started working on
a part-time basis doing web sites.

A simple little site I built is causing problems in IE. Rather than
trying to explain it, I'll post the link. If you check this site in
Firefox or Opera, it's beautiful. But IE just screws everything up.

Can anyone suggest a fix for this?

Thanks in advance for any help anyone can give me. Here's the link:

http://www.deborahsprintshop.com

Now, I need to go and start reading through this group. I might learn
a thing or fifty in this place!

Hi Lupine,

First thing to do is put a doctype on the top. This will help you
in IE. Look this one up first in your studies.

I suggest you use 4.01 Strict, validate your html doc and that is
the start.

The next thing to do is to consider whether you have the time and
patience to do without the easier to use tables for such a simple
layout that you have. That is something to familiarise yourself
with, the idea that tables, strictly are best reserved for
tabular data rather than general layout of pages.

 

[Ed Mullen]

Hi, everyone. I just stumbled on this group, and I hope someone can
help me with this. I'm self-taught, and I've just started working on
a part-time basis doing web sites.

A simple little site I built is causing problems in IE. Rather than
trying to explain it, I'll post the link. If you check this site in
Firefox or Opera, it's beautiful. But IE just screws everything up.

How? What exactly are you seeing? What operating system and version of
IE are you using?

http://www.deborahsprintshop.com

dorayme's comments I second.

Also, in SeaMonkey (a Mozilla-based browser) I have turned on the
function to re-size large images to fit into my viewport (Google it).
So, the bottom right hand pic (ds_splash_pg02.jpg) shows up larger in
IE7 than in SM. Other than that? I see no difference.

Looks the same in:

SeaMonkey
Firefox
Opera
Safari

Didn't check it in IE6 (I'd have to turn on another system and it's
getting late here).

 

[Chris F.A. Johnson]

Hi, everyone. I just stumbled on this group, and I hope someone can
help me with this. I'm self-taught, and I've just started working on
a part-time basis doing web sites.

A simple little site I built is causing problems in IE. Rather than
trying to explain it, I'll post the link. If you check this site in
Firefox or Opera, it's beautiful. But IE just screws everything up.

Can anyone suggest a fix for this?

What, exactly, is the problem?

Thanks in advance for any help anyone can give me. Here's the link:

http://www.deborahsprintshop.com

Before you do anything else, fix the HTML. The validator at
validator.w3.org reports 7 errors. That's not bad, and shouldn't be
hard to fix.

Once you've done that, remove all font sizes specified in px; if
they then need to be changed, use percentages or ems.

Don't adjust spacing with  .

Don't use tables for layout (deal with this after fixing the HTML).

 

[Lupine Predator]

Hi Lupine,

First thing to do is put a doctype on the top. This will help you
in IE. Look this one up first in your studies.

I suggest you use 4.01 Strict, validate your html doc and that is
the start.

The next thing to do is to consider whether you have the time and
patience to do without the easier to use tables for such a simple
layout that you have. That is something to familiarise yourself
with, the idea that tables, strictly are best reserved for
tabular data rather than general layout of pages.

Woah!! Thanks for the quick reply!!

You know, I did a really dimwitted move with this site. I use
Dreamweaver, and then I tweak the code manually. In the process of
setting this up, I cut out the doctype at the type - I remember doing
it, and thinking I needed to go back and fix it, but then I never got
back to it... Duh...

What would you suggest in place of tables? <div> ? I'm not really
clear on the use of divs, though I need to get myself there.

And by the way - to you and the others who have mentioned it, thanks
for the heads up about htmldog and w3schools. I was under the
impression that w3schools was *the* authority. I've been looking at
htmldog, and it looks awesome.

 

[Lupine Predator]

How? What exactly are you seeing? What operating system and version of
IE are you using?


dorayme's comments I second.

Also, in SeaMonkey (a Mozilla-based browser) I have turned on the
function to re-size large images to fit into my viewport (Google it).
So, the bottom right hand pic (ds_splash_pg02.jpg) shows up larger in
IE7 than in SM. Other than that? I see no difference.

Looks the same in:

SeaMonkey
Firefox
Opera
Safari

Didn't check it in IE6 (I'd have to turn on another system and it's
getting late here).

I'm running Opera, Firefox, and IE6. IE6 the image is HUGE, which
it's not supposed to be. It *should* look the way it does in Firefox
and Opera.

 

[Ed Mullen]

I'm running Opera, Firefox, and IE6. IE6 the image is HUGE, which
it's not supposed to be. It *should* look the way it does in Firefox
and Opera.

Specify "width" and "height" in your "img" tag. I think that will do it.

 

[Lupine Predator]

How? What exactly are you seeing? What operating system and version of
IE are you using?


dorayme's comments I second.

Also, in SeaMonkey (a Mozilla-based browser) I have turned on the
function to re-size large images to fit into my viewport (Google it).
So, the bottom right hand pic (ds_splash_pg02.jpg) shows up larger in
IE7 than in SM. Other than that? I see no difference.

Looks the same in:

SeaMonkey
Firefox
Opera
Safari

Didn't check it in IE6 (I'd have to turn on another system and it's
getting late here).

BTW, this is the issue between IE6 and the other two browsers I have:

http://i47.photobucket.com/albums/f172/BlackWolf65/Firefox.jpg

http://i47.photobucket.com/albums/f172/BlackWolf65/Opera.jpg

http://i47.photobucket.com/albums/f172/BlackWolf65/IE.jpg

 

[Lupine Predator]

Specify "width" and "height" in your "img" tag. I think that will do it.

I specified height - If I constrain both, the aspect ratio is all
screwed up - can't seem to find the right dimensions. And in the
other browsers, specifying just the height works fine.

 

[Ed Mullen]

I specified height - If I constrain both, the aspect ratio is all
screwed up - can't seem to find the right dimensions. And in the
other browsers, specifying just the height works fine.

the dimensions should be the same as the original image file! don't use
these HTML tags to resize an image.

And, also, when I looked at your code I did not see any size specs.

 

[Chris F.A. Johnson]

I specified height - If I constrain both, the aspect ratio is all
screwed up - can't seem to find the right dimensions. And in the
other browsers, specifying just the height works fine.

width: 450; height: 300; ds_splash_pg.jpg
width: 864; height: 576; ds_splash_pg02.jpg

Use the same proportions as the width and height of the jpegs, eg:

width: 400px; height: 266.667px

The second picture should really be much smaller; it will take a long
time to load on dial-up. Similarly, the thumbnails on the gallery
pages should be reduced considerably.

 

[Lupine Predator]

Okay - it's late here, and I'm going to get to bed. I want to say
thanks to everyone, and I'll get back on working this tomorrow. Don't
worry, I'll be bugging you some more for help, believe me...

Thanks again for the help. Expect to see a lot of me... lol...

 

[Ed Mullen]

Sorry - I didn't specify height, it was width, and I did it as a
percentage:

<img src="images/ds_splash_pg02.jpg" width="60%" />

Ok, look. If the image.jpg is 1020 x 768 and you put a link to it and
say width="foo" height="bar" (neither of which is the original size)
you're gonna have problems. i.e. you are foo-barred. FUBAR, ok? Fouled
Up Beyond All Control.

On the other hand, maybe I'm missing something.

 

[dorayme]

Woah!! Thanks for the quick reply!!

What would you suggest in place of tables? <div> ? I'm not really
clear on the use of divs, though I need to get myself there.

Perhaps you can take a look at a quick alternative markup of the
sort of thing you like, naturally, it is for you to work on to
make as you like. And there would be more elegant than this for
sure, but it might get you going:

<http://members.optusnet.com.au/debramcalister/alt/deborah.html>

or

<http://tinyurl.com/36w52v>

Looks ok in Safari and Firefox. I can't say about the other
browsers at the moment.

 

[Blinky the Shark]

I specified height - If I constrain both, the aspect ratio is all screwed
up - can't seem to find the right dimensions. And in the other browsers,
specifying just the height works fine.

Don't use width and height in your img element to *resize* an image. Make
the image the size you want it to display; then use those dimensions in
your markup. Yes, this means a separate image for thumbnails and for the
larger image they point to, if you're using thumbs.

 

[Mike Barnard]

Perhaps you can take a look at a quick alternative markup of the
sort of thing you like, naturally, it is for you to work on to
make as you like. And there would be more elegant than this for
sure, but it might get you going:

<http://members.optusnet.com.au/debramcalister/alt/deborah.html>

or

<http://tinyurl.com/36w52v>

Looks ok in Safari and Firefox. I can't say about the other
browsers at the moment.

I was looking at the CSS for the register. It's not only deep, it's
well documented.

www.theregister.co.uk/

 

[Mike Barnard]

Okay - it's late here, and I'm going to get to bed. I want to say
thanks to everyone, and I'll get back on working this tomorrow. Don't
worry, I'll be bugging you some more for help, believe me...

Thanks again for the help. Expect to see a lot of me... lol...

I've been in the same boat as you for the last few weeks. The help I
have recieved here has been tremendous. The same few names cropping
up again and again. And again!

Look at posts I have made and the answers therein. They may save you
some time. Not my posts, but the answers I recieved!

Mike.

 

[Lupine Predator]

I've been in the same boat as you for the last few weeks. The help I
have recieved here has been tremendous. The same few names cropping
up again and again. And again!

Look at posts I have made and the answers therein. They may save you
some time. Not my posts, but the answers I recieved!

Mike.

I can't believe that I didn't come to usenet before last night looking
for help. I've been around here for years. I always just surfed the
web looking for help - w3schools being my main, and apparently wrong,
source for info.

It's nice to be a novice at something, come in and ask for help, and
not get flamed to h*ll and back for it... Not only was I not flamed,
but I received answers almost immediately.

*This* is what usenet *should* be...

 

[Lupine Predator]

Ok, look. If the image.jpg is 1020 x 768 and you put a link to it and
say width="foo" height="bar" (neither of which is the original size)
you're gonna have problems. i.e. you are foo-barred. FUBAR, ok? Fouled
Up Beyond All Control.

On the other hand, maybe I'm missing something.

No, I'm missing something in what you're trying to say.

When (I thought) you constrain just one dimension, either height or
width, the browser automatically compensates and adjusts the other,
and retains aspect ratio.

But when you specify both, then unless you have both in correct
proportion when reducing the size, you get aspect ratio issues.

Which is all moot, because I figured out that if I do a test resize in
any image view, and tell it to constrain proportions, when I enter one
dimension, the viewer will tell me what the other needs to be...

Sometimes I'm an idiot...

 

[Lupine Predator]

Perhaps you can take a look at a quick alternative markup of the
sort of thing you like, naturally, it is for you to work on to
make as you like. And there would be more elegant than this for
sure, but it might get you going:

<http://members.optusnet.com.au/debramcalister/alt/deborah.html>

or

<http://tinyurl.com/36w52v>

Looks ok in Safari and Firefox. I can't say about the other
browsers at the moment.

And it looks great in Opera *AND* in IE...

One question about this: I chose to go with styles in the page code
itself. I've been told - and read - that an external style sheet is
more efficient.

Opinions on that?