Absolute positioning between browsers

[mehstg1319]

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/~b...ix/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

[dorayme]

Re: Absolute positioning between browsers

In article
<4d83e9db-a7de-48f0-8ebb-3bcbd32927c6@c6 5g2000hsa.googl egroups.com>,
mehstg1319 <mehstg@gmail.c omwrote:

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.or g/>

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

[mehstg1319]

Re: Absolute positioning between browsers

On 16 Apr, 11:04, dorayme <doraymeRidT... @optusnet.com.a uwrote:

In article
<4d83e9db-a7de-48f0-8ebb-3bcbd3292...@c6 5g2000hsa.googl egroups.com>,
>
>
>
>
>
 mehstg1319 <meh...@gmail.c omwrote:

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/~b...ix/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.or g/>
>
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/~b...le/matrix.html


Any ideas


Paul

[John Hosking]

Re: Absolute positioning between browsers

mehstg1319 wrote:

On 16 Apr, 11:04, dorayme wrote:

>In article
><yaddayaddapoi ntlesslylongbut abridgedM-Id@googlegroups .com>,
> mehstg1319 wrote:

>>Here is the link:
>>http://homepages.feis.herts.ac.uk/~b...ix/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.or g/>
>>
>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/~b...le/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/

[Bergamot]

Re: Absolute positioning between browsers

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/~b...ix/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/~b...le/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

[GTalbot]

Re: Absolute positioning between browsers

On 16 avr, 07:46, mehstg1319 <meh...@gmail.c omwrote:

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.or g/>


Paul,

First fix all validation markup errors. This is the first step to do
with your webpage. We can not go any further without fixing this
issue. Fix CSS errors if there are any. If you need help on this, then
visit:

Using Web Standards in your Web Pages

http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages:Making_your_page_using_web_standards_-_how_to

and

http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages

Where can I validate my webpages? How to validate webpages?

http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages:Making_your_page_using_web_standards_-_how_to#Where_can_I_validate_my_webpages.3F_How_to_validate_webpages.3F

You have to understand that there is no correct or incorrect webpage
rendering when the markup code is invalid. So fix that and we will
give you more info, recommendations , useful suggestions.

I agree with Bergamot. You misuse div and br; you over-use div and br:
lack of semantic too.

{
Divitis and classitis
Related to <spanmania. Adding unnecessary div elements and class
attributes.
Why? See “<spanmania” and “lack of semantics”.
}
Web development mistakes, redux

http://www.456bereastreet.com/archive/200408/web_development_mistakes_redux/

"
Classitis and Divitis
A common error of beginning CSS coders is to use far too many <div>
tags and class attributes (...)
"

Web Page Development: Best Practices

http://developer.apple.com/internet/webcontent/bestwebdev.html

"
Superfluous elements and classes
When starting out with CSS, it’s common to make the mistake of using
unnecessary XHTML elements, superfluous classes, and extra <div>
elements. This doesn’t necessarily mean that the code will be invalid,
but it counteracts one of the reasons of separating structure from
presentation; to get simpler, cleaner markup.
"

Developing With Web Standards
Recommendations and best practices

http://www.456bereastreet.com/lab/developing_with_web_standards/css/#css

Fix your validation markup errors: then we will be able to offer
additional assistance.

Why we won't help you

http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

Regards, Gérard

[dorayme]

Re: Absolute positioning between browsers

In article <4805ecda$1_4@n ews.bluewin.ch> ,
John Hosking <John@DELETE.Ho sking.name.INVA LIDwrote:

mehstg1319 wrote:

On 16 Apr, 11:04, dorayme wrote:

In article
<yaddayaddapoin tlesslylongbuta bridgedM-Id@googlegroups .com>,
mehstg1319 wrote:

>

>Here is the link:
>http://homepages.feis.herts.ac.uk/~b...ix/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.or g/>
>
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.
>

Most of this I agree with, I see ticks, John sees ?s, I can't see the
left list as quite to do with the ticks, seems to be some independent
navigation? Frankly, it is not really obvious what this page is meant to
be conveying.

You certainly must have as part of the table all those things that are
relevant and that *includes the headings*. You have the headings in a
horizontal list and are doing some lining up acrobatics with the table!

Tables are designed to have headings. Use its gifts. Put Consultancy,
Bus Dev, etc in <tr><th>Consult ancy</th><th>Bus
Dev</th><th>.....</th></trbefore the rows with the <td>s.

You can style the headings to appear white backgrounded.

You are fighting to get everything squeezed in. Too much juggling and
code. You will be disappointed unless you put the whole thing on a
better and sturdier scaffold.

Time to go back to basics though rather than be battering at this page.

<http://www.htmldog.com/>

But do come back when you have something simpler and validated as best
as you can.

--
dorayme

[Beauregard T. Shagnasty]

Re: Absolute positioning between browsers

dorayme wrote:

But do come back when you have something simpler and validated as best
as you can.

...and after looking at the page with JavaScript disabled...

--
-bts
-Friends don't let friends drive Vista

[mehstg1319]

Re: Absolute positioning between browsers

Ok. Will sort the validation errors out now.

And in answer to your <heavy sighcomment about what is taught in
university nowadays.

I am not taking a HTML/CSS course, it is a sideproject. I have never
used HTML or CSS until now, so this is my first attempt at it.


Paul

[mehstg1319]

Re: Absolute positioning between browsers

Right, have redesigned the page from the ground up, and all shows as
valid XHTML/1.0 Transitional

I haven't added any of the javascript to the page yet as I just want
to get the page working properly!!!

One thing I am not happy with is that two of the Div's are absolute
positioned, which I do not like....
Both boxKeyPersonel and boxMoreInfo are absolute positioned, but I
cannot figure a way of getting them to sit next to boxAbout properly,
if I use inherit, the box drops down below boxAbout.


Paul

[Chris F.A. Johnson]

Re: Absolute positioning between browsers

On 2008-04-25, mehstg1319 wrote:

Right, have redesigned the page from the ground up, and all shows as
valid XHTML/1.0 Transitional

What page is that? Please provide a URL. (Note that you are posting
to usenet, where previous posts in the thread may not be visible.)

Why are you using XHTML instead of HTML? Why transitional instead
of strict?

I haven't added any of the javascript to the page yet as I just want
to get the page working properly!!!

Good! (99% of the JavaScript on the Web is unnecessary, and limits
the page's audience.)

One thing I am not happy with is that two of the Div's are absolute
positioned, which I do not like....
Both boxKeyPersonel and boxMoreInfo are absolute positioned, but I
cannot figure a way of getting them to sit next to boxAbout properly,
if I use inherit, the box drops down below boxAbout.

--
Chris F.A. Johnson <http://cfaj.freeshell. org>
=============== =============== =============== =============== =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

[mehstg1319]

Re: Absolute positioning between browsers

Sorry, this is the address to the page

http://homepages.feis.herts.ac.uk/~bp6ar/bus_intel/matrix/matrix.html

--Original Message-----------------------------------------------

Right, have redesigned the page from the ground up, and all shows as
valid XHTML/1.0 Transitional

I haven't added any of the javascript to the page yet as I just want
to get the page working properly!!!

One thing I am not happy with is that two of the Div's are absolute
positioned, which I do not like....
Both boxKeyPersonel and boxMoreInfo are absolute positioned, but I
cannot figure a way of getting them to sit next to boxAbout properly,
if I use inherit, the box drops down below boxAbout.

Paul

[Andy Dingley]

Re: Absolute positioning between browsers

On 28 Apr, 10:15, mehstg1319 <meh...@gmail.c omwrote:

http://homepages.feis.herts.ac.uk/~b...ix/matrix.html

Why use tick.png when there's a perfectly good character for doing
this? Try ✔, or &#x2714; if you can't get the encodings straight and
prefer to use a numeric entity.

&#x2713; &#x2611; are worth a look too.

[mehstg1319]

Re: Absolute positioning between browsers

On Apr 28, 12:51 pm, Andy Dingley <ding...@codesm iths.comwrote:

On 28 Apr, 10:15, mehstg1319 <meh...@gmail.c omwrote:
>

http://homepages.feis.herts.ac.uk/~b...ix/matrix.html

>
Why use tick.png when there's a perfectly good character for doing
this? Try ✔, or &#x2714; if you can't get the encodings straight and
prefer to use a numeric entity.
>
&#x2713; &#x2611; are worth a look too.

I used the tick character before rebuilding and was criticised for
using it as it appeared as squares on some systems.

[Andy Dingley]

Re: Absolute positioning between browsers

On 28 Apr, 13:01, mehstg1319 <meh...@gmail.c omwrote:

&#x2713; &#x2611; are worth a look too.

>
I used the tick character before rebuilding and was criticised for
using it as it appeared as squares on some systems.

Which ones? If you do this competently (i.e. use the entity, or set
the encoding correctly) then it will work for anything within living
memory. I'd venture to suggest that support for this would actually be
wider than support for .png formats.

Tutors telling you to use absolute positioning for this simple task
are in no position to comment on coding standards.