Why margin and padding properrty is not working in this?

HTML & CSS
1

Hi there

This is my jsfiddle.net file
http://jsfiddle.net/vngx/ujmkkx5w/

I am trying to give margin=0px to class bottom-bar but that was not working you can see background-color

where is wrong?

Thanks

2

You see the background because <p> inside of .bottom-bar adds its own margin.
To fix that either add overflow:hidden; to .bottom-bar or margin:0; to .bottom-bar p

3

although oveflow:hidden; solved my problem but If I run this code in Chrome and IE there is also some margin from bottom is still showing

4

What are you trying to achieve?
Your goal is fill 100% height of the page and footer sticked to the bottom, right?

5

Not sure why, but you can either align the tabs with a margin

.tab-links li {
    margin:0px 5px;
    float:left;
    list-style:none;
    margin-top:10px;
}

or set a height on tab-links

.tab-links{
background-color:black;
margin:0px;
padding:0px;
height:38px;
}
6

Yes I want to acheive this

Have you run this code seperately in Google Chrome(Any version) and Mozilla Firefox,Safari,Opera

You Will see output difference

7

I don’t understand your solution can You explain how this will solve bottom margin problem on google Chrome,safari,IE?

8

It looks the same in Chrome/Firefox for me

What do you mean by “bottom margin”?
Maybe “why vertical scrollbar is appears” is what you want to actually ask?

9

Here is my outputs
chrome output

1365×673 16.4 KB

Mozilla output

1365×631 10.5 KB

You can see their is red background showing in case of Chrome,IE,Opera
but not in mozilla firefox for same code

10

In Chrome you just have a taller window (673px vs 631px in FF), and because height of content is fixed you see where it ends
Make window taller in Firefox and you’ll see the same red background after the footer

11

I have displayed output on my full window how can I make taller than that ?

12

You can simply zoom out with Ctrl+Mouse wheel
Result will be the same

13

You are right I try to see it on different computer this issue is showing

How to fix it?

So that output is unique accross all browser in all windows size?

14

Here I’ve made footer to stick to the bottom: http://jsfiddle.net/w5g8p97a/

How to make that:

  1. Add height:100% to html,body{}
  2. Add height:100%; padding-bottom:50px; to .tabs{}
  3. Add position:relative; height:50px; margin-top:-50px; to .bottom-bar{}
  4. Change body background color from red to white to hide gap between tabs content and footer

50px here is desired height of your footer (should be fixed)

15

You can reproduce it in your mind =)
Look, you have fixed height for .tabs, right? And also fixed height for footer.
So, total height of content on the page is .tabs height + footer height
What if browser window will be a lot taller than this total height? Right, you’ll see background of the body after the footer.
Your Chrome height is 40px bigger than FF height (look at dimensions when hover on screenshots you’ve posted above), so you see this happens.

16

“Change body background color from red to white to hide gap between tabs content and footer”

this is awesome trick

updated final working code

17

You can also remove min-height from .tab-content to get it displayed right in smaller windows

18

thanks megazoid

19

So is there any way to fix this issue and to make a responsive layout so that no matter what size of window but output is user friendly

20

Sorry…I thought you meant the margin at the bottom of your tabs to align with the black top bar