By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,253 Members | 1,689 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,253 IT Pros & Developers. It's quick & easy.

JavaScript + CSS + IE

P: n/a
Hello All,

I have run into a JS / CSS layout issue in IE, and I can't for the life
of me figure out what's going on. Basically, I have one DIV that is
expanding beyond the bounds of the containing DIV, and I've literally
spent hours trying to find the problem. It appears to be somehow tied
to the scrollbars, but again, I'm not sure.

The container is resizable height-wise by grabbing the bottom of the
container, and the left and right columns within the container are
resizable by grabbing the divider between them. If you play around with
resizing it in various ways, the problem described above will come and
go.

I have pulled a portion of the site and simplified it to show only the
problem, as I knew there would be no way to describe it...

http://www.griffisweb.com/resize

Of course, it works just fine in Firefox. I was hoping the problem
would disappear with IE7, but no such luck.

ANY help would be greatly appreciated!

Thanks, everyone!
Adam

Nov 13 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Adam wrote:
Hello All,
Hello Adam
>
I have run into a JS / CSS layout issue in IE, and I can't for the life
of me figure out what's going on.
Well, I probably won't be able to help you either. With five .js files
and five (or at least two or three...) CSS files, I'll get dizzy right
away. Maybe if it were a simplified case, you'd either find the problem
yourself (as you threw things out one-by-one) or you'd make it easier
for the others here.

In FF, however, I do get a js error on loading the page:

Error: invalid property id
Source File: http://www.griffisweb.com/resize/script/iedebugger.js
Line: 64, Column: 1
Source Code:
float:'right',

Does that help you?

What I can say though, since I'm reading this in c.i.w.a.s, is that I'm
worried when I see "font-size:76%;" in a stylesheet. Visitors will
automatically have to bump up the text size a couple of notches just to
start out.

And in case you did not know, you can simplify some four-sided rules
like "padding: 0px 0px 0px 0px;" to "padding: 0px;" (or even "padding:0;").

I also thought you weren't allowed to have a <formimmediately within a
<body>. Maybe I'm wrong, though.
Basically, I have one DIV that is
expanding beyond the bounds of the containing DIV, and I've literally
spent hours trying to find the problem.
Smells like quirks- vs. standards-mode to me, but that's without looking.
>
http://www.griffisweb.com/resize
ANY help would be greatly appreciated!
You seem to think your page is XHTML (based on your closing tags), but
you have no doctype defined. Try getting your page to validate first,
and maybe your other problems will clear up. If they don't, boil your
problem down to its simplest form, and if necessary, ask again.
--
Good luck,
John
Nov 14 '06 #2

P: n/a
John, thanks for taking an initial look. I will attempt to boil it down
further. See my reply to your comments inline.

John Hosking wrote:
Adam wrote:
Hello All,

Hello Adam

I have run into a JS / CSS layout issue in IE, and I can't for the life
of me figure out what's going on.

Well, I probably won't be able to help you either. With five .js files
and five (or at least two or three...) CSS files, I'll get dizzy right
away. Maybe if it were a simplified case, you'd either find the problem
yourself (as you threw things out one-by-one) or you'd make it easier
for the others here.
I have removed one of the js files as in this simplified version of the
application it could be combined into another file. As for the four
remaining ones:

1) prototype.js is a library that my application uses and you can
ignore it.
2) iedebugger.js is for help in debugging problems in IE (hence the
name). Not sure why you are getting an error with it in Firefox - maybe
you need to have the Firebug FF extension installed
(http://joehewitt.com/software/firebug/). Either way, you can ignore
that problem in FF, and you can ignore the file as well. It is simply a
helper file and is insignificant to the problem.
3) resize.js is the ONLY file that need concern you, as it is with
resizing that the original problem comes and goes.
4) start.js simply sets some even handlers to, well, start my
application, and you can ignore it as well.

So basically, the only JS you would need to look at in regards to this
problem is the resize.js file.

I have eliminated all the extraneous CSS files, and removed unused
references from standand.css. Hopefully that will help clear things up
a bit.
>
In FF, however, I do get a js error on loading the page:

Error: invalid property id
Source File: http://www.griffisweb.com/resize/script/iedebugger.js
Line: 64, Column: 1
Source Code:
float:'right',

Does that help you?
No, not really. As stated above, iedebugger is solely for IE (it
duplicates a minimal amount of the functionality provided by Firebug in
FF) and has no relation to the problem. As for the error in FF, not
sure what could be causing that. In any event, this problem is an IE
problem, so if you're not getting the JS error in IE, I wouldn't worry
too much about it.
>
What I can say though, since I'm reading this in c.i.w.a.s, is that I'm
worried when I see "font-size:76%;" in a stylesheet. Visitors will
automatically have to bump up the text size a couple of notches just to
start out.
I have good reason to have that set to 76%, as it helps the page look
the same (or similar) across browsers. This should be used in
conjunction with EM sizing, which is the intent down the road here. For
a better explanation, I will refer you to
http://www.thenoodleincident.com/tut...fferences.html,
as that provides some examples as to what I'm talking about.
>
And in case you did not know, you can simplify some four-sided rules
like "padding: 0px 0px 0px 0px;" to "padding: 0px;" (or even "padding:0;").
Yes, I know that. Thanks for letting me know, though. I tend to keep it
written out like that during development to make it easier to add /
test different padding / margin sizes quickly and easily.
>
I also thought you weren't allowed to have a <formimmediately within a
<body>. Maybe I'm wrong, though.
Not sure - that's how Visual Studio created the page. ;-)
>
Basically, I have one DIV that is
expanding beyond the bounds of the containing DIV, and I've literally
spent hours trying to find the problem.

Smells like quirks- vs. standards-mode to me, but that's without looking.
Could be. Problem is, if I enforce standards mode a bunch of other
things break. I'm trying various ways of doing this.
>

http://www.griffisweb.com/resize
ANY help would be greatly appreciated!
You seem to think your page is XHTML (based on your closing tags), but
you have no doctype defined. Try getting your page to validate first,
and maybe your other problems will clear up. If they don't, boil your
problem down to its simplest form, and if necessary, ask again.
Actually, I did have a doctype -- in my actual application. In moving
it over to a simplified HTML only page I missed transferring that. I
have now moved it to the sample page as well. The doctype is currently
HTML 4.0 -- but I'm in the process of moving it up to XHTML 1.0 (VS
2003 to VS 2005 upgrade and all).
>

--
Good luck,
John
Thanks, and I hope my clarifications help!

Nov 15 '06 #3

P: n/a
VK

Adam wrote:
Hello All,

I have run into a JS / CSS layout issue in IE, and I can't for the life
of me figure out what's going on. Basically, I have one DIV that is
expanding beyond the bounds of the containing DIV, and I've literally
spent hours trying to find the problem. It appears to be somehow tied
to the scrollbars, but again, I'm not sure.

The container is resizable height-wise by grabbing the bottom of the
container, and the left and right columns within the container are
resizable by grabbing the divider between them. If you play around with
resizing it in various ways, the problem described above will come and
go.

I have pulled a portion of the site and simplified it to show only the
problem, as I knew there would be no way to describe it...

http://www.griffisweb.com/resize

Of course, it works just fine in Firefox. I was hoping the problem
would disappear with IE7, but no such luck.
That is not a JavaScript problem: one of your external stylesheets is
badly borken. Firefox reports 4 rule sets ignored and this allows it to
function semi-properly. Ask at
<comp.infosystems.www.authoring.stylesheetsfor help but before that I
would suggest to check your stylesheets one more time.

The trick with Firefox/IE difference is that you are using HTML
Transitional doctype without URL. With such doctype IE remains in quirk
(BackCompat) mode. Besides many other nasty things it also mean that it
implements "fall-trough" ruleset reading: thus skip on wrong but use
right. Firefox in any mode implements "denial on first wrong" ruleset
reading. It means that say for ruleset:
body {
foo: bar;
background-color: white;
}
IE in quirk mode will skip on "foo" but peaks up on background-color;
at the same time Firefox will skip "foo" and the whole rest of the
ruleset.

What is in relevance to JavaScript in your problem is iedebugger.js -
it contains a serious bug with using reserved word "float" for
identifier. On many UA's it will cause syntax error and no script
execution at all.

Nov 15 '06 #4

P: n/a
VK,

Not sure if you saw my reply to John or not, it might clear some stuff
up for you as well. In terms of iedebugger causing problems, I looked
further into the problem, and think I fixed it (though I'm not sure,
because it wasn't causing problems on my end). Let me know...

The problem was indeed a CSS issue, though not tied to the iedebugger
issue. Turns out MS has a proprietary property called "hasLayout". My
problem was solved when that value was set to "true". Thing is, the
only way to set it is by using various CSS attributes. For a broader
definition of the issue, see:
http://msdn.microsoft.com/workshop/a.../haslayout.asp.
Giving the widget a "display: inline-block" solved the issue.

The page has been updated to reflect this - see the link in the upper
right corner to toggle between broken and fixed!

Adam

VK wrote:
Adam wrote:
Hello All,

I have run into a JS / CSS layout issue in IE, and I can't for the life
of me figure out what's going on. Basically, I have one DIV that is
expanding beyond the bounds of the containing DIV, and I've literally
spent hours trying to find the problem. It appears to be somehow tied
to the scrollbars, but again, I'm not sure.

The container is resizable height-wise by grabbing the bottom of the
container, and the left and right columns within the container are
resizable by grabbing the divider between them. If you play around with
resizing it in various ways, the problem described above will come and
go.

I have pulled a portion of the site and simplified it to show only the
problem, as I knew there would be no way to describe it...

http://www.griffisweb.com/resize

Of course, it works just fine in Firefox. I was hoping the problem
would disappear with IE7, but no such luck.

That is not a JavaScript problem: one of your external stylesheets is
badly borken. Firefox reports 4 rule sets ignored and this allows it to
function semi-properly. Ask at
<comp.infosystems.www.authoring.stylesheetsfor help but before that I
would suggest to check your stylesheets one more time.

The trick with Firefox/IE difference is that you are using HTML
Transitional doctype without URL. With such doctype IE remains in quirk
(BackCompat) mode. Besides many other nasty things it also mean that it
implements "fall-trough" ruleset reading: thus skip on wrong but use
right. Firefox in any mode implements "denial on first wrong" ruleset
reading. It means that say for ruleset:
body {
foo: bar;
background-color: white;
}
IE in quirk mode will skip on "foo" but peaks up on background-color;
at the same time Firefox will skip "foo" and the whole rest of the
ruleset.

What is in relevance to JavaScript in your problem is iedebugger.js -
it contains a serious bug with using reserved word "float" for
identifier. On many UA's it will cause syntax error and no script
execution at all.
Nov 15 '06 #5

P: n/a
VK wrote:
<snip>
Firefox in any mode implements "denial on first wrong"
ruleset reading. It means that say for ruleset:
body {
foo: bar;
background-color: white;
}
IE in quirk mode will skip on "foo" but peaks up on
background-color; at the same time Firefox will skip
"foo" and the whole rest of the ruleset.
That is not actually true, as can be verified by the simple measure of
changing the background color specified into something less likely to
correspond with the default background color (like red), inserting the
above 'CSS' into a (properly formed) style element on an otherwise empty
HTML page and loading it into Firefox. The background of the body
element takes on the color suggested.

Richard.
Nov 16 '06 #6

P: n/a
VK
Firefox in any mode implements "denial on first wrong"
ruleset reading. It means that say for ruleset:
body {
foo: bar;
background-color: white;
}
IE in quirk mode will skip on "foo" but peaks up on
background-color; at the same time Firefox will skip
"foo" and the whole rest of the ruleset.
That is not actually true, as can be verified by the simple measure of
changing the background color specified into something less likely to
correspond with the default background color (like red), inserting the
above 'CSS' into a (properly formed) style element on an otherwise empty
HTML page and loading it into Firefox. The background of the body
element takes on the color suggested.
Right, I failed to explain it properly. IE's "fall-through" reading
applies to a rule, not to a ruleset.

In the following example any UA will display green body including IE
(because it's in CSS1Compat mode so the second rule is ignored
completely). Now remove doctype and IE will become red: in the second
rule it will read and apply all proper attributes.
This is how we adjusting styles for IE in BackCompat (quirk) mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background: green;
background: red IEBackCompatOnly;
}
</style>
</head>

<body>

</body>
</html>

Nov 17 '06 #7

P: n/a
VK
VK wrote:
This is how we are adjusting styles for IE in BackCompat (quirk) mode:
"we are adjusting" here is a form of speech (like "what we are seeing
here is..."). Please don't take as "we (the poster and fellows) are
practically using it to adjust style rules". :-)

Nov 17 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.