Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Website Looks Funny in Internet Explorer 6.0.29

Posted on 2006-04-26
39
Medium Priority
?
432 Views
Last Modified: 2010-04-25
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
0
Comment
Question by:kara334
  • 14
  • 13
  • 12
39 Comments
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16549623
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>
0
 

Author Comment

by:kara334
ID: 16549637
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.
0
 
LVL 30

Accepted Solution

by:
Irwin Santos earned 2000 total points
ID: 16549680
Ok...I've download and installed Firefox...just for YOU!!
:-)

Alright..I see what you mean... the problem is simple...

your <table> or <div> tags...

you got one too many.

The easiest way to do this, is it restructre the shell with a simple table layout.  View in IE when you do this, so that you can make sure that during the development the site is viewed properly.

Copy the contents back into the different laid out tables.  I figure you can fix it in 10 minutes
0
Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

 

Author Comment

by:kara334
ID: 16549710
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
0
 

Author Comment

by:kara334
ID: 16549842
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.
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16550262
Hi Kara,

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

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

Expert Comment

by:Irwin Santos
ID: 16550292
<!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>
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16550301
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.
0
 

Author Comment

by:kara334
ID: 16553043
OK. Thank you so much for going to all that trouble. Let me work on this.
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16555686
do sections at a time, rather than dropping everything in at once....this allows for easier troubleshooting.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16557594
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:

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">-->

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/
0
 

Author Comment

by:kara334
ID: 16558271
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
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16558303
it's in the style sheet.

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

Expert Comment

by:Jason C. Levine
ID: 16558554
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?
0
 

Author Comment

by:kara334
ID: 16558570
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;
}


0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16558623
Yah, that's it.

Give me a few minutes to look this over.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16558682
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
0
 

Author Comment

by:kara334
ID: 16558693
OK, thank you. Let me work on this and get back to you.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16558701
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.
0
 

Author Comment

by:kara334
ID: 16558713
BINGO!!! Great catch! It works in IE and everything!

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

Author Comment

by:kara334
ID: 16558732
...and I was wondering why Google hadn't picked up my site's description...
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16558761
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...
0
 

Author Comment

by:kara334
ID: 16558785
No problem. Congratulations! You should go pay attention to your poor wife instead of the computer. :)
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16558796
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

"http://www.experts-exchange.com/Web/WebDevSoftware/DreamWeaver/Q_21829134.html#16558761"

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

Expert Comment

by:Jason C. Levine
ID: 16558799
No need for that.  I have enough points as is...
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16558811
cool.. good will....thanks for assisting her.
0
 

Author Comment

by:kara334
ID: 16558812
Well, to tell the truth, it looks like you need the points more badly irwin. ;) Besides, you were very helpful.
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16558820
Ha!  Yeah...I didn't reach 1/2 million this month... OMG.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16558823
My wife is sleeping...I'll start paying attention when she wakes up.  
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16558850
Jason Jr. won't be coming out until tomorrow afternoon, in all likelihood.  I have a looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong night ahead of me.
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16558864
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. ;-)
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16558871
Hell, she was doing that six months ago.   We've moved on to "Don't touch me ever again, you #$$#^ #^%# #$&&^* $%"
0
 

Author Comment

by:kara334
ID: 16558879
I wish I had some more website problems to occupy your time, but it looks like I'm set for now.
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16558886
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.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16569690
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
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16569734
Congratulations!!

Where' my cigar? ;-)
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16569790
           .-.  
           /  /  
          /. /  
 )       /c\/
  (     /'\/                                                        
 )     /  /                
(     /  /                                                          
 )   /  /                                                          
  ( /. /                                                            
   .`.'.                                                      
   `'``    

Enjoy
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16569854
cool.. thank you!
0
 

Author Comment

by:kara334
ID: 16570195
Congrats Jason!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
Despite its rising prevalence in the business world, "the cloud" is still misunderstood. Some companies still believe common misconceptions about lack of security in cloud solutions and many misuses of cloud storage options still occur every day. …
Enter Foreign and Special Characters Enter characters you can't find on a keyboard using its ASCII code ... and learn how to make a handy reference for yourself using Excel ~ Use these codes in any Windows application! ... whether it is a Micr…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question