CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxsafari
xan
xan

Reputation: 4696

Different browsers show different page heights

I'm trying to design a single page website (without a vertical & a horizontal scroll). Now my structure is:

container-->height: 100%
   header-->height: 10%
   main-content-->height: 80%
   footer-->height: 10%

The page appears exactly what I want in Mozilla Firefox. However, in Chrome a black space (about 1-2px) appears between the footer bottom and the browser bottom. In Safari, a vertical scroller appears on the right.

I'm working on windows and have not applied any margin/padding{top or bottom} to any of the elements.

EDIT#1

I'm also using a slider in the main-content for which I had to specify fixed height for some divs.

Upvotes: 1

Views: 965

Answers (4)

Harshad
Harshad

Reputation: 570

The possible reason to why you get black space at bottom or a scrollbar is the way browsers work with percentages calculations. You can find an explanation Here.

The trick will be to define #footer outside of container and set

#footer{ position: absolute; bottom: 0; width: 100%; height: 9%; }

And also set height of #header to 9% to allow for contingency in calculation.

Upvotes: 1

djhayman
djhayman

Reputation: 1067

You mention that "main-content" should have a height of 80% (which adds up nicely with the two 10% values), but nowhere in your code (either HTML or CSS) have you actually specified 80%.

What I can see in "main-content" are a bunch of nested DIVs, all with fixed-pixel heights specified, so I'm not sure how this was ever going to work.

Start by adding height: 80%; to #main-content, get rid of all the fixed heights for all DIVs nested inside #main-content, and then work out what needs to be done next.

EDIT: You mention that your code works in FireFox, but the only thing I can think of is that it works at the exact pixel size of your FireFox window, and no other sizes. If you resize your FireFox window, does it still look OK?

Upvotes: 2

Toping
Toping

Reputation: 755

    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, big, strike, strong, sub, sup, tt, var,
b, u, i, center,table, tr, td, th, tbody, thead, tfooter,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; border-spacing: 0; }

use this as a reset, it should work

Upvotes: -1

James Hill
James Hill

Reputation: 61812

Welcome to the world of web development. I suggest starting with a CSS reset to ensure a consistent layout. If you aren't inclined to use Yahoo's tools, a Google of CSS reset is a great place to start.

Yahoo offers nice tools to facilitate: http://developer.yahoo.com/yui/reset/.

The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions.

<!-- Source File -->
<link rel="stylesheet" type="text/css" 
      href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">

Upvotes: 1

Related Questions