www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] IE5 creates space for no reason on page load, but is ok on refresh

  1. #1
    Join Date
    Aug 2006
    Posts
    92

    resolved [RESOLVED] IE5 creates space for no reason on page load, but is ok on refresh

    Hi all,
    I am just in the middle of doing some cross browser testing and I have a major problem. As my site is about the UK military, I need it to be compatable with IE5 as they use IE5 alot.
    I have created this script in the head of the documents to use a different CSS document if it is IE version 4, 5.0 or 5.5.
    PHP Code:
    <?php
    // Start of MSIE script
    $list=$_SERVER['HTTP_USER_AGENT'];
    $explode=explode(';'$list);
    $vs=$explode['1'];
    $query_MSIE="SELECT IF (SUBSTRING('$vs',7,1)=5, '<link rel=\"stylesheet\" type=\"text/css\" href=\"../css/MSIE5.css\" />', '<link rel=\"stylesheet\" type=\"text/css\" href=\"../css/layout.css\" />') AS header;";
    $MSIE=mysql_query($query_MSIE$campaign) or die (mysql_error());
    $row_MSIE=mysql_fetch_assoc($MSIE);
    echo 
    $row_MSIE['header'];
    // End of MSIE script
    ?>
    The problem is that on testing through Browsercam, it creates space under the page header for no reason. If you refresh the document all is fine. see the 2 examples below, the first on is when the page originally loads up and the second is once the page is refreshed.
    http://www.thebfpocampaign.co.uk/images/screen1.gif
    http://www.thebfpocampaign.co.uk/images/screen2.gif

    Has anybody ever come across this problem before or does anybody know why it is doing this?
    Last edited by postedoverseas; 09-10-2006 at 01:20 PM.

  2. #2
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,742
    It's hard to tell without seeing the code but it looks like a "hasLayout" problem to me.

  3. #3
    Join Date
    Aug 2006
    Posts
    92
    Ok, while I look up this hasLayout thing here is the code:
    first, the stylesheet
    Code:
    * {
    	margin:0;
    	padding:0
    	}
    body {
    	font-family: verdana, arial, sans-serif;
    	font-size:100%;
    	background-image:url(../images/background.gif);
    	}
    .clearboth {
    	clear:both;
    	}
    h1 {
    	font-size:1.75em;
    	margin:10px 0 -10px 0;
    	text-align:center;
    	}
    h2 {
    	margin-left:70px;
    	font-size:1em;
    	line-height:2.5em;
    	text-align:left;
    	}
    h3 {
    	margin-left:20px;
    	font-size:.75em;
    	line-height:2em;
    	text-align:left;
    	margin-top:15px;
    	}
    h4 {
    	margin-left:10px;
    	font-size:.75em;
    	line-height:1.5em;
    	text-align:left;
    	}
    h5 {
    	text-align:center;
    	font-size:1em;
    	font-weight:bold;
    	}
    h6 {
    	text-align:left;
    	font-size:.75em;
    	text-indent:10px;
    	padding-bottom:10px;
    	}
    a {
    	text-decoration:none;
    	color:#990000;
    	font-weight:bold;
    	}
    a:hover {
    	text-decoration:none;
    	color:#006600;
    	font-weight:bold;
    	}
    sup {
    	font-size:75%;
    	}
    div#menu a:hover {
    	text-decoration:none;
    	color:#006600;
    	font-weight:bold;
    	}
    div#content {
    	width:770px;
    	border:1px solid black;
    	background-color:#FFFFFF;
    	}
    .clearboth {
    	clear:both;
    }
    div#header {
    	clear:both;
    	width:100%;
    	height:100px;	
    	background-color:#006666;
    	font-weight:bold;
    	color:#FFFFFF;
    	border-bottom:1px solid black;
    	
    	}
    div#header img {
    	float:left;
    	}
    div#header p {
    	padding:40px 60px 40px 0;
    	text-align:right;
    	}
    div#left {
    	float:left;
    	width:200px;
    	border-right:1px solid black;
    	border-bottom:1px solid black;
    }
    div#menu {
    	width:200px;
    	background-color:#CCCCCC;
    	}
    div#menu a {
    	display:block;
    	font-weight:normal;
    	}
    div#menu p {
    	font-size:.75em;
    	line-height:1.2em;
    	text-indent:10px;
    	border-bottom:1px solid black;
    	display:block;
    	text-decoration:none;
    	text-align:left;
    	}
    div#left_bar {
    	width:200px;
    	background-color:#FFFFFF;
    	}
    .xhtml img{
    	margin:10px 0px 10px 20px;
    	}
    .xhtml a img {
    	border:0;
    	}
    .paypal {
    	padding:15px 56px 10px 65px;
    	}
    .comment1 {
    	font-size:.75em;
    	padding:0 10px 0 10px;
    	}
    .comment2 {
    	font-size:.75em;
    	padding:0 10px 0 10px;
    	text-align:center;
    	}
    div#main_content {
    	float:right;
    	width:560px;
    	padding-bottom:20px;
    	}
    div#editable_content {
    	float:right;
    	width:560px;
    	padding-bottom:20px;
    	padding-right:10px;
    	}
    div#editable_content p {
    	text-align:left;
    	font-size:.75em;
    	margin:0 0 0 10px;
    	line-height:1.5em;
    	}
    div#editable_content ul {
    	margin:10px;
    	}
    div#editable_content li {
    	font-size:.75em;
    	margin-left:50px;
    	margin-bottom:10px;
    	text-align:left;
    	}
    div#editable_content ul li ul li{
    	font-size:.9em;
    	margin-left:50px;
    	}
    address {
    	text-indent:50px;
    	font-style:normal;
    	font-size:.75em;
    	line-height:1.5em;
    	text-align:left;
    	}
    .form500 {
    	float:right;
    	width:550px;
    	margin-top:20px;
    	}
    .label {
    	float:left;
    	width:48%;
    	padding-right:10px;
    	margin-bottom:10px;
    	text-align:right;
    	}
    .input {
    	float:right;
    	width:49%;
    	margin-bottom:10px;
    	padding:0;
    	font-size:.8em;
    	}
    .form500 img {
    	padding-left:10px;
    	}
    .submit {
    	float:right;
    	}
    .help_logo {
    	float:left;
    	padding-right:10px;
    	}
    .textarea {
    	float:right;
    	width:49%;
    	margin-bottom:10px;
    	padding:0;
    	font-size:.8em;
    	font-size:1em;
    	}
    .textarea_help {
    	float:left;
    	border:1px solid black;
    	font-size:1em;
    	}
    
    .radio {
    	}
    table {
    	margin:9px 0 9px 0px;
    	}
    td {
    	font-size:.75em;
    	}
    .finance_date {
    	width:50px;
    	text-align:center;
    	}
    .finance_item {
    	width:200px;
    	text-align:left;
    	}
    .finance_income {
    	width:75px;
    	text-align:center;
    	}
    .finance_expenditure {
    	width:75px;
    	text-align:center;
    	}
    .finance_2cols {
    	width:250px;
    	text-align:left;
    	}
    .finance_4cols {
    	width:400px;
    	text-align:left;
    	font-weight:bold;
    	}
    div#footer {
    	clear:both;
    	width:100%;
    	height:60px;	
    	background-color:#006666;
    	border-top:1px solid black;
    	}
    div#footer a {
    	color:#FFFFFF;
    	margin:10px 0 15px 0;
    	}
    div#footer ul {
    	width:100%;
    	}
    div#footer ul li {
    	float:left;
    	text-decoration:none;
    	padding:0 23px 0 23px;
    	font-size:.70em;
    	}
    .keywords {
    	padding-top:10px;
    	font-size:.70em;
    	color:#FFFFFF;
    	}
    .text {
    	text-indent:15px;
    	padding:0 0 10px 0;
    	}
    .center {
    	text-align:center;
    	font-size:.75em;
    	}
    div#subs {
    	width:555px;
    	float:right;
    	}
    .names {
    	width:47%;
    	float:left;
    	padding:0 5px 10px 0;
    	}
    .comments {
    	width:48%;
    	float:right;
    	padding:0 0 10px 0;
    	}
    div#photo img {
    	margin:0 84px 0 85px;
    	border:1px solid black;
    	}
    .thanks {
    	font-size:1.5em;
    	color:#006600;
    	line-height:1.5em;
    	text-align:center;
    	font-weight:bold;
    	}
    .news_titles {
    	height:200px;
    	width:555px;
    	overflow:scroll;
    	}
    .news_content {
    	position:absolute;
    	margin:25px 0 0 -250x;
    	padding-left:250px;
    	width:40px;
    	}
    .photo_border img {
    	border:1px solid black;
    	float:right;
    	margin:-10px 0 0 10px;
    	}
    .photo_border2 img {
    	border:1px solid black;
    	float:right;
    	margin:0px 0 0 10px;
    	}
    .photo_no_border img {
    	float:right;
    	margin:-10px 0 0 10px;
    	}
    .photo_contact img {
    	float:right;
    	margin:0 10px 0 0;
    	}
    .sign {
    	text-align:center;
    	font-size:1em;
    	font-weight:bold;
    	margin-bottom:10px;
    	}
    .comment {
    	width:250px;
    	border:1px solid black;
    	float:right;
    	margin:-10px 0 0 10px;
    	}
    If you need the code to the page itself let me know and I''ll have to post seperately as this has just given me a warning about having too many characters

  4. #4
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,742
    Well that's pretty meaningless without the URL or the document. To start with add width:100% to every element that does not have a specified width.

  5. #5
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    The 100% fix can be problematic if we're talking about IE5/Win (not mac, which doesn't have the hasLayout DOM property). IE5 gets the box model wrong, so be wary of adding width: 100% to elements that have padding and borders. I've found the following snippet of code a little more fail-safe for triggering hasLayout:
    HTML Code:
    <!--[if IE]>
    <style type="text/css" media="screen">
    #someId {
      height: 1px; /* IE5 is less buggy with this */
      voice-family: "\"}\"";
      voice-family: inherit;
      height: auto; /* Reset height, mainly for IE7 */
      zoom: 1; /* Trigger hasLayout */
    }
    
    .fixIE501 {/* IE 5.01 often ignores the declaration after a voice-family hack. */}
    </style>
    <![endif]-->
    The internet explorer conditional comments hide the errant IE-Win CSS styles for non-IE browsers (and thus will pass validation).

  6. #6
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,742
    Quote Originally Posted by toicontien
    IE5 gets the box model wrong
    IE5? Are you serious? That browser was replaced over five years ago. Are you seriously recomending someone code their site for people too lazy to update their browser to the latest free offering after five years of being obsolete?

  7. #7
    Join Date
    Aug 2006
    Posts
    92
    Normaly I would agree but as this websiet is based on the British military, I need it to be compatible with IE5 as they are still using it in many areas

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles