Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.

Dismiss

[IE 6.0] Catastropic failure of IE6 when rendering specific HTML/CSS

0 views

Skip to first unread message

Adam van den Hoven

unread,

Sep 9, 2002, 3:36:46 PM9/9/02

Good afternoon (where has the morning gone?)!

I've encountered an exceptionally disturbing problem with
IE 6.0.2600.0000. I'm sorry if this isn't appropriate to
this newsgroup but I couldn't find the equivilant for IE
6.

When I view the following HTML (I'm running a P4 with half
a gig of memory and W2K) IE complains, sends off a message
and restarts IE. Consistently. When I was editing the CSS
that originally caused the problem in TopStyle 2.5, I got
dialog boxes indicating I'd had a catastropic failure. It
even gave me a Blue Screen o'Death. All in all this is a
VBT (very bad thing).

I don't see the problem in Mozilla and apparently IE 5.x
doesn't have the same problem (or at least no one has
reported it).

I had originally thought that the culprit was the fact
that my stylesheet was 168kb or so. But I've managed to
crop it all the way down to less than 4kb and the problem
still appears.

This HTML causes the problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Contact Us</title>
<style type="text/css">

</style>
</head>
<body id="PContact">
<div id="Navigation">
<div id="MainNavigation"><a class="button"
id="NavigateAccounts" href="/md50/mainmenu.jsp?
action=goto&from=messages_send1b.jsp&lang=en&md
sidx=0" title='Accounts' target='_self'
tabindex='10'><span class="text">Accounts</span></a><span
class="toRemove"> | </span><a class="button"
id="NavigatePayments" href="/md50/bills_pay1.jsp?
action=goto&from=messages_send1b.jsp&lang=en&md
sidx=0" title='Payments' target='_self'
tabindex='30'><span class="text">Payments</span></a><span
class="toRemove"> | </span><a class="button"
id="NavigateTransfers" href="/md50/transfer_add1.jsp?
action=goto&from=messages_send1b.jsp&lang=en&md
sidx=0" title='Transfers' target='_self'
tabindex='50'><span class="text">Transfers</span></a><span
class="toRemove"> | </span><a class="button"
id="NavigateRates" href="/md50/rates_interest1.jsp?
action=goto&from=messages_send1b.jsp&lang=en&md
sidx=0" title='Rates' target='_self' tabindex='90'><span
class="text">Rates</span></a><span
class="toRemove"> | </span><a class="button"
id="NavigateMessages" href="/md50/messages_read1.jsp?
action=goto&from=messages_send1b.jsp&lang=en&md
sidx=0" title='Messages' target='_self'
tabindex='110'><span class="text">Messages</span></a><span
class="toRemove"> | </span><a class="button"
id="NavigateProfile" href="/md50/ManagePartners.jsp?
action=goto&from=messages_send1b.jsp&lang=en&md
sidx=0" title='My Profile' target='_self'
tabindex='130'><span class="text">My
Profile</span></a><span
class="toRemove"> | </span></div>
</div>
</body>
</html>

Its long and ugly but I've pared it right out of the code
we're actually using.

The culprit seems to be the <span
class="toRemove"> | </span> constructs that I
added to ensure that when CSS is turned off (or we have
some older browser) the navigation will still be legible.

When ever I roll over the buttons, I will always generate
a fault at some point. Some times its sooner, othertimes
its later.

If you take out the line:
.toRemove{display:none;}
it goes away.

I don't understand it. Its a little freaky.

I'm not sure what I should do about it. Removing
my .toRemove blocks isn't an option since they provide a
very real purpose.

Even if I totally messed up, there is NO reason for IE to
be crashing all over the place.

Thanks!
Adam

Matthew Hill

unread,

Sep 9, 2002, 9:55:33 PM9/9/02

I've had a quick look at your code, and am confused by your CSS. First, you
don't need to specify all that markup for borders for your #MainNavigation
selector, you could do it much more simply like this:

border:2px solid #A165DD;
border-top:0px;

using this approach, you set the attribute ONCE for all borders, then
re-define the borders that you want rendered differently. You can also
reduce many of your other CSS styles by using other shorthand, particularly
on the font. Just do a search on the web for "css shorthand".

I also don't understand why you have <spans> inside your <a> tags. You go to
great lengths to style the <a> tags using CSS, why do you need extra <spans>
as well? It would be better to just put all the styling on the <a> tag and
remove those extra <spans>

Additionally, the "#MainNavigation a.button:hover" and "#MainNavigation
a.button:active" psuedo classes can be combined as they define exactly the
same styles. Just separate them with commas as you did with the link and
visited states: "#MainNavigation a.button:hover,#MainNavigation
a.button:active". You can also reduce the borders style to: "border: 1px
solid #000000" and remove the "border-color" from the a:hover/active as it's
redundant. In fact, all you need for the hover/active is the one element
that's different: the background color.

Lastly, I'm afraid I can't answer your main question, as I don't know what's
causing your crash. I tried this exact code in IE6 (same version as yours)
on Win XP and it was fine.

I've added the pared down CSS here for your benefit.

Regards

Matthew Hill

===================
NEW CSS:

#MainNavigation
{
display:block;
z-index:3;

position:absolute;
height:24px;
width:auto;
top:105px;
left:50px;

padding:3px;
padding-bottom:5px;
padding-top:0px;
background-color:#ffffff;
border:2px solid #A165DD;
border-top:0px;
}

#MainNavigation a.button,#MainNavigation a.button:visited
{
display:block;
overflow:hidden;

margin-left:2px;
margin-right:2px;
border:1px solid #000000;
padding-right:3px;
padding-top:3px;
float:left;
width:91px;
height:19px;
background-color:#a165dd;
color:#ffffff;
text-align:right;
vertical-align:middle;
text-decoration:none;
font-weight:bold;

font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1.2em;
}

#MainNavigation a.button:hover,#MainNavigation a.button:active
{
background-color:#99ccff;
}

.toRemove
{
display:none;
}

"Adam van den Hoven" <avande...@cucbc.com> wrote in message
news:ea3f01c25838$3bd71740$3bef2ecf@TKMSFTNGXA10...

Adam van den Hoven

unread,

Sep 10, 2002, 12:49:50 PM9/10/02

>-----Original Message-----
>I've had a quick look at your code, and am confused by
your CSS. First, you
>don't need to specify all that markup for borders for
your #MainNavigation
>selector, you could do it much more simply like this:
>
>border:2px solid #A165DD;
>border-top:0px;
>
>using this approach, you set the attribute ONCE for all
borders, then
>re-define the borders that you want rendered differently.
You can also
>reduce many of your other CSS styles by using other
shorthand, particularly
>on the font. Just do a search on the web for "css
shorthand".

I prefer not to use shorthand CSS properties unless I have
good reason to. In my system the CSS is dynamically
generated and my designer likes to throw me curveballs so
having precise control like this is useful.

>I also don't understand why you have <spans> inside your
<a> tags. You go to
>great lengths to style the <a> tags using CSS, why do you
need extra <spans>
>as well? It would be better to just put all the styling
on the <a> tag and
>remove those extra <spans>

Actually, in this case, its needed. I will have the need
to remove the text and replace it with an image. The
easiest way to do that is with CSS:
span.text{display:none;}
a.button{height:22px; width:100px; background-image:url
(/img/somebutton);}

I can't change the HTML because at some point in the
future, the group that does development will be distinct
from those who do customization. Our customizers can't
have access to the server code. They do have access to
CSS.

>Additionally, the "#MainNavigation a.button:hover"
and "#MainNavigation
>a.button:active" psuedo classes can be combined as they
define exactly the
>same styles. Just separate them with commas as you did
with the link and
>visited states: "#MainNavigation
a.button:hover,#MainNavigation
>a.button:active". You can also reduce the borders style
to: "border: 1px
>solid #000000" and remove the "border-color" from the
a:hover/active as it's
>redundant. In fact, all you need for the hover/active is
the one element
>that's different: the background color.

Actually, no I can't combine the two. I have to account
for the possibility that for some client they are going to
want to different styles for each state.

>Lastly, I'm afraid I can't answer your main question, as
I don't know what's
>causing your crash. I tried this exact code in IE6 (same
version as yours)
>on Win XP and it was fine.

Regardless of whether or not I'm using the most efficient
CSS possible (the final CSS is a lot larger than what I've
given), the example is valid CSS and valid HTML. The fact
that I can reproduce the effect on a wide range of systems
both internally and with my clients tells me that IE is
doing something wrong (perhaps its just IE and W2K
together).

Adam

0 new messages