SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Again, problems with IE

    IE is pissing me off again. I thought I had finished my layout, it looked fine in both Firefox and Opera, but when I looked at it in IE, it sucked >_< I've attached two screenshots so you guys can see how it looks in Opera and how it looks in IE (IE is the one where the big gap of nothing is visible).

    As I said, a big gap of white space is visible on top of the first news post when you go to the site in IE. I've tried all kinds of things like changing the padding, margin, etc, but it didn't help anything

    If someone could help me out on this one, that would be really awesome I just hate this buggy IE and I really hope Microsoft will make IE7 better..

    Here's the code of the index file:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Code-Kilroy.com :: web programming made easy</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <base href="http://www.code-kilroy.com/" />
    <script language="JavaScript" 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);//--></script>
    <script language="JavaScript1.2" type="text/JavaScript1.2">
    <!--
    	_editor_url = 'http://www.code-kilroy.com/editor/htmlarea2/';          // URL to htmlarea files
    	var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
    	if (navigator.userAgent.indexOf('Mac')        >= 0) { win_ie_ver = 0; }
    	if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }
    	if (navigator.userAgent.indexOf('Opera')      >= 0) { win_ie_ver = 0; }
    
    	if (win_ie_ver >= 5.5) {
    		document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');
    		document.write(' language="Javascript1.2"></scr' + 'ipt>');
    	} else {
    		document.write('<scr'+'ipt>function editor_generate() { return false; }</scr'+'ipt>');
    	}
    //-->
    </script>
    <link rel="stylesheet" href="templates/kilroy/css/kilroy.css" type="text/css">
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
    </head>
    <body>
    
    <div id="header">
    </div>
    
    <div id="left">
    <div id="leftheader">
    </div>
    		<table cellspacing="0" cellpadding="1" class="moduletable">
    			  			<tr>
        			<th valign="top">Main Menu</th>
        		</tr>
    			    		<tr>
        			<td>
    			
    <table width="100%" border="0" cellpadding="0" cellspacing="1">
    <tr align="left"><td>&nbsp;<a href="http://www.code-kilroy.com/component/option,com_frontpage/Itemid,1/" class="mainlevel">Home</a>
    </td></tr>
    <tr align="left"><td>&nbsp;<a href="http://www.code-kilroy.com/content/section/2/30/" class="mainlevel">Tutorials</a>
    </td></tr>
    <tr align="left"><td>&nbsp;<a href="http://www.code-kilroy.com/forum/index.php" class="mainlevel">Forum</a>
    </td></tr>
    <tr align="left"><td>&nbsp;<a href="http://www.code-kilroy.com/component/option,com_weblinks/Itemid,34/" class="mainlevel">Links</a>
    </td></tr>
    <tr align="left"><td>&nbsp;<a href="http://www.code-kilroy.com/content/view/4/28/" class="mainlevel">About</a>
    </td></tr>
    <tr align="left"><td>&nbsp;<a href="http://www.code-kilroy.com/content/view/3/27/" class="mainlevel">Contact</a>
    </td></tr>
    </table>    			</td>
    			</tr>
          	</table>
    		<br />
    	</div>
    
    <div id="outer">
    <div class="content">
    
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td valign="top" colspan="2">
    <table cellpadding="0" cellspacing="1" border="0" width="100%" class="contentpaneopen">
      <tr>
            <td class="contentheading" width="100%">
    					<a href="http://www.code-kilroy.com/content/view/8//" class="contentpagetitle">Code-Kilroy.com kicks off!</a>
    			        &nbsp;
    	</td>
        		      </tr>
    
    </table>
    <table cellpadding="0" cellspacing="1" border="0" width="100%" class="contentpaneopen">
      <tr>
        <td width="70%" align="left" valign="top">
          	</td>
        <td valign="top" align="right">
    	    </td>
      </tr>
    
      <tr>
    	<td valign="top" colspan="2">
    
    	    </td>
      </tr>
      <tr>
        <td valign="top" colspan="2">
    	  About time! <br />
    <br />
    Code-Kilroy.com is finally live and from now on I (Peter Akkies, aka Kilroy) will start adding content to the site!<br />
    <br />
    Code-Kilroy.com currently uses <a href="http://www.mamboserver.com">Mambo</a> as a backend. Mambo is a PHP/MySQL based Content Management System (CMS) which allows me to easily administer this website.<br />
    <br />
    You can check out some tutorials already, by clicking on "Tutorials" in the navigation menu on the left. More tutorials, articles, and other stuff will follow soon :-)<br />
    <br />
    Enjoy yourself on Code-Kilroy, and hopefully you will learn a lot here!<br />
    <br />
    Greetz,<br />
    <br />
    Kilroy	</td>
      </tr>
          </table>
    <br />
    </td>
    </tr>
    
    </table>    
    </div> 
    </div>
    
    <div id="footer">Copyright (C) 2004 by Peter Akkies aka Kilroy</div>
    
    </body>
    </html>
    and here's the style sheet:

    Code:
    html {
    margin: 0px;
    padding: 0px;
    }
    body {
    background-color: #fff;
    margin: 0px;
    padding: 0px;
    }
    #header {
    height: 110px;
    background: url(http://www.code-kilroy.com/images/logo.gif);
    background-repeat: no-repeat;
    background-color: #669FD6;
    border-top: 5px solid #2B6194;
    border-right: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    border-left: 1px solid #e7e7e7;
    }
    #leftheader {
    margin: 10px 0px 0px 0px;
    color: #74899C;
    font-size: 18px;
    }
    #left {
    margin-top: 5px;
    margin-left: 15px;
    margin-bottom: 5px;
    float: left;
    width: 120px;
    border: 1px solid #ccc;
    color: #5c5c5c;
    padding: 5px;
    font-family: Trebuchet ms;
    font-size: 16px;
    display: inline;
    }
    #outer {
    margin: 5px 35px 5px 163px;
    float: center;
    font-family: Trebuchet ms;
    font-size: 14px;
    color: #5c5c5c;
    border: 1px solid #ccc;
    }
    .content {
    padding:5px;
    }
    .frontpageheader {
    font-family: Trebuchet ms;
    font-size: 18px;
    color: #74899C;
    }
    .contentheading {
    font-family: Trebuchet ms;
    font-size: 18px;
    margin: 10px 10px 0px 10px;
    color: #74899C;
    }
    .contentpagetitle {
    font-family: Trebuchet ms;
    font-size: 18px;
    margin: 10px 10px 0px 10px;
    color: #74899C;
    }
    .small {
    font-size: 12px;
    }
    .createdate {
    font-size: 12px;
    }
    #footer {
    font-family: Trebuchet ms;
    font-size: 12px;
    text-align: center;
    height: 20px;
    background-color: #669FD6;
    border-top: 5px solid #2B6194;
    border-right: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    border-left: 1px solid #e7e7e7;
    color: #000;
    clear: both;
    }
    a:link, a:visited, a:hover, a:active {
    color: #060;
    font-family: Trebuchet ms;
    }
    a.mainlevel:link, a.mainlevel:visited, a.mainlevel:hover, a.mainlevel:active {
    font-size: 14px;
    }
    a.sublevel:link, a.sublevel:visited, a.sublevel:hover, a.sublevel:active {
    font-size: 14px;
    }
    Note that the index page is generated by Mambo so that's why it's not as clean as I'd like it to be

    Thanks for any help,

    Kilroy
    Attached Images Attached Images

  2. #2
    SitePoint Zealot Valera Selev's Avatar
    Join Date
    Apr 2004
    Location
    Lviv, Ukraine
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your problem is in the first table in this div: <div class="content">. If you set it's width to e.g. 99% there will be no gap.
    Why do you need table in this case at all?

  3. #3
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, as I said, I'm using Mambo for my site (Mambo is a CMS) and Mambo creates the table. However, I will try to set it's width to 99% and see if that fixes the problem

    Thanks,

    Kilroy

  4. #4
    SitePoint Zealot Valera Selev's Avatar
    Join Date
    Apr 2004
    Location
    Lviv, Ukraine
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If your CMS doesn't allow full conttrol over the resulting HTML code - that's a bad CMS.

  5. #5
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm indeed very annoyed by this as I have to dig in the core CMS files to change this

  6. #6
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmpf, I can't seem to find it anywhere

    Is there maybe another solution?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Is there maybe another solution?
    IE doesn't like the width of its elements defined by margins alone. Use this fix to help ie out

    Code:
    * html #outer {height:1%}
    Hope that helps.

    Paul

  8. #8
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Paul - you're awesome (wish I knew how to give you karma, I can do that here on SP, can't I?)

    Is there any chance that all these IE bugs will be fixed in IE7?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Is there any chance that all these IE bugs will be fixed in IE7
    Not a chance lol - besides then I'd have nothing to do .

  10. #10
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah damn you

  11. #11
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Zurich, Switzerland
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul. I never would have figured out this IE problem (Same as Kilroy) particularly since IE 5.5 worked but IE 6.02 had the visible blank problem. Of course, if my employer would be willing to move to mozilla, I wouldn't care if IE worked.


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
  •