I would greatly appreciate if someone could spare the time to investigate two problems I have with this test site... 1) Why in Firefox is there two white gaps in the sliced air conditioning image on the top right? I can fix it by removing the padding in '#nav a' but I need the menu padded. 2) Why in Firefox is the header menu positioned to the left but in IE it is to the right?
Hi! I would replace <table width="687" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td><ul id="nav"> <li><a href="/">HOME</a></li> <li><a href="how.html">HOW & WHY</a></li> <li><a href="air-conditioning-solutions.html">SOLUTION BY INDUSTRY</a></li> </ul></td> <!-- MENU LIST ADD - RENTAL PART --> <td width="145"><img width="145" height="38" src="images/iRental2.jpg"/></td> </tr> </tbody></table> By <div style="float:right"><img width="145" height="38" src="images/iRental2.jpg"/></div> That looks OK in FF. Don't know about IE though (don't have it over here to test ). It should look good though (maybe some minor tweaking needed)
I made the menu the proper width and now the bottom half of the sliced image is lodged to the left, why is that?
Hi, I have just given 5mins to this. Kindly do just two things # you have to modify the image of AC with blue band [TOP Right below flash] # Please go through the code, it is messed up with table layouts, the issue is that you have fixed the td in pixels and then using 100%
I have everything sorted now apart from one little thing... Currently the sliced image in IE is a couple of pixels out of place but in Firefox it is perfect, does anyone know why?
Could be several things. First, if you didn't already add the universal selector at the very very top of the CSS to null margins and padding, IE and FF and Opera and everyone have different default margins and paddings. Or, it could be 3-pixel jog. It's an IE bug. http://www.positioniseverything.net/explorer/threepxtest.html Or, with images sometimes there's pixel-rounding errors. This is fun. http://www.positioniseverything.net/round-error.html It happens when the browser has to guess how many pixels it needs to use... and every browser can guess a little differently.
Thanks for your post. 1) A lot of the classes in my CSS are using margins/padding, what do you mean null it? 2) I'm using IE7 so it's not that. 3) It's not that.
By null it I mean (and I think you've got this in another thread so you may have done this already) at the top of your css sheet * { margin: 0; padding: 0; } Some people stick this in the body and apparently that can still let somebody (I forget which browser) still apply their defaults to some elements. Anyway, this says everything (or almost everything, apparently the insides of lists still need to be nulled) starts at zero. Then when you add margins and padding to elements further down the page, they all start at zero first. So theoretically a 5px margin on an element will be 5 px in every browser, instead of 5px in one and 7px in another and 10px in a third. PS if you mean the sucking-machine-thing on the left side, in my old FireFox there are also spaces. But I don't slice. A small image like that should be able to have a transparent background and just be sat on top of the header's bottom. Trying to be pixel perfect in all browsers is difficult and usually not recommended, and using sliced images pretty much forces you to try for pixel perfect.