Re: [WSG] What am I doing wrong with the CSS here
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 - pixe
RE: [WSG] What am I doing wrong with the CSS here
Mark, Thanks for the tip there! 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. 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 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. I hope that is detailed and accurate enough - I look forward to the help Brian Grimmer theGrafixGuy http://www.thegrafixguy.com 503-887-4943 925-226-4085 (fax) This reply to your initial e-mail is sent in accordance with the US CAN-SPAM Law in effect 01/01/2004. Removal requests can be sent to this address and will be honored and respected. -Original Message- From: Mark Stanton [mailto:[EMAIL PROTECTED] Sent: Tuesday, May 18, 2004 1:47 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] What am I doing wrong with the CSS here Hi Brian I've checked your site in both IE & Firebird and have run it through the CSS & HTML validators (one HTML page fails), but I still can't see the problem. Descriptions such as "everything has gone wacky", "things to display completely differently" and "broken something somewhere" are not really helping me to identify what you are talking about. Please try to be more descriptive if you really want to get your problem solved. Firstly use a nice descriptive subject line so that people can quickly decide whether or not they are able to assist. Also in the body of your message its important that you go through some basic steps to make sure you're communicating your problem correctly. I find that http://www.mozilla.org/quality/bug-writing-guidelines.html is an excellent resource on how to effectively describe bugs and problems. Also please check out the "Asking for help" section of this list's guidelines (http://webstandardsgroup.org/mail/guidelines.cfm). http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you might also be helpful. 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 * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *
Re: [WSG] What am I doing wrong with the CSS here
Hi Brian I've checked your site in both IE & Firebird and have run it through the CSS & HTML validators (one HTML page fails), but I still can't see the problem. Descriptions such as "everything has gone wacky", "things to display completely differently" and "broken something somewhere" are not really helping me to identify what you are talking about. Please try to be more descriptive if you really want to get your problem solved. Firstly use a nice descriptive subject line so that people can quickly decide whether or not they are able to assist. Also in the body of your message its important that you go through some basic steps to make sure you're communicating your problem correctly. I find that http://www.mozilla.org/quality/bug-writing-guidelines.html is an excellent resource on how to effectively describe bugs and problems. Also please check out the "Asking for help" section of this list's guidelines (http://webstandardsgroup.org/mail/guidelines.cfm). http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you might also be helpful. 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 *
[WSG] What am I doing wrong with the CSS here
I am getting different positions in IE and in Mozilla and now that I have added in a scrolling division, everything has gone wacky??? This is trying to be a completely standards and accessibility compliant site and I keep screwing up somewhere in my CSS for both the intro page and the main site look and causing things to display completely differently in IE and MOZ and now have broken something somewhere. The intro page is at http://www.mosincorporated.com/site2/index.php and its css is located at http://www.mosincorporated.com/site2/i.css The main page of the site is http://www.mosincorporated.com/site2/main.php and its css is http://www.mosincorporated.com/site2/s.css Thank you for the help. Brian Grimmer theGrafixGuy 918 N. Prescott St. Portland, Oregon 97217 503-887-4943 925-226-4085 (fax) Website: http://www.thegrafixguy.com e-mail: [EMAIL PROTECTED] This e-mail is sent in accordance with the US CAN-SPAM Law in effect 01/01/2004. Removal requests can be sent to this address and will be honored and respected.
