My page looks fine in Firefox but in IE, the palm tree graphic is not positioned correctly (please see below). What fix should I use? Any code I can use? Any tutorials on the web? Use IE to see the palm tree graphic : http://testingarea.proyectoclave.com/ I'd like the graphic to be positioned correctly as it's here: http://testingarea.proyectoclave.com/layout.gif
Your doctype is incorrect and IE is in quirks mode. You should use a strict doctype but you are using old, deprecated markup. So you have to use a transitional doctype till you can come into 2008 standards. Use this one: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Have you tried the leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" in the body yet, as well as align="top" for the palm.jpg image yet? Visually looking at it, the flash logo seems to be offsetting your palm image as the "under border" looks like extra white space in IE and not in Firefox. I'll take a closer look in the morning, it's midnight where I am...
Thanks!! I have set leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" in the body of index page. The palm graphic still looks incorrectly positioned in IE. I also tried the following (align="top") but it didn't have any effect on the position: <!-- PALM TREE --> <div id="palm"> <img src="picts/palm.jpg" width="138" height="178" alt="Cancun Fresh Mexican Grill" align="top"> </div> <!-- END PALM TREE --> Thanks again and I hope you can help me a bit more so I can get the graphic to appear correctly on IE.
The difference seems to be 2 pixels. In IE 7 the graphic is positioned 2 pixels below the position the graphic is on Firefox. The graphic looks perfect in IE 7 when I use: #palm { position: absolute; top: 97px; left: 400px;} The graphic looks perfect in Firefox 2.0 when I use: #palm { position: absolute; top: 99px; left: 400px;} Any ideas? How can I get IE to position the graphic correctly without affecting its positioning in the other browsers?
It looks completely off in FF1.5. The palm tree on my machine is halfway down the page. In Opera it looks to be well in place. Your doctype isn't completely correct, you're missing the second line. What I think is happening is the palm tree is using the body as a parent. When you absolutely position something, it needs to know who it's absolutely positioned in relation to (the nearest positioned parent) and when you don't say, then it uses the body or the viewport as its reference. IE and FF have different default margins and padding, which we would normally set to 0, and I think IE is still in Quirks mode because of the missing second line "http://www.w3.org/TR/html4/loose.dtd">
if you can't figure it out, you can always try it as a background image instead (remove img from your html): #palm { height:178px; width:138px; position:absolute; top:99px; left:400px; background-image:url(picts/palm.jpg);}
or try adding border:0; to your image #palm img {border:0;} or <img src="picts/palm.jpg" width="138" height="178" alt="Cancun Fresh Mexican Grill" border="0">
hmm... last try: are you using a global reset? You could try adding this to the top of your css: * {margin:0; padding:0; border:0;}
Ok, I was way off, the problem is in your top white section, it's 2px too short which is prob a border or something see screen shots: