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.
Related
I had big trouble with printing from Firefox (any version, mine is 16.0.2, but even Aurora dev builds did the same).
When printing the page, Shrink to fit in the Print preview doesn't work. Only way, how to fit the page onto the paper is selecting Zoom 70% in the same dialog.
Other problem:
it prints only first page.
What to do?
I needed to adapt the CSS file for printing, so I've done one. It works flawlessly anywhere, but not in Firefox. What was the problem?
First I've tried specifying Width and height for BODY and HTML in the print.css file. Than margins, etc.
Later I figured out what was the problem:
standard CSS file had the following in it:
body {
...
overflow-x: hidden;
overflow-y: scroll;
}
So I've added the following into the print.css file:
body {
overflow-x: visible;
overflow-y: visible;
}
I guess, if you had only overflow specified in the CSS, not -x & -y, you would need to specify only overflow:visible in the print.css file.
Printing from Firefox works now as it should. I just thought, that this may help somebody, who has strange printing behavior happening in Firefox.
In addition to the Kokesh's answer, some times attribute
display: table
generates this problem too. So you need change it to 'block' or another that fits to your requeriments.
I tried the fixes suggested in other answers but they didn't solve the problem for me. After a lot of research and trial & error, I have found this article by A list apart. I was skeptical because it's so old but it states that:
If a floated element runs past the bottom of a printed page, the rest of the float will effectively disappear, as it won’t be printed on the next page.
As I have a big floated container I thought I'd give it a try. So, I made a mix from the other answers and this article and came up with this:
body {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak {
height: 100%;
display: block;
flex: none;
float: none;
}
.l-content,
.l-sidebar {
float: none;
}
So basically:
Setting body to overflow: visible
Setting elements that behave as wrappers to display: block, eliminate all flex styles and reset height if necessary
Eliminate float on long containers
That mix worked for me! I'm so happy I thought I'd share :)
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.
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;
}
*I'm re-posting this question because I only got one response before, and it didn't work. Hopefully someone new will see this and know what to do! *
I'm using IP Net Renderer to view my newly installed forum (http://www.datesphere.com/forum/) in IE7. If you care to take a look, you can see the forum is overflowing its containing element (it's wider than the 960px container I have for my entire site).
I've tried adding overflow:hidden to the .wrapper class as well as width:100% to .tborder per advice received on StackOverflow, but it didn't work.
The forum renders correctly in IE8+, FF, Chrome and Safari, but not IE 7. Does anyone know how I can fix this?
If you use IE9/8 and run the Developer toolbar you will notice that the global.css that is being generated is different for IE7 from IE8. Take a look at what is generating that Style Sheet for you and see if you can modify it to make the MIN-WIDTH:930px; or MIN-WIDTH:100%;
Or a second option add somewhere after the glboal.css style sheet a inline-style or on page css or link another style sheet .wrapper { MIN-WIDTH:930px !important; } or .wrapper { MIN-WIDTH:100% !important; } so that it overrides whats generated in the global.css file.
IE7:
.wrapper {
MIN-WIDTH: 970px; MARGIN: auto; WIDTH: 85%; MAX-WIDTH: 1500px
}
IE8:
.wrapper {
MARGIN: auto
}
Change your min-width value for your wrapper class. You can set an static width or set it to 100%.
Remove #wrapper div
And set IE7 specific .tborder {display:inline-table}
http://redlineautoleasing.com/beta/
what could be causing the bottom scrollbar? i cant figure it out.
i tried this
http://blog.josh420.com/archives/2007/11/fixing-the-ie-overflow-vertical-scrollbar-bug.aspx
but the page kind of got messed up the bottom content got chopped off.
From your CSS:
body {
background-color:black;
background-image:url(../images/contentbg.jpg);
background-repeat:repeat-x;
height:536px;
background-position:top left;
color:white;
}
try adding overflow-x: hidden; and possibly also width: 100%;
or try adding
html{
width:100%;
overflow-x: hidden;
}
play around with these, the right combination should make it work OK.
It looks like your CSS has several things with large widths or margins which could be invisibly going off the side of the page - most likely a positioning difference between IE and other browsers.
In firefox, the firebug addon allows you to inspect all the elements of your page. If there's something like that for IE it should help you identify the offending element. Otherwise, maybe try setting all borders to a width of 1 pixel with various colours to try to highlight which element is sitting out there.
Had the same problem and this solved it for me:
html
{
overflow: auto;
}