asked on

Website Looks Funny in Internet Explorer 6.0.29

Hi,

I have a newly redesigned website: http://www.karathecomputertutor.com

I redesigned it using a template in Dreamweaver 8.

It looks fine in Firefox. It looks fine in both Safari and IE on my Mac. It even looks fine when I preview it on my PC in IE.

But it looks terrible in IE 6.0.29 on my PC. I know this must be the latest version of IE, because I tried to view the website on two laptops, and one is brand new. I am concerned people who still use IE on a PC will stay away from my website. Can anyone help me correct this problem?

Thanks.

Kara

Irwin Santos

You mean all that WHITESPACE in your website?

Perhaps you want to constrict the size to 725 width by using a table. Doesn't matter what the height is...

<table width="725">
<tr>
<td>
Insert your content here
</td>
</tr>
</table>

kara334

ASKER

No, not the white space. If I look at it in Firefox it looks fine. It's like the style sheets didn't take in IE or something. It looks fine in every other browser, so I don't think it's a problem with white space.

ASKER CERTIFIED SOLUTION

Irwin Santos

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kara334

ASKER

OK thank you. I am flattered you downloaded Firefox just for me!

I suppose I could fix this problem in 10 minutes if I was used to working with tables. Haven't created a table from scratch in a website in awhile... (as mentioned, I used a template for this one)

I'll give you your points now, though. I may have questions later...

Kara

kara334

ASKER

I have to admit, I haven't the faintest idea how to do what you're talking about. Why would the site look fine in Firefox and Safari and not in IE? Also, I have no idea how to restructure the shell with a simple table layout. It seems easy to you because you're the expert! Could you please give me a little more guidance? Thanks. I don't want to mess up my whole site by accident.

Irwin Santos

Hi Kara,

http://www.lewisbroadcast.com/unused/karatest.htm

3 minutes to do that.. requires some tweaking.... next comment is my basic code

Irwin Santos

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="100%" border="2" cellspacing="5" cellpadding="5">
<tr bgcolor="#FFFFbb">
<td colspan="3"><div align="center">put your HEADER INFORMATION here </div></td>
</tr>
<tr>
<td colspan="3"><div align="center">leave this row blank</div></td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF"><div align="center">Navigation bar goes here </div></td>
<td width="60%"><div align="center">body content here </div></td>
<td width="20%" bgcolor="#eeeeee"><div align="center">Contact Information here </div></td>
</tr>
<tr bgcolor="#ffccff">
<td colspan="3"><div align="center">Footer information here </div></td>
</tr>
</table>
</body>
</html>

Irwin Santos

http://www.lewisbroadcast.com/unused/karatest2.htm

Thats the associated link. Since you worked from the template, there may have already been inconsistencies. If you review the code, it is setup for you to simply copy and paste your original code.

kara334

ASKER

OK. Thank you so much for going to all that trouble. Let me work on this.

Irwin Santos

do sections at a time, rather than dropping everything in at once....this allows for easier troubleshooting.

Jason C. Levine

Hi kara,

I don't think this is a div/table issue. You are right in that IE is not parsing the CSS file correctly.

When I view source, I see this in the first lines:



By commenting out that section, IE may be defaulting to its 'quirks' mode which can make it do all sorts of funny things, including misapplication of CSS. Firefox is doing its usual good job of finding the CSS regardless of coding errors. Remove the comment tags and see if that helps.

The other thing to check is the case on the 3col_leftNav.css file. Make sure it appears on the server with that capital N in there.

irwinpks is right that a table will solve the problem at hand (and thus deserves the poinks), but using tables for layout is becoming frowned-upon by the design community. Search the HTML TA for "tables vs CSS" and you will get a quick education about this.

By sticking with the CSS solution and solving for IE, you will end up with much more control over the elements on your site and the next redesign you do will be 1000% faster, as all you do is change the CSS file.

For more information and examples of the power of CSS, look at the following sites:

http://www.csszengarden.com/
http://www.oswd.org/
http://www.openwebdesign.org/

kara334

ASKER

Hi Jason,

You read my mind. I was actually going to ask you your opinion about this since you were so helpful before.

Taking the comments out didn't help. the 3col_leftNav.css looks fine.

I have a theory. Does IE 6 recognize Dreamweaver 8? Maybe Microsoft's browser is just too ancient?

Kara

Irwin Santos

it's in the style sheet.

in IE6 & IE7Beta2...I get the funky layout as before.

Jason C. Levine

irwinpks is right. It must be something funky in the css file that is choking IE.

Dreamweaver isn't your problem here, Kara. Can you post the code for the CSS file so we can take a look?

kara334

ASKER

Sure. I hope this is what you want:

/***********************************************/
/* 3col_leftNav.css */
/* Use with template 3col_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
      font-family: Arial,sans-serif;
      color: #333333;
      line-height: 1.166;
      margin: 0px;
      padding: 0px;
}

a{
      color: #006699;
      text-decoration: none;
}

a:link{
      color: #006699;
      text-decoration: none;
}

a:visited{
      color: #006699;
      text-decoration: none;
}

a:hover{
      color: #006699;
      text-decoration: underline;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font-family: Arial,sans-serif;
font-size: 114%;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font-family: Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}

/***********************************************/
/* Layout Divs */
/***********************************************/

#masthead{
      padding: 10px 0px 0px 0px;
      border-bottom: 1px solid #cccccc;
      width: 100%;
}

#navBar{
      float: left;
      width: 20%;
      margin: 0px;
      padding: 0px;
      background-color: #eeeeee;
      border-right: 1px solid #cccccc;
      border-bottom: 1px solid #cccccc;
}

#headlines{
float:right;
      width: 20%;
      border-left: 1px solid #cccccc;
      border-bottom: 1px solid #cccccc;
      padding-right: 10px;
}

#content{
      float: left;
width: 55%;
}

/***********************************************/
/* Components */
/***********************************************/

#siteName{
      margin: 0;
      padding: 0 0 0 10px;
}

/************* #globalNav styles **************/

#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: 1px solid #CCC;
color: #cccccc;
}

#globalNav img{
display: block;
}

#globalNav a {
      font-size: 90%;
      padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

#pageName{
      margin: 0px;
      padding: 0px 0px 0px 10px;
}

/************* #breadCrumb styles *************/

#breadCrumb{
      font-size: 80%;
      padding: 2px 0px 0 10px;
}

/************** .feature styles ***************/

.feature{
      padding: 0px 0px 10px 10px;
      font-size: 80%;
}

.feature h3{
      padding: 30px 0px 5px 0px;
      text-align: center;
}

.feature img{
      float: left;
      padding: 10px 10px 0px 0px;
}

/************** .story styles *****************/

.story{
      clear: both;
      padding: 10px 0px 0px 10px;
      font-size: 80%;
}

.story p{
      padding: 0px 0px 10px 0px;
}

/************* #siteInfo styles ***************/

#siteInfo{
      clear: both;
      border: 1px solid #cccccc;
      font-size: 75%;
      color: #cccccc;
      padding: 10px 10px 10px 10px;
}

#siteInfo img{
      padding: 4px 4px 4px 10px;
      vertical-align: middle;
}

/************* #search styles ***************/

#search{
      padding: 5px 0px 5px 10px;
      border-bottom: 1px solid #cccccc;
      font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
      display: block;
      margin: 0px;
      padding: 0px;
}

/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

/*********** #sectionLinks styles ***********/

#sectionLinks{
      position: relative;
      margin: 0px;
      padding: 0px;
      border-bottom: 1px solid #cccccc;
      font-size: 90%;
}

#sectionLinks h3{
      padding: 10px 0px 2px 10px;
}

#sectionLinks a {
      display: block;
      border-top: 1px solid #cccccc;
      padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
      background-color: #dddddd;
}

/*********** .relatedLinks styles ***********/

.relatedLinks{
      position: relative;
      margin: 0px;
      padding: 0px 0px 10px 10px;
      font-size: 90%;
}

.relatedLinks h3{
      padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
      display: block;
}

/************** #advert styles **************/

#advert{
      padding: 30px 0px 10px;
}

#advert img{
      display: block;
}

/************** #headlines styles **************/

#headlines{
      margin: 0px;
      padding: 10px 0px 20px 10px;
      font-size: 80%;
}

#headlines p{
      padding: 5px 0px 5px 0px;
}

Jason C. Levine

Yah, that's it.

Give me a few minutes to look this over.

Jason C. Levine

These lines look funny. Delete them (first do a Save As and make a backup of the original CSS file).

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

If that doesn't work, run this CSS file through the validator at W3:

http://jigsaw.w3.org/css-validator/

That will tell you if there are any errors or funkiness in the file.

Other things to delete and/or check:

-- Delete all the comment blocks to make sure one of them isn't open
-- Check the end of each line in between the brackets ( { } ) and make sure it has a semi-colon as the terminator.

Kara, what you are running into is something weird with MS's support of CSS. Basically, MS is not compliant with the standards and if it runs into something it doesn't like, it chokes on it. The problem with a CSS file of this size is finding the one or two elements causing it to choke. Hopefully, it's the hack and if not, hopefully the validator finds the problem.

J

kara334

ASKER

OK, thank you. Let me work on this and get back to you.

Jason C. Levine

Bingo.

Ignore previous comments, except for running it through the validator!

You have an error in the source code and IE isn't compensating:

<meta name="description" content="Kara the Computer Tutor will patiently help you overcome all your fears with patient computer training, tech support, and software support."
<link rel="stylesheet" href="3col_leftNav.css" type="text/css" />

The meta tag isn't closed.

Add /> to the end of the meta tag.

kara334

ASKER

BINGO!!! Great catch! It works in IE and everything!

So when would you like me to buy you that cup of coffee?

kara334

ASKER

...and I was wondering why Google hadn't picked up my site's description...

Jason C. Levine

LOL.

I never even looked at the source code in Firefox because this was an IE problem. As soon as I did, FF shows the error in red text.

The cup of coffee may have to wait a bit. I am at the hospital right now with my wife. We are inducing labor. Very long, slow, and boring process...so I checked the email.

Email me in a few weeks...

kara334

ASKER

No problem. Congratulations! You should go pay attention to your poor wife instead of the computer. :)

Irwin Santos

hey Kara... perhaps you would like to reopen the question and split points 50/50 with me & jason.. I'm good with that.

just post a 0pt question in topic.. and title it "Please reopen to split points".. in the message body post

"https://www.experts-exchange.com/questions/21829134/Website-Looks-Funny-in-Internet-Explorer-6-0-29.html#16558761"

The moderator will reopen in 24 hours. and then look for SPLIT POINTS above the comment box.

Jason C. Levine

No need for that. I have enough points as is...

Irwin Santos

cool.. good will....thanks for assisting her.

kara334

ASKER

Well, to tell the truth, it looks like you need the points more badly irwin. ;) Besides, you were very helpful.

Irwin Santos

Ha! Yeah...I didn't reach 1/2 million this month... OMG.

Jason C. Levine

My wife is sleeping...I'll start paying attention when she wakes up.

Jason C. Levine

Jason Jr. won't be coming out until tomorrow afternoon, in all likelihood. I have a looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong night ahead of me.

Irwin Santos

congratulations on jr. Hopefully, she doesn't say stuff like "Why did you do this to me?" or calling you some kind of fatherless child. ;-)

Jason C. Levine

Hell, she was doing that six months ago. We've moved on to "Don't touch me ever again, you #$$#^ #^%# #$&&^* $%"

kara334

ASKER

I wish I had some more website problems to occupy your time, but it looks like I'm set for now.

Irwin Santos

Ha! My EX-sister in law said just that to her THEN husband. Actually.... "Don't you ever do this to me again!" was the exact words.

Jason C. Levine

Final update to close this out.

Daniel was born last night at 10:06 PM. 7 lb 11 oz, 21 in. Mother and baby doing fine

Irwin Santos

Congratulations!!

Where' my cigar? ;-)

Jason C. Levine

.-.
/ /
/. /
) /c\/
( /'\/
) / /
( / /
) / /
( /. /
.`.'.
`'``

Enjoy

Irwin Santos

cool.. thank you!

kara334

ASKER

Congrats Jason!