Problem with absolute position div not cross browser

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with absolute position div not cross browser

Ok in Firefox 4, but shifted in IE 8

Kickedout

11:50 pm on Jun 24, 2011 (gmt 0)

I have a simple div with text in it.

<div id=bla style="position:absolute; z-index:1; overflow: visible; left: 285px; top: 31px; width:auto; height: 21px;">

I expected my first letter of text into that div be exactly at 285 px from left border. Since I do have other elements below I need it to be acurrate.

But the case is that looks fine in Firefox 4 and shifted to the right in IE8...

(Like 8 pixels aprox).

How do I fix it?
Is it a problem of "browsers margins" I can reset to 0?....

lucy24

2:53 am on Jun 25, 2011 (gmt 0)

Is it a problem of "browsers margins" I can reset to 0?....

Have you tried?

Margins shouldn't be relevant here, since "position: absolute" overrides almost everything. (With some horrible exceptions when you least expect them.) More important, margins are outside. Padding is inside, where you're seeing the bad behavior.

Useful guideline: Never assume anything. Not even if the CSS Rules say such-and-such is the default. If you expect something to look a particular way, put it in the CSS. For example,

div {margin: 0; padding: 0;}
p {text-align: left;}
table {border-collapse: collapse;}
td {text-align: left; vertical-align: top; padding: .1em;}
th {text-align: center; font-style: normal; font-weight: normal;}
img {border: none;}

Those are just off the top of my head. And then you go back and change things as needed.

And then you can slug it out with individual browsers. (MSIE 8 for example puts its fingers in its ears and hums loudly when it sees "margin-left: auto".)

penders

6:51 am on Jun 25, 2011 (gmt 0)

Is your

<div id="bla"

(I'd put "..." around your ID attribute btw) contained inside any other elements? Or is it a direct child of the BODY element?

Does your page validate?

Kickedout

4:41 pm on Jun 27, 2011 (gmt 0)

@penders

the div comes exactly after the <body> tag.

I'd say it does validate. But upon a check today throwed this

Line 1, Column 64: "HTTP:" is not a reserved name

�/W3C//DTD HTML 4.01 Transitional//EN" [w3.org...]

Is nonsense to me. Seems perfectly fine.

lucy24

4:51 pm on Jun 27, 2011 (gmt 0)

It certainly looks right. When all else fails, paste it in afresh (I took this straight from the w3c dtd page [w3.org]:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http:/ /www.w3.org/TR/html4/loose.dtd">
(Omit the space that keeps it from becoming an auto-link.)

Come to think of it, I've never used the second line. You could just leave it out and see if that shuts up the validator.

penders

6:23 pm on Jun 27, 2011 (gmt 0)

Line 1, Column 64: "HTTP:" is not a reserved name

I think this would suggest something is syntactically wrong... missing quotes perhaps? Can you paste this code from your page?

lucy24: It certainly looks right.

Am I missing something? What looks right?

lucy24: Come to think of it, I've never used the second line.

What second line? The 'second line' of the DOCTYPE?!

Kickedout

6:57 pm on Jun 27, 2011 (gmt 0)

I've noticed in fact since it has no spaces with following code line 1 is very long (sticky to avoid posting personal data in forum)

But in fact, when I strip out all the rest of code and just paste this in the wc3 online validator

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>

It stills show same error...

(pasted from my page directly)

penders

7:26 pm on Jun 27, 2011 (gmt 0)

You are missing quotes "..." around the 2nd part of the DOCTYPE. It should read:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Which is identical to this, on two lines:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

Both have white-space (space or newline) between the two parts which is the important thing.

An invalid DOCTYPE might produce erratic browser behaviour.

lucy24

8:58 pm on Jun 27, 2011 (gmt 0)

lucy24: It certainly looks right.

Am I missing something? What looks right?

The part in the immediately preceding post-- allowing for the fact that the http part turned into a link, so my browser may have eaten the non-permitted parts of it.

lucy24: Come to think of it, I've never used the second line.

What second line? The 'second line' of the DOCTYPE?!

Um, yeah. Why is this worthy of two punctuation marks?

:: shuffling papers ::

Does this look familiar?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Heh, heh.

penders

10:31 pm on Jun 27, 2011 (gmt 0)

The part in the immediately preceding post-- allowing for the fact that the http part turned into a link, so my browser may have eaten the non-permitted parts of it.

Ah OK, but that part in @Kickedout's post was incomplete and did not 'look right'. I think the HTTP part turned into a link because double quotes were omitted around the URL (the system identifier) and the forum software (not the browser) automatically turned it into a link. It should be... "http://www.w3.org/TR/html4/loose.dtd" in double quotes.

As mentioned, the 2nd part of the DOCTYPE is the system identifier and is required in order to make it a full DOCTYPE. If you don't have a full DOCTYPE you might trigger quirks mode (ie. non-standards mode) in certain browsers, notably IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Yep, used on this very site! Unfortunately WebmasterWorld.com is not leading by example here - this DOCTYPE should not be used on your nice new website. Legacy sites only. This part DOCTYPE specifically triggers quirks mode in all browsers! Which means you are unlikely to get any two browsers looking the same (8 pixels here, 8 pixels there, etc.) This site for instance has different padding/margins/positioning in IE than Chrome (this doesn't really matter in this case since functionality out ways design - it "works").

With the "..." missing in Kickedout's DOCTYPE this is probably resulting in a part DOCTYPE and triggering quirks mode in the browser.

lucy24

11:25 pm on Jun 27, 2011 (gmt 0)

the forum software (not the browser) automatically turned it into a link

I actually did mean my browser, because I was reading the obfuscated part off the bar thingie at the bottom of the browser window. (Where the address shows up if you hover it.)

Hm. Will have to see if Internet Exploder is more amenable to "margin-left: auto" if it is first fed a two-line DTD. Doesn't make Camino any more willing to do "text-shadow", darn it. And ###, better re-run my border-color tests. Doubt the results will be any less interesting, though. (Yes, I did mean "less".)

Kickedout

12:04 am on Jun 28, 2011 (gmt 0)

But that code you posted throws error too on validator... [validator.w3.org...]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

However I still have same issue

I have a simple div with text in it.

<div id=bla style="position:absolute; z-index:1; overflow: visible; left: 285px; top: 31px; width:auto; height: 21px;">

What should I add to achieve the desired position in IE and FF?

penders

12:05 am on Jun 28, 2011 (gmt 0)

Ah yeah, the browser would have eaten it! :)

The full DOCTYPE doesn't need to appear on two lines - it's only on two lines to make it easier to read - it just needs white space between the two parts. I always write it on one line.

Wikipedia: Quirks mode [en.wikipedia.org]
Quirks mode and strict mode [quirksmode.org]
Activating Browser Modes with Doctype [hsivonen.iki.fi]

After all this talk of DOCTYPEs and Quirks mode I don't think @Kickedout's problem is purely a DOCTYPE issue. I think there is something else amiss. Perhaps the other elements below the absolutely positioned DIV are wrong (perhaps because of the DOCTYPE) and so they don't line up?! Are there any other styles involved? #bla?

penders

12:19 am on Jun 28, 2011 (gmt 0)

@Kickedout - There is nothing wrong with that last DOCTYPE you posted, so any validation error you are getting must be related to something else. What error are you getting?

I've just been having a bit of a play, using your absolutely positioned DIV in a page with/without a DOCTYPE, an invalid DOCTYPE, forcing quirks mode in IE8, etc. and it works every time - I can't break it! The DIV is positioned at (285px, 31px) in IE8, IE7, Firefox 3.6, Chrome and Opera.

So this leads me to think there is something else 'non-simple' about your page that is causing this? You say you are still getting validation errors...

jennyj

8:19 am on Jun 28, 2011 (gmt 0)

in your css, you do have

body,html{padding:0;margin:0}

don't you?

penders

9:39 am on Jun 28, 2011 (gmt 0)

body,html{padding:0;margin:0}

This wouldn't affect an absolutely positioned container that was directly in the BODY.

Having had a look at the code, the problem was actually to do with a Facebook "Like" IFRAME element that was styled too wide. The IFRAME was forcing IE to expand the containing TABLE which shifted over adjacent content. So this specific problem appears to be resolved now.

However, there are other problems and validation issues with the page relating to the DOCTYPE so I thought it would be appropriate to tie up this thread...

The original DOCTYPE, without the "..." (double quotes) surrounding the system identifier (URL in 2nd part of the DOCTYPE) results in a serious validation error. It is so serious that the validator is unable to continue and process the rest of the document!

If the DOCTYPE is corrected and the page revalidated you get a lot of apparently 'new' validation errors because the validator is now able to continue and process the rest of the document. There are a lot of errors in the rest of the document.

One of the main problems is failure to quote attribute values, particularly URLS, and this is resulting in the majority of the validation errors and could result in rendering issues with your page. Since URLs contain slashes (/) you absolutely MUST surround these values in quotes.

Example:

<link href=hoteles-scripts/nav.css rel=stylesheet type=text/css>

Should be:

<link href="hoteles-scripts/nav.css" rel="stylesheet" type="text/css">

Same for <table width=100%
which MUST be expressed as <table width="100%"
because of the '%' character. There are numerous others. Ideally you should quote every attribute value.

Some of your elements at the start of your BODY should be contained in your HEAD section. For instance, the META tag is invalid in the BODY element.

Hope that helps.