CODEWITHSUNDEEP
csshtml
Santiago Berniz
Santiago Berniz

Reputation: 37

Extra Space at bottom of page in some browsers

I am having problems having "extra space" at bottom of page. in Opera, and firefox. and on IE, sometiems it happens sometimes it doesn't on chrome works fine all the time. I am new to css and html5, and on top of that. haven't done any web design in a lot of time. used to just use tables and old html. the website i'm having problem with is

http://jconstruction.us.cloudlogin.co/index2.php

I tried everything and now i gave up. it is a modified template the templates works well in all browsers so my guess is is some of my modification. the template where i having problem is from here

http://www.jonathansconstruction.com

if anyone can help will be glad. Thanks in advance I am really needing this spent lot of time with no success

Edit

Thansks a lot for all the HeLP ..... I did manage to fix the problem on most browsers, However, still having a hard time on IE, if anyone can help will be greatly appreciated (already about to pull my hair out ) lol.. I even tried validating. and although some errors, i tried taking the errors aout and still, same result.

Upvotes: 0

Views: 2671

Answers (5)

sajag
sajag

Reputation: 1

I also had the same issue. I found the solution by making change in the CSS:

.Zebra_DatePicker.dp_hidden {
  visibility: hidden;
  filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0
}

Instead of visibility: hidden; use display:none; and it will work perfectly.

Upvotes: 0

Deeps23
Deeps23

Reputation: 51

Try using fixed headers and footers in a div with the 100% height, so that the space will not mess up in any browsers. If you can try over position:relative also and try setting margin-top values for the space.

Upvotes: 0

Nick
Nick

Reputation: 1035

This is because you might have used top:-***px; in the CSS for any <div>. Try using absolute positioning.

Upvotes: 2

ShibinRagh
ShibinRagh

Reputation: 6646

I found the issue, set this property

      .ui-datepicker
         {
          position:absolute;
         }

Upvotes: 1

Sp4cecat
Sp4cecat

Reputation: 991

To do this, I usually create two parts to the page:

<body>
    <div id="main-part"></div>
    <div id="footer"></div>
</body>

Then style it:

#main-part { height: 100%; padding-bottom: 110px; }
#footer { height: 100px; margin-top: -100px; }

Upvotes: 0

Related Questions