The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Problem Displaying Content in Internet Explorer
gcurtisjr
post Mar 10 2012, 03:28 PM
Post #1





Group: Members
Posts: 4
Joined: 10-March 12
Member No.: 16,680
Hi all. I ran across this site while searching for a solution to my problem and would greatly appreciate any insight you can offer. I am creating a website for a grad project and I have written some javascript and CSS to make a flyout menu. It validates just fine and looks perfect in all browsers (Safari, Chrome and Firefox) except for Internet Explorer 9 (in Windows 7) and 10 (in Windows 8). In IE, the navigation bar on the left has a sort of candy cane stripe effect that I cannot seem to fix. What is causing this to happen and can it be fixed?

The site is: http://gozips.uakron.edu/~grc1/final/index.html

Thank you in advance.

-Glenn
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 10 2012, 07:03 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Not that I find the reason, but the top bar (empty TD) as well as the empty lists you've used for spacing display as #030303 rather than #33333 in my old IE7. I guess that's what you you see in IE9 too? You don't use that color anywhere in the CSS or HTML. Peculiar indeed. There must be a reason, but it escapes me.

It doesn't solve your problem, but you shouldn't use those empty lists. Use margin.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gcurtisjr
post Mar 10 2012, 10:55 PM
Post #3





Group: Members
Posts: 4
Joined: 10-March 12
Member No.: 16,680
Thank you for your reply. I just found out the problem after being inspired by what you wrote. For some reason, IE does not like 3 digit hex on my site. I was using #333 to represent #333333. I am not sure why IE would not interpret this as such, but this was the problem and it has been corrected. Thanks again for your input.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 11 2012, 06:50 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Even more peculiar. I use three digits when possible and I've never noticed this, neither have I heard about it. Has anyone else?

Thanks for posting the solution. I still think there must be something with your page that causes it, but *what*? blink.gif


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 11 2012, 06:54 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Look at this. I see an even color in IE7. Do you see the same in IE9?

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

<html>

<head>
<title></title>

<style type="text/css">
<!--
div    { height: 50px }
#dig6  { background: #333333 }
#dig3  { background: #333 }
-->
</style>

</head>


<body>

<div id="dig6"></div>
<div id="dig3"></div>
<div id="dig6"></div>
<div id="dig3"></div>
<div id="dig6"></div>
<div id="dig3"></div>
<div id="dig6"></div>
<div id="dig3"></div>
<div id="dig6"></div>
<div id="dig3"></div>
<div id="dig6"></div>
<div id="dig3"></div>
<div id="dig6"></div>
<div id="dig3"></div>
<div id="dig6"></div>
<div id="dig3"></div>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gcurtisjr
post Mar 11 2012, 08:20 AM
Post #6





Group: Members
Posts: 4
Joined: 10-March 12
Member No.: 16,680
It's a consistent color in IE 9 and 10 as well. I am totally confused about this. I mean, I'm glad that the site looks how I want it to now, but I am still wondering why it made a difference.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 11 2012, 08:45 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I looked again and I found it. Amazing what a night's sleep can do. smile.gif

You've set the background color for the empty cell and the TD that gives the empty lists their background in HTML, with bgcolor. The three digit shorthand is CSS. You can't use it in HTML. Simple as that.

Just a hint, it's better for many reason to keep all styling in the CSS. And you really should get rid of those empty lists. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gcurtisjr
post Mar 11 2012, 09:16 AM
Post #8





Group: Members
Posts: 4
Joined: 10-March 12
Member No.: 16,680
Thank you for all your help. I have made the changes to all CSS and I think I got rid of all of the empty lists with margins. Can you take a look and let me know what you think? Thanks a million.

QUOTE(pandy @ Mar 11 2012, 08:45 AM) *


Just a hint, it's better for many reason to keep all styling in the CSS. And you really should get rid of those empty lists. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 11 2012, 10:00 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Looks fine. smile.gif
Next step is to skip the style attributes and get it all into the style block. That's much easier if you want to make changes and you get a better overview. The step after that is to move it all to an external style sheet. By then you will be a pro. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 11:12 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC