Why Firefox cuts text vertically when other browsers don't? - html

Live URL - look at "449 zł"
Firefox on Windows display is but from the top and from the bottom:
Other browsers display this text ok.
I have tried different setting of line-height, height, overflow CSS properties for both .regular-price and .price elements, but with no luck.
What is the reason?

Related

not able to align vertical flex-end on IE11

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.

Alignment does not display in center in IE 8

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.

ul not aligned properly in IE7 - Aligned to the right of the div, aligned to the left in every other browser

So I'm making an auto-complete dropdown list, using javascript. It works fine in IE8+, Chrome, and Firefox, but the alignment is off in IE7.
Here's how it's supposed to look, and here's how it looks in IE7. I've uploaded the HTML here.
Any help would be greatly appreciated.
just add left: 0; to .autocomplete_completionListElement — you have an absolute positioning here and IE thinks that it still must be on a line with previous content, so you need to set left to make IE know where the div must be positioned for sure.

absolute DIV positioning with mozilla V.S. safari V.S. Chrome V.S. IE

I'm having trouble with the browser compatible div positioning. I'm doing an image map with buttons on top of it in separate div's. These div's tend to move around in firefox, in safari and chrome everything is okay.
They tend to move down a bit.
Changing the doctype seems to influence the rendering in firefox. But none of the doctype's seem to work.
Check the Algiers button on this link in firefox and you'll see what I mean.
http://kareldc.com/grimonprez/index_js_animatie_clicks.html
Any help = very much appreciated!
The <body> element is still using the browser's default margin and padding values (8px), which may account for the gap you're seeing.
Another thing to note is that while your images have explicit heights, the <div>s surrounding them are actually taller than those images.
For instance, the image you reference is 37px tall. It's surrounded by the #button_8_algiers div.
In Firefox, that element is 43px high, which is 6 pixels taller than the image -- the exact number of pixel whitespace you have.
In chrome, the element is 41px high, which is 4 pixels taller than the image. Chrome is rendering it OK for some reason, though.

what css or html causes the safari browser to not show an image?

There's supposed to be an image in the center under the text "GIANT MANGO". It shows in Firefox, Chrome, and IE, but it does not show in the Safari browser.
http://giantmango.com/vote-for-artist-charity-contest-44-2581
How to solve this problem?
It doesn't show up initially with Chrome 9 on Linux either. If you drill down through the developer tools, the computed style for that image shows its height and width to be 1px in both directions. If I remove the max-height: 100% from the div.post-body p img, div.post-body p object rule, the image appears.
While I can't explain this (I haven't the time to look at it in-depth) I hope this puts you on the right track towards debugging this.
On the single-wrapper div, is there a padding-top of 1000px coming in somehow, that's pushing the contained div down? (the image appears in my safari, it's just far down the page).