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

JavaScript jQuery Basics (2014) Creating a Simple Drawing Application Perform: Part 2

davidtodd2
davidtodd2
5,590 Points
Posted by davidtodd2
davidtodd2
5,590 Points

The slider's don't show lined up, is that just a browser thing?

I think my code is the same but there hasn't been much done yet (less than 3 minutes in) but when I click the button to toggle it, it comes up where the sliders are directly on top of each other except for the third one, which is misaligned to the left, under where the color example is. I dled the files and opened it in ie and the sliders were aligned but they were beneath the color example with the text for the red slider still to the right of the color example.

So are these differences just an example of differences between browser default css?

3 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Hey David,

You're definitely right that this is the case of default stylings being applied. The default styling applied to the input of type "range" is different across Firefox and Chrome. Chrome seems to set the sliders in the range to a smaller width than Firefox does.

To fix this, I set an explicit width within the ".sliders input" rule that has worked across browsers. There are several other ways to fix this, but this method is the one I would prefer as it doesn't break the layout.

.sliders input {
    position: relative;
    width: 35%;
    top: 2px;
}
Marcus Parsons
Marcus Parsons
15,719 Points

You're welcome. Do you have any other questions about this problem?

davidtodd2
davidtodd2
5,590 Points
davidtodd2
davidtodd2
5,590 Points

Nah, I was just wondering at the one little oddity but thanks for asking.

Marcus Parsons
Marcus Parsons
15,719 Points

No problem, good luck! :) Anytime you have some questions, post on back at the forums. :P

Franciscus Agnew
Franciscus Agnew
23,912 Points
Franciscus Agnew
Franciscus Agnew
23,912 Points

Hello David,

Marcus provided a great solution to fix the problem. Before I actually came across you post I had devised this alternative solution:

/** I changed the width of the colorSelect rule to 355px **/
#colorSelect {
    background: #fff;
    border-radius: 5px;
    clear: both;
    margin: 20px auto 0;
    padding: 10px;
    width: 355px;
    position: relative;
    display:none;
}

/**
 I change the width and height of the newColor rule
 to 130px in order to square of the color swatch
**/
#newColor {
    width: 130px;
    height: 130px;
    border-radius: 3px;
    box-shadow: none;
    float: left;
    border: none;
    margin: 10px 20px 20px 10px;
}

/**
I also added Marcus' solution 
to the sliders input rule
**/
.sliders input {
    position: relative;
    width: 35%;
    top: 2px;
}

/**
I expanded this rule's width to 375px to 
compliment the colorSelect rule
**/
#colorSelect button {
    border: none;
    border-top: 1px solid #6A845F;
    border-radius: 0 0 5px 5px;
    clear: both;
    margin: 10px -10px -7px;
    padding: 5px 10px;
    width: 375px;
}

Cheers,

Franciscus