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;
}
Related
Hi I am building a store on Volusion, and can't figure this problem out. The issue is that in IE, Chrome, Safari, my padding for search_refinement_filters is looking fine, but in Firefox, they are being pushed about 350 px to the right. Check out the Firefox CSS issue here
Please let me know if you can help! I have tried moving search_refinement_filters from the content div to content area, but unfortunately I wasn't able to configure that to work either.
Thanks!
It's due to the left padding and left margin on #search_refinement_filters. You also have some weirdness with the absolute positioning. You may want to add position: relative to #content.
Take a look at Firebug. It is a convenient tool for analyzing code in Firefox.
Just add following styles to your #search_refinement_filters div. Remove others.
#search_refinement_filters {
position: absolute;
top: 100px;
left: 232px;
width: 700px;
}
And then apply position: relative to your #content div.
#content {
position: relative;
}
As 2C-B said #search_refinement_filters has left padding and left margin. These can be removed or overridden to prevent the issue with the styling.
You should definitely get Firebug for Testing purposes if you don't already have it.
Get it here: https://getfirebug.com/
It is an invaluable tool for debugging html, css, and javascript problems.
Hope this helps.
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've noticed that if I view the page at wider resolution, the content of a section gets aligned to the right, instead of centered.
I use
margin: 0 auto;
width: 998px;
overflow: hidden;
It seems to have this bug, at least in Safari, Firefox and Chrome. I tried disabling overflow: hidden and it gets rid of the bug, but messes up my floats inside the content.
You can see an example at the page live here:
http://autouncle.dk/da/brugte-biler/Kia or http://autouncle.dk/da/brugte-biler/Ford (you have to view it at at least 1500px widescreen to see the bug).
Any ideas on what can cause this bug and what are possible solutions?
About the reason of the problem: this is due to the page-title element of your header:
#header-outer element contains some floated elements but you forgot a clearing, so the offset left of the main section of your site starts where the page-title ends. (you can verify this by hiding page-title element — when you set display: none the page is correctly centered)
So adding
body#basic_page #header-outer {
overflow: hidden;
}
you solve the problem
As a sidenote strongly avoid to put empty div only for clearing purposes: there're cleaner methods that don't require extra markup, like easyclearing
Your solution is removing overflow: hidden
To fix the float bug on the second example you gave try to use 100% of the width:
body#basic_page.brands_controller #content .text_info {
overflow: hidden;
font-size: 12px;
width: 100%; /* new rule */
}
Remove the
overflow:hidden
from div#content and put its contents in an extra <div> in it which has
width:100%;
overflow:hidden;
This resolves the problem for me.
there seem to be a few posts on this subject but i can't find anything conclusive one way or the other, so thought i'd try on here for someone far more knowledgeable in CSS than me! I have 3 container divs which have background images to give the impression of a tapered out line effect at the top and bottom of the main content. I can't get the middle div to dynamically expand as far as i need it to, it seems to need a specific height. Is there any way to get height: auto or 100% working on this? The site is here - thanks!
Edit: Sorry, you are trying to stretch the background image.
The technique is to remove the float:right; style and add a margin to the left:
#main_body {
float: right; //remove this
margin-left: 320px; //add this
}
-works on Chrome
There are solutions described. You can use pure css to do it or even use javascript.
I am considering that you are only requiring a css solution. Try the following CSS.
body {
margin:0;
padding:0;
height:100%;
}
or
html{
width:100%;
height:100%;
}
or check out this link, a better solution. Click here
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.