Absolute positioning between browsers
in [CSS]
|
Prev: Effect of border/padding and nested margins on outer block layout
Next: wildcards and the case for setting all default styles
From: mehstg1319 on 16 Apr 2008 05:41 Hi there Not sure if anyone can help me, I am working on a site for my university, and am having a bit of trouble with css positioning. I am very new to css and do not know very much about it. Here is the link: http://homepages.feis.herts.ac.uk/~bp6ar/bus_intel/matrix/matrix.html Basically, the problem is that the ticks on the grid look perfectly placed in IE but wrong in Firefox, and when I edit it to match Firefox, it looks strange in IE. Any ideas? Paul
From: dorayme on 16 Apr 2008 06:04 In article <4d83e9db-a7de-48f0-8ebb-3bcbd32927c6(a)c65g2000hsa.googlegroups.com>, mehstg1319 <mehstg(a)gmail.com> wrote: > Hi there > > > Not sure if anyone can help me, I am working on a site for my > university, and am having a bit of trouble with css positioning. I am > very new to css and do not know very much about it. > > Here is the link: > http://homepages.feis.herts.ac.uk/~bp6ar/bus_intel/matrix/matrix.html > > Basically, the problem is that the ticks on the grid look perfectly > placed in IE but wrong in Firefox, and when I edit it to match > Firefox, it looks strange in IE. > > > Any ideas? There are a fair few validation errors for the html via <http://validator.w3.org/> But never mind this for now. Why are you not using an html table, something that is particularly appropriate, that is known to be very cross browser friendly in many ways? Up the text size and see how your page goes into fits (in FF, View menu, Text size, Larger a couple or more clicks). In your lists you are doing things like width: 80px; What do you expect will happen when the text, your html text ticks (which are not and cannot be pixeled successfully) don't fit in and worse. I have spent some effort trying to convince various folks that some lists are at bottom tables. But this is taking things too far in some opposite conceptual direction! Use a table and you won't then even have to specify widths for the cell. They will shrink and grow to fit. Why have you forsaken the benign magic of tables for the sorcery of lists and floating. They don't even have the advantage of floats by wrapping. > > > Paul -- dorayme
From: mehstg1319 on 16 Apr 2008 07:46 On 16 Apr, 11:04, dorayme <doraymeRidT...(a)optusnet.com.au> wrote: > In article > <4d83e9db-a7de-48f0-8ebb-3bcbd3292...(a)c65g2000hsa.googlegroups.com>, > > > > > > Â mehstg1319 <meh...(a)gmail.com> wrote: > > Hi there > > > Not sure if anyone can help me, I am working on a site for my > > university, and am having a bit of trouble with css positioning. I am > > very new to css and do not know very much about it. > > > Here is the link: > >http://homepages.feis.herts.ac.uk/~bp6ar/bus_intel/matrix/matrix.html > > > Basically, the problem is that the ticks on the grid look perfectly > > placed in IE but wrong in Firefox, and when I edit it to match > > Firefox, it looks strange in IE. > > > Any ideas? > > There are a fair few validation errors for the html via > > <http://validator.w3.org/> > > But never mind this for now. Why are you not using an html table, > something that is particularly appropriate, that is known to be very > cross browser friendly in many ways? > > Up the text size and see how your page goes into fits (in FF, View menu, > Text size, Larger a couple or more clicks). In your lists you are doing > things like width: 80px; What do you expect will happen when the text, > your html text ticks (which are not and cannot be pixeled successfully) > don't fit in and worse. > > I have spent some effort trying to convince various folks that some > lists are at bottom tables. But this is taking things too far in some > opposite conceptual direction! > > Use a table and you won't then even have to specify widths for the cell. > They will shrink and grow to fit. Why have you forsaken the benign magic > of tables for the sorcery of lists and floating. They don't even have > the advantage of floats by wrapping. > > > > > Paul > > -- > dorayme- Hide quoted text - > > - Show quoted text - dorayme First of all, thanks alot for taking the time to help me. I have done as you said and redesigned the grid to use standard tables. There still seems to be some discrepancies between how the site looks in IE and Firefox. new version is uploaded here: http://homepages.feis.herts.ac.uk/~bp6ar/bus_intel/matrixtable/matrix.html Any ideas Paul
From: John Hosking on 16 Apr 2008 08:05 mehstg1319 wrote: > On 16 Apr, 11:04, dorayme wrote: >> In article >> <yaddayaddapointlesslylongbutabridgedM-Id(a)googlegroups.com>, >> mehstg1319 wrote: >>> Here is the link: >>> http://homepages.feis.herts.ac.uk/~bp6ar/bus_intel/matrix/matrix.html >>> Basically, the problem is that the ticks on the grid look perfectly >>> placed in IE but wrong in Firefox, and when I edit it to match >>> Firefox, it looks strange in IE. If by "ticks" you mean the question marks I see in FF and the empty squares I see in IE6, then I guess you're talking about their vertical alignment with the left-hand labels. Yes? >> There are a fair few validation errors for the html via >> >> <http://validator.w3.org/> >> >> But never mind this for now. Why are you not using an html table, >> something that is particularly appropriate, that is known to be very >> cross browser friendly in many ways? >> >> Up the text size and see how your page goes into fits (in FF, View menu, >> Text size, Larger a couple or more clicks). In your lists you are doing >> things like width: 80px; What do you expect will happen when the text, >> your html text ticks (which are not and cannot be pixeled successfully) >> don't fit in and worse. >> >> Use a table and you won't then even have to specify widths for the cell. >> They will shrink and grow to fit. Why have you forsaken the benign magic >> of tables for the sorcery of lists and floating. They don't even have >> the advantage of floats by wrapping. >> > > First of all, thanks alot for taking the time to help me. I have done > as you said albeit only partially > and redesigned the grid to use standard tables. There > still seems to be some discrepancies between how the site looks in IE > and Firefox. You do know that they are *always* going to be different for most non-trivial pages, don't you? They are, after all, different browsers. > > new version is uploaded here: http://homepages.feis.herts.ac.uk/~bp6ar/bus_intel/matrixtable/matrix.html > > Any ideas Make the /whole/ table a table, including the text labels on the left. Also, I would say it is time to make your code validate (dorayme's remark notwithstanding). Any time you're bashing your head against differences between IE and FF, remember to check your code validity. It may not solve the problems you're having, but it almost never hurts. HTH -- John Pondering the value of the UIP: http://improve-usenet.org/
From: Bergamot on 16 Apr 2008 13:38
mehstg1319 wrote: >> >> > I am working on a site for my >> > university, and am having a bit of trouble with css positioning. >> > http://homepages.feis.herts.ac.uk/~bp6ar/bus_intel/matrix/matrix.html <heavy sigh> Is this what they're teaching at the university level these days? It's appalling. Please learn something about semantic HTML and get rid of about 90% of those div's and br's. http://microformats.org/wiki/posh See also the links at the bottom of that page. Send your instructor(s) there, too. > http://homepages.feis.herts.ac.uk/~bp6ar/bus_intel/matrixtable/matrix.html That's not really much better. You have the column headings completely outside the table to which they apply, in invalid list markup. There are 46 validation errors, some of which are serious, like duplicate IDs. The layout has issues as well. You are attempting to position text blocks at precise x/y pixel coordinates. This is doomed to fail because you cannot control the font size. Subsequently you end up with overlapping text, making it unreadable. You need to start over, I think. -- Berg |