So I've spent a significant amount of time coding and designing this webpage, and it works perfectly in every browser I've tested it in: IE7, IE9, Firefox, Chrome, Safari. But when I view the webpage in IE8 (and only IE8), the vertical scroll is disabled. The scroll bar is there all right, but it's turned off and I can't use it or the mouse scroll wheel.
I'll post the code for the webpage if I absolutely have to, but first I wanted to see if anyone had ever heard of this happening before or had any initial thoughts.
Okay, I figured this out. If you put height: "100%"; in the html tag of your page's CSS stylesheet, it will break scrolling in IE8, but other browsers will still work. Go figure.
Here is a hack way of getting the scrollbar to work with a height of 100%. Not the best solution but it now scrolls in IE8.
html {
overflow-y: hidden\9;
}
html, body {
height: 100%\9;
}
body {
overflow-y: scroll\9;
}
mainly three things you should see
If you have given style as overflow:hidden
If you have given hight in page percentage.
if you have given float:static.
Fix this issue your IE 8 problem will be solved.
Reason : IE 8 is different than nything else for CBC check IE frist! To the topic, IE 8 hides (only scrolling bar) of scroll bar if you have overflow as hidden, secoundly if you have places hight as 100% IE 8 takes overflow as hidden (can say takes by its own!) n float is element who can go beyond page size if you have it as inherit or relative but static dose not increase dynamicly.
You tried on other IE8 (not your local ie8)? Maybe the problem is in your ie8.
Run with no-addon mode or try to disable all addons (including bars)
Restore advanced settings. Tools -> Internet Options -> Advanced -> Restore Advanced options.
I have also faced this type of problem many times.Scroll bar with IE8 , should not visible in a plain HTML page. So, please check the content inside your <body></body> tag . There may be is some margin or padding tag.
I am using IE8 currently , but there is no such scroll bar is showing. No need to fix the height:100% for HTML or BODY. Please check your page deeply.
If you are using CSS, it may come in handy that you need a reset CSS value so that the page renders properly in IE8. I have provided the link as well as the snippet from http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ . This may help you. If anything this is a nice site to read if you are starting development.
A reset to where it all started…
The concept of CSS Reset was first discussed formally way back when dinosaurs still roamed the internet (2004 to be exact) by Andrew Krespanis. In his article, he suggests using the universal selector (*) at the beginning of your CSS file to select all elements and give them 0 values for margin and padding, like so:
* {
margin: 0;
padding: 0;
}
The universal selector acts like a wildcard search, similar to regular expression matching in programming. Since in this case, the * isn’t preceded by another selector, all elements (in theory – some browsers don’t fully support it) is a match and therefore all margins and paddings of all elements are removed (so we avoid the spacing differences shown in Example 1).
Applying the universal selector margin/padding reset to our earlier example, we now remove all inconsistent spacing between all browsers (in other words, we don’t make the browsers think for us, we show them who’s boss).
Example 2: Applying the universal selector margin/padding reset
But now we don’t have any spacing in between paragraphs, so somewhere below our universal selector reset, we’ll declare the way we want our paragraphs to look like. You can do it a number of ways – you can put margins (or padding) at the beginning or top of your paragraphs, or both. You can use ems as your units or pixels or percentages.
What’s important is that we choose the way the browser will render it. For our example, I chose to add margins (instead of padding) both at the top of the paragraphs and at the bottom – but that’s my choice, you may want to do it differently.
Here’s what I used:
* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }
Example 3: Declaring a style rule after the universal selector.
Note: The example I used for discussion is a simplified example. If you only used paragraphs for your web pages and no other elements, you wouldn’t want to reset your margins to 0 using the universal selector only to declare a style rule right after it for your paragraph. We’ll discuss this more fully along with other best practices later on down the page.
Shortly thereafter – CSS guru Eric Meyer further built on the concept of resetting margins and paddings. In Eric Meyer’s exploration, he discusses Tanek’s work undoing default HTML styles (which he called undohtml.css) which not only resets margins and padding, but also other attributes like line-heights, font styles, and list styles (some browsers use different bullets for unordered list items).
After many iterations and refinements, we come to a wonderful solution called CSS Reset Reloaded CSS Reset, which not only makes this CSS reset method more accurate than the universal selector method by using higher specificity by naming all possible HTML tags (because the universal selector fails to apply the reset to all HTML tags), but also sets default values for troublesome elements like tables (in which the border-collapse attribute isn’t rendered consistently across browsers).
Of course, there are other methods of resetting your CSS (such as Yahoo!’s YUI Reset CSS which I currently use on Six Revisions), and you can roll your own based on your preference and project needs.
SITE: http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
NOTE: I am kind of new at this, so please bear with me.
Related
I'm getting strange problem with pie.htc and IE8. I have many elements on page that has rounded corners but pie works only for one element. My CSS is correct - I mean selectors are correctly assigned to pie behavior.
What elese could be wrong?
I have some experience using css3 pie and they have not been great. Here are the fixes i have used:
The elements that you are applying the behavior library too need to be position: relative for a start, so check that first. It may fix it.
If you want it to work in IE6 and 7 you need to add zoom: 1. I know you said you were using IE8 but my customers have said that in the past and it has been in compatibility mode, so always best to add that setting.
CSS 3 Pie does not support browser zooming either on background images so check that you are viewing the website in the 100% view and no other.
Hope that has helped. If you could post a jsfiddle then I could try and help further. If not check the css3pie known issues http://css3pie.com/documentation/known-issues/
Found a solution. Problem was that for these elements was used background with filter. Also css3pie sets background for these elements. After removing this filter everything works fine.
I have an element, with a child container which is initially hidden. When I hover over the parent, the child should be displayed. Simple.
Now, for real browsers, I want to add some flair and have the child fade in — while still keeping basic functionality for non-CSS3 compliant browsers. For old browsers, I simply toggle display, while I animate the opacity for all the kids with cool browsers. Should be a simple operation, right?
To my great surprise and disappointment, this is kind of buggy.
In Firefox, when I hover on, the child element switches to being fully opaque, before fading out. But hey, I want it to start as fully transparent, and then fade in!
In Webkit, the animation does not trigger — only the display toggle.
In IE (including IE10 PP) it also simply toggles display (as expected, though I had hoped it would animate in IE10).
In Opera everything works swell. <3 <3
Now, if I remove the display:none; from the initial declaration, the animation works beautifully in Fx, but then I will have problems with uncool browsers, which is sadly predominant among the visitors of this particular project.
Since I possess the powers of Modernizr, I can simply make a conditional style so that I use the display toggle only on the silly browsers, and life is great again, but the question remains:
Is this a bug in Fx/Webkitz, or is it intentional?
Here's a fiddle for you to look at: http://jsfiddle.net/TheNix/q5bAZ/4/
The problem is that transitions happen on computed value changes, and browsers don't compute values for most properties when display: none is set.
There is some ... lively discussion about what the spec should say about this. See the thread starting http://lists.w3.org/Archives/Public/www-style/2011Dec/0353.html and going over the last 4 months or so.
Simply omit the display declaration and add
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=x); // x = 0 ... 100.
Now with targeting the IEs and other older browsers, you should be fine.
If you want to be extra-accurate you put the filter into an extra IE-stylesheet so you don't invalidate your stylesheet with stupid IE-stuff. ( But with proprietary prefixes only xD )
Is it possible to control the drop down list width on select in IE8?
When the page loads I want the drop down list to be small enough to only contain the word SELECT, but when the user clicks on it to make the selection, it should expand enough to make sure all the choices are fully visible, widthwise.
FF does it, IE9 does it. But IE8 cuts off the width.
Any fixes?
thanks
Just try to include below CSS.
select:focus{width:auto !important;}
I hope it solves your problem.
For IE8 you will need to use some JavaScript for this. There are JQuery plugins that do this too, but I think there is no work around without using js.
Take a look at this other SO thread for different approaches and js libraries you might use.
In my experience, the best solutions involve replacing the select element with some other HTML, CSS and JavaScript combination, as trying to change the width of the original select on certain events will move the content on the right of it.
I've got a really simple page which uses a photo as a full-screen background. I'm using the following to define it:
body {
background-image: url('../Images/Backgrounds/Hillside.jpg') ;
background-size: cover;
margin: 0px;
}
The image, obviously, takes a little while to load after changing page so I've implemented a noddy jQuery $.load() to update the content without the overhead of a full page reload.
Unfortunately, firefox seems to have an issue when the new content causes the length of the page to change. Firefox correctly realises that the scale of the background image has to change and repaints the page behind the content div appropriately - but doesn't repaint the rest of the page - hence it looks like 2 differently scaled images are overlaid.
Resizing the window or causing a repaint fixes it. Unfortunately, I can't take a screenshot as it never shows the problem - presumably it does a repaint behind the scenes.
To demonstrate the problem, visit the site, shrink your browser window so that content forces a scrollbar. Change URL using the menu. Look at the image behind the main content in comparison to the rest of the page (About us and Sample Ads are long pages, contact us/prices are short).
How can I force firefox to do a full repaint? I suppose I'm looking for the equivalent of WinForm's Me.Invalidate(). Is there a better way to do the background image?
NB: I've shrunk/degraded the photo to reduce file size but haven't spent a lot of time on it yet - I know it can be much better.
Edit:
Environment: FF9.0.1 Win7 Ultimate x64.
Steps to reproduce:
Browse here
Resize the window so that the white content area is just above the bottom of the browser window (Also, it's handy to make sure you can see some land in the background to make the effect more obvious)
Click on the "Sample Ads" link
Click back and forth between Sizes & Prices/Sample Ads
As you do so, you'll notice that anything to the right of the menu doesn't scale but the image under the menu/content does.
There are two solutions I got.
The first is simply on loading new content do the following:
document.body.backgroundSize = 'auto';
document.body.backgroundSize = 'cover';
Just tells it to recalculate the cover area.
The second is very hacky and literally just tells FF to reapply all the styles.
for(var ss = 0, len = document.styleSheets.length; ss < len; ss++) {
document.styleSheets[ss].disabled = true;
document.styleSheets[ss].disabled = false;
}
That said, I would also report this as a bug to FF (if you haven't already or if it does not exist in the system).
I see a problem which probably attributes to your issue. Add this to your stylehseet:
html, body {min-height:100%;}
You see, background-size:cover; is only covering the body's physical dimensions. Let's say your body is actually only 400px with its content, but your window has 1000px of height. The browser first applies background-size:cover; which it does so for the 400px tall body, then it sees there's 600px more of space in the window, and kindly applies the background further; in this case, tiling/repeating it. By giving the html/body a min-height of 100%, as above, your body will always fill the available height.
i'm suffering some odd changes in margin when viewing my page in IE8 compatibility mode (ie7). Specifically in 2 areas. The Primary navigation and the footer.
As you can see the navigation is experiencing a much larger margin from the left then what is seen in IE8/FF/Chrome/Safari
http://demo.carbonium.no/iebug1.png
Below the advertising there is supposed to be space. This problem persists in all IE browsers but not in FF/Chrome/Safari
Here is a link to the actual site
Alright, i found a work around to the problem i was having with the navigation. Using absolute positioning and Z-index:1; to take the element out of the natural document flow solved the problem. Also it would seam that replacing margins with padding can to some degree give you the same result. Either way i am still confused as to why IE7 causes this particular issue.