HTML question

[Crawdaddy79]

If this can be done using XML or DHTML, that would be acceptable as well... Ya just gotta tell me how to do it.

Okay, I understand IE doesn't follow standard HTML code, etc.

But I have a page that looks the way I feel it should in IE, but not in Netscape/Mozilla. I'm not by any means an HTML guru, but I like my pages to at least be acceptable in all browsers...

Please view the following page with Netscape/Mozilla and Internet Explorer...

http://www.angelfire.com/nc3/thecrawdaddypage/army.htm

I put a percentage value for each of the pictures on the top half of the page, which in theory should make the pictures shrink and expand as you do the same with your browser window. Also meant to work with different resolutions, etc..

It looks right in I.E., but not in anything else.. It has the 'stair' effect that I can't figure out why it does that...

If anyone has any knowledge or suggestions of how I can fix this, it would be greatly appreciated...

 

[Criosphinx]

Wel the problem is IE isn't following the standar. Image sizes attributes shouldn't be percentages.

I uggest to try making some thumbnails of the pictures and then organize the page with a table making sure it looks ok at 800x600

 

[Crawdaddy79]

Wel the problem is IE isn't following the standar. Image sizes attributes shouldn't be percentages.

I found out in another forum that this is a specific bug with Netscape/Mozilla. I.E. does it the way it's supposed to be done, just like Netscape 4.0 does it right. NS 5.0+ doesn't, however...

And almost anything on a web page can be a percentage... Don't know where you got that info from.

 

[JasonQG]

See if you can find the bug on bugzilla.

 

[Criosphinx]

Well maybe isn't forbidden but surely its not recommended, the width and height attributes are optional on img tags generally these attributes are used to especify the original size of the image so that the browser can allocate the space.

 

[dustsmoke]

Not that I use IE very much. I not much of a windows user.

But IE/Mosiac follows (W3C) w3.org standards quite aggressivly. Just they are MS so it's automatic bash time when it comes to thier products. Opera is pretty good about it, Mozilla/Gecko based browsers are pretty good about it too, but no browser follows it completely so you have to work at things to get em working for all browsers.

Certian versions of Netscape are absolutly horrid when it comes to dealing with percentages. w3.org standards say you can resize an image that way even thou like said before. 'you probably shouldn't'

most problems relate to what is generating the code thou, IE is just more forgiving than most browsers (which i guess isn't completely correct to allow forgiveness when it comes to code, but that's the way things go)

 

[Crawdaddy79]

See if you can find the bug on bugzilla.

Didn't see it, (didn't really look for it.. didn't try to) but I reported it. No response yet, on the third week now...

 

[JasonQG]

No response yet, on the third week now...

There aren't enough QA people to keep up with the bugs, especially considerding how many duplicate bugs are reported. Somebody will get around to it eventually.

 

[seeker010]

Re: HTML question

If this can be done using XML or DHTML, that would be acceptable as well... Ya just gotta tell me how to do it.

Okay, I understand IE doesn't follow standard HTML code, etc.

But I have a page that looks the way I feel it should in IE, but not in Netscape/Mozilla. I'm not by any means an HTML guru, but I like my pages to at least be acceptable in all browsers...

Please view the following page with Netscape/Mozilla and Internet Explorer...

http://www.angelfire.com/nc3/thecrawdaddypage/army.htm

I put a percentage value for each of the pictures on the top half of the page, which in theory should make the pictures shrink and expand as you do the same with your browser window. Also meant to work with different resolutions, etc..

It looks right in I.E., but not in anything else.. It has the 'stair' effect that I can't figure out why it does that...

If anyone has any knowledge or suggestions of how I can fix this, it would be greatly appreciated...

How come I never get any issues people are reporting with Mozilla? I use the latest daily, and your pics resize just fine. Maybe they already fixed the bug.

 

[Crawdaddy79]

Re: Re: HTML question

Re: Re: HTML question

How come I never get any issues people are reporting with Mozilla? I use the latest daily, and your pics resize just fine. Maybe they already fixed the bug.

Because of what you said I went ahead and downloaded both the latest official and beta releases of Mozilla...

Still the same result... Since you may be mistaken about the pictures being fine, I went ahead and made little screenshots...

With Mozilla/Netscape/Phoenix:

http://home.earthlink.net/~crawdaddy79/armypage1.jpg

With Internet Explorer:

http://home.earthlink.net/~crawdaddy79/armypage2.jpg

 

[seeker010]

Re: Re: Re: HTML question

Re: Re: Re: HTML question

Because of what you said I went ahead and downloaded both the latest official and beta releases of Mozilla...

Still the same result... Since you may be mistaken about the pictures being fine, I went ahead and made little screenshots...

With Mozilla/Netscape/Phoenix:

http://home.earthlink.net/~crawdaddy79/armypage1.jpg

With Internet Explorer:

http://home.earthlink.net/~crawdaddy79/armypage2.jpg

Ok I see what you mean now. My mistake. Hmm Mozilla seems to be incorrectly calculating the width field after the first image. Maybe it's subtracting the previous images when it shouldn't. See if this happens if you use height=x%, or if it happens if the pictures are on different lines, or if they aren't centered.

edit: problem solved in Mozilla. Use a table, and set the width of each picture to 100% of the cell. Didn't check for IE compatibility. I'm trying to avoid loading that piece ......

edit2: adapt for personal use. check for compatibility with Konqurer and Opera (don't have)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>test</title>
</head>
<body>
<script language="Javascript">
if(document.all || document.layers){
document.write('<font color="white" size="2" face="copperplate gothic light"><a href="http://www.angelfire.com/nc3/thecrawdaddypage/pics/Army/514th/carpenteropt.jpg" "target="_blank"><img src="http://www.angelfire.com/nc3/thecrawdaddypage/pics/Army/514th/carpenteropt.jpg" width="30%" border="0"></a>   <a href="http://www.angelfire.com/nc3/thecrawdaddypage/pics/Army/514th/graydanceopt.jpg" target="_blank"><img src="http://www.angelfire.com/nc3/thecrawdaddypage/pics/Army/514th/graydanceopt.jpg" width="30%" border="0"></a>    <a href="http://www.angelfire.com/nc3/thecrawdaddypage/pics/Army/514th/lytusopt.jpg" target="_blank"><img src=" http://www.angelfire.com/nc3/thecrawdaddypage/pics/Army/514th/lytusopt.jpg" width="30%" border="0"></a></font><table cellpadding="5"><tr><td width="30%"><center><font color="white" size="2">Always smiling, this guy motivates troops by filling up ice water coolers with his saliva.</font></center></td><td width="30%"><center><font color="white" size="2">Partying like it\'s 1999!</font></center></td><td width="30%"><center><font color="white" size="2">Apparently some nerve agent got in this guy\'s suit...</font></center></td></tr></table>');
}

else {
document.write('<table cellpadding="0" cellspacing="0" border="0" style="text-align: left; width: 100%;"><tbody><tr><td style="vertical-align: top;"><font color="white" size="2" face="copperplate gothic light"><a href="http://www.angelfire.com/nc3/thecrawdaddypage/pics/Army/514th/carpenteropt.jpg" target="_blank"><img src="http://www.angelfire.com/nc3/thecrawdaddypage/pics/Army/514th/carpenteropt.jpg" style="border: 0px solid ; width: 100%;" title="" alt=""></a></font></td> <td style="vertical-align: top;"><font color="white" size="2" face="copperplate gothic light"><a href="http://www.angelfire.com/nc3/thecrawdaddypage/pics/Army/514th/graydanceopt.jpg" target="_blank"><img src="http://www.angelfire.com/nc3/thecrawdaddypage/pics/Army/514th/graydanceopt.jpg" style="width: 100%;" border="0"></a></font></td> <td style="vertical-align: top;"><font color="white" size="2" face="copperplate gothic light"><a href="http://www.angelfire.com/nc3/thecrawdaddypage/pics/Army/514th/lytusopt.jpg" target="_blank"><img src="http://www.angelfire.com/nc3/thecrawdaddypage/pics/Army/514th/lytusopt.jpg" style="width: 100%;" border="0"></a></font></td> </tr> <tr> <td style="vertical-align: top;"><br> </td> <td style="vertical-align: top;"><br> </td> <td style="vertical-align: top;"><br> </td> </tr> </tbody></table>"');
}
</script>
<br>
</body>
</html>

 

[Crawdaddy79]

Lol!!!

Hey... I feel bad that you put all that work into it.. I must say thank you!! But this is where I.E. becomes the downfall..

I've tried exactly what you said a while ago (arrgghh there's a flashing banner at the top of the page right now and it's really pissing me off)..

With I.E., it doesn't shrink the images smaller than their original size.. So they would be too big for 800 x 600, unless I shrink them manually..

Either way, looking through my site, all of it looks like crap in 800 x 600, so why should I worry about that one page so much...

Ech.. Hopefully the bug will be fixed, or I will find out a way to code it where it works the I.E. way in all browsers...

 

[Crawdaddy79]

Well... I don't know crap about Javascript, but I see some of that in there.. I tried it but there's an error..

Doesn't display at all in Mozilla, and gives an error in I.E... Unterminated String constant line 10 char 184... Erm...

 

[Crawdaddy79]

Nevermind with that what I just said...

Just realized there are TWO things there... To have both is to create an error...

But yeah, even with the javascript the pictures are too big in I.E....

 

[seeker010]

Nevermind with that what I just said...

Just realized there are TWO things there... To have both is to create an error...

But yeah, even with the javascript the pictures are too big in I.E....

The Forums are not the best place to put code I guess. Everything between the (' and the ') has to be on one line. There are ways around this, but it's probably not a good idea to be posting code back and forth on the forums. give me a whirl on PM and we can arrange some other way to communicate source code. The images looked fine for me on IE 6.0 and N4, because the IE code is the same code as your original. I only used tables if Mozilla was used.

Cheers.

edit: Actually I don't know why I haven't thought of this before. Create two different pages. One for Mozilla/compatible and one for IE/N4 compatible. then just use this Javascript at the beginning of the page to change the document for Mozilla users
<script language="JavaScript">
<!-- //hide from old browsers
if(!(document.all || document.layers)) //test for IE and N4
location.href="index_moz.html"; //file for Mozilla compatibility
//-->
</script>
then put all all the Mozilla compatible stuff into index_moz.html or whatever you want the file name to be, just be sure you update it in the script.

 

[Crawdaddy79]

Hey, hey!!!

That actually sounds like a doable solution!!!

THANKYOU
THANKYOU
THANKYOU
THANKYOU
THANKYOU
THANKYOU
THANKYOU
THANKYOU
THANKYOU

... Now when will I work on it... hmmm....