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.
This is because you might have used top:-***px; in the CSS for any <div>. Try using absolute positioning.
I found the issue, set this property
.ui-datepicker
{
position:absolute;
}
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; }
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.
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.
Related
I am building a website in Drupal 7. I used the module nivo-slider and the nivo-slider plugin. The slideshow looks good everywhere except in IE8. The website has to work great in IE8. In IE8, it is showing two images at the same time and one of the image is all shrinked on the left.
The slideshow has to be full browser-width, here is the css code to make the slideshow full browser width:
#page {
max-width: 100%;
}
#main-content {
margin-left: 0px;
margin-right: 0px;
}
I googled a lot this issue but was not able to find the exact issue explained by someone else. I also tried different solutions with no success.
Any help would be greatly appreciated.
Thank you.
If ever someone will face the same issue, here is how it fixed it for me:
#page{
width: 100% !important;
max-width: 100%;
}
Hope this will help someone else.
This is the first site I have built with Gumby and I am something of a beginner when it comes to web design in general.
I have been scratching my head for hours now about why my site shows up perfectly in Firefox and Safari, but is a chaotic mess in Chrome. It looks like every set of columns are showing up as block elements, whilst the navbar isn't showing up at all...
I ran it through the W3C html validator and it informed me that the hgroup tag has been abolished, but that shouldn't mess up the page so much, should it? And most of all, not only in Chrome?
Possible causes:
In an effort to make the site non-responsive while I develop that aspect of things, I removed the breakpoints and messed with some of the settings in _var.scss / Probably the most likely reason but I don't know what is affecting it in this way.
I've used the row as a wrapper around the header and section parts.. Could this be messing with the way columns are displayed somehow?
In the header part I used #include columns(6) to include the columns in the html without creating another div. Does Chrome not like this?
This is the link to my site: http://work-in-germany.eu/
As you can see, it looks fine in Firefox and Safari, but not in Chrome.
THANK YOU so much for any help!
Tom
Wow, it really is a mess in Chrome! But not unmanageable.
First of all, you should wrap the whole page. This to center the content. For example:
HTML:
<body>
<div id="page_wrap">
-- Your content (rows etc.)
</div>
</body>
CSS:
.page_wrap {
margin: auto;
width: 980px;
}
As for the rows. Add the following to the css classes:
CSS:
.index_section .row {
overflow: hidden;
padding: 15px 0;
}
.index_section .img_box img {
float: left;
margin: 0 15px;
max-width: 280px;
}
Sorry, due to lack of time this was all I could do right now. Good luck!
I researched this problem already, heres what I know: It's most likely a CSS issue. Most answers pointed to removing "overflow" code in the CSS However, I don't have any code like that in my CSS. It seems like the CSS on my website is a bit more complex than the websites that were used in the questions I researched.(I did not do my own coding, I'm just a lowly designer!)
Anybody have any idea why this is happening?
Website: www.100apparel.org
Thanks so much :)
PS: I'm also having a problem with my slide show on the main page displaying in chrome. Anybody have any idea why that is happening?
Just wanted to add something That I found, the height: 100; solution didn't work for me, and what I actually found is an Windows 8 (IE 10, even rendering in older modes), is the cause of the issue. This behaviour is controlled by:
-ms-overflow-style:
Listed here: http://msdn.microsoft.com/en-gb/library/ie/hh771902(v=vs.85).aspx
consider putting this in your CSS to force the vertical scrollbar:
html {
height: 101%; /* setting height to 101% forces scroll bar to display */
}
your css code looks like this...
div.wrapper {
background-color:#F8F8F8;
width: 924px;
_width: 924px;
margin: 0 auto;
}
change it to this see if that helps...
div.wrapper {
overflow: auto;
background-color:#F8F8F8;
width: 924px;
margin: 0 auto;
}
If someone can please help I am having an issue with my site in IE7. Go to this link
Testing page link
When you load the page then hover over one of the top nav links the Footer shoots up half the distance on the page and can only be reset by rolling over another tab on the right.
What the heck is going on? Is this a DOCTYPE or CSS problem? Here's what I've already checked
Doctype
CSS styles for image height and width to see if its releasing some kind of height (I dont know)
Duplicate css styles
Any help would be awesome THANKS
Just add:
overflow:hidden
to #nav a
Btw there are some better, pure css rollover techniques, just in case you didn't know
this has a strange smell to it (from your CSS file):
.rollover { display: block; cursor: pointer; }
/* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; }
/* only set width and height once */
.rollover:hover { visibility: visible; /*for IE */ }
/* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; }
i would fool around with this here, maybe getting rid of the visibility hack...
if you want to make something not show, use display: none; instead of visibility: hidden;
EDIT: While this may or may not be a solution, I used to put endless comments in my source code so that I "knew where I was" when I was developing. One day I came across a strange error in IE that was generated by the use of a strange combination of comments. After I got rid of all my comments, the error was gone... I'm not saying, I'm just saying... maybe worth a shot...
I wanted to add comment. But, I dont have any points to add comment. Thats why adding it as answer.
I am using IE8. I have opened the link you have given in IE8 and I haven't noticed what ever you mentioned. It is working fine... If possible, you can try using IE8.
Thanks,
Srikrishna.
Really strange issue...
I was just curious about your float: left; property on #footer, and after i deleted that it seemed to work. Give it a try...
hope it helps.
Sinan.
Well, this is my first post here and really enjoying the site.
I have a very basic (ugly as sin) site I have started and for some reason, I can not get the CSS Sticky footer to work for FireFox. IE works but FF shows it halfway up the page.
The URL is http://dev.aipoker.co.uk
I know I should be developing in FF and bug fixing in IE so I am guessing I might have actually made a mistake and somehow it works in IE but nowhere else.
Can anyone help put me out of my misery please?
Thanks, guys and gals.
I've had success with code like this:
footer {
display: block;
position: absolute;
width: 100%;
bottom: 0px;
}
Try this one, it works well on Firefox.
BTW, you should listen to Boagworld's podcast if you don't already. It's brilliant! :)
Cheers.
The minimal changes I can see to do this would be:
move footerSection inside of body
set position absolute on both body and footerSection
set bottom = 0px on footerSection
which ends up with something like this in your head:
<style type="text/css">
#body, #footerSection { position: absolute; }
#footerSection { bottom: 0px; }
</style>
<div id="body">
...
<div id="footerSection">
...
</div>
</div>
This is all you need to know about css only sticky footers & sticky navs:
Stick to bottom of page
Position: absolute;
top:auto;
bottom: 0;
Stick to bottom of screen
Position: fixed;
top:auto;
bottom:0;
Any issues and it's probably due to where you placed your html code (don't make the footer a child element unless it's sticking to the content wrapper), or overlapping CSS.
You can apply the same technique to sticky navigation by flipping the auto & top. It'sis cross browser compatible (From memory from IE7 and above) including mobiles.