problem in IE but fine in firefox

ok ive been working on some PHP for about 16 hours and now my html broke :(  basicly i think its a prob witht he <div> tags but i cannot tell... if anyone can help that would be great.

How it is supposed to look (FIREFOX):
http://www.d-d-n.com/site_prob/firefox.jpg

Source:
http://www.d-d-n.com/site_prob/firefox.txt


How bad MS screws stuff up (IE)
http://www.d-d-n.com/site_prob/iexplorer.jpg

Source:
http://www.d-d-n.com/site_prob/iexplorer.txt


i added arrows to the part that is messed up.. you should be able to see them..

thanx for any help

remlabmAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

seanpowellCommented:
The only way you're going to get more consistent rendering cross-browser is by adding a doctype to the top of the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

But I can pretty much guarantee that it will create other issues - most likely gaps between images - because of the way you're laying out the page. You will need to go through it line by line to try and fix any problems, just make sure you don't change anything or it will break again.

Also, increase the size of the text in Firefox (Ctrl +) and see what happens to your pixel-perfect design...

Sean
COBOLdinosaurCommented:
>>>Also, increase the size of the text in Firefox (Ctrl +) and see what happens to your pixel-perfect design...

<the sound of glass shattering>

What Sean is saying is that it's way too tight.  That is a 20th cnetury table based layout, and yu are going to spend the rest of you days fixing ing it and trying to get it two work under varying conditions.

If you must have a presentaion as rigid and static as that an want it tow work on more thanjust your computer, then you should just do the page in a graphics editor and present the page as a single graphic.  You are trying to draw the page anyway, so it is not much of a reach to just make the whole page a graphic.

Your other mor viabel option is to scrap the table based layout, and move to CSS; that will also mean changing the way you thik about layout.  These kinds of magazine style layouts just don't cut it anymore and get back to beeing creativer by adding some dynamics to hte presentation.

Cd&
remlabmAuthor Commented:
i posted t have my problem fixed not for you to cut down my site. thought this was supposed to be a "fun" "helping" community.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

seanpowellCommented:
This is a "fun" "helping" community.

If you want to have a rigid layout like that, then you can pretty much forget about getting it to work cross-browser. Period.
Until you're willing to accept that point, then no one is going to be able to fix your "problem."

Sean

seanpowellCommented:
>> not for you to cut down my site.

Either you're willing to learn how to "design" web pages the right way, or you're not. If it's the former, than you're at the right site. If you can't handle the criticism, then you're at the wrong site. It's that simple and it's totally up to you how you wish to proceed.

Sean
COBOLdinosaurCommented:
Read my profile.  I make myself available without compensation to teach those who want to learn.  If you are only here for recess.  Enjoy I will move on to those who are more receptive, to learning how to solve their problems.

Cd&
remlabmAuthor Commented:
forget this place. you guys are jokes.
seanpowellCommented:
We'll certainly be having the last laugh, if that's what you meant.

Take care, and best of luck.
Sean
DaydreamsCommented:
I was going to suggest the validation service: http://validator.w3.org/

..but alas I am too late.

I saved the file above and using the service, one can get an idea of some of the (major) problems with that page, starting with a valid doctype as Sean suggested.

remlabm, you have two of the top experts (in the world in my opinion) giving you advice, so it would be unfortunate to waste it. We are indeed a fun, helping community, and part of that is the expectation that askers be polite and receptive to criticism.
flow79Commented:
relabm,

The advice given by sean and COBOL is perfectly accurate.  Your site is rigid, and will continue to break down at any small change until you learn how to design according to current standards.  A site using CSS should be flexible and smooth, and able to change easily and without breaking down.  Yours does not.

<post edited by seanpowell>
flow79Commented:
no problem sean...i have posted my non-tech comments in the CS thread.  Thanks! :o)
Bob StoneIT GuruCommented:
remlabm
Where was the supposed attack ?

If you want it to work properly use CSS or make a Flash page.

Plain and simple, It can't be done or it would be a giant pain in the arse to do it the way you think you can ARE in fact answers, maybe not the one you wanted, but still are valid.
DanRollinsCommented:
remlabm,
I can't access your stylesheet (or otherwise see the page in a normal context), or I'd take a crack at this.  These kinds of layout problems occur all of the time and have been fixed -- at least well enough for most of the people most of the time -- by doing careful adjustments.

For instance, if you take the Login button out of the second TD and just put it next to the checkbox and the "Remember" text in the first TD,  that could help with one of the problems.

-- Dan
COBOLdinosaurCommented:
Here you go Dan, enjoy. Betcha it's made of glass and without design change won't work cross-platform or meet minimum accessibility guidelines.  So IE, and FF, Opera and Safari, all resolutions from 600X800 and up.  

BTW, the fixed font-sizes don't hold in Firefox no matter what you do;  user setting control them. Have fun.

td {
      text-align: left;
      vertical-align: top;
      font-family:Tahoma;
      font-size:11px;
      color:#6B6B6B;
}
a {
      text-decoration: none;
      color: #2A59C6;
}
a:hover {
      COLOR: #FF8040;
}
a.1 {
      text-decoration: none;
      color: #000000;
}

.t11 {
      font-family: Tahoma;
      font-size: 11px;
      font-style: normal;
}
body  {margin:0px;padding:0px}
.style2 {color: #6B6B6B}

.textctrl{
BACKGROUND-COLOR: #D3DCDF;
BORDER-WIDTH: 2px;
BORDER-COLOR: #7B95AF;
BORDER-STYLE: inset;
COLOR: rgb(0,0,0);
FONT-FAMILY: Tahoma;
FONT-SIZE: 11px
}
.bttn{
WIDTH: 99px;
HEIGHT: 23px;
BACKGROUND-COLOR: #EAEFF0;
BORDER-WIDTH: 1px;
BORDER-STYLE: solid;
COLOR: rgb(0,0,0);
FONT-FAMILY: Tahoma;
FONT-STYLE: inherit;
FONT-SIZE: 12px;
}
.bttnnf{
BACKGROUND-COLOR: #EAEFF0;
BORDER-WIDTH: 1px;
BORDER-STYLE: solid;
COLOR: rgb(0,0,0);
FONT-FAMILY: Tahoma;
FONT-STYLE: inherit;
FONT-SIZE: 12px;
}

.tborder
{
      background-color: #EBEEF7;
      color: #000000;
      border: 1px solid #a1b6d0;
}
.qborder
{
      background-color: #FEFEFE;
      color: #000000;
      border: 1px solid #a1b6d0;
}
      .intd

            {color: #000000; font-family: Tahoma, Verdana; font-size: 11px; padding-left: 15px;}
      .wcell
            {background: #FFFFFF; vertical-align: top}
      .ctrl
            {font-family: Tahoma, Verdana, sans-serif; font-size: 12px; width: 100%;}
      .btnform
            {border: 0px; font-family: tahoma, verdana; font-size: 12px; background-color: #DBEAF5; width: 100%; height:18px; text-align: center; cursor: hand;}
      .btn
            {background-color: #DBEAF5; padding: 0px;}
      textarea, select,input
            {font: 9px Verdana, arial, helvetica, sans-serif; background-color: #DBEAF5;}

input.error, select.error {padding-right: 16px; border: 1px solid red; background-color: #FFFCE2; background-image: url(images/warning_obj.gif); background-position: right; background-repeat: no-repeat;}
DanRollinsCommented:
First fix is for positioning the Login button:
Replace:
   <table width="100%" cellpadding="0" cellspacing="0">
with
   <table cellpadding="0" cellspacing="0">
DanRollinsCommented:
This is probably pretty close to what you want.   The outer table (for the entire "current news" section" looks like this:
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

<COMMENT> this is the "current news" table </COMMENT>
<table cellpadding="0" cellspacing="0" WIDTH=491>
<tr>
<td background="http://www.d-d-n.com/images/td1.jpg" height="27" width="1">
<img src="http://www.d-d-n.com/images/spacer.gif" height="27" width="1"></td>
<td background="http://www.d-d-n.com/images/td1.jpg"><div style="padding-left: 17px; padding-top: 12px;">
<img src="http://www.d-d-n.com/images/current_news.jpg"></div></td>
<td background="http://www.d-d-n.com/images/td1.jpg" height="27" width="1">
<img src="http://www.d-d-n.com/images/spacer.gif" height="27" width="1"></td>
</tr>
<tr>
<td bgcolor="#adadad" width="1"><img src="http://www.d-d-n.com/images/spacer.gif" height="247" width="1"></td>
<td bgcolor="#ffffff" valign="top">
<div style="padding: 5px;">

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
For each entry, generate these two tables:
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

<COMMENT Start of one comment: First TABLE is the header, second is the comment text </COMMENT>

<a anchor="153154">
<table width="491" cellspacing="0" cellpadding="0" class="tborder">
<tr>
<td bgcolor="#E6EFF1">
   <table width="491" cellpadding="0" cellspacing="0">
   <tr>
   <td style="padding-left:3px"><b>ANOTHER TEST</b> <font size="1">- posted by <a href="http://www.d-d-n.com/user_profile.php?id=123" class="style1">123</a> </font></td>
   <td><font color="" size="1">07-03-2005</font> &nbsp; <font color="" size="1">22:45:95</font></td>
   <td align="right" style="padding-right:3px"><font size="1"># 153153</font></td>
   </tr>
   </table>
</td>
</tr>
<tr>
<td>

<table bordercolor="#E6EFF1" border="0" cellspacing="0" cellpadding="0" width="100%" >
<tr><td bgcolor="#FFFFFF">
<div style="padding-left:5px; padding-right:5px; padding-bottom:5px; padding-top:5px">
adsad ad as das da d ad ad ad ad a da da d ad ad ad a da d asd achecking the formating and date time functionsad a d a ada d
</div>
</td>
</tr>
</table>
</td>
</tr>
<br>
<tr>
<td>
</td></tr>
</table>

DanRollinsCommented:
The cross-browser issue seems to be related to what "100%" means (i.e., "all of what?") and when a <DIV> starts and ends.  By hard-coding some width= values and simplifying the layout, you can avoid a number of difficult issues.  It is possible to do this without hard-coding the widths, but it can be a bit trickier.

I hope this has helped.

-- Dan
COBOLdinosaurCommented:
<more broken glass>
flow79Commented:
<i can hear the glass lightly tinkling on the floor around me>
WesLennonCommented:
Hello everyone, I have suspended remlabm's account with EE.  I have also requested a refund his July Payment as the suspension is permanent.

Wes Lennon
DoCS
DanRollinsCommented:
I think that DanRollins was the only Expert here who tried to answer the Asker's specific question.
-- Dan
DarthModCommented:
PAQed with no points refunded (of 500)

DarthMod
Community Support Moderator

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.