IE not paying attentions to proportions |
Author: |
Message: |
PenguinBoy
Full Member
indude
Posts: 270 Reputation: 4
35 / / –
Joined: Jun 2003
|
O.P. IE not paying attentions to proportions
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 .
also Ie refuses to show the background on a specific cell.
on firefox it's perfect...
anyone know any solutions?
|
|
09-30-2005 05:31 PM |
|
|
absorbation
Elite Member
Posts: 3636 Reputation: 81
– / /
Joined: Feb 2005
|
RE: IE not paying attentions to proportions
Can we see the code please
|
|
09-30-2005 05:35 PM |
|
|
PenguinBoy
Full Member
indude
Posts: 270 Reputation: 4
35 / / –
Joined: Jun 2003
|
O.P. RE: IE not paying attentions to proportions
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; 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"> </th>
<td width="35" class="menu1"><!--DWLayoutEmptyCell--> </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--> </td>
<td class="menu1"><!--DWLayoutEmptyCell--> </td>
<td class="menu1" width="4"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<th width="8" rowspan="2" class="main"><!--DWLayoutEmptyCell--> </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--> </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--> </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> </p></td>
<td width="559"> </td>
<td width="27"> </td>
</tr>
<tr>
<td width="24" height="117"><p class="main"> </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"> </td>
</tr>
<tr>
<td width="24" height="525"><p class="main"> </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"> </td>
</tr>
</table></td>
</tr>
<tr>
<th width="8" class="main"><!--DWLayoutEmptyCell--> </th>
<td height="313" class="sideframes"><!--DWLayoutEmptyCell--> </td>
<td height="313" class="sideframes"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<th width="8" class="main"><!--DWLayoutEmptyCell--> </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--> </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">"RENCH" 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;
}
This post was edited on 09-30-2005 at 05:47 PM by PenguinBoy.
|
|
09-30-2005 05:40 PM |
|
|
Sunshine
Elite Member
Posts: 5141 Reputation: 122
– / /
Joined: Mar 2004
Status: Away
|
RE: IE not paying attentions to proportions
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
|
|
09-30-2005 05:40 PM |
|
|
PenguinBoy
Full Member
indude
Posts: 270 Reputation: 4
35 / / –
Joined: Jun 2003
|
O.P. RE: IE not paying attentions to proportions
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.
|
|
09-30-2005 05:50 PM |
|
|
Sunshine
Elite Member
Posts: 5141 Reputation: 122
– / /
Joined: Mar 2004
Status: Away
|
RE: IE not paying attentions to proportions
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.
|
|
09-30-2005 06:00 PM |
|
|
PenguinBoy
Full Member
indude
Posts: 270 Reputation: 4
35 / / –
Joined: Jun 2003
|
O.P. RE: IE not paying attentions to proportions
yeah, it's definately the html that's playing up
|
|
09-30-2005 06:10 PM |
|
|
Sunshine
Elite Member
Posts: 5141 Reputation: 122
– / /
Joined: Mar 2004
Status: Away
|
RE: IE not paying attentions to proportions
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
This post was edited on 09-30-2005 at 06:19 PM by Sunshine.
|
|
09-30-2005 06:17 PM |
|
|
|
|