Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Problems with IE

    My code is working perfectly fine in FF, but when I try it in Internet Explorer 7 it is not working. My website is www.definition-designs.co.uk

    I have checked with W3C my code on the Index page and the CSS page, index page getting XHTML 1.1 and CSS validating at CSS 2.1.

    On the Index page on FF, the padding works at the bottom and top on the navbar, but in IE7 it only pads the top and not the bottom. My index.html code is;

    Code:
    <?xml version="1.0" encoding="utf-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      
    <html xmlns="http://www.w3.org/1999/xhtml"> 
      <head> 
        <title>Definition Designs - Web and Graphics Design</title> 
        <meta name="Author" content="Joshua Martin" /> 
        <meta name="Description" content="Definition Designs is the website of Web and Graphic Designer Joshua Martin" /> 
        <link href="/stylesheet.css" rel="stylesheet" type="text/css"/> 
      </head> 
        
      <body>    
        <div id="header">
          <div id="header-text">
            	definition<div id="z">designs</div>
          </div>
        </div>
        
        <div id="navbar"> 
          <ul>
            <li><a href="/index.html">home</a></li> 
            <li><a href="#">about</a></li> 
            <li><a href="#">portfolio</a></li> 
            <li><a href="#">blog</a></li> 
            <li><a href="#">tutorials</a></li> 
            <li><a href="/contact.php">contact</a></li> 
          </ul>
        </div>
        
        <div id="mainContent"> 
          <p>Lorem ipsum boring gypsum.</p>
        </div> 
        
      </body> 
    </html>
    On my contact.php page, it works fine in FF again, but in IE7 the div is pushed to the left and does not center. Also, the navbar becomes distorted in IE. My contact.php page code is this, and as far as I know, this isnt a PhP error, this is a problem with my divs. (I am not very good at PhP, but it works fine for me);

    PHP Code:
    <?php

    $recipient 
    'defenitiondesigns@googlemail.com';
    $serverName 'www.definition-designs.co.uk';


    if (
    $_POST['send']) {
        
    sendMail();
    } elseif ((
    $_POST['cancel']) || ($_POST['continue'])) {
        
    redirect();
    } else {
        
    displayForm();
    }

    function 
    displayForm($messages = array())
    {
        global 
    $login;
        
    $escapedEmail htmlspecialchars($_POST['email']);
        
    $escapedRealName htmlspecialchars($_POST['realname']);
        
    $escapedSubject htmlspecialchars($_POST['subject']);
        
    $escapedBody htmlspecialchars($_POST['body']);
        
    $returnUrl $_POST['returnurl'];
        if (!
    strlen($returnUrl)) {
            
    $returnUrl $_SERVER['HTTP_REFERER'];
            if (!
    strlen($returnUrl)) {
                
    $returnUrl '/';
            }
        }
        
    $escapedReturnUrl htmlspecialchars($returnUrl);
    ?>
    <html xmlns="http://www.w3.org/1999/xhtml"> 
      <head> 
        <title>Definition Designs - Web and Graphics Design</title> 
        <meta name="Author" content="Joshua Martin" /> 
        <meta name="Description" content="Definition Designs is the website of Web and Graphic Designer Joshua Martin" /> 
        <link href="/stylesheet.css" rel="stylesheet" type="text/css"/> 
      </head> 
        
      <body>    
        <div id="header">
          <div id="header-text">
                definition<div id="z">designs</div>
          </div>
        </div>
        
        <div id="navbar"> 
          <ul>
            <li><a href="/index.html">home</a></li> 
            <li><a href="#">about</a></li> 
            <li><a href="#">portfolio</a></li> 
            <li><a href="#">blog</a></li> 
            <li><a href="#">tutorials</a></li> 
            <li><a href="/contact.php">contact</a></li> 
          </ul>
        </div>
        
        <div id="contactForm"> 
            <?php
                
    if (count($messages) > 0) {
                    
    $message implode("<br>\n"$messages);
                    echo(
    "<h4>$message</h4>\n");
                }
            
    ?>
            
            <form method="POST" action="<?php echo $_SERVER['DOCUMENT_URL']?>">
            <p>
            <b>Your</b> Email Address   
            <input 
                name="email" 
                size="35" 
                maxlength="35" 
                value="<?php echo $escapedEmail?>"/>
            </p>
            <p>
            Your <b>Real</b> Name    
            <input
                name="realname" 
                size="35" 
                maxlength="35" 
                value="<?php echo $escapedRealName?>"/>
                
            </p>
            <p>
            Subject Of Your Message   
            <input 
                name="subject" 
                size="35" 
                maxlength="35"
                value="<?php echo $escapedSubject?>"/> 
                
            </p>
            <p>
            <i>Please enter the text of your message in the field that follows.</i>
            </p>
            <textarea 
                name="body" 
                rows="10" 
                cols="60"><?php echo $escapedBody?></textarea>
            <p>
            <input type="submit" name="send" value="Send Your Message"/>
            <input type="submit" name="cancel" value="Cancel - Never Mind"/>
            </p>
            <input 
                type="hidden"
                name="returnurl" 
                value="<?php echo $escapedReturnUrl?>"/>
            </form>
            
            <?php
            
    }
            
            function 
    redirect()
            {
                global 
    $serverName;
                
    $returnUrl $_POST['returnurl'];    
                
    $prefix "http://$serverName/";
                if (!
    beginsWith($returnUrl$prefix)) {
                    
    $returnUrl "http://$serverName/"
                }
                
    header("Location: $returnUrl");
            }
            
            function 
    beginsWith($s$prefix)
            {
                return (
    substr($s0strlen($prefix)) === $prefix);
            }
            
            function 
    sendMail()
            {
                global 
    $recipient;
                
                
    $email $_POST['email'];
                if (!
    preg_match("/^[\w\+\-\.\~]+\@[\-\w\.\!]+$/"$email)) {
                    
    $messages[] = "That is not a valid email address. In format: You@something.com";
                }
                
    $realName $_POST['realname'];
                if (!
    preg_match("/^[\w\ \+\-\'\"]+$/"$realName)) {
                    
    $messages[] = "<br>The real name field must contain only alphanumeric characters, spaces and + or - signs.";
                }
                
    $subject $_POST['subject'];
                if (
    preg_match('/^\s*$/'$subject)) {
                    
    $messages[] = "<br>Please specify a subject for your message.
                    
                    
                    "
    ;
                }
                
    $body $_POST['body'];
                    if (
    preg_match('/^\s*$/'$body)) {
                    
    $messages[] = "<br>Your message was blank. Fill out a message or Click Cancel to cancel message.<br><br>";
                }
               if (
    count($messages)) {
                    
    displayForm($messages);
                    return;
                }    
                
                
    mail($recipient,
                    
    $subject,
                    
    "
            
            From: $realName, $email;
            
                            ------------------------------------------
            
            $body"
    ) or die("Unable to send the mail!");
                         
                
    $escapedReturnUrl htmlspecialchars($_POST['returnurl']);
            
    ?>
        </div> 
        <?php
        
    }
        
    ?>
      </body>
    </html>
    This is my stylesheet code;

    Code:
    body,td,th {
    	font-family: Arial, Helvetica, sans-serif;
    	background-color: #e5e5e5;
    	color: #000;
    	text-align: left;
    	margin: 0;
    	padding: 0;
    }
    p { 
    	padding: 0 0 12.5px 0; 
    }
    #z {
    	color: #999;
    	display: inline;
    	font-weight: bold;
    }
    #header{
    	background-image: url(/PNGs/backgroundheader.png);
    	height: 40px;
    	float: left;
    	width: 100%;
    	padding: 40px 0;
    	text-align: left; 
    	display: inline;
    	font-size: 25px;
    	font-family: Tahoma, Geneva, sans-serif;
    	color: #FFFFFF;
    	position: absolute;
    }
    #header-text {	
    	padding-left: 140px;
    }
    #navbar ul{
    	background-color: #2a2a2a;
    	background-image: url(/PNGs/repeating.png);
    	border-top: 1px solid #FFFFFF;
    	font-size: 14px; 
    	margin: 0;
    	top: 80px;
    	height: 30px;
    	position: relative;
    	padding: 15px 0 0 120px;
    }
    #navbar ul li {
     	display: inline; 
    	height: 20px;
    }
    #navbar ul li a {
    	text-decoration: none;
    	width: 100px; 
    	color: #FFFFFF; 
    	padding: 5px 20px 5px 20px;
    }
    #navbar ul li a:hover {
    	color: #FFF;
    	background: url(PNGs/gradientbkg.png) 0% 0% repeat;
    	border-top: 1px solid #434343;
    	border-bottom: 1px solid #434343;
    }
    #mainContent {
    	text-align: center; 
    	top: 80px;
    	width: 77%;
    	margin-left: auto;
    	margin-right: auto;
    	position: relative;
    	padding-bottom: 20px;
    	padding-top: 20px;
    	padding-left: 15px;
    	background-color: #FFFFFF;
    	border-left: 2px solid #FFC;
    	border-right: 2px solid #FFC;
    }
    #contactForm {
    	top: 80px;
    	width: 77%;
    	margin-left: auto;
    	margin-right: auto;
    	position: relative;
    	padding-bottom: 20px;
    	padding-top: 20px;
    	padding-left: 15px;
    	background-color: #FFFFFF;
    	border-left: 2px solid #FFC;
    	border-right: 2px solid #FFC;
    	text-align: left;
    	font-size: 12px;
    }
    #mainContent q {   
    	text-align: center;  
    }
    If anyone could tell me how to fix this cross-browser error this would be much appreciated!
    Last edited by DefDesigns; 06-24-2009 at 06:57 PM.

  • #2
    New Coder
    Join Date
    Apr 2009
    Location
    UK
    Posts
    56
    Thanks
    5
    Thanked 1 Time in 1 Post
    I would use a seperate styesheet/css file for IE

    Use:


    <!--[if IE]>
    <link rel="stylesheet" href="the_ie_css.css" type="text/css">
    <![endif]-->

    for changing how Internet Explorer reads the website page.

  • #3
    New Coder
    Join Date
    Jun 2009
    Location
    /root
    Posts
    91
    Thanks
    4
    Thanked 9 Times in 8 Posts
    Like your header, try using a container div element (width =100% margin=0 padding=0) for your menu links then use margins to position them.

    Basically the same with your page content. Try a container div as above for your page content element(s) which are and should be, in this case, set margin-left and -right = auto.

    I only use conditional css as a last resort. I'd rather have a little more complicated code in the html than multiple css files but sometimes it's unavoidable.
    Last edited by Kodah; 06-23-2009 at 11:26 PM.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Hi DefDesigns

    Your php code does not include a doctype - which is probably why the #contactForm isn't centred in IE. It's possible that this might also be causing the menu differences.

    If you view the page source for contact.php then you are missing a closing </div> - even though that does appear in your code - don't know enough about php to point out the issue I'm afraid.

  • Users who have thanked SB65 for this post:

    DefDesigns (06-24-2009)

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    SB65, your solution has fixed my centering error and the navbar error with IE7, but the navbar padding error is still existant in IE7 (not in IE8, though)

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    top/bottom or left/right properties do not play well with elements without an absolute/fixed positions. But such positioning should only be used when necessary.

    In your case, try
    Code:
    #header{
    	background-image: url(/PNGs/backgroundheader.png);
    	height: 40px;
    	/*float: left;
    	width: 100%;*/
    	padding: 40px 0;
    	text-align: left; 
    	/*display: inline;*/
    	font-size: 25px;
    	font-family: Tahoma, Geneva, sans-serif;
    	color: #FFFFFF;
    	/*position: absolute;*/
    }
    #navbar ul{
    	background-color: #2a2a2a;
    	background-image: url(/PNGs/repeating.png);
    	border-top: 1px solid #FFFFFF;
    	font-size: 14px; 
    	margin: 0;
    	/*top: 80px;*/
    	height: 30px;
    	position: relative;
    	padding: 15px 0 0 120px;
    }
    #mainContent {
    	text-align: center; 
    	/*top: 80px;*/
    	width: 77%;
    	margin-left: auto;
    	margin-right: auto;
    	position: relative;
    	padding-bottom: 20px;
    	padding-top: 20px;
    	padding-left: 15px;
    	background-color: #FFFFFF;
    	border-left: 2px solid #FFC;
    	border-right: 2px solid #FFC;
    }
    You might need to remove other top properties from your CSS file.

    PS: You've some divitis in your code, say one at
    Code:
    <div id="header">
          <div id="header-text">
            	definition<div id="z">designs</div>
          </div>
        </div>
    I'd code it like
    Code:
    <h1 id="header-text">definition <span id="z">designs</span></h1>
    (and then add the styles) which is more semantic!
    Last edited by abduraooft; 06-24-2009 at 03:21 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    top/bottom or left/right properties do not play well with elements without an absolute/fixed positions. But such positioning should only be used when necessary.

    In your case, try
    Code:
    #header{
    	background-image: url(/PNGs/backgroundheader.png);
    	height: 40px;
    	/*float: left;
    	width: 100%;*/
    	padding: 40px 0;
    	text-align: left; 
    	/*display: inline;*/
    	font-size: 25px;
    	font-family: Tahoma, Geneva, sans-serif;
    	color: #FFFFFF;
    	/*position: absolute;*/
    }
    #navbar ul{
    	background-color: #2a2a2a;
    	background-image: url(/PNGs/repeating.png);
    	border-top: 1px solid #FFFFFF;
    	font-size: 14px; 
    	margin: 0;
    	/*top: 80px;*/
    	height: 30px;
    	position: relative;
    	padding: 15px 0 0 120px;
    }
    #mainContent {
    	text-align: center; 
    	/*top: 80px;*/
    	width: 77%;
    	margin-left: auto;
    	margin-right: auto;
    	position: relative;
    	padding-bottom: 20px;
    	padding-top: 20px;
    	padding-left: 15px;
    	background-color: #FFFFFF;
    	border-left: 2px solid #FFC;
    	border-right: 2px solid #FFC;
    }
    You might need to remove other top properties from your CSS file.

    PS: You've some divitis in your code, say one at
    I'd code it like
    Code:
    <h1 id="header-text">definition <span id="z">designs</span></h1>
    (and then add the styles) which is more semantic!
    I tried that and it completely destroyed the page, the position code is neccessary otherwise the whole thing just gets destroyed D:. This wasnt the error either, the error is my rollover is not padding at the bottom :P

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    This wasnt the error either, the error is my rollover is not padding at the bottom :P
    Checking your site in IE6 may reveal you the seriousness of what I'm talking about (You may download IE Tester, if you don't have IE6)
    I tried that and it completely destroyed the page
    Could you post a link to the modified page?

    Edit: Adding the following styles to the above changes gives me the same display in IE6/7 and FF2

    Code:
    #navbar ul{
    	background-color: #2a2a2a;
    	background-image: url(repeating.png);
    	border-top: 1px solid #FFFFFF;
    	font-size: 14px; 
    	margin: 0;
    	/*top: 80px;*/
    	height: 30px;
    	position: relative;
    	padding: 10px 0 10px 120px;
    }
    #navbar ul li {
     	/*display: inline; */
    	float:left;
    	height: 25px;
    	list-style:none;
    }
    #navbar ul li a {
    	text-decoration: none;
    	width: 100px; 
    	text-align:center;
    	color: #FFFFFF; 
    	padding: 0 5px ;
    	line-height:25px;
    	float:left;
    }
    Last edited by abduraooft; 06-24-2009 at 04:46 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    DefDesigns (06-24-2009)

  • #9
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    AH. I must have done it wrong, as now it is rastering properly, but I just need to change all of the paddings, etc to get it looking right ^_^

    It works in IE8 and FF3.0.11, and works in IE compatability mode, too. It seems like its been fixed, now! XD

  • #10
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    DARN. It seems to be not working at ALL in IE6


    EDIT: I think I know why. IE6 doesnt like .png's does it?
    Last edited by DefDesigns; 06-24-2009 at 06:07 PM.

  • #11
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by DefDesigns View Post
    DARN. It seems to be not working at ALL in IE6


    EDIT: I think I know why. IE6 doesnt like .png's does it?
    No it doesn't. In addition, while you are correct in using the xml declaration on the first line, only modern browsers handle it properly while IE<7 goes into quirks mode and IE7+ just ignores it. Since you aren't serving XHTML anyway, you can safely remove that line.

    btw, XHTML version 1.1 is an XML application and should be served as XML, not text/html. You should fall back to version 1.0.

  • Users who have thanked drhowarddrfine for this post:

    DefDesigns (06-24-2009)

  • #12
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I will fix that, then. + I will make the repeating background a pattern with the right colour, so that it works in IE6, too.


    EDIT: I believe I have it fixed. My site works properly in IE6 7 and 8, and im trialing other browsers now! Thank you to everyone who has replied!
    Last edited by DefDesigns; 06-24-2009 at 06:56 PM.


  •  

    Posting Permissions

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