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
Robert Rydlewski
3,828 PointsCan someone please explain to me why in this case display: inline-block doesn't work to style button element ??
I am trying to style button but width and height don't work after adding display: inline-block.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="one">
<input type="text" name="">
<input type="button" value="submit" class="btn">
</div>
</body>
</html>
.one {
display: inline-block;
}
input {
display: inline-block;
}
.btn {
display: inline-block;
width: 120px;
height: 60px;
}
4 Answers
Jamie Reardon
Treehouse Project ReviewerIt appears that there is some cross-browser inconsistencies for the input styling. Not sure what browser you are using but I am using Chrome. After I added a CSS reset file the styling worked for the input elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="one">
<input type="text" name="">
<input type="submit" value="submit" class="btn">
</div>
</body>
</html>
* {
box-sizing: border-box;
}
input,
.one {
display: inline-block;
}
input {
width: 200px;
height: 200px;
}
.btn {
width: 120px;
height: 160px;
}
I deleted the unnecessary repeat styles in your code (if you haven't already come across DRY CSS in one of the CSS courses, it basically stands for don't repeat yourself, meaning to minimize repeating the same lines of styles into a single css rule.) such as the display: inline-block repeated three times.
I have also added the box-sizing: border-box css property and value which forces the border and any padding value inside the css box model. This is to ensure that when you define widths and heights to elements, they will be the defined sizes.
Jamie Reardon
Treehouse Project ReviewerHave you linked your html document to your stylesheet? I cant see a link to the css file under your head section of your html page.
To link it you need to add the link element that contains the path to it:
<link rel="stylesheet" href="css/style.css">
Replace the href value above to match your own path to your stylesheet, e.g. if your css file is not in a folder, remove the css/ (this represents a folder named css) and replace the name style.css in the example above to match your own.
Remember, this link element needs to be inside your head element of your page, along with your title and meta tag elements.
Robert Rydlewski
3,828 PointsI didn't want to pass long code so I just made a simle version of my issue and forget link CSS, however still don't work. For example the input I can style but the btn class I can't :(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="one">
<input type="text" name="">
<input type="button" value="submit" class="btn">
</div>
</body>
</html>
.one {
display: inline-block;
}
input {
display: inline-block;
width: 200px;
height: 200px;
}
.btn {
display: inline-block;
width: 120px;
height: 160px;
}
I am trying to style the button bigger ( higher and wider )
Jamie Reardon
Treehouse Project ReviewerI'm at work right now, but I'll take a look when I'm home.
Robert Rydlewski
3,828 PointsI forget to add normalize.css. I am so embarrassed 😩 😞
Robert Rydlewski
3,828 PointsRobert Rydlewski
3,828 PointsThank You for clear up the CSS ... ( I know I keep repeating myself :( I tried to figure out why this property didn't work ) Anyhow... Unfortunately, this didn't bring the solution. I am using Google Chrom browser ( update ) I also tried with Safari and Opera browser ... Thsaem no effect :( strange.
The only solution I find is to add background-color to the class and only then I can see the changes apply. But in order to have the button clear, I add a background-color: inheritance ;
Just last question ... So the code you passed to me work on your browser where the button has the value width and height 200px ?? If that's the case, that's so strange... Anyhow, Thank you so much for taking your time and helping me. I would like to know if the background-color: inherit; making changes in your browser. Anyhow Thank a lot :)