Regarding this in desktop view, I have difficulties to bring the svg triangles on the top of the green stacks to their vertical flex-end on IE11, see screen capture. Chrome and others work properly.
I tried some ideas that I got from CanIUse, but I wasn't able to get it working. Bootstrap 3 is present. Thanks for any hint.
You can remove all style of .tg-nh-rating-table svg and add
.tg-nh-rating-table svg {
height: 50px;
}
It seem IE11 realize svg is 100%, the same height with wrap div pylon-end. So just add height for svg. This will work.
Related
I'm developing a simple opacity slider for my site and I've encountered a weird rendering bug (?) that happens only in Firefox (Chrome and Opera handle it perfectly).
The problem is while slides change each other, there's horizontal line appearing over them:
Obviously it has something to do with arrows which switch images. If I set display: none to them, there's no line appearing.
Arrows are simple > < in spans, and they have text-shadow. If I remove text-shadow from them, the line gets thinner:
Spans with arrows are positioned absolutely inside divs which taking half of slide container each. These divs are inside other div, which is sibling to slides and has z-index:1 to be over them. If I set right/left position for spans so they will just a little superpose image, or if I make divs thinner (for example, 40% instead of 50%) for the same purpose, the line disappears:
It may seem like it's related to spans' width, but setting max-width and display: block doesn't help too.
How can I get rid of this weird line? Maybe there's CSS hacks for it? You can check slider yourself here. Thanks!
So I've removed spans and instead put arrows just inside divs. I've vertically centered them using :before CSS hack from this answer. No weird lines and works like charm, though I've had to add some nbsp's before and after arrows so they would not be just on the edges of slide container. Well, a bit dirty but it's fine for now. Works even in IE10 and I don't need more.
This site is displayed properly in chrome, firefox and also IE9. But it does not display properly in IE8.
I tried all thing like margin:0px auto, display : block but it does not display properly.
Please help me.
Thanks in advance.
The site look nice in IE8... write exacty what do you want to change...
Some tweaks that you should make:
for Search side:
add a vertical align for the number in the rounded thing;
changeSearchForm .number_bg{ display:table;}
changeSearchForm .number_bg span { display: table-cell; vertical-align: middle; }
make the inputs and inputs images smaller
use some font awesome icons
fix the margins for the footer in IE
if you want to make a circle, all the border with 50%, so it's always a circle, does not matter the with and height.
P.S. Next time work in % for the 'skeleton', base site architecture :)
I am able to see the issues you mentioned in IE quirks mode, actually IE8 is working fine.
Still if you need to fix this issue, Do this -
Add text-align center to the main div(class-skin) or even body tag - this will center the content and then add text-align:left to the content div(class = outter-wrapper) so that again text-align will be set to default for the content.
.skin{text-align:center;}
.outter-wrapper{text-align-left;}
Thanks,
Karthik.
It seems I'm having an issue with a design I'm working on. I'm using the kickstart HTML framework but I have a couple issues.
Firstly is that there is a very large white gap between the top of my page (logo, navbar) and the text.
Secondly I've tried to overlay the logo over the the navbar by using z-index. However it causes a negative horizontal scroll. I've tried to hide it by hiding overflow-x but it just doesn't seem like the best solution.
You can see the issues at http://jkr.me.uk/problem.html
Thanks,
John
Using position: relative on the logo makes it take up space that you're refferring to.
Instead, use float: right, or position it with position: absolute;
The issue with the white gap is the image. If you disable the position:relative property the image bottom will be touching the top margin of the fist header tag. A dirty fix for this would be something like margin-top: -200px on the first header or alternatively margin-bottom: -200px on the logo image. You could also use the method from the previous answerer.
As for the logo image overlaying the navbar, it does for me in both Chrome and IE 9.
Take a look at http://jsfiddle.net/7zb6P/1/
Both the yellow box and the background image are centered in the scrolling div, although their center is slightly different. This seems to be due to the background being centered to the whole area (including scrollbar), but the div being centered to the content area (not including scrollbar) - see it centered correctly without the scrollbar http://jsfiddle.net/7zb6P/2/
Interestingly IE7 renders it "correctly", but IE8+ and other browsers render it as described above.
I have had a play around with background-origin (and -webkit-background-origin) but none of the properties seem to have any effect.
Any ideas on how to solve this?
EDIT: More information: The linked fiddle is just a minimal example of the problem, my actual problem is with whole sites where the is centered (with margin:0 auto) and has a background image centered (using background-position: center top). The solution needs to work on a large number of sites of which I cannot change the HTML, so it needs to be a CSS based (or possibly Javascript based) solution. Thanks.
The problem resides with your background image. You're trying to center an image that (for CSS's purposes) has no center.
The image is 321 pixels wide. Which means the center of the image is 161.5 pixels. As the browser is unable to render that position it gets a 1 pixel offset.
The navigation bar on my site http://hungryathome.net doesn't center properly on Firefox and IE8 Standards mode. It centers properly in IE7 Compatability mode and in Chrome.
What's odd is that setting a Margin on the div (id="navlinks") to 4px or more will make it center properly. Any less will result in it being slightly off-center. I changed the values back and forth in Firebug and it's confusing the heck out of me. Any explanation for why that's happening?
Aha, looking at Firebug using their awesome controls which put the blue color over the elements, your header image is actually hanging down about 3 or 4 pixels over your nav bar, which is causing it to move the nav over and actually make it smaller, so it is centering it "properly". Try making your header a few pixels taller until it snaps into position correctly.
example http://img809.imageshack.us/img809/9784/example.jpg
EDIT: Or apply a border: 0 style to that image so it doesn't add the border around it, might be a better solution...