Absolute DIV positioning in IE7

Hello all,

I constantly find myself spending a 'rediculous' amount of time trying
to get elements to line up correctly in IE (6 and 7).

I'm trying to write 'clean' CSS and do things as tightly as possible,
but it's usually the same story.

I am currently working on a site in which the layout was done in
Illustrator. I've sliced and exported only to find that, whilst it
works perfectly in FF/Chrome, IE7 fails - with a number of DIVs just
not lining up. An issue I constantly hit.

So I thought - it's not just me! Illustrator suffers the same issue!
There must be a workaround that people 'in the know' use to get around
this, so, in hope, I've stuck the page online and humbly ask someone
to point me in the right direction.

http://agentplus.com.au/reexample/rexonline.html

There are a few DIVs that don't line up in IE7, however, perhaps
respondants could just focus on "#AM_". I have tried fiddling with
this for an hour to get it to line up, and have no idea what is wrong.
Why is "that" div different to the others that work?

Any suggestions / workarounds would be greatly appreciated. Also - if
there is some 'fantastic' book out there about these kind of issues,
I'd be keen to hear about it.

Thanks very much in advance,


Damien.

DamienS wrote:

Hello all,


http://agentplus.com.au/reexample/rexonline.html

That is not a web page, it is a bunch of pictures of text.

That is not a web page, it is a bunch of pictures of text.

Um... ok. Thanks for that input.

Anyway - I think that I've found the issue! It appears that IE doesn't
like the whitespace between the div tags.

So - What I had was...

<div id="AM_">
<img id="AM" src="images/AM.gif" width="816" height="6" alt="" />
</div>


It appears that the carriage return before </div> was causing a text
block to be rendered by IE. If I change it to the following, then all
is well!

<div id="AM_"><img id="AM" src="images/AM.gif" width="816" height="6"
alt="" /></div>

.... damn I hate IE bugs... but am stoked that I found this!! :-)

DamienS wrote:

That is not a web page, it is a bunch of pictures of text.

Um... ok. Thanks for that input.

My point is that being pictures the page does not do anything.

There is a picture of a login panel there. How do I put in my userid and
password onto a picture of some input elements? How do I click a picture of
a submit button to log in?

When I click on that picture of a "click here" button nothing happens.
That's because it is not a button, it is a picture of a button.

View the site with Lynx, a text only browser that gives a good indication of
what the search engines see, or turn off images in your browser. What the
search engines see is a totally blank page.

Well spotted!

It's not finished.....




On Mar 18, 1:50*pm, "rf" <r...@z.invalid> wrote:

DamienS wrote:
That is not a web page, it is a bunch of pictures of text.

Um... ok. Thanks for that input.

My point is that being pictures the page does not do anything.

There is a picture of a login panel there. How do I put in my userid and
password onto a picture of some input elements? How do I click a picture of
a submit button to log in?

When I click on that picture of a "click here" button nothing happens.
That's because it is not a button, it is a picture of a button.

View the site with Lynx, a text only browser that gives a good indicationof
what the search engines see, or turn off images in your browser. What the
search engines see is a totally blank page.

Beauregard T. Shagnasty wrote:

rf wrote:

DamienS wrote:
Hello all,
http://agentplus.com.au/reexample/rexonline.html
That is not a web page, it is a bunch of pictures of text.

But... it validates! Both HTML and CSS... ;-)

Yes, let's be positive! These newsgroups should be more friendly and
supportive. So, um...

There are other advantages to this page. For example, turn off all
images (e.g. via Web Developer toolbar) and admire the clean, uncrowded
look. This page has an elegance not often equalled elsewhere on the Web.

--
John
Also, that woman in the FG is cute.
Pondering the value of the UIP: http://improve-usenet.org/

On 18 Mar, 01:23, DamienS <damiensaw... (AT) yahoo (DOT) com.au> wrote:

I constantly find myself spending a 'rediculous' amount of time trying
to get elements to line up correctly in IE (6 and 7).

I think we start with:

That is not a web page, it is a bunch of pictures of text.

Then we start on:

* XHTML Why?

* Transitional Why?

* Why use absolute positioning? Ever!

* It's a slice-and-dice job from a bitmap editing program. This is NO
way to do web design. It's a bad way to work (makes you waste time
counting trivial pixels, doesn't give good designs) and at best it's a
way to design fixed-width paper-print page layouts. This is almost the
antithesis of "web" design. On the web, I come along with _my_ choice
of browser, screen size, window size etc. and my tools choose how best
to render your content document, following the suggestions given by
your CSS. If your CSS says "Show _exactly_ this image or fail", then
the likely answer is that it will fail. Your site will look bad, it
will probably be unworkable for me, and I will go to your accessible
competitor's site instead.

The designer's usual response at this point is to blame the customer,
or the c.i.w.a.s poster for pointing this out. You're welcome to this
opinion, and I envy you the luxury of your customer-independent
business model.


* This is car rentals, not art or advertising for Chanel. It doesn't
_need_ pixel-perfect accuracy, it needs to be accessible to me from my
choice of browser (which might well be on my phone). Make the
_content_ _work_ for me, and screw the art aspirations - they won't
sell rentals.



Start again with the HTML coding. Use HTML 4.01 Strict. Build a
logical structure of <div> (nested, with whitespace, whatever - it
doesn't matter). Then worry about some CSS to make it look good.

In the meantime, read some background on fluid design and
accessibility.

DamienS wrote:

Well spotted!

It's not finished.....

If text is not text, what is the point in having all these images
assembled as they are now. You could have just as well made the whole
page a single image map and positioned your form over it.

If you replace your text images with real text, the design can be
easily and badly broken (overlapping content). And if text is not text,
the site is virtually invisible to search engines and the blind.

This is not print. If you really have no desire to learn html, then
you should consider doing this in either flash or as a PDF.

Jeff

On Mar 18, 1:50 pm, "rf" <r...@z.invalid> wrote:
DamienS wrote:
That is not a web page, it is a bunch of pictures of text.
Um... ok. Thanks for that input.
My point is that being pictures the page does not do anything.

There is a picture of a login panel there. How do I put in my userid and
password onto a picture of some input elements? How do I click a picture of
a submit button to log in?

When I click on that picture of a "click here" button nothing happens.
That's because it is not a button, it is a picture of a button.

View the site with Lynx, a text only browser that gives a good indication of
what the search engines see, or turn off images in your browser. What the
search engines see is a totally blank page.

turn off all
images (e.g. via Web Developer toolbar) and admire the clean, uncrowded
look. This page has an elegance not often equalled elsewhere on the Web.

*lol*

Nice :-)

Hello again all.

Let's say that I concede that ALL of the text, except perhaps the
logo, be text - will people still flame this as bad design?

* XHTML Why?
Exported that was from Adobe Illustrator. To tell you the truth, I've

not read enough about XHTML to comment.

* Transitional Why?
Once again, a decision made by Illustrator. I tend to prefer Strict.

* It's a slice-and-dice job from a bitmap editing program.
Vector editing actually if you want to split hairs.

* Why use absolute positioning? Ever!
Now, are you referring to absolute positioning vs relative (as in

position:absolute)

My understanding (which could be wrong) is that absolute positioning
will position relative to the parenting div (not the viewport) whereas
"Relative positioning uses the same four positioning properties as
absolute positioning. But instead of basing the position of the
element upon the browser view port, it starts from where the element
would be if it were still in the normal flow." (from
http://webdesign.about.com/od/advancedcss/a/aa061307.htm). So,
shouldn't one use relative positioning for the parenting div
(#Table_01 in this case) and absolute for the child elements? In any
case, doing this acheived the effect that I was going for.

So - please enlighten me, what's wrong with absolute positioning if it
can be used to position absoluately in reference to a flowing parent
element?

It's a bad way to work (makes you waste time
counting trivial pixels, doesn't give good designs) and at best it's a
way to design fixed-width paper-print page layouts.

yeah, I agree with you here. Ideally a site should expand/shrink to
fit the available real estate.

Heck... I actually agree with pretty much all you've said. In my
opinion, fluid design rocks.

Having said that though - everyone in the office loved this layout (as
done by the graphic designer)... so this is the layout that we got.

You know, thinking about it, perhaps it comes down to limitations in
the toolsets of designers (Corel Draw, Illustrator, Photoshop) not
being able to create fluid designs. They work with what they have and
we get rigid designs.

Start again with the HTML coding. Use HTML 4.01 Strict. Build a
logical structure of <div> (nested, with whitespace, whatever - it
doesn't matter). Then worry about some CSS to make it look good.

That's how I build 'my' sites. The thing is though, they all end up
looking square and boxy. Looking at http://www.csszengarden.com/
though, I concede that this is my fault and my fault alone, as kick
ass CSS with flowing design is by all means possible.

Anyway - this post was not meant to start a debate. It was meant to
find out why IE7 wouldn't line up some DIVs. Now I know... and all is
well :-)


DS

On Mar 19, 12:30*am, Andy Dingley <ding... (AT) codesmiths (DOT) com> wrote:

On 18 Mar, 01:23, DamienS <damiensaw... (AT) yahoo (DOT) com.au> wrote:

I constantly find myself spending a 'rediculous' amount of time trying
to get elements to line up correctly in IE (6 and 7).

I think we start with:

That is not a web page, it is a bunch of pictures of text.

Then we start on:

* XHTML * Why?

* Transitional *Why?

* Why use absolute positioning? *Ever!

* It's a slice-and-dice job from a bitmap editing program. This is NO
way to do web design. It's a bad way to work (makes you waste time
counting trivial pixels, doesn't give good designs) and at best it's a
way to design fixed-width paper-print page layouts. This is almost the
antithesis of "web" design. On the web, I come along with _my_ choice
of browser, screen size, window size etc. and my tools choose how best
to render your content document, following the suggestions given by
your CSS. If your CSS says "Show _exactly_ this image or fail", then
the likely answer is that it will fail. Your site will look bad, it
will probably be unworkable for me, and I will go to your accessible
competitor's site instead.

The designer's usual response at this point is to blame the customer,
or the c.i.w.a.s poster for pointing this out. You're welcome to this
opinion, and I envy you the luxury of your customer-independent
business model.

* This is car rentals, not art or advertising for Chanel. It doesn't
_need_ pixel-perfect accuracy, it needs to be accessible to me from my
choice of browser (which might well be on my phone). Make the
_content_ *_work_ for me, and screw the art aspirations - they won't
sell rentals.

Start again with the HTML coding. Use HTML 4.01 Strict. Build a
logical structure of <div> (nested, with whitespace, whatever - it
doesn't matter). Then worry about some CSS to make it look good.

In the meantime, read some background on fluid design and
accessibility.