SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: IE troubles.

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Canada
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE troubles.

    So, I designed a web page, and made all the tests in Firefox. After much troubleshooting, I finally had it looking perfect, and doing almost everything I wanted.

    Of course, I had to test in on IE. Lets just say the results were far from what I was expecting.

    The url of the page I was designing is: http://barrin.net/temp/template-tem.php

    I was wondering if I could get some help on improving how it looks in IE. I'm sure there are tons of experienced web designers who have encountered these similar problems and had found resolutions, but I'm stumped.

    I'll also include a link as to how it looks in Firefox, if whoever can help me doesn't have it: http://barrin.net/temp/firefox.jpg

    May as well post the source code (it validates CSS and XHTML):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
    
    <html>
    <head><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    
    <title>Layout Tests</title>
    
    
    <style type="text/css">
    body {
    	background: #C0C0C0;
    }
    #header {
    	position: absolute;
    	top: 0;
    	left: 50%;
    	width: 760px;
    	height: 200px;
    	background: #3399CC;
    	padding: 0px 0px 0px 0px;
    	margin: 0px 0px 0px -380px;
    	border-left: 1px solid #222222;
    	border-right: 1px solid #222222;
    }
    #nav {
    	position: absolute;
    	top: 200px;
    	left: 50%;
    	margin-left: -380px;
    	background: #878787;
    	padding: 0px;
    }
    #nav p {
    	text-align: right;
    	background: #878787;
    	color: #BBBBBB;
    	font: 10px verdana, sans-serif;
    	letter-spacing: 1px;
    	padding: 2px 2px 2px 2px;
    	margin: 0px 0px 0px 0px;
    	border-left: 1px solid #222222;
    	border-right: 1px solid #555555;
    	width: 145px;
    }
    #nav p:hover {
    	border-right: 1px solid #FF0000;
    }	
    #nav p a {
    	color: #555555;
    	display: block;
    	text-decoration: none;
    }
    #nav p a:hover {
    	color: #FF0000;
    }
    #nav ul {
    	display: none;
    	list-style: none;
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	background: #AAAAAA;
    	border-left: 1px solid #222222;
    	border-right: 1px solid #555555;
    }
    #nav ul:hover {
    	border-right: 1px solid #FF0000;
    }
    #nav ul li {
    	background: #AAAAAA;
    	color: #330000;
    	font: 10px verdana, sans-serif;
    	letter-spacing: -0.1px;
    	text-indent: 10px;
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	border-right: 5px solid #FF9999;
    }
    #nav ul li a {
    	text-decoration: none;
    	display: block;
    	color: #330000;
    }
    #nav ul li a:hover {
    	background: #FF9999;
    	color: #930209;
    }
    #nav input {
    	font-family: verdana, sans-serif;
    	font-size: 10px;
    	border-left:  1px #878787 solid;
    	border-right:  1px #878787 solid;
    	border-bottom:  1px #878787 solid;
    }
    #nav input.text {
    	border-top: 1px #878787 solid;
    }
    #nav input.submit {
    	border-top: 0px #878787 solid;
    }
    #nav table {
    	text-align: center;
    	background: #AAAAAA;
    	color: #330000;
    	font: 10px verdana, sans-serif;
    }
    #side {	
    	position: absolute;
    	top: 0px;
    	left: 50%;
    	margin-left: -380px;
    	padding: 0px;
    	width: 149px;
    	height: 100%;
    	background: #878787;
    	border-left: 1px solid #222222;
    	border-right: 1px solid #555555;
    }
    #main {	
    	position: absolute;
    	top: 0px;
    	left: 50%;
    	margin-left: -229px;
    	padding: 0px;
    	width: 610px;
    	height: 100%;
    	background: #979797;
    	border-right: 1px solid #222222;
    }
    #date {
    	position: absolute;
    	top: 160px;
    	right: 50%;
    	margin: 0px -370px 0px 0px;
    	color: #555555;
    	font: 11px verdana, sans-serif;
    	letter-spacing: 1px;
    }
    
    </style>
    
    
    <script type="text/javascript">
    var majors = new Array('navigation', 'recent', 'archive', 'calendar', 'search', 'links');
    function toggle(a, b) {
    	if (!document.getElementById) return true;
    	if (b==2) for (var i=majors.length-1; i>=0; i--) if (majors[i] != a) document.getElementById(majors[i]).style.display='none';
    	a=document.getElementById(a);
    	a.style.display=(a.style.display=='block')?'none':'block';
    	return false;
    }
    </script>
    
    </head>
    
    <body>
    
    
    <div id="main"></div>
    <div id="side"></div>
    
    <div id="header">
    	<img src="images/template-tem.gif" width="760" height="200" alt="" />
    </div>
    
    
    <form action="/" method="post">
    <div id="nav">
    	<p>~</p>
    
    	<p><a href="/" onclick="return toggle('navigation', 1);"> Navigation</a></p>
    	<ul id="navigation">
    	<li><a href="/">Home</a></li>
    	<li><a href="/">About</a></li>
    	<li><a href="/">Archive</a></li>
    	</ul>
    
    	<p><a href="/" onclick="return toggle('recent', 1);"> Recent</a></p>
    	<ul id="recent">
    	<li><a href="/">Articles</a></li>
    	<li><a href="/">Comments</a></li>
    	</ul>
    
    	<p><a href="/" onclick="return toggle('archive', 1);"> Archives</a></p>
    	<ul id="archive">
    	<li><a href="/">October 2004</a></li>
    	<li><a href="/">September 2004</a></li>
    	<li><a href="/">August 2004</a></li>
    	</ul>
    
    	<p><a href="/" onclick="return toggle('calendar', 1);"> Calendar</a></p>
    	<ul id="calendar">
    	<li>
    	<table>
    	<tr> <td colspan="7">October 2004</td>                                                                                     </tr>
    	<tr> <td>S</td>       <td>M</td>       <td>T</td>       <td>W</td>       <td>T</td>       <td>F</td>       <td>S</td>      </tr>
    	<tr> <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>  <td>1</td>       <td>2</td>      </tr>
    	<tr> <td>3</td>       <td>4</td>       <td>5</td>       <td>6</td>       <td>7</td>       <td>8</td>       <td>9</td>      </tr>
    	<tr> <td>10</td>      <td>11</td>      <td>12</td>      <td>13</td>      <td>14</td>      <td>15</td>      <td>16</td>     </tr>
    	<tr> <td>17</td>      <td>18</td>      <td>19</td>      <td>20</td>      <td>21</td>      <td>22</td>      <td>23</td>     </tr>
    	<tr> <td>24</td>      <td>25</td>      <td>26</td>      <td>27</td>      <td>28</td>      <td>29</td>      <td>30</td>     </tr>
    	<tr> <td>31</td>      <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td>  <td>&nbsp;</td> </tr>
    	</table>
    	</li>
    	</ul>
    
    	<p><a href="/" onclick="return toggle('search', 1);"> Search</a></p>
    	
    	
    	<ul id="search" style="text-align: center;">
    	<li >Enter Search</li>
    	<li><input class="text" type="text" name="keywords" /></li>
    	<li style="padding-bottom: 2px;"><input class="submit" type="submit" name="submit" value="Search" /></li>
    	</ul>
    	
    
    	<p><a href="/" onclick="return toggle('links', 1);"> Links</a></p>
    	<ul id="links">
    	<li><a href="/">Site #1</a></li>
    	<li><a href="/">Site #2</a></li>
    	<li><a href="/">Site #3</a></li>
    	<li><a href="/">Site #4</a></li>
    	<li><a href="/">Site #5</a></li>
    	<li><a href="/">Site #6</a></li>
    	<li><a href="/">Site #7</a></li>
    	<li><a href="/">Site #8</a></li>
    	<li><a href="/">Site #9</a></li>
    	<li><a href="/">Site #10</a></li>
    	</ul>
    
    	<p>~</p>
    </div>
    </form>
    <div id="date"><p><?php echo date("l, F jS, Y"); ?></p></div>
    
    </body>
    </html>

    Thanks in advance

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Perth, Western Australia
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks all right to me... what exactly is the problem?

  3. #3
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Canada
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks alright in Firefox, but not in IE. 2 <div>s aren't showing, and the border for #header is showing where it shouldn't be at all.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •