When building a form I have come across some weird differences in sizing and spacing between Firefox and Google Chrome.
First off, in Firefox there's a pixel difference between the first input in each column.
Moreover, text inputs have different heights, also the space between the textarea and the input below is different making it impossible to align everything properly.
But the most peculiar thing is, the textarea and text inputs have the same bottom margin, but in Google Chrome elements coming after them aren't aligned.
.input {
// ...
margin-bottom: 12px;
}
Where are these differences coming from and how should I fix them?
Update Normalize CSS doesn't fix any of this except for the one pixel difference on the top.
Code for this form: https://jsfiddle.net/jLcojhq0/2/
Related
I need to print a page containing a large table with borders (collapsed). Mozilla seems to remove some of the borders at random in the print window. Not only on the edges, but also borders inside the table (cell borders). I tried adjusting the page margins for printing and that seems to change which borders are deleted, but I wasn't able to find any combination of margins that displays all borders.
Meanwhile, Google Chrome prints everything flawlessly. Is there anything I can do about this?
Edit: I would like to mention that in Mozilla, the borders are displayed correctly before print. This only happens when trying to print the page.
I have heard of this occurring when border-collapse is set to collapse or separate. You may need to enact a print-only style to correct this for mozilla.
I cannot help you any further without your code. To get better answers check out this article:https://stackoverflow.com/help/how-to-ask
#media print {
table{
border-collapse: unset;
}
}
I'm having an issue with Chrome on macOS where adding span tags to text in a div affects the spacing between words and sometimes where the line breaks.
It is my assumption that unstyled span tags shouldn't change text rendering and that two identical divs with the same content and styling except for adding spans should render identically. This doesn't appear to be the case and can be seen in the image below. Two divs are overlaid to show the rendering discrepancy, where the div with the red text in front has spans in blue and the div with the black text behind does not.
This may seem very minor but in some cases this difference is affecting where the line is breaking (although very rare and hard to reproduce). This can be seen in the next image.
I've setup a JSBin to demonstrate the difference when adding span tags. Adjust the width of the HTML output panel slowly and you should see discrepancies in the rendering of the two divs. Move the width to 658px to see the line breaking issue.
https://jsbin.com/qajekub/edit?html,css,output
So my question is, why is there an alignment discrepancy between two identical divs but one has spans? Is there something I'm missing? A CSS property or default styling that would be causing this?
This happens in Chrome 55 on macOS. It's not occurring in Firefox or Safari as far as I can tell and I'm unable to test on other operating systems.
I'm trying to convert some divs to buttons. They work fine on ie and chrome but on firefox even though I set the images and divs to the same size the images are still bigger than the divs. The images also don't touch the left border of the div as they should even though they do in the other browsers. I have tried setting a browser specif css rule but it doesn't appear to have any affect. Does any one know how i can solve this? By the way I have only converted the first div to a button at the moment.
The page that I'm having a problem with is hear (the button is near the bottom of the page and is titled "Fears/phobias"):
http://www.swanleyhypnotherapist.co.uk/
button.graphic {
padding: 0,
margin: 0,
boder: 0
}
for a start, you seriously need to post code...
I want two side by side boxes in my page for placing the comment.One will show previous comments and should be disabled.other is for current users giving comments.I have done this using two divs and placing them side by side.
one contains a textarea for placing the new comments.I am having trouble with the size of textbox and the scrollbar
on the textarea,its appearing differently in ie6 and mozilla.Any solutions??
The best solution to this problem would be having slightly alternate versions of your style sheet for IE. IE displays scroll bars on TEXTAREAs differently than that of Firefox, which is probably throwing your DIVs out. (The IE TEXTAREAs are slightly wider)
You could also add some extra spacing around the TEXTAREAs to prevent your DIVs from going out of alignment.
Also, do you have a container DIV?
Regards
Luke
I have an extremely strange problem in IE that I can't seem to track down. I have two boxes, both floated left, with a margin-left on the right box to give some spacing between the two. In Firefox (of course), it all displays correctly, but in IE when the page is first loaded, the boxes have no separation (no margin).
Here's the crazy part. If ANY CSS changes on the page at all, the box magically jumps to the correct position. And when I say any, I mean any. I modified the final font name of 3 in the font-family list of the body tag, and the box shifted to the correct position (this wasn't a change that would even modify the look of anything on the page).
I could post my HTML and CSS on the page, but it's fairly routine. I just wondered if anyone had come across or heard of this problem in the past? Incidentally, IE8 seems to render it fine.
Thanks.
Follow-Up:
So I was able to at least patch the problem by floating the box on the right to the right, and removing its margin-left property. Because my container div is just wide enough to accommodate the two boxes, this works for my situation, but it wouldn't be nearly as nice if the two boxes weren't contained so tightly in their container div.
Older versions of IE can be pretty buggy about how they handle floats. Try defining a width on your floated elements. This will help make the layout more explicit (so harder for IE to misunderstand) and trigger hasLayout if you haven't already (a weird internal IE property that causes a lot of layout bugs).