Padding behaving different between browsers - html

I got this project going on and I have a container with a gradient fading from transparent to white fixed at the bottom. My goal is to make the container look like it's fading in as the user scolls.
BUT I have a problem, the content at the bottom of container is sort of hidden by the gradient itself. I decided to add a padding-bottom to the container so the content would 100px far from the bottom (exacly the height of the gradient, 100px)
It worked exactly as I expected on Chrome, but on Firefox and IE the padding is not "taking space".
This is my css relatively to the container
.container {
width: 85%;
margin: 0 auto;
overflow: auto;
padding-bottom: 100px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
If you still would like a link to the main project so you can see it in action and maybe get a better view of the problem click here
I would really appreciate some help on this. It's the only thing I'm missing to end the project.
EDIT: If I am not being clear enough, please ask questions.

Related

Images sticking out past 100 view width are creating an empty white bar on mobile versions

A lot of people have said to use overflow hidden on both the parent of the element and the body. But the issue is that the image will be cut off (as desired) however the space it takes up remains.
Again this only works on mobile where the user can scroll past the view width, or zoom out in a way that browsers cannot
html, body { max-width: 100%; overflow-x: hidden; }
Has worked for almost every page except one which has a jpeg (don't know if that's relevant) image sticking out:
White bar example: continues down the page
Try this.
* {
box-sizing: border-box;
}
The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element padding and border are included in the width and height.

Unwanted padding and margin in Bootstrap 3.3

I am using Bootstrap 3.3 for a simple layout and the way I have it is:
For the body,html:
html,body{
background: #fff;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
and then on each child section I have the following code:
.section-name{
height:100%;
}
so that each section takes up 100% of the given device screen size. Now I don't know why but I have quite a big gap between each section, see the screen shots below:
Notice the gap between the section, here's another screenshot:
Now I went to the dev tool, in both Mozilla and Chrome, checked for any excessive padding or margin issues, but found none.
Then I checked if it was because of the white spaces in my html, took off the whitespaces and still that wasn't the issue.
I took off all the Bootstrap CDNs too, just to check if it was a Bootstrap issue and no it wasn't, even in the custom CSS I have written, the same issue persists.
I have even tried:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
Even that wouldn't take off the padding
Edit
Js fiddle depicting my problem
I think I have found the solution you had a h2 inside your .section name that took margin-top of 20px,
Here the js fiddle
.section-title {margin-top:0px;}
http://jsfiddle.net/u2ttpkhg/1/
Is better if you could provide a fiddle, but here goes some things that I need to do sometimes:
Try to check above level elements too.
Also, you're using jumbotron? If so, it adds a top/bottom padding of 48px (via media query), take a look in that. Bootstrap has, by default, many classes which add unwanted paddings and margins.

Align a <p> with padding to edge of parent <div>

I have an image(which is a link) that has a caption directly below it, like this:
<div>
<a href = "http://fake.com/link">
<img src = "http://fake.com/picture">
</a>
<p>
Caption here.
</p>
</div>
I essentially want the image set on a gray background. I initially set the div's background to gray, which pretty much worked - but I noticed later that strips of gray are different widths around different images. Pretty much, I'm trying to make the border equal width around all images.
What I tried was rather than setting the background of the div to gray, setting a 5px border around the div and setting the paragraph's background color to gray... The problem is that the edge of the paragraph's padding is lining up with the edge of the parent div - since the parent div has no background color, it leaves thin white strips on either side of the caption... Does anyone know how I could solve this?
I'm not sure I fully understand the question. I believe you're trying to get an equal border around the image? Add box-sizing: border-box to .wp-caption to regulate your padding
.wp-caption {
background: #e1e1e1;
border: 1px solid #f0f0f0;
max-width: 96%;
padding: 5px 3px 0;
text-align: center;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
When I looked at the two images I noticed they both have a different width and height. You need to give them a class that will control this for you if you want the padding around the images to be the same.

CSS: 100% is larger than page width?

I'm busy with a new website. For the menu bar, I put the width on 100% to be seen here:
font-family: 'Champagne';
font-size:20px;
display: block;
z-index: 1000;
bottom: 0;
width: 100%;
background: #0193CF;
text-align: right;
padding: 0 2em;
margin: 0;
text-transform: capitalize;
But for some strange reason, the width of the menu bar is actually longer then the rest of the page. Take a look at the screenshot at the bottom.
Does anyone have any experience with this?
The problem is a combination of width and padding properties. Padding, in the typical CSS box model, is additive. If your box width is 100%, the padding applied to it will add to the width. The width would therefore calculate at a number greater than the size set in your width property.
I would suggest using the box-sizing properties in your CSS, like so:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
width: 100% + padding: 0 2em, is equal to something greater than 100%. By using the box-sizing property in your style sheet, you will tell the browser to include padding's as part of the total width.
box-sizing:border-box...
This basically takes into consideration the margin and padding when calculating the size.
A more detailed explaination on the box-model is outlined for you here:
http://css-tricks.com/box-sizing/
Another option to cover most cross-browser problems is to try using a reset to zero out all elements and bring you back to a true "start".
many browsers add their own little tidbits of padding oand spacing on specific elements, so a reset is often used to, well, reset your browser to a true "square one"
Here is one of the more popular ones:
http://meyerweb.com/eric/tools/css/reset/
But this site reviews a lot of them:
http://www.css-reset.com/
If box-sizing doesn't fix this problem for people, check your top levels of your CSS - I found a rogue width:100% for the <body> CSS once.
My technique for debugging these problems is to open Developer Tools and delete blocks of the page (i.e. major <div>s) one at a time: if removing any of them causes the layout to snap back into place that indicates the one you just deleted was causing the problem.
width sets the content width which does not include padding nor margins.
Try removing padding or changing the box sizing.

Set div height to inner div with position: absolute in combination with CSS3 transitions

I've created some tiles with CSS3. Inside every tile div, there is an image and some text. The text is displayed when you hover over the image.
The tiles can be seen in this CodePen.
However, as you can see, the tiles automatically take the height of tile-text, but I want them to adjust to the hieght of the image. I know you can do this by setting position: relative instead of absolute, but then the hover doens't work anymore.
Does anyone know how to fix this? I'm really lost, so it would be greatly appreciated!
P.S. Unfortunately, I'm not allowed to use Javascript or JQuery for this project.
You had the right idea, you just overcomplicated some of the code, which was causing conflicts. Here's a fresh version of your codePen, with it much more simplified. http://codepen.io/anon/pen/mAirH
Hope that helps.
If you remove the overflow: hidden; from #tile-container .tile then you'll get the right height. You will, however, have to adjust the width to make up for the removal of the overflow.
Update: If you add
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
then the width is fine as well.
Here's an updated pen: http://codepen.io/anon/pen/iAubK