Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 07-02-2009, 12:43 PM
Junior Member
 
Join Date: 05-07-08
Posts: 16
iTrader: 0 / 0%
Website not aligning correctly in Internet Explorer

Hello everyone

I just uploaded my website template to see what it looks like. You can see the template here The website looks good in Firefox but not so good in Internet Explorer. I would like the website to be center aligned in both browsers. Firefox center aligns the website, but Internet Explorer doesn't. Can someone please look at my code and tell me what I have to change to make this happen.

Here is the code:

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Creating An Online Business 101</title> </head> <body style="color: rgb(0, 0, 0); background-color: rgb(233, 233, 233);" alink="#000099" link="#000099" vlink="#990099"> <table style="width: 714px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="text-align: center;"><a href="index.html"><img style="border: 0px solid ; width: 714px; height: 224px;" alt="Header" src="../images/header.jpg"></a><br> </td> </tr> </tbody> </table> <table style="width: 714px; text-align: left; margin-left: auto; margin-right: auto;" background="../images/background.jpg" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="width: 20px; text-align: center;"></td> <td style="vertical-align: top; text-align: center;"></td> <td style="width: 20px; text-align: center;"><br> </td> </tr> </tbody> </table> <table style="width: 714px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="text-align: center;"><img style="width: 714px; height: 115px;" alt="Footer" src="../images/footer.jpg"></td> </tr> </tbody> </table> </body> </html>
Thanks in advance,
Gordon
 
Reply With Quote

Advertisement

Advertisement

  #2 (permalink)  
Old 07-03-2009, 11:19 AM
Junior Member
 
Join Date: 05-07-08
Posts: 16
iTrader: 0 / 0%
Have I posted in the wrong forum? I am still unable to resolve this issue, please help.
 
Reply With Quote
  #3 (permalink)  
Old 07-03-2009, 11:48 AM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 21,232
iTrader: 5 / 100%
Ok, first of all, you would benefit from moving all that inline styling to an external stylesheet. Why? Because in the future when you want to make changes you will have make changes in one spot instead of opening every single page and editing them.

You have set the text-align of your tables to left.
a) this is the default so it isn't necessary to spec this.
b) this would be one reason why the content appears to not be centered.

If you are going to have empty cells in your table, then put a non-breaking space in the cell. Some browsers have issues with empty cells.

Try those fixes and come back if you still have issues.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #4 (permalink)  
Old 07-03-2009, 06:52 PM
Junior Member
 
Join Date: 05-07-08
Posts: 16
iTrader: 0 / 0%
Quote:
Originally Posted by htmlbasictutor View Post
Ok, first of all, you would benefit from moving all that inline styling to an external stylesheet. Why? Because in the future when you want to make changes you will have make changes in one spot instead of opening every single page and editing them.

You have set the text-align of your tables to left.
a) this is the default so it isn't necessary to spec this.
b) this would be one reason why the content appears to not be centered.

If you are going to have empty cells in your table, then put a non-breaking space in the cell. Some browsers have issues with empty cells.

Try those fixes and come back if you still have issues.
Hello htmlbasictutor

Thanks for the reply. I will work on the CSS once I get this alignment issue fixed. I have set the text align of my tables to center and have also added a non breaking space to the empty cells. Unfortunately the tables are still only centered aligned in Firefox and not in Internet Explorer.

Here is the new code:

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Creating An Online Business 101</title> </head> <body style="color: rgb(0, 0, 0); background-color: rgb(233, 233, 233);" alink="#000099" link="#000099" vlink="#990099"> <table style="width: 714px; text-align: center; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="text-align: center;"><a href="index.html"><img style="border: 0px solid ; width: 714px; height: 224px;" alt="Header" src="../images/header.jpg"></a><br> </td> </tr> </tbody> </table> <table style="width: 714px; text-align: center; margin-left: auto; margin-right: auto;" background="../images/background.jpg" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="width: 20px; text-align: center;"></td> <td style="vertical-align: top; text-align: center;">&nbsp;</td> <td style="width: 20px; text-align: center;"><br> </td> </tr> </tbody> </table> <table style="width: 714px; text-align: center; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="text-align: center;"><img style="width: 714px; height: 115px;" alt="Footer" src="../images/footer.jpg"></td> </tr> </tbody> </table> </body> </html>
Did I miss something?

Thanks
Gordon
 
Reply With Quote
  #5 (permalink)  
Old 07-03-2009, 07:10 PM
kos's Avatar
kos kos is offline
Coding Tiger
Latest Blog:
Happy New Year 2013

 
Join Date: 04-13-07
Location: .ro
Posts: 4,029
iTrader: 3 / 100%
try to add the align: center attribute to body; see what happens
 
Reply With Quote
  #6 (permalink)  
Old 07-03-2009, 08:30 PM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 21,232
iTrader: 5 / 100%
References:
Document Type Declaration
Declaring Character Encoding
The HTML Document Structure

"This document was successfully checked as HTML 4.01 Transitional!"
This works in IE and FF.

It's not pretty. Instead of using a table for your content in the middle, I'd use divs.

Move the CSS to an external stylesheet and don't forget to add the link to it in the head. How to link the stylesheet is in the HTML Document Structure article referenced above.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Creating An Online Business 101</title> <style type="text/css"> body { margin: 0px; padding: 0px; color: rgb(0, 0, 0); background-color: rgb(233, 233, 233); } A:link { color: #000099; } A:visited { color: #990099; } img { border: none; } #header { width: 714px; margin-left: auto; margin-right: auto; } #wrapper { width: 714px; margin-left: auto; margin-right: auto; background: url(.../images.background.jpg); } #footer { width: 714px; margin-left: auto; margin-right: auto; } .leftcolumn { width: 20px; } .centercolumn { width: 674px; } .righttcolumn { width: 20px; } </style> </head> <body> <div id="header"> <p><a href="http://www.yourdomainname.com/"><img src="../images/header.jpg" width="714" height="224" alt=""></a></p> </div> <div id="wrapper"> <table border="0" cellpadding="0" cellspacing="0" summary="Content"> <tr valign="top"> <td class="leftcolumn">This is your left column</td> <td class="centercolumn">This is your center column</td> <td class="rightcolumna">This is your right column</td> </tr> </table> </div> <div id="footer"> <p><img src="../images/footer.jpg" width="714" height="115" alt="Footer"></p> </div> </body> </html>
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #7 (permalink)  
Old 07-04-2009, 01:50 AM
Junior Member
 
Join Date: 07-04-09
Location: London
Posts: 22
iTrader: 0 / 0%
...and here's a version without tables using divs. As said before, get those styles into an external stylesheet.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Creating An Online Business 101</title> <style type="text/css"> * { margin: 0px; padding: 0px; border: 0px; } body { width: 714px; margin: auto; color: rgb(0, 0, 0); background-color: rgb(233, 233, 233); } .header { width: 100%; text-align: center; height: 224px; } .footer { width: 100%; text-align: center; } .pagecontent { width: 100%; background: url(http://createanonlinebiz.com/images/background.jpg) repeat-y; } </style> </head> <body> <div class="header"> <a href="index.html"> <img alt="Header" src="http://createanonlinebiz.com/images/header.jpg"/> </a> </div> <div class="pagecontent"> &nbsp; </div> <div class="footer"> <img alt="Footer" src="http://createanonlinebiz.com/images/footer.jpg"> </div> </body> </html>
 
Reply With Quote
  #8 (permalink)  
Old 07-04-2009, 04:33 PM
Junior Member
 
Join Date: 05-07-08
Posts: 16
iTrader: 0 / 0%
This is what I have now:

stylesheet.css

Code:
body { margin: 0px; padding: 0px; color: rgb(0, 0, 0); background-color: rgb(233, 233, 233); } .header { width: 100%; height: 224px; text-align: center; margin-left: auto; margin-right: auto; } A:link { color: #000099; } A:visited { color: #990099; } img { border: none; } .wrapper { width: 714px; margin-left: auto; margin-right: auto; background: url(http://createanonlinebiz.com/images/background.jpg) repeat-y; } .footer { width: 100%; height: 115px; text-align: center; margin-left: auto; margin-right: auto; } .leftcolumn { width: 20px; } .centercolumn { width: 674px; text-align: center; } .righttcolumn { width: 20px;
index.html

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Creating An Online Business 101</title> <link rel="stylesheet" type="text/css" href="styles/stylesheet.css"> </head> <body> <div align="center"> <div class="header"><a href="index.html"><img alt="Header" src="../images/header.jpg"></a></div> <div class="wrapper"> <table summary="Content" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr valign="top"> <td class="leftcolumn"></td> <td class="centercolumn">This is your center column</td> <td class="rightcolumna"></td> </tr> </tbody> </table> </div> <div class="footer"> <img alt="Footer" src="../images/footer.jpg"></div> </div> </body> </html>
I finally got the website to be center aligned in both Firefox and Internet Explorer. I accomplished this by placing <div align="center"> after the <body> tag. The website looks pretty much identical in both browsers.

I would like to replace the table with divs. Can someone please help me accomplish this. I have already tried using divs instead of tables and have failed miserably.

Thanks in advance
Gordon
 
Reply With Quote
  #9 (permalink)  
Old 07-04-2009, 07:16 PM
kos's Avatar
kos kos is offline
Coding Tiger
Latest Blog:
Happy New Year 2013

 
Join Date: 04-13-07
Location: .ro
Posts: 4,029
iTrader: 3 / 100%
I only tested this in FF 3.5 and IE8.

Code:
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body { margin: 0; padding: 0; color: #000; background-color: rgb(233, 233, 233); } #layout { width: 714px; margin: 0 auto; } .header { width: 100%; height: 224px; text-align: center; margin: 0 auto; } A:link { color: #000099; } A:visited { color: #990099; } img { border: none; } .wrapper { width: 714px; margin: 0 auto; background: url("http://createanonlinebiz.com/images/background.jpg") repeat-y; overflow: hidden; min-height: 1px; } .footer { width: 100%; height: 115px; text-align: center; margin-left: auto; margin-right: auto; } .leftcolumn { width: 20px; float: left; display: block; margin: 0 0; padding: 0 0; /* delete the following declarations; they're here just for debug */ height: 200px; background: #ebebeb; } .centercolumn { width: 674px; text-align: center; float: left; display: block; margin: 0 0; padding: 0 0; /* delete the following declarations; they're here just for debug */ height: 200px; background: #ccc; } .righttcolumn { width: 20px; float: left; display: block; margin: 0 0; padding: 0 0; /* delete the following declarations; they're here just for debug */ height: 200px; background: #ddd; } </style> </head> <body> <div id="layout"> <div class="header"> <a href="index.html"><img alt="Header" src="../images/header.jpg"></a> </div> <div class="wrapper"> <div class="leftcolumn"> <span>LEFT</span> </div> <div class="centercolumn"> <span>CENTER</span> </div> <div class="righttcolumn"> <span>RIGHT</span> </div> </div> </div> </body> </html>
 
Reply With Quote
  #10 (permalink)  
Old 07-05-2009, 01:22 AM
Junior Member
 
Join Date: 07-04-09
Location: London
Posts: 22
iTrader: 0 / 0%
Hi Gordon,
See my response above. This is a solution without using any tables. It also uses a fewer number of divs making the source code cleaner to follow.
 
Reply With Quote
  #11 (permalink)  
Old 07-05-2009, 08:31 PM
Junior Member
 
Join Date: 05-07-08
Posts: 16
iTrader: 0 / 0%
Hello everyone

I was unable to get the website to display correctly (completely my fault). So I decided to keep the original coding. You can view the full website createanonlinebiz.com/ The next site that I make will use external CSS and hopefully no tables. I am still having issues with the site not being center aligned in Internet Explorer. So if you could find a fix for me it would be greatly appreciated. I don't wish to change the coding too much.

Thanks so much
Gordon

Last edited by HTMLBasicTutor; 07-05-2009 at 09:26 PM.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Internet Explorer Collection watchinYou Coding Forum 4 05-22-2009 11:44 AM
Internet Explorer 8 HTMLBasicTutor Web Design Lobby 9 03-29-2009 09:32 AM
Intenet Explorer 6.0 and Internet Explorer 7.0 css issues basslion Coding Forum 7 12-27-2008 09:59 PM
Internet Explorer 6.0 problem Jackassboy Coding Forum 29 03-20-2007 05:28 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 03:15 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2014 Escalate Media




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.