treehouse : what would you like to learn today?
Web Design Web Development iOS Development

IE-Stylesheet Conditional Comment in PHP document

  • I am a newbie web designer so please excuse me if this is a silly question.

    I am working on a site which has a standard css style sheet as well as another one for IE. The IE comes into play through a conditional statement in the header of each page:

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

    However, my Contact Us page contains an email form which interacts with a PHP document to send the email and show a 'Thank for your message' page. However, the PHP document only seems to recognise the standard stylesheet and ignores the <!--[if.....]> comments, so when viewed in IE the page is all over the place.

    As I don't know anything about PHP (I got the code for the email form and response file from my tutor but the course is finished now so I can't ask), I don't know what I need to do to get the condisional comment recognised.

    All help is hugely appreciated!
  • You shouldn't use PHP to add the links to your style sheets. Your <head> should just have this.
    <html>
    <head>
    <title>Page Title</title>

    <link href=\"styles/xyz.css\" rel=\"stylesheet\" type=\"text/css\" />
    <!--[if IE 7]>
    <link href=\"styles/ie7_xyz.css\" rel=\"stylesheet\" type=\"text/css\" />
    <![endif]-->
    </head>
    <body>

    <div id=\"page-wrap\">
    <form method=\"post\">
    <!-- Contact Form Here -->
    </form>
    </div>

    </body>
    </html>


    Perhaps I don't fully understand your question, but this isn't a problem with PHP.
  • Thanks for your reply :) I actually have it just like you suggest in my html pages. However, when a user clicks on the 'Send' button on the email form within the Contact Us page, it activates a PHP page that will generate the email with all the responses from the form and sends it to me and then displays a page to the user telling them the message was sent successfully. In the html pages, my conditional comment work perfectly and adds in the IE style sheet where required. However, the same does not work in the php file, so the page that is returned when successful is all over the place if viewed in an IE browser. So my question is how do I achieve the same thing here, i.e. ensure that a user with an IE browser will also get the right styles applied in the $theResults = <<<EOD part of the php file?

    Code in contact.html

    <div id=\"mainContent\">
    <h1>Contact Us</h1>
    <br />
    <p class=\"medText\">If you have any questions, contact XYZ by completing the form below.</p>
    <br />

    <form name=\"joinForm\" method=\"post\" action=\"contactformprocess.php\" id=\"contactForm\" dir=\"ltr\" lang=\"en\">
    <p>Your Email Address<br />
    <input name=\"email\" id=\"name\" type=\"text\" size=\"30\" maxlength=\"100\" /></p>
    <p>Name<br />
    <input name=\"name\" id=\"name\" type=\"text\" size=\"30\" maxlength=\"100\" /></p>
    <p>Phone Number<br />
    <input name=\"phone\" id=\"name\" type=\"text\" size=\"30\" maxlength=\"30\" /></p>
    <p>Your Enquiry<br />
    <textarea name=\"comments\" id=\"comments\" cols=\"28\" rows=\"5\"></textarea></p>
    <p><input type=\"reset\" name=\"clear\" id=\"clear\" value=\"Reset Form\" />
    <input type=\"submit\" name=\"submit\" id=\"submit\" value=\"Send Email\" /></p>
    </form>

    </div>


    Code in contactformprocess.php
    <?php

    /*Subject and Email Variables */

    $emailSubject = 'XVY Enquiry';
    $webMaster = 'info@XYZ.com';

    /* Gathering Data Variables */

    $emailField = $_POST['email'];
    $nameField = $_POST['name'];
    $phoneField = $_POST['phone'];
    $commentsField = $_POST['comments'];

    $body = <<<EOD
    <br /><hr /><br />
    Email: $emailField <br />
    Name: $nameField <br />
    Phone Number: $phoneField <br />

    Comments: $commentsField <br />

    EOD;

    $headers = \"From: $email\r\n\";
    $headers .= \"Content-type: text/html\r\n\";
    $success = mail($webMaster, $emailSubject, $body, $headers);

    /* Results rendered as HTML */

    $theResults = <<<EOD

    <html>
    <head>

    <meta name=\"description\" content=\"......\" />
    <meta name=\"keywords\" content=\".....\" />
    <meta name=\"author\" content=\"......\" />
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />

    <title>......</title>
    <link href=\"styles/xyz.css\" rel=\"stylesheet\" type=\"text/css\" />
    <!--[if IE 7]>
    <link href=\"styles/ie7_stepasidevillage.css\" rel=\"stylesheet\" type=\"text/css\" />
    <![endif]-->
    <link rel=\"shortcut icon\" href=\"favicon.gif\" type=\"image/x-icon\" />

    </head>

    <body>
    .....

    </body>
    </html>

    EOD;
    echo \"$theResults\";

    ?>
  • You don't need to put your response in a variable. Use an if to make sure the email sent correctly and save a true or false in a variable. So later in your page you can use php to find out if the email sent and give a message to the user.

    <?php

    // Handle email variables here

    if( mail($webMaster, $emailSubject, $body, $headers) )
    $message = 'sent';
    else
    $message = 'error';

    ?>
    <!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>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
    <title>Page title here</title>

    <!-- Stylesheets -->
    <link rel=\"stylesheet\" href=\"/css/stylesheet.css\" type=\"text/css\" media=\"screen\" title=\"no title\" charset=\"utf-8\" />

    <!-- IE specific stylesheets -->
    <!--[if lte IE 6]>
    <link rel=\"stylesheet\" href=\"/css/ie_stylesheet.css\" type=\"text/css\" media=\"screen\" title=\"no title\" charset=\"utf-8\" />
    <![endif]-->

    </head>

    <body>

    <?php if( $message == 'sent' ) : ?>

    <!-- Success message here -->
    <h1>Your email has been sent!</h1>

    <?php elseif( $message == 'error' ) : ?>

    <!-- Error message here -->
    <h1>There was an error sending the email :(</h1>

    <?php endif; ?>

    </body>
    </html>