img dropping a line in IE 1

benluke4 · Feb 15, 2005

Hi, I have a header image which i have sliced into 3 pieces which sit next to each other the total width is 778px.

This is the page im talking about.

http://www.wandptraining.co.uk/index_new.php

In Firefox its fine but in IE the last slice of the image jumps down a line giving the impression that it does not fit in one line.

The div its sat in is 778px. Whats IE's problem?? or is it bad coding on my behalf?

note: im aware of the other things on the page that arent sat in the correct position i just want to get this sorted first.

Thanks for any help

Ben

trollacious · Feb 15, 2005

Try this:

<img src="images_new/header/new-design_01.gif" width="60" height="79"><img src="images_new/header/new-design_02.gif" width="556" height="79"><img src="images_new/header/new-design_03.jpg" width="162" height="79"> <div id="subheader">

Lee

BillyRayPreachersSon · Feb 15, 2005

It might be that IE takes the 2px border width (1 on left, 1 on right) into the total width... because if you shrink the image by 2 pixels, it all works fine. If you remove the border and it all works in IE, that would be one way of proving this theory.

Hope this helps,
Dan

benluke4 · Feb 15, 2005

Try this:

<img src="images_new/header/new-design_01.gif" width="60" height="79"><img src="images_new/header/new-design_02.gif" width="556" height="79"><img src="images_new/header/new-design_03.jpg" width="162" height="79"> <div id="subheader">

Lee

Lee thanks that works just fine.

Preacher thanks - i cant remove the border because of the design and if i cut 2px off the image it stands out like a sore thumb in all the other browsers. Thanks for your suggestion anyway

cheers

Ben

Vragabond · Feb 15, 2005

Make sure you put a correct doctype at the beginning of your documents. That should make IE (version 6) use correct box model.

benluke4 · Feb 15, 2005

Vragabond im a bit of a newbie!!

How should i alter the doctype thats already on the page.

Thanks

Ben

BillyRayPreachersSon · Feb 15, 2005

Preacher thanks - i cant remove the border because of the design and if i cut 2px off the image it stands out like a sore thumb in all the other browsers. Thanks for your suggestion anyway

FYI, I belive that by using the method proposed by Lee, you are ending up with 2px extra space for the rest of your document. Worth measuring to check, if you need it to be that exact.

Dan

trollacious · Feb 15, 2005

I don't care for the tags usually, but have found a few cases where they're handy just to get the job done. Most times I've seen them used were due to poor layout design to begin with (not mine, of course

# ). The code I wrote could possibly work fine without the pair, as long as the is directly after the last image, with no spaces. There's a space before the first image that could most likely be removed, too.

Lee

Vragabond · Feb 16, 2005

benluke4 said:
Vragabond im a bit of a newbie!!
How should i alter the doctype thats already on the page.

Look at the doctypes mentioned here:

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

Copy one of them and replace yours. These are ready to go so you need not change anything. Since you're using 4.01 Transitional, I guess put this one on top:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

benluke4 · Feb 16, 2005

Thanks vragabond,

Ill change the doc type as said. Could you point in the right direction for soe reading about the different dtd's.

Im not sure why im changing this one as i dont understand what all the different ones mean.

Should i use the one you have recceomended for all my pages?

Could you explain?

Thanks very much

Ben

Vragabond · Feb 16, 2005

The one you had is same as not having one. Because it was incomplete. The one you're replacing it with is complete and will literary say: This page is written in this version of html language and browsers should follow it. Browsers then use the rules from the supplied url (

http://www.w3.org/TR/html4/loose.dtd)

to check how to render the page. When you have an incomplete doctype (like yours was) or no doctype at all, browsers enter so called quirks mode, following their own rules for rendering which results in different looks in different browsers: Geckos render very similarly when in quirks or standards mode, Opera renders similar to IE in quirks and similar to Geckos in standards and IE tries to render according to the standards in standards while it completely messes up in quirks.

The difference about the different doctypes? We should be talking only about 7 of them at the moment: 3 html 4.01, 3 xhtml 1.0 and one xhtml 1.1. The only difference between all this is strictness and looseness of language you write. You probably heard of XHTML, being a stricter version of HTML. So, it all goes to conforming your code to the rules of coding. HTML comes in three flavours: Transitional (loosest), Strict (strictest) and Frameset (for framed sites). XHMTL is stricter than HMTL in all the flavours but within XHTML they are the same. XHTML 1.1 is the latest spec and is only available in strict version. Find more here:

http://www.w3.org/TR/html4/sgml/intro.html

http://www.w3.org/TR/xhtml1/#dtds

benluke4 · Feb 16, 2005

Thanks Vragabond thats some very good info you've given me i will do further reading from links provided.

Extremely appreciated!!!

Ben

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

img dropping a line in IE 1

benluke4

Technical User

trollacious

Programmer

BillyRayPreachersSon

Programmer

benluke4

Technical User

Vragabond

Programmer

benluke4

Technical User

BillyRayPreachersSon

Programmer

trollacious

Programmer

Vragabond

Programmer

benluke4

Technical User

Vragabond

Programmer

benluke4

Technical User

Similar threads

Part and Inventory Search

Sponsor