Problem with layout in different browsers!
hey there. new whole css thing, , thought i'd give try portfolio page. not looking make uber-fancy website not web designer. want functional website works in browsers can't able seem fix.
here problem:
tis how page looks in google chrome:
http://tylerlischka.com/images/pageinchrome.jpg
and how lookis in explorer:
http://tylerlischka.com/images/pageinexplorer.jpg
now don't want black boxes in there.
here html:
<html>
<head>
<title>tyler lischka | canada post mailbox prop</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#242424" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- save web slices (tlwebsitelayout_mailboxsliced.psd) -->
<table width="1021" height="1781" border="0" align="center" cellpadding="0" cellspacing="0" id="table_01">
<tr>
<td rowspan="13"> </td>
<td colspan="17"><img src="images/header.gif" alt="" width="978" height="89"></td>
<td rowspan="13"> </td>
<td>
<img src="images/spacer.gif" width="1" height="89" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/header-05.gif" width="55" height="35" alt=""></td>
<td colspan="2"><img src="images/portfolio_highlighted.gif" alt="" width="109" height="35"></td>
<td>
<img src="images/header-07.gif" width="11" height="35" alt=""></td>
<td colspan="2"><img src="images/resume.gif" alt="" width="109" height="35"></td>
<td colspan="3">
<img src="images/header-09.gif" width="411" height="35" alt=""></td>
<td colspan="2"><img src="images/about.gif" alt="" width="109" height="35"></td>
<td>
<img src="images/header-11.gif" width="11" height="35" alt=""></td>
<td colspan="2"><img src="images/contact.gif" alt="" width="109" height="35"></td>
<td colspan="2">
<img src="images/header-13.gif" width="54" height="35" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="35" alt=""></td>
</tr>
<tr>
<td rowspan="10">
<img src="images/leftbar2.gif" width="37" height="1587" alt=""></td>
<td colspan="15"><div id="atwelve"></div></td>
<td rowspan="10">
<img src="images/rightbar2.gif" width="37" height="1587" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="37" alt=""></td>
</tr>
<tr>
<td rowspan="9"><div id="athirteen"></div></td>
<td colspan="13">
<img src="images/canadapostmailbox.gif" width="869" height="112" alt=""></td>
<td rowspan="9"><div id="afourteen"></div></td>
<td>
<img src="images/spacer.gif" width="1" height="112" alt=""></td>
</tr>
<tr>
<td rowspan="8"><div id="afifteen"></div></td>
<td colspan="11"><img src="images/canadapostmailboxtylerlischka_small.jpg" alt="" width="840" height="473"></td>
<td rowspan="8"><div id="asixteen"></div></td>
<td>
<img src="images/spacer.gif" width="1" height="473" alt=""></td>
</tr>
<tr>
<td colspan="11"><div id="aseventeen"></div></td>
<td>
<img src="images/spacer.gif" width="1" height="30" alt=""></td>
</tr>
<tr>
<td colspan="11"><img src="images/canadapostmailbox2tylerlischka_small.jpg" alt="" width="840" height="840"></td>
<td>
<img src="images/spacer.gif" width="1" height="840" alt=""></td>
</tr>
<tr>
<td colspan="11"><div id="aeighteen"></div></td>
<td>
<img src="images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td colspan="11"><div id="anineteen"></div></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2"><img src="images/prev_shovel.jpg" alt="" width="122" height="72"></td>
<td colspan="2" rowspan="3"><div id="atwenty"></div></td>
<td><img src="images/home_button.gif" alt="" width="122" height="52"></td>
<td colspan="2" rowspan="3"><div id="atwenty"></div></td>
<td colspan="3" rowspan="2"><img src="images/next_oildrum.jpg" alt="" width="122" height="72"></td>
<td>
<img src="images/spacer.gif" width="1" height="52" alt=""></td>
</tr>
<tr>
<td rowspan="2"><div id="bone"></div></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td colspan="3"><div id="btwo"></div></td>
<td colspan="3"><div id="btwo"></div></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td colspan="17">
<img src="images/footer.gif" width="978" height="121" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="69" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="37" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="95" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="93" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="144" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="122" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="145" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="92" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="94" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="37" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- end save web slices -->
<!-- start of statcounter code -->
<script type="text/javascript">
var sc_project=6135201;
var sc_invisible=1;
var sc_security="056af5ca";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
class="statcounter"><a title="counter tumblr"
href="http://www.statcounter.com/tumblr/"
target="_blank"><img class="statcounter"
src="http://c.statcounter.com/6135201/0/056af5ca/1/"
alt="counter tumblr" ></a></div></noscript>
<!-- end of statcounter code -->
</body>
</html>
and here css style sheet:
a img {border: none;
}
#one {
background-color: #ececec;
height: 36px;
width: 908px;
}
#two {
background-color: #ececec;
height: 35px;
width: 868px;
}
#three {
background-color: #ececec;
height: 32px;
width: 268px;
}
#four {
background-color: #ececec;
height: 32px;
width: 268px;
}
#five {
background-color: #ececec;
height: 32px;
width: 268px;
}
#six {
background-color: #ececec;
height: 40px;
width: 268px;
}
#seven {
background-color: #ececec;
height: 40px;
width: 268px;
}
#eight {
background-color: #ececec;
height: 40px;
width: 268px;
}
#nine {
background-color: #ececec;
height: 683px;
width: 20px;
}
#ten {
background-color: #ececec;
height: 608px;
width: 22px;
}
#eleven {
background-color: #ececec;
height: 608px;
width: 22px;
}
#twelve {
background-color: #ececec;
height: 683px;
width: 20px;
}
#thirteen {
background-color: #ececec;
height: 608px;
width: 10px;
}
#fourteen {
background-color: #ececec;
}
#fourteen {
background-color: #ececec;
height: 608px;
width: 10px;
}
#fifteen {
background-color: #ececec;
height: 35px;
width: 129px;
}
#sixteen {
background-color: #ececec;
height: 35px;
width: 109px;
}
#seventeen {
background-color: #ececec;
height: 35px;
width: 109px;
}
#eighteen {
background-color: #ececec;
height: 35px;
width: 128px;
}
#nineteen {
background-color: #ececec;
height: 40px;
width: 865px;
}
#twenty {
background-color: #ececec;
height: 218px;
width: 786px;
}
#aone {
background-color: #ececec;
height: 684px;
width: 21px;
}
#atwo {
background-color: #ececec;
height: 599px;
width: 40px;
}
#athree {
background-color: #ececec;
height: 599px;
width: 39px;
}
#afour {
background-color: #ececec;
height: 684px;
width: 22px;
}
#afive {
background-color: #ececec;
height: 45px;
width: 21px;
}
#asix {
background-color: #ececec;
height: 755px;
width: 20px;
}
#aseven {
background-color: #ececec;
height: 653px;
width: 159px;
}
#aeight {
background-color: #ececec;
height: 755px;
width: 157px;
}
#anine {
background-color: #ececec;
height: 800px;
width: 22px;
}
#aten {
background-color: #ececec;
height: 10px;
width: 159px;
}
#aeleven {
background-color: #ececec;
height: 20px;
width: 550px;
}
#atwelve {
background-color: #ececec;
height: 37px;
width: 904px;
}
#athirteen {
background-color: #ececec;
height: 1550px;
width: 18px;
}
#afourteen {
background-color: #ececec;
height: 1550px;
width: 17px;
}
#afifteen {
background-color: #ececec;
height: 1438px;
width: 14px;
}
#asixteen {
background-color: #ececec;
height: 1438px;
width: 15px;
}
#aseventeen {
background-color: #ececec;
height: 30px;
width: 840px;
}
#aeighteen {
background-color: #ececec;
height: 14px;
width: 840px;
}
#anineteen {
background-color: #ececec;
height: 4px;
width: 840px;
}
#atwenty {
background-color: #ececec;
height: 77px;
width: 237px;
}
#bone {
background-color: #ececec;
height: 25px;
width: 122px;
}
#btwo {
background-color: #ececec;
height: 5px;
width: 122px;
}
#bthree {
background-color: #ececec;
height: 2571px;
width: 18px;
}
#bfour {
background-color: #ececec;
height: 2571px;
width: 17px;
}
#bfive {
background-color: #ececec;
height: 2459px;
width: 14px;
}
#bsix {
background-color: #ececec;
height: 2459px;
width: 15px;
}
#bseven {
background-color: #ececec;
height: 30px;
width: 840px;
}
#beight {
background-color: #ececec;
height: 31px;
width: 840px;
}
#bnine {
background-color: #ececec;
height: 34px;
width: 840px;
}
#bten {
background-color: #ececec;
height: 10px;
width: 840px;
}
#beleven {
background-color: #ececec;
height: 2061px;
width: 18px;
}
#btwelve {
background-color: #ececec;
height: 2061px;
width: 17px;
}
#bthirteen {
background-color: #ececec;
height: 1949px;
width: 14px;
}
#bfourteen {
background-color: #ececec;
height: 1949px;
width: 15px;
}
#bfifteen {
background-color: #ececec;
height: 11px;
width: 840px;
}
your home page http://tylerlischka.com
looks same me in firefox , ie8.
however you're missing document type declaration in html sends page(s) quirks mode. can produce unexpected results in browsers.
to fix in dw, hit modify > page properties > title/encoding. choose document type drop-list. suggest html 4.0 transitional.
nancy o.
alt-web design & publishing
web | graphics | print | media specialists
http://alt-web.com/
http://twitter.com/altweb
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment