CSS layout difficulties, site behaves in chrome, but not in Firefox - html

I am having cross browser problems with this site, can someone explain to me why it's not working in Firefox but does in google chrome please?
When an image is clicked, the text is not positioned correctly in Firefox
http://dl.dropbox.com/u/2306276/problem/index.html
I think it has something to do with
display: table;
but I do not know why.
thanks

Change these bits of your CSS:
div.container {
height: 215px;
line-height: 215px;
width: 215px;
text-align: center;
}
div.child {
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle;
}
It's normally safer to avoid display: table-* where possible.

You're seeing https://bugzilla.mozilla.org/show_bug.cgi?id=10209
It's also fixed in Firefox nightlies; the fix will ship in Firefox 10.

try to set "position:relative" it may work

Related

SVGs as background images don't display properly in IE9

I'm using SVG files as backgrounds for my HTML elements. It works fine in all major browsers. The problem is my site needs to also work and look correctly in Internet Explorer 9. In IE9 the SVG backgrounds are always "moved" to the right and cut, like below:
The element above is a close link of a modal. Structure and styles of the close link:
HTML
CSS
.aq-modal-close {
display: block;
width: 12px;
height: 12px;
background: url('../img/modal_close.svg') no-repeat 0 0 scroll;
background-size: 12px 12px;
float: right;
margin-top: 5px;
}
The SVG file is bigger than it should, so I use background-size to adjust it. Other SVGs are used the same way. Any ideas what might be wrong? Again, this happens only in IE9.
You can add a background-position with negative values:
DEMO
.close {
display: block;
width: 52px;
height: 52px;
background: url('image.svg') no-repeat 0 0 scroll;
background-size: 52px;
background-position: -10px 0px;
border: 1px solid black;
}
As #zeidanbm stated in the comment above, the answer to the problem was in an old post: Background-size with SVG squished in IE9-10.
Basically, the designer followed the instructions and the SVGs are displayed correctly now in IE9, as background images.

One pixel vary in Firefox and chrome

I have tried a lot to resolve it but couldn't solve, there is one pixel vary in chrome and firefox
.lside,.rside{
position: absolute;
top:22.8rem;
width: 60px;
padding: 0;
margin: 0;
}
.lside{
background: url(../img/sideL.png) no-repeat;
height: 120px;
left: -20px;
}
.rside{
background: url(../img/sideR.png) no-repeat;
height: 120px;
right: -60px;
}
One pixel vary in Firefox and chrome
Web pages will always render differently in different browsers. So the position may differ in different browsers. I don't know any solution to fix it. I can't comment to your post because i don't have much reputation. That's why I post this as an answer. You can try firefox css hack to solve this but i'm not sure that it solves your problem.
#-moz-document url-prefix() {
}
Put your code inside this snippet and try or try css reset and check you included this in yur html file
<meta name="viewport" width="device-width">

let css ignore Safari

I have a weird problem whit my css and I cannot find a solution on the net…
I have this css for my “submenu” of the navigation bar on this site: http://ahornung.tk when I look at the submenu in every browser except Safari it needs a margin-top: -43px; for it to look ok but in Safari it does not…
Does a css detect web browser and ignore css if Safari rule exist?
.submenu {
position: absolute;
z-index: 1000;
display: none;
left: 100%;
margin-top: -43px;
border: 0.5px solid black;
}
Update:
In Safari it looks good whit out margin-top: -43px;...
Difficult to tell exactly what is going on but rather than using margin-top try using top:0 and adjust as required.

pseudo classes not working on select and radio element

I have a website that works fine in Chrome but in "IE" it breaks.
Two element are breaking:
**1. **Radio Button:**** Here is the code
input[type='radio'] {
width: 100%;
height: 42px;
padding-top: 12px;
display: block;
float: left;
font-weight: bold;
text-decoration: none;
text-align: center;
color: #000;
background-image: url(btn-toggle-up.gif);
background-repeat: repeat-x;
}
IE Screenshot:
Chrome Screenshot:
2. Select Element : Here is the code
select {
height: 42px;
padding-left: 10px;
display: block;
border: none;
box-shadow: none;
vertical-align: middle;
line-height: 42px;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background-color: transparent;
background-image: url(select-arrow.gif);
background-repeat: no-repeat;
background-position: right;
}
IE Screenshot:
Chrome Screenshot:
Here is the code which I am using
select::-ms-expand{display:none;}
::-ms-check{display:none;}
After a bit research, I came to this one of the most proper solution to fix both the problems. But it seems I can't get it work on my elements and still the bug is there.
I have tested this in IE7 and IE8.
You are using non-standard appearance property, which happens to be supported by Chrome, but not IE. Pseudo elements like ::-ms-expand and ::-ms-check will work only in IE 10+.
Form controls are known to be hard to style, so if you want a consistent cross browser appearance, use UI libraries like jQuery UI or reconsider styling form controls with your designer.
It's a pretty bad idea to try this kind of stuff.
But if you really want to overwrite this basic statement, the best way is to construct with div and specific classes your radio buttons and using jQuery or javascript to set up your form. example.

ie9 scroll bar and etched border always showing on object

I've got some simple html and css (see below) that shows a flex app inside a Div tag. In most browsers (ie8, chrome, FF), the object doesn't have a border or a vertical scrollbar. In ie9, both a scrollbar and a 3D etched border are shown. I'd like to remove those, I tried various border styles but nothing seem to help. Does anyone have a solution for this? Is this a known problem for ie9 only?
I'm kind of new to Html, CSS, javascript, etc. and I have to say, IE browsers are a pain!
#mapLocation
{
position: absolute;
top: 131px;
left:0;
z-index: 0;
bottom: 120px;
width: 100%;
z-index: 2;
border-style: none;
}
#mapObject{
position:relative;
width: 100%;
height: 100%;
z-index: 2;
border-style: none;
}
</style>
<div id="mapLocation" >
<object id="mapObject" type="text/html" data="otherFile.html"></object>
</div>
Thanks for any help,
Ggilmann
I just had the same issue. It may be a compatibility mode that is switched on in your IE9 browser. Try to uncheck it.