Specific Element positioned correctly in IE and Chrome, but not in Firefox…and I can't figure out why?
Question
I've been reading up recently on cross-browser compatibility and have learned a lot, but I haven't been able to solve this specific problem.
On a site I built, www.paintnomorect.com, in Chrome and IE the contact form is positioned correctly at the top-left. However in Firefox, it is dropped below the main image, and I don't know whether it's a positioning issue, margin, float, or what...I've tried searching for answers, but most seem to be related to a specific instance and I haven't found one that's helped yet.
Can someone help me figure out what's causing this issue and how to fix it? And is there a good way to troubleshoot issues like this so I can figure out what is causing problems in the future?
2 answers
solution1
0 2015-06-26 16:40:43
Remove float and margin-top and use this CSS:
.contentAreaC .jumbotron.has-formbuilder .module-container .formbuilder {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
This will vertically align the form and keep it all the way to the left. Also, you can remove the ::before that you are using to vertically align the form. I think the float was messing things up.
solution2
0 ACCPTED 2015-06-26 16:42:22
Try to target FireFox only and change a perticular part of the CSS style:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@-moz-document url-prefix() {
h1 {
color: red;
}
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.