Shoutbox

IE not paying attentions to proportions - Printable Version

-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: IE not paying attentions to proportions (/showthread.php?tid=51186)
IE not paying attentions to proportions by PenguinBoy on 09-30-2005 at 05:31 PM

I always thought that it was the alternative browsers that had troubles with html. i just built a website using dreamweaver 8, while testing on firefox, it came out how i wanted it, then when i tried it out on internet explorer, all the tables were out of proportions, despite the specific sizes coded in :S.
also Ie refuses to show the background on a specific cell.

on firefox it's perfect...
anyone know any solutions?

RE: IE not paying attentions to proportions by absorbation on 09-30-2005 at 05:35 PM

Can we see the code please :)

RE: IE not paying attentions to proportions by PenguinBoy on 09-30-2005 at 05:40 PM

html + css?

it might be a bit messy

i'm a bit paranoid about it getting stolen lol, no worries i'll post it anyhoo


the html

code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Rench's Official Website</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="music and information on the bedfordshire band; Rench">
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="copyright" content="www.PenguinBoy.esmartdesign.com">
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}

function MM_displayStatusMsg(msgStr) { //v1.0
  status=msgStr;
  document.MM_returnValue = true;
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('menu-NEWS-hover.gif',,'menu-biographies-hover.gif','menu-photos-hover.gif','menu-forum-hover.gif','menu-shop-hover.gif','menu-links-hover.gif','menu-shows-hover.gif')">
<table width="776" border="0" align="center" cellpadding="0" cellspacing="0"><!--DWLayoutTable-->
  <tr>
    <th width="50" rowspan="7" valign="top" class="leftpan"><img src="backstripes-left.png" width="50" height="2" align="top"></th>
    <th height="100" colspan="13"><div align="left"><img src="widebanner.gif" width="750" height="100"></div>
    </th>
    <th width="50" rowspan="7" valign="top" background="backstripes-right.png" class="rightpan">
    <p><img src="backstripes-right.png" width="50" height="2"></p></th>
  </tr>
  <tr>
    <th height="24" colspan="2" align="left" class="menu1">&nbsp;</th>
    <td width="35" class="menu1"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td width="67" background="menu-news-back.gif" class="menu1"><img src="menu-NEWS.gif" alt="NEWS" width="67" height="24" class="main" id="Image1" onClick="MM_goToURL('parent','index.htm');return document.MM_returnValue" onMouseOver="MM_swapImage('Image1','','menu-NEWS-hover.gif',1);MM_displayStatusMsg('The Main Page, with all new info.');return document.MM_returnValue" onMouseOut="MM_swapImgRestore()"></td>
    <td width="93" background="menu-biographies.gif" class="menu1"><div align="center"><img src="menu-biographies.gif" width="93" height="24" id="Image2" onClick="MM_goToURL('parent','biographies.htm');return document.MM_returnValue" onMouseOver="MM_swapImage('Image2','','menu-biographies-hover.gif',1)" onMouseOut="MM_swapImgRestore()"></div></td>
    <td width="100" class="menu1"><img src="menu-photos.gif" width="100" height="24" id="Image3" onClick="MM_goToURL('parent','photos.htm');return document.MM_returnValue" onMouseOver="MM_swapImage('Image3','','menu-photos-hover.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
    <td width="81" class="menu1"><div align="center"><img src="menu-forum.gif" width="81" height="24" id="Image4" onMouseOver="MM_swapImage('Image4','','menu-forum-hover.gif',1)" onMouseOut="MM_swapImgRestore()"></div></td>
    <td width="72" class="menu1"><img src="menu-shop.gif" width="72" height="24" id="Image5" onMouseOver="MM_swapImage('Image5','','menu-shop-hover.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
    <td width="84" class="menu1"><img src="menu-links.gif" width="84" height="24" id="Image6" onMouseOver="MM_swapImage('Image6','','menu-links-hover.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
    <td width="112" class="menu1"><img src="menu-shows.gif" width="112" height="24" id="Image7" onMouseOver="MM_swapImage('Image7','','menu-shows-hover.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
    <td width="39" class="menu1"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td class="menu1"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td class="menu1" width="4"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <th width="8" rowspan="2" class="main"><!--DWLayoutEmptyCell-->&nbsp;</th>
    <td width="28" height="300" rowspan="2" background="sideframe-top-fade.jpg" class="sideframes"><img src="sideframe-top-fade.jpg" width="28" height="300" hspace="0" vspace="0" class="sideframes"></td>
    <td height="50" background="sideframe-top-fade.jpg"><p align="center"><a href="http://www.penguinboy.esmartdesign.com" class="sideframes"></a></p>      </td>
    <td height="50" colspan="7" class="penguinboy"><a href="http://www.penguinboy.esmartdesign.com"><img src="also visit banner.jpg" width="608" height="50" border="0" class="main"></a></td>
    <td height="50" background="sideframe-top-fade.jpg"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td width="28" height="300" rowspan="2" class="sideframes"><img src="sideframe-top-fade.jpg" width="28" height="300"></td>
    <th width="4" rowspan="5" class="main"><!--DWLayoutEmptyCell-->&nbsp;</th>
  </tr>
  <tr>
    <td colspan="9" rowspan="3" align="center" valign="top" class="main"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="main">
      <tr>
        <td width="24" height="2"><p>&nbsp;</p></td>
        <td width="559">&nbsp;</td>
        <td width="27">&nbsp;</td>
      </tr>
      <tr>
        <td width="24" height="117"><p class="main">&nbsp;</p></td>
        <td width="559" height="117"><p class="main"><em>Website now Up and running!</em><br>
                <br>
          Welcome to the Official Rench Website... Some of the sections are not yet functional but they are indeed being worked on. please go and Join the forum for the most up-to-date information on the band </p>
            <p align="center" class="main"><img src="spanner-spacer.jpg" width="102" height="30" class="main"></p></td>
        <td width="27" height="117">&nbsp;</td>
      </tr>
      <tr>
        <td width="24" height="525"><p class="main">&nbsp;</p></td>
        <td width="559"><p class="main"><em>Rench's Debut GIG! </em></p>
            <p align="left" class="main">Rench's Debut was a a gig for the social legend; Gary Brosnan. Their set was simply amazing... <a href="/shows.htm">click here to view the review </a> or click bellow on the photo to go to the photos section. </p>
            <p align="center" class="main"><a href="photos.htm"><img src="Debut Gig.jpg" width="512" height="400" border="0"></a></p>
          <p align="center" class="main"><img src="spanner-spacer.jpg" width="102" height="30"></p></td>
        <td width="27">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <th width="8" class="main"><!--DWLayoutEmptyCell-->&nbsp;</th>
    <td height="313" class="sideframes"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td height="313" class="sideframes"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <th width="8" class="main"><!--DWLayoutEmptyCell-->&nbsp;</th>
    <td height="100" class="sideframes"><img src="bottomfade.gif" width="28" height="100"></td>
    <td height="100" class="sideframes"><img src="bottomfade.gif" width="28" height="100"></td>
  </tr>
  <tr>
    <th width="8" class="main"><!--DWLayoutEmptyCell-->&nbsp;</th>
    <td height="15" colspan="4" class="footnote"><img src="footer-graphic-left.gif" width="160" height="30"></td>
    <td height="15" colspan="3" class="footnote"><div align="center" class="footnote">&quot;RENCH&quot; Official website Copyright 2005 <br>
    Concept, HTML, CSS and RSS by PenguinBoy </div></td>
    <td height="15" colspan="4" class="footnote"><div align="right"><img src="footer-graphic-right.gif" width="160" height="30"></div></td>
  </tr>
</table>
</body>
</html>

The style css
code:
.menu1 {
    background-color: #000000;
    border-top-style: none;
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    overflow: visible;
    color: #D4D0C8;

}
.default {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}
.footnote {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    background-color: #101045;
    color: #303092;
}

.header {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #3366FF;
    height: 190px;
    width: 678px;
}
.main {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #10103A;
    font-size: 10px;
    background-color: #FFFFFF;
}
.sideframes {
    background-color: #A6A6E1;
    width: 28px;
}
.main p {
}
a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000000;
    text-decoration: underline;
}
body {
    margin-top: 0px;
    background-color: #FFFFFF;
    background-image: url(backstripes.gif);
}
#Layer1 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 65px;
    top: 103px;
}
#Layer2 {
    position:absolute;
    width:216px;
    height:159px;
    z-index:1;
    top: 89px;
    left: 233px;
    background-image: url(Layerback.jpg);
}
.style7 {font-size: 14px}
.leftpan {
    background-image: url(backstripes-left.png);
    width: 50px;
}
.rightpan {
    background-image: url(backstripes-right.png;
    background-image: url(backstripes-right.png);
    width: 50px;
}
.penguinboy {
    background-image: url(sideframe-top-fade.jpg);
    width: 608px;
    height: 50px;
}
RE: IE not paying attentions to proportions by Sunshine on 09-30-2005 at 05:40 PM

Try coding your site for IE not using any designing program, if it works fine in IE in most cases it's fine in any other browser (besides the stuff that other browsers render differently).

Since IE is still the most used browser you should try coding for that. I always check mine in IE first and adjust it for FF if need be.

It's nice beeing able to make websites with programs like that but there's nothing above knowing html coding yourself. If you can code without those programs it's easier to spot mistakes ;)

RE: IE not paying attentions to proportions by PenguinBoy on 09-30-2005 at 05:50 PM

quote:
Originally posted by Sunshine
Try coding your site for IE not using any designing program, if it works fine in IE in most cases it's fine in any other browser (besides the stuff that other browsers render differently).

Since IE is still the most used browser you should try coding for that. I always check mine in IE first and adjust it for FF if need be.

It's nice beeing able to make websites with programs like that but there's nothing above knowing html coding yourself. If you can code without those programs it's easier to spot mistakes ;)

I agree, but i've already got this far and just can't work out the problemo. and i'm slowly learning code anyhoo, but the problem is here. if only everyone used the same browsers grrr.
RE: IE not paying attentions to proportions by Sunshine on 09-30-2005 at 06:00 PM

quote:
Originally posted by PenguinBoy

I agree, but i've already got this far and just can't work out the problemo. and i'm slowly learning code anyhoo, but the problem is here. if only everyone used the same browsers grrr.
The main problem is that programs like that make mistakes in coding. And yep different browsers are what makes a webmasters life difficult, unfortunately there's no ecaping it (just bare in mind the two mainly used browsers).

Good luck in trying to learn html and css.


RE: IE not paying attentions to proportions by PenguinBoy on 09-30-2005 at 06:10 PM

yeah, it's definately the html that's playing up

RE: IE not paying attentions to proportions by Sunshine on 09-30-2005 at 06:17 PM

quote:
Originally posted by PenguinBoy
yeah, it's definately the html that's playing up
A few sites that might help you learn html and css are:
W3Schools (this is where i started)
W3C tutorials
W3C