Hey Brian > Okay in Moz everything on the MAIN page > http://www.mosincorporated.com/site2/main.php is okay except for the white > field with the scrollbars - this div expands pit about 8 pixels further than > it should - the white of the menu side should be used as a guide as to what > this side should display like. Look Using IE to see how the bottom should > line up.
Other way around (I think) - Moz is getting it right, IE is getting it wrong. But yes there is a difference of exactly 10px there between the two browsers, but I don't think the difference is where you think it is. If you overlay two screen grabs one over the other you will notice that the width from the extreme left of the white area to the scroll bars on the right (total width of d5) is identical in both browsers. The difference in how they are rendering is that IE is expanding the containing divs, while Firefox is not. I you measure the width of d1 in Firefox its exactly what you are saying it should be in the CSS, but in IE its 10px wider. I am guessing that this is because your math is out slightly somewhere - haven't found exactly where yet :) Try reducing the widths of your inner divs, one at a time moving outwards and you should find the culprit. Alternatively take a screenie & measure it all up in photoshop. I just reduced the width of d5 to 528px and that seemed to fix it but that might just be luck. I also did the height of d5 down to 429px and this fixed Moz but IE is now too short (edit: no the right col is too long). My rule of thumb is don't use vertical layouts in CSS... ever. This probably has nothing to do with your issue but its worth knowing anyway. Why? Firstly past CSS specs have been pretty ambiguous in their definition of how to handle it (I stopped paying much attention about 12 months ago so I don't know about 2.1 & 3 are like in this regard). Secondly browser support is rubbish so you are asking for a world of pain & hacks to get anything to look right. Thirdly there is a theoretical reason that I understood once, I've just spent 30 minutes trying to understand it again but I think I'm more confused than ever now. I know its something to do with viewport & visible height of the document vs. the total height of the document & the fact that web documents are "streamed" to the browser and rendered on the fly. If you are interested in looking further, check out http://ln.hixie.ch/?start=1070385285&count=1, http://weblogs.mozillazine.org/dave/archives/2003_05.html#003191, http://lists.w3.org/Archives/Public/www-style/2003Aug/0040.html and http://lists.w3.org/Archives/Public/www-style/2001Jul/0028.html > In IE the Main http://www.mosincorporated.com/site2/main.php the right side > displays as it should and the bottom of the left side is correct, however > the top of the left side drops about 8 pixels as the blue and orange bars > should line up perfectly as they do on the top in Mozilla The height adjustment I mentioned earlier actually goes some way to fixing this. I think the right hand col was too pushing up too high, rather than the left one being too low. I also had to adjust the height of d8 down by 10px in IE to get the bottoms lined up, but this borks Firefox. Maybe a math mistake? Maybe a browser bug? A hack should get you round it if you are only interested in these two browsers. Again ...vertical layouts are best avoided. > For the index page or entrance page http://www.mosincorporated.com/site2/ , > IE diplays as it SHOULD display - In Mozilla, my two areas of single line > text are dropping about 15 pix or so lower than it does in IE. Additionally > the photo creeps up a couple of pixels, the lighter blue bar under the > picture I think is in the right spot if the phot were but the lighter blue > bar to the left of the photo has a left border that it is NOT supposed to > have. You really like to make life difficult for yourself don't you :) I'm sorry I can''t get my head around that at this time of night - excessive use of negative margins can cause fits. I did make a slight improvement by adding: p {margin:0;padding:0} but that's not the whole story. IE & Moz are going very different things with that d9 div. Try using some background colours on your div's & p's to see where the browsers think things actually are. > I hope that is detailed and accurate enough - I look forward to the help Huge improvement! Apart from the above - can I just make some general comments about your code & approach in general. - The web is never going to be pixel perfect, getting the type of designs that you are going for working consistently across even the 5 most common browsers is going to be extremely difficult. This is not print, this is the web - content is king, design is sugar. Keep things as simple as possible. - Don't use pt's for font sizes for screen - they are meaningless. A pt is 1/72 of an inch, inches don't translate onto screens at all. As far as I'm concerned - in a perfect world - pixels are the right unit of measure for fonts - in the world we live in (where IE users can't resize pixels) - use em's, %'s or named font sizes. - I can see you are trying to keep your code as terse as possible, in my opinion this just makes it hard to read. I strongly recommend you try to be as verbose & descriptive as possible and use white space as much as you can. Bandwidth is very cheap these days, comprehension is still expensive. Cheers Mark ***************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *****************************************************
