Discrepancy Between solution.html and desired-outcome.png in 01-css-methods

[martinzutel]

Description:

The current implementation of solution.html does not visually align with the reference image desired-outcome.png. Specifically, the button's styling differs from the expected design.

Steps to Reproduce:

1. Navigate to foundations/intro-to-css/01-css-methods/solution/solution.html.
2. Open solution.html in a web browser.
3. Compare the rendered button to the one depicted in desired-outcome.png.

Expected Behavior (Desired Outcome):

The button should have:

• An orange background.
• Black text.
• A white'ish border, as seen in desired-outcome.png.
• Some vertical padding, making the button slightly taller.

Actual Behavior:

The button currently displays:

• An orange background.
• Black text.
• A border that does not match the expected design.
• Lacks the expected vertical padding, making it appear shorter than in desired-outcome.png.

Suggested Fix:

To align the button's appearance with the desired outcome, replace the button in solution.html with the following (Ignoring padding which hasn't been introduced in the course at this point and should probably be modified in the image):

<button style="background-color: orange; border-color: white; font-size: 16px;">Inline Method</button>

[MaoShizhong]

The exercise's README.md states the following:

Do not worry about details in these exercises that are not specifically mentioned in the exercise or self check section. Because the desired outcomes are screenshots, your browser may show a different font, the colors may appear different on your machine, or the spacing between elements may look different. Only concern yourself with the specific items you are supposed to be learning for each exercise.

So depending on the browser (which should be Chrome if following TOP's instructions), fonts set in the browser, screen scaling etc., there may be subtle differences from the screenshot. They don't matter, only that the actual instructions have been followed. On my Linux machine using Chrome, the solution produces an almost identical outcome for me, only minute differences due to different fonts I've set in my browser. Using different browsers, some lead to even more different default styles applied (hence TOP recommending the use of and only supporting Chrome).

Changing the solution HTML to your proposal will go against the instructions which specify only that an orange background and 18px font are set via an inline style for that button.

[martinzutel]

I was using chrome too though so it seemed strange to me to see a difference both in color and style and thought maybe the code was wrong.

[asif460]

Border Color:

Instead of border-color: white;, try border: 2px solid white; to ensure visibility.
Padding Issue:

Since padding isn't introduced yet, you might be limited, but if allowed, add:
css
padding: 8px 16px;
Check External CSS (If Any):

If a stylesheet is linked, ensure the button class (if used) has the correct styles.
Ensure No Conflicting Styles:

Sometimes other CSS rules may override the inline styles. Check if any .css files are affecting the button.
Updated Solution:
html

Inline Method

This should bring it closer to the desired design