JavaScript + CSS + IE

Adam

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

Subscribe Reply

2394

John Hosking

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 <formimmediatel y 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

Adam

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 <formimmediatel y 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

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.infosyste ms.www.authorin g.stylesheetsfo r 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

Adam

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.infosyste ms.www.authorin g.stylesheetsfo r 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

Richard Cornford

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

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>Untitl ed Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background: green;
background: red IEBackCompatOnl y;
}
</style>
</head>

<body>

</body>
</html>

Nov 17 '06 #7

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

Similar topics

9386

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9997

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9937

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9822

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8821

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6642

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5405

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3917

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3522

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP