Help - horiz Layer positioning - different in IE and Firefox - Why?

[cluthz]

Hi there,

I'm having problems getting consistency on placing a layer in IE and
firefox.

Easier probably if you take a look yourself at:
(temporary link)

http://server6.dedicateduk.com/~novitelt/signup1-complete.php

If you look at this in both IE (7 I'm using) and firefox you will see that
the left hand navigation has a marker which has a different horizontal
position in each browser. In Firefox it's too far to the right and covers
the "sign up" link which it is indicating.

I cannot work out why despite looking through the code many times.

Can anyone please help?

thanks in advance

 

[Jonathan N. Little]

Hi there,

I'm having problems getting consistency on placing a layer in IE and
firefox.

Easier probably if you take a look yourself at:
(temporary link)

http://server6.dedicateduk.com/~novitelt/signup1-complete.php

If you look at this in both IE (7 I'm using) and firefox you will see that
the left hand navigation has a marker which has a different horizontal
position in each browser. In Firefox it's too far to the right and covers
the "sign up" link which it is indicating.

I cannot work out why despite looking through the code many times.

Can anyone please help?

In Firefox while holding the "CTRL" key down press the "+" a couple of
times and get your answer!

That image and much of your design is absolute pixels places, but the
text size and spacing (and the font in fact) can vary from browser to
browser because of rendering methods, different default settings, user
preference, OS of user, font availability. To be brief, your design
plan is the problem, Google "liquid layouts" and avoid "position:
absolute;" in most cases...

 

[Michael]

http://server6.dedicateduk.com/~novitelt/signup1-complete.php

If you look at this in both IE (7 I'm using) and firefox you will see that
the left hand navigation has a marker which has a different horizontal
position in each browser. In Firefox it's too far to the right and covers
the "sign up" link which it is indicating.

After some searching I finally found this line that places the marker:
<div id="ProductSelectedIndicator" style="position:absolute; width:10px;
height:15px; z-index:5; left: 18px; top: 202px;"><img
src="images_web/bullet_general.gif" alt="[]" width="11" height="18"></div>

WHY ON EARTH would you want to do this? Apart from the problem you pointed
out (incompatibility between browsers), the marker stays exactly in place
when I change the display font size, which is... well.. UGLY.
You have empty table cells in front of the menu items, why not just place
the marker there?

Whatever you do, don't use the absolute positioning, it will never work
properly (one of many reasons being the font scaling).

Regards

Michael

 

[cluthz]

In Firefox while holding the "CTRL" key down press the "+" a couple of
times and get your answer!

That image and much of your design is absolute pixels places, but the text
size and spacing (and the font in fact) can vary from browser to browser
because of rendering methods, different default settings, user preference,
OS of user, font availability. To be brief, your design plan is the
problem, Google "liquid layouts" and avoid "position: absolute;" in most
cases...

Thanks Jonathan,

So does this mean I have to do a complete re-design? The thing is I have
other similar pages which work fine in both.
It's just this one.

I did before starting this project ask which is the best way to go about it,
but there was so much debate sparked my question was never properly answered
and I was left confused about the best way.

There seemed to be a lot of different opinion about the best way to proceed
and bugs in browsers which made the work significantly more difficult to
maintain.

In the end pixels have been easiest (assuming I can solve this blip) the
designers were happier using pixels of course.

 

[cluthz]

WHY ON EARTH would you want to do this? Apart from the problem you pointed
out (incompatibility between browsers), the marker stays exactly in place
when I change the display font size, which is... well.. UGLY.
You have empty table cells in front of the menu items, why not just place
the marker there?

Whatever you do, don't use the absolute positioning, it will never work
properly (one of many reasons being the font scaling).

Regards

Michael

As I was saying in my last posting. I do like the way IE works. The scaling
is great in IE 7. When starting this project I did try and ask about the
best way of implementing and this spawned a very big posting with what
seemed like different opinions and it all just confused me.

So I thought, it seems the majority of people use pixel measurements, so why
not.
If there is an easy way to improve the design I'm open. I want to keep the
page centred in the way it currently is.

Thanks.

 

[cluthz]

You have empty table cells in front of the menu items, why not just place
the marker there?

Oh yes and I did initially try this but I can't remember what it was now,
but it did not give the desired look (or at least I could not achieve it).
The extra table cell caused problems with how I wanted the text to be placed
so I thought, as it is only a little marker I will just overlay it.

This is probably a very naive statement but when I look at websites that
have the best adherence to standards, they are always quite basic websites
that don't look as good as other ones.

 

[cluthz]

Problem found.
It seems that I had a missing closing table data tag in the Table code. This
was causing the item to shift to the right in IE. When I fixed that I again
get more consistent results.

However, I will consider instead using the table to store the marker image
within a table data element, but I felt this gave me less control over the
exact positioning of the marker.

Still open to suggestions to ways of making the website adhere to new
standards more appropriately, but it is possible to do that strictly and
achieving the same look in all browsers?

Thanks.

 

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

cluthz wrote :

Hi there,

I'm having problems getting consistency on placing a layer in IE and
firefox.

Easier probably if you take a look yourself at:
(temporary link)

http://server6.dedicateduk.com/~novitelt/signup1-complete.php

If you look at this in both IE (7 I'm using) and firefox

W3C Quality Assurance tip for webmaster:
Care With Font Size, Forget <font> and use CSS

"Units: avoid absolute length units for screen display

* Do not specify the font-size in pt, or other absolute length
units for screen stylesheets. They render inconsistently across
platforms and can't be resized by the User Agent (e.g browser). Keep the
usage of such units for styling on media with fixed and known physical
properties (e.g print).
* Use relative length units such as percent or (better) em"

http://www.w3.org/QA/Tips/font-size#css

Gérard

 

[Bergamot]

I did before starting this project ask which is the best way to go about it,
but there was so much debate sparked my question was never properly answered

Perhaps you asked the wrong people.

There seemed to be a lot of different opinion about the best way to proceed
and bugs in browsers which made the work significantly more difficult to
maintain.

Perhaps you asked the wrong people again.

In the end pixels have been easiest (assuming I can solve this blip)

Sorry, you cannot solve this "blip" using absolute positioning at
precise x/y coordinates. Mr Little mentioned several reasons why. You
really should get rid of all the absolute positioning. You shouldn't
need any of it.

the
designers were happier using pixels of course.

They often are because they don't understand web media, or want to.
Don't let them suck you into bad design practices with their
pixel-perfect mindsets.

Redesign your navigation menus using list markup instead of tables.
There are slews of examples and tutorials out there, a huge list is at
http://css.maxdesign.com.au/listamatic/

 

[Bergamot]

This is probably a very naive statement but when I look at websites that
have the best adherence to standards, they are always quite basic websites
that don't look as good as other ones.

For example?

BTW, there isn't anything about the layout of
http://server6.dedicateduk.com/~novitelt/signup1-complete.php
that can't be done using web standards and a simple 2-column CSS layout.
After all, it's all solid color blocks with a few border treatments and
a couple graphic embellishments. It's a perfect candidate.

As is, I think it's over-designed, making it more complicated than it
needs to be. When you get more experienced, you may see this yourself,
but I fear you are falling into the pixel-perfect snare of many graphic
designers.

 

[Neredbojias]

This is probably a very naive statement but when I look at websites
that have the best adherence to standards, they are always quite basic
websites that don't look as good as other ones.

No, it isn't naive, but your attraction to certain sites may be subjective.
Furthermore, standards-adhering sites can be just as "neat" as improperly-
marked-up sites but often aren't because the webmasters in question lack
the skills to make them so. Little John and Bergermutt not only gave you
the correct answers, they provided important clues as well. You need to
study and learn something in order to be proficient at it; this doesn't
come magically overnight. I suggest you download the html 4.01 and css 2.1
documentation, read it, and refer to it often as you construct your next,
hopefully better, website.

 

[Chaddy2222]

No, it isn't naive, but your attraction to certain sites may be subjective.
Furthermore, standards-adhering sites can be just as "neat" as improperly-
marked-up sites but often aren't because the webmasters in question lack
the skills to make them so. Little John and Bergermutt not only gave you
the correct answers, they provided important clues as well. You need to
study and learn something in order to be proficient at it; this doesn't
come magically overnight. I suggest you download the html 4.01 and css 2.1
documentation, read it, and refer to it often as you construct your next,
hopefully better, website.

I agree with this.
I am still getting the hang of CSS myself after useing Tables for
layout and find it's a lot easier to get things working in a better
way with CSS.
I also find that not placeing widths on items tends to help with
getting stuff to work.
I keep forgetting to add container div's though, which can mean that
stuff does not line up correctly, but I eventually work out what the
problem is. Although some layouts do very a bit with what you can
include.

 

[Bergamot]

... Bergermutt

Hmmm... did I do something to displease you, thus provoking you to
mangle my name?

 

[Neredbojias]

I agree with this.
I am still getting the hang of CSS myself after useing Tables for
layout and find it's a lot easier to get things working in a better
way with CSS.
I also find that not placeing widths on items tends to help with
getting stuff to work.
I keep forgetting to add container div's though, which can mean that
stuff does not line up correctly, but I eventually work out what the
problem is. Although some layouts do very a bit with what you can
include.

I don't consider myself an expert at css, but I did put in the time and do
believe I have a fairly decent proficiency in the discipline. The idea is
you have to work at it. It's easy to condemn something of which you have
no or minimal understanding. Css isn't perfect by any means, but it is
generally viable and what we are stuck with in any case.

 

[Neredbojias]

Hmmm... did I do something to displease you, thus provoking you to
mangle my name?

Oh heck, I was just kidding around. If it displeases you, I apologize.

 

[cluthz]

Thanks for all the input on this.

The site has been received very well when we test it on people and we use it
as an example of what can be done and people respond very positively.

As for examples of websites that don't look good, well actually it is often
the websites to whcih the tutorials are on that actually put me off. I look
at some of them and think, that is such a horrible looking website
explaining the practise of good web site design, it makes me think that
maybe I should not worry too much.

I do not want to give any examples as I would not want to offend any of the
websites.

I do accept the example I have given most probably could have been done
better. Fortunletly it works well at the moment and as many of you wisely
pointed out and with many IT related tasks, as you get more experianced you
look at how you done something yesterday and you think, now why did I do
that.
But the unfortunet reallity is that when working under pressure and tight
deadlines, there is just not the time available.

Thanks again for all the input and hopefully this time next year I too will
be preaching the benefits of pure CSS design.

Watch this space.

 

[Andy Dingley]

The site has been received very well when we test it on people

"No one complained while we stood over them for a few minutes"

with a dash of

"People who hate it simply leave without comment"

I don't believe that you did "test" it, or that your study group was
in any way representative. No-one does this -- it's too expensive.
Yes, I have done it. Very rarely, and only in hugely expensive
usability trials I just can't afford to run very often.

we use it as an example of what can be done and people respond very positively.

or "I am right"

As for examples of websites that don't look good, well actually it is often
the websites to whcih the tutorials are on that actually put me off.

or "You're all wrong"

I do not want to give any examples as I would not want to offend

or "I have no real evidence to support my prejudices"

I do accept the example I have given most probably could have been done
better.

or "It's complete crap with any variance in font size, for a trivial
site that could be entirely re-written in a few minutes"

Fortunletly it works well at the moment

For you. Not for everyone.

 

[Jonathan N. Little]

Thanks for all the input on this.

The site has been received very well when we test it on people and we use it
as an example of what can be done and people respond very positively.

As for examples of websites that don't look good, well actually it is often
the websites to whcih the tutorials are on that actually put me off. I look
at some of them and think, that is such a horrible looking website
explaining the practise of good web site design, it makes me think that
maybe I should not worry too much.

<snip>


http://server6.dedicateduk.com/~novitelt/signup1-complete.php

If this is still the demo site in question, then is *still* very very
broken regardless of how "good" it looks. The
fixed-pixel-perfect-absolute-position requires font-size and user
settings to be "just right" else it breaks miserably.

 

[cluthz]

http://server6.dedicateduk.com/~novitelt/signup1-complete.php

If this is still the demo site in question, then is *still* very very
broken regardless of how "good" it looks. The
fixed-pixel-perfect-absolute-position requires font-size and user settings
to be "just right" else it breaks miserably.

Not finished yet. Yes it is very broken. Awaiting content.

Cheers

 

[cluthz]

"No one complained while we stood over them for a few minutes"

with a dash of

"People who hate it simply leave without comment"

I don't believe that you did "test" it, or that your study group was
in any way representative. No-one does this -- it's too expensive.
Yes, I have done it. Very rarely, and only in hugely expensive
usability trials I just can't afford to run very often.



or "I am right"


or "You're all wrong"


or "I have no real evidence to support my prejudices"


or "It's complete crap with any variance in font size, for a trivial
site that could be entirely re-written in a few minutes"


For you. Not for everyone.

Glad you are able to read between the lines

Criticism is good as long as it is not of my work.