I am creating a website and there's a strange white space at the bottom of the page (only at IE). safari is fine. i am using ie8.
I want the white background ended after that black navigation links.
http://www.applezone.com.hk/newrx/
I can't figure out which part of the css causing that white space.
Thanks.
try adding those:
.navlink{
display: inline-block;
margin-left: 51px;
}
i don't have IE8 to test on but i do use "IE tester" program which showed me the problem.
If you use Firebug (Firefox add-on) you can select that white space and it will show you where it is in the DOM, i.e. what the HTML is that is actually generating it - which element it's part of.
You can also switch on and off the individual styles on the fly.
The equivalent in IE is to hit F12 and get the 'Developer Tools' console. Find -> Select Element by Click.
Try display:block and/or margin:0 and/or padding:0 for the element in question. One of them is going to be the culprit.
Related
I recently noticed in several webpages, and some of my own, that when they are displayed in Internet Explorer 9, when its not on Quirks Mode, it renders a white line, about 1px, in the bottom of the page. It's like the html tag was with padding-bottom:1px and wrapped in another element with white background (but it's not, and it has no padding). It looks like the differences between IE9 standards and quirks mode shows when determining a wrapping element's width, but vertically. It also feels like the content of an element gets pushed 1px by a previous element, like their content, but, not margins or borders, were overlapping the next element dimensions.
I can't determine exactly what causes it. Sometimes, a page contains 2 tables and everything is fine. Then you need to add a third one, and the line shows up. Doesn't even need to be tables btw.
Sometimes, reseting css solves it. Setting the same line-height we have on body to links:
body {
line-height: 1
}
a, links, visited {
line-height: 1
}
fixes it, but not always. Only thing i can do, is check element by element, disabling/enabling their css rules till it's gone.
I noticed that when there are elements like tables, inputs, textareas, this issue is more likely to happen. 'resetting' their attributes, sometimes, solves it too.
I know it would be easier to provide a code as an example, but like i said, i coudn't determine a pattern for it. I can give you some examples of sites/urls i notice that error (you gotta look at the very bottom of the page and see the difference between IE and another browser, like Firefox):
casinosdelmundo.info, gatosabido.com.br, espanol.yahoo.com, en.wikipedia.org/wiki/Bruce_Beutler, ea.com/command-and-conquer-4, facebook.com (the ones with white, or almost white bg, change body background with f12, developer's tool, and you'll see). I found an example even here at stackoverflow (as today, the main page stackoverflow.com is showing that line too, but that can change since, sometimes the issue appears or disappears when new elements show up or are removed):
this question has the white-line:
Make link in table cell fill the entire row height
this one has not:
FireFox 3 line-height
Check this screenshot, if you still didn't see what im talking about:
the presence of this issue on very established (or not) sites makes me feel it's a IE9 bug and the only definitive fix for it is always use white background, so nobody will notice the white line (the line will still be there though). but thats obviously not the best option. I never found this white line in Chrome or Safari.
So, has anyone faced the same problem and got a better solution?
I'm not sure, cause there is no HTML here, but it is very resemble to standard browser behavior, when it displays inline content. It is due to the fact, that when text is displayed browser needs to leave some space at the bottom for letters and symbols such as: "," , "y" , "p" and so on, cause in that letters there is a part which protrudes to the bottom. You can better understand what I'm talking about when you look at this picture:
example of how inline content is displayed
so if you have some markup like
<body>
<div></div>
<textarea></textarea>
</body>
you'll get that extra space at the bottom. To get rid off it you have to use there either block element, or set to your inline-element a css style 'display: block'
I found a solution to the problem, if an idiotic one: set the toggle of your browser window's Maximize/Restore down to Maximize (= tooltip text; this indicates that the window is in a nonmaximal state). Make the browser window actually smaller than screen fit. Press F11 in this state and there is no white line at the bottom of your screen (Win7 x32 & x64). (BTW, FF dose not have this problem and is the best alternative.)
It happens when you use fractional font-sizes.
For example, stackoverflow uses h2 {font-size: 140%;} body { font-size:80%;}, which results in an total font-size of 112% for h2. Apply that to 16px default size, and you get 17.93px (including rounding errors, hooray!)
Try it yourself: getComputedStyle(document.querySelector('h2')).fontSize
Browsers have a hard time rendering fractional pixels, and thus may get confused and add a pixel at the bottom.
By the way, Firefox has some trouble too. The spacing between the footer lines is off by a pixel.
The fix is obvious: Use integer pixels to declare font-sizes.
Another way would be to apply a :after content to your body only for IE and Edge.
This way you will get rid of the extra white line.
We may require some jQuery too so that the content applies only when you are at the bottom of the page.
body{
position:relative;
width:100%;
}
body:after{
content: "";
display:block;
background-color: #000;
height: 1px;
bottom: 0px;
position: fixed;
width: 100%;
}
jQuery
//add a border to internet explorer
if (bowser.name == "Microsoft Edge" || bowser.name == "Internet Explorer") {
//console.log(" iam inside");
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$("body").addClass("end-border");
}
else {
$("body").removeClass("end-border");
}
});
}
IE 9 on Hover over a link, pushes some of the HTML down the page.
When i remove the color from
td.subarea > h2 > a:hover { color: #aa051a; text-decoration: none;}
the problem does not occur.
I can't paste all the code here, and fairly sure its a unique problem to this page.
But maybe someone out there has seen something similar.
Its not moving the Link(a tag) down the page, its the whole containing table that moves.
This problem seems to occur in IE9 when the container element is set to overflow: auto and there is some hover action taking place in the child element.
There is a very simple solution of adding min-height: 0px to the container element, which works.
The detailed explanation of the bug and this solution can be found in this link:
http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround
Make sure your line-height and font-size properties are the same for normal and hover.
Sort of found the problem, well makes the table stop moving. margin-top:-20px.
Although it olny shifted down about 10px.
Probably some IE9 rendering issue. IE7/8 actually move the table on intial loading.
The font sizes, line-heights, all that css, is all good for the link.
Marc B is probably close to the issue of IE rendering something wrong and cauing floats and such to mess up.
Now have to real style a table layout wihtin a table layout page(ugh, hate table layout).
For me I had to specify
height:100%;
Then I had to go ahead and specify
width:100%;
The 'min-height: 0px' by mohitp above got me on the right track.
I'm working on a site and I have some problems that I hope you guys can help me with :)
If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.
In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.
Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:
This is my project.
I hope some one can help me out with this.
If you have something I better I can do, I will be glad to hear that too :)
Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.
Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.
You can put the code below in your css to target Firefox and bring the outline back in:
#-moz-document url-prefix() {
#content{
outline-offset: -11px;
}
}
Live example: http://jsfiddle.net/tw16/n8bet/
#1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers
#2: remove this line from #content css:
outline: 1px solid #B9BDBE;
In this website: http://www.blackblot.co.il/kb/ I can't make the anchor ( tags) to show tooltips in IE.
It works in chrome and Firefox.
what makes it even harder to understand, is it not happenening in all the tags, but only these in the content section.
for example, the links on the left side are showing the titles, but the links in the content, altough has it, won't show it.
I checked for CSS manipulation, or js code, but nothing really stops it from showing the titles.
really need help here. Thanks
I checked out the source code and found out that the anchors didn't have titles. Did you try putting titles in those anchors? That should work in my opinion.
OK
I found the solution. which is not a real solution - but it something in IE was absolutely wrong.
it is clearly a bug in IE. Anyway, if someone have the same problem.
I have dicided to take off the css and see if I see the tooltips without any css. And then I saw it.
So I had to debug 500 lines of poorly written CSS. Among these 500 line there were 3 declarations that caused this bug. I found that when I use F12 (developer's tools of IE) the positioning of the element was not in it's actual position on the page. Please see image attached.
So I tried to figure out which css declaration causing this. For some reason 3 declaration of 3 div's padding had to be removed in order for this to work.
the CSS lines are as follow, the commented code is the bad guy:
ul,ol,dl,p,h1,h2,h3,h4,h5,h6{margin-top:10px; margin-bottom:10px; /* padding-top:0; padding-bottom:0; */}
div.post,div.page{display:block; margin:0 0 0px 0; border-bottom:solid 1px #eee; /* padding:20px */}
div.post-bodycopy p{margin:1em 0; /* padding:0; */ display:block; font-size: 13px;}
i have a page which displays a border around the divs #call and #courses
i m using the css:
border: 3px solid #afd4a9;
this is not properly in ie
see it here
thanks
There's nothing wrong with your CSS.
When I disable JavaScript in Internet Explorer, the border is there (but not rounded).
Looking more closely, I see you're using jquery.corner.js for rounding the corners.
I'm not sure why that isn't working for you (I can't see what you're doing wrong), but I recommend switching to CSS3PIE instead for the rounded corners.
In short, you simply download the PIE.htc file, and add a single rule to your CSS for each element:
#myElement {
...
behavior: url(PIE.htc);
}
corners.js removes the borders in ie - see the inline styles for the relavent divs. To have borders in IE, you need to have an outer div wrapping the inner div and use corners on both divs to get a border like effect. Check out the demo page about half way down, under adjornments: Jquery corners demo page
The way corners works in ff and IE is totally different - it simply uses the built in mozilla css styles which keeps the border styling. In IE corners does div insertion.
The problem is that you have a bit of javascript adding a style attribute to your DIVs:
style="border-bottom: medium none; position: relative; border-left: medium none; zoom: 1; border-top: medium none; border-right: medium none;"
You'll have to selectively remove that code for IE, or fix how it works.
Note, you ought to install the Developer Tools for IE (or if you have IE 8, just press F12 to see if they come up). The tool will let you see the HTML code after javascript has run, and it is invaluable in troubleshooting these types of problems.
Your CSS is being overwritten by inline styles, it appears, by this function. $('#courses').corner(); in your index.js file, which is rounding its corners like it's supposed to.