Cant get code to work for IE

Forum Moderators: open

Message Too Old, No Replies

Cant get code to work for IE

YaklDakl

7:22 am on Feb 25, 2011 (gmt 0)

I have been trying to figure this out and all my searches lead me to pages here so I guess this is the place. I am willing and want to learn this stuff but am most concerned with getting my site to work in IE. My other option is to convert everyone else to Safari or FFox.

My front page of my site is rendering fine in FFox bit not in IE.
this is my site [tinyurl.com ]

Here is the code I am using [tinyurl.com ]

Any help is really appreciated. thanks

tedster

7:44 am on Feb 25, 2011 (gmt 0)

Welcome to the forums, YaklDakl. As you can see when you click, shortened URLs won't work here.

For many reasons, we ask members not to link to their own sites. It's better to describe the rendering differences you are running into with IE - along with some short snippets of code from the critical spots on your page - just enough for us to reproduce your particular issue.

There is some good help on how to post in the thread pinned to the top of this forum's index page - LINKS and posting CODE - our policies
Please read before posting! [webmasterworld.com]

We're ready to help you, and we want that help to benefit everyone in the future who also might find this thread and have a similar problem to work out.

YaklDakl

8:00 am on Feb 25, 2011 (gmt 0)

Thanks Tedster. Sorry, I should have spent some time and read the intro posts.

Here is the code that renders in Firefox but not in IE. I am sure there are all kinds of inconsistencies with it. Someone gave me the outline to use for a craigslist ad a long time ago and i been using it since.

I am using it on the front page of my wordpress site and basically there is no border or background color when viewing in IE.

I really want to learn this stuff properly and will but right now I really am most concerned with fixing this component of my business website. I am willing to pay/donate whatever.

thanks

<table border="5px" bgcolor="#333333" bordercolor="#000000" title="<h1>my title</h1>"<td><p style="text-align:center;">
<font size="6.5" color="#FFFFFF" face="Book Antiqua">My<br/>
business<br>
</font>
<font size="2.5" color="#CBCBCB" face="VERDANA">
these are the things we do
</font><br><br>
<font size="7" color="#FFFFFF" face="Book Antiqua">my<br></font><font size="3.5" 
color="#FFFFFF" face="Book Antiqua">logo</font><br><br>
<font size="3" color="#FFFFFF" face="VERDANA">my contact info
</font></td></table></p>

birdbrain

12:55 pm on Feb 25, 2011 (gmt 0)

Hi there YaklDakl,

and a warm welcome to these forums. ;)

I would suggest that you use something like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title>It's not your business!</title> 
 
<style type="text/css"> 
body { 
 background-color:#f0f0f0; 
 } 
#about-me { 
 width:196px; 
 padding:2px; 
 border:5px solid #000; 
 background-color:#333; 
 font-family:verdana,sans-serif; 
 font-size:1em; 
 color:#fff;  
 text-align:center; 
 } 
#inner-border { 
 padding-bottom:0.5em; 
 border:1px solid; 
 border-color:#000 #898989 #898989 #000; 
 } 
#about-me h1,#about-me h2,#about-me h3 { 
 margin:0.5em 0; 
 font-family:'book antiqua',serif; 
 font-size:250%; 
 font-weight:normal; 
 } 
#about-me h3 span { 
 display:block; 
 font-size:40%; 
 } 
#about-me p { 
 margin:0 0 0.5em; 
 font-size:80%; 
 color:#cbcbcb; 
 } 
</style> 
 
</head> 
<body> 
 
<div id="about-me"> 
<div id="inner-border"> 
 
 <h1>My title</h1> 
 <h2>My business</h2> 
 <p>these are the things we do</p> 
 <h3>My<span>logo</span></h3> 
 <p>my contact info</p> 
 
</div> 
</div> 
 
</body> 
</html>

birdbrain

rocknbil

4:56 pm on Feb 25, 2011 (gmt 0)

^ ^ ^ That would be the way to go, but if this is the result of some theme and is output dynamically, here's a couple other ideas to go with.

The table HTML is horribly broken, 1) there is an opening second table tag that is never closed, 2) you can't use an <h1> element as a table attribute, 3) there is no closing > for the table tag, 4) there is no row declaration for the following td, 5) you can't have anything between the table, tr, or td (except comments) - all that markup needs to go inside a table cell, 6) a table is not valid inside a <p>, 7) there is a mixure of HTML and XHTML break tags, choose one or the other depending on your document type. The font tag has been long deprecated, but it will still "work" if it's moved inside the td.

Compare this valid and simplified version of a table with yours and see what's different.


<p>&nbsp;</p><!-- this is bad, using empty elements for visual effects, but it's valid. --> 
<table border="5px" bgcolor="#333333" bordercolor="#000000" title="my title"> 
 <tr> <!-- start a table row --> 
 <td> 
 <p style="text-align:center;"> 
 <font size="6.5" color="#FFFFFF" face="Book Antiqua">My<br> 
 business<br> 
 </font> 
 <font size="2.5" color="#CBCBCB" face="VERDANA"> 
 these are the things we do 
 </font> 
 </p> 
 <p> 
 <font size="7" color="#FFFFFF" face="Book Antiqua">my<br></font> 
 <font size="3.5" color="#FFFFFF" face="Book Antiqua">logo</font> 
 </p> 
 <p> 
 <font size="3" color="#FFFFFF" face="VERDANA">my contact info 
 </font> 
 </p> 
</td> 
</tr> <!-- end the table row --> 
</table>

Take note of pairs - there are only a few elements (<hr>, <br>, <img>, etc.) that do not require closing tags.

<table> and </table>
<tr> and </tr>
<td> and </td>
<p> and </p>

It's still a bad approach, but until you get up to speed with table-less layout and CSS, it will ""work" and will probably fix your border problem.

[edited by: rocknbil at 5:00 pm (utc) on Feb 25, 2011]

YaklDakl

4:56 pm on Feb 25, 2011 (gmt 0)

Thanks for the welcome birdbrain! and thank you very much for the code!
I think I can definitely work with this and learn from it.

cheers.
yakl

YaklDakl

5:00 pm on Feb 25, 2011 (gmt 0)

rocknbil,

lol. i figured it was a mess. I validated it and tried forever to fix it but nothing made sense.

I think the Wordpress theme does affect it. For some reason the background color never worked so I changed it for the page this is on in the themes stylesheets.

I will definitely play with your code as well. Thanks alot. I really appreciate it.

Yakl

YaklDakl

6:35 pm on Feb 25, 2011 (gmt 0)

I tried both. The first one broke my main background color on the page this (code) was imbedding into. I tried some different settings but no luck. I am sure there must be a way.

However, The second one is working great (i think) in FF and IE.

Now I have 2 templates to learn from and play with, this is a great starting point for me to learn more about html and css.

Thanks again, I really appreciate the help. off to look for the "donate" button.

cheers

edit- message to mods/admin, you should have a "donate" button at the end of the posts to catch the happy people such as myself right away.