Graphic width problem in Firefox

[crobnson]

Hello,

I have been working on a volunteer project to incorporate a new graphical header to a blogsite. I finally was able to successfully have the header fill 100% of the space. It works perfect in IE6, exceptable results in NN and does not work at all in FF. The website where I am testing out the design is: http://crobnson.web1000.com/itm.html. This is what I have on there now and what works beautifully in IE (exceptable results in NN):

* html #photo {
position: relative; /* sets a new 'positioning context' so the child
image can be 100% */
left: -7px; /* get around padding from parent element */
margin-right: -27px; /* should be approximately the width of the
right col */
margin-top:0px;
padding-top:0px;
}
#photo img {
width: 100%;
height: 160px;
}

Prior to trying this out, I had the following on there:

#photo {width: 81%;height: 160px;margin-top:0px;padding-top:1px}
* html #photo {width: 100%;height: 160px;margin-top:0px;padding-top:1px}

These 2 together worked fine. But I prefer the new code in IE because it totally fills the space. As far as FF and NN are concerned, I do not have a problem with the banner being only 81%. All of my testing showed that that was the best I could hope for. Time is running out and I would like to just get the header at the top of the page instead of the bottom. Is there any possible way that I can hide the IE code from FF so that I can put the code that does work for them back on? Or some other way to make this work in FF?

I thank you in advance for your assistance,
Christine

[mwinter]

It works perfect in IE6, exceptable results in NN and does not work at all in FF.That sort of pattern almost always indicates that the rendering 'success' is due solely to bugs in IE. Fx, with the exception of some obscure bugs, renders documents exactly how you specify they should be rendered. If that doesn't correspond to what you'd like, your implementation is broken in some way.


http://crobnson.web1000.com/itm.htmlYou should start by rewriting that from scratch, and include a complete document type declaration (DOCTYPE). It is grossly invalid and any particular similarity between browsers is simply a coincidence of error correction.

As for the particular problem at had, the #photo div element spans the entire width of its containing element (#main) as block-level elements do. When you specify that the img element should be 100% of this width, Fx (and others) takes your instructions literally and stretches the image as necessary. As this image cannot fit at the top because of the floated div element (#menu), it moves below it.

Stretching images in the browser is not a good idea to begin with. Browsers use efficient, but low quality, resizing algorithms. What would be better is to add right padding or a margin at least as wide as the floated div element, then centre the image. The difference between using margins and padding, in this instance, is that if the content extended beyond the menu (as it does now), a margin would leave an empty space below the menu, whereas padding would continue the background colour (or image) into that space.

Mike

[crobnson]

Thank you for your response Mike. I totally agree with you, the site is grossly invalid. Unfortunately, I do not own or control the actual site that this banner will be located. I used my site solely for testing. This was a volunteer effort on my part to somehow retrofit the banner I created into their site. My banner was the winner of their contest by the way. This was a very difficult project for me. The fact that Firefox requires nearly perfect code was definitely a huge problem. I also fully understand that the reason it worked so well in IE was due to it's bugs. The unveiling is tomorrow. Up until last night, I still was unable to get the banner to even show at 800x600. I took part of your suggestion, regarding the margins and was able to finally get at least some success. I plan on talking to the owners about the problems with their site. They do not have any knowledge of html, css or javascript. Definitely something that is not hard to understand when you have sites like blogger. Personally, I stayed completely away from "they do it for you" sites and even software due to the fact that I wanted to know "what was under the hood". To this day I am greatful I did. If you would like to see the end product on my end you can find it at: http://itmbanner.blogspot.com/ I did finally move it over to blogger to see how it would respond. Thank you for your assistance, you really were a huge help to me in the end.