Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP Enhancing a Simple PHP Application Integrating Validation Errors Displaying the Error Message

Jacob Chatigny-Salit
Jacob Chatigny-Salit
14,349 Points
Posted by Jacob Chatigny-Salit
Jacob Chatigny-Salit
14,349 Points

How can you fix the CSS around the error message in Chrome?

The error message display box is showing up perfectly in firefox but in chrome, only the paragraph text is showing (not the styling).

What is causing this issue with chrome and how can you make sure that chrome will apply CSS properly?

CSS:

.page p.message { background: #ffeca4; border: 1px solid #f16702; padding: 1em; width: 344px; }

Jason S
Jason S
16,247 Points
Jason S
Jason S
16,247 Points

make the browser full screen

4 Answers

thomascawthorn
thomascawthorn
22,986 Points

It doesn't look like you've used any styling that chrome can't handle.

Have you inspected using chrome tools? Right click -> Inspect element.

If you inspect the error box and can't see your rule for .page p.message, there's something wrong with your selectors.

Try browsing with a cleared cache, or in a private window (I think it's incognito in chrome and private window in firefox). Does this change anything?

If you're on a mac, try a hard refresh - cmd + shift + r.

Jacob Chatigny-Salit
Jacob Chatigny-Salit
14,349 Points
Jacob Chatigny-Salit
Jacob Chatigny-Salit
14,349 Points

It works in incognito mode. I guess most people using chrome will not have this same problem?

thomascawthorn
thomascawthorn
22,986 Points

It just sounds like your styles have been cached so you're not seeing your changes. Try doing a hard reset with the shortcut I mentioned. Are you on mac or windows?

Jacob Chatigny-Salit
Jacob Chatigny-Salit
14,349 Points
Jacob Chatigny-Salit
Jacob Chatigny-Salit
14,349 Points

Windows. It seems to have reset by itself. I just loaded the page and it worked. I have made modifications to several files though.

Michael De Marre
Michael De Marre
14,198 Points
Michael De Marre
Michael De Marre
14,198 Points

The styling that you are using for Firefox may not be fully supported in chrome and you may need add another styling with the -webkit- prefix to fix it. What styling are you trying to apply to chrome?

Jacob Chatigny-Salit
Jacob Chatigny-Salit
14,349 Points
Jacob Chatigny-Salit
Jacob Chatigny-Salit
14,349 Points

Thanks for the quick reply!

This:

.page p.message { background: #ffeca4; border: 1px solid #f16702; padding: 1em; width: 344px; }

Michael De Marre
Michael De Marre
14,198 Points

Can you add the html that that styling applies to?

Jacob Chatigny-Salit
Jacob Chatigny-Salit
14,349 Points
Jacob Chatigny-Salit
Jacob Chatigny-Salit
14,349 Points

<div class="section page">

<div class="wrapper">

    <?php
    if (!isset($error_message)) {
        echo '<p>I&rsquo;d love to hear from you! Complete the form to send me an email.</p>';
    } else {
    echo '<p class="message">' . $error_message . '</p>';
    }

?>

<!-- This whole thing is also nested in <div class="section page">. I don't know why it doesn't show up in the comment.-->

Michael De Marre
Michael De Marre
14,198 Points
Michael De Marre
Michael De Marre
14,198 Points

If that paragraph is the only element with the class "message", I'd recommend changing your css to this:

.message {
background: #ffeca4; 
border: 1px solid #f16702; 
padding: 1em; width: 344px; 
}
Jacob Chatigny-Salit
Jacob Chatigny-Salit
14,349 Points
Jacob Chatigny-Salit
Jacob Chatigny-Salit
14,349 Points

I pasted it into style.css. It still doesn't show, but I already knew that I tried it earlier :P

Daniel Horowitz
PLUS
Daniel Horowitz
Courses Plus Student 7,305 Points
Daniel Horowitz
Daniel Horowitz
Courses Plus Student 7,305 Points

Also, change:

.section.page p {width: 341px;}