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.
Related
I have this bug that let some text appear a few pixels outside a div on the right side. The strange thing is that it only happens in Safari. I've never seen it before and it's just regular HTML/CSS what I have used. I've looked around on the internet but I can't find the exact same problem - only some problems with content floating out at the bottom, because of a fixed height.
In the next 2 screenshots you'll see the same page in Safari and Chrome. The div has a overlow:hidden to hide a possible third line of text. I added fixed widths when trying to solve the problem. I also tried to add/remove some margins, but I can't get rid of the extra pixels.
Here is a full link to this page. It happens in this section of the website only. In other sections - like this one - where I use the same format with little differences, but the same CSS idea (fixed width with overflow:hidden), there is no bug in Safari.
I hope you have some ideas!
Removing position:absolute from
div#branch-search-results-block div.search-result-right div.search-result-drvl-info-bottom .spacer::after
css style solves the issue. But I am not sure what else is affected by it. Please try this.
I've created a webpage that has several divs containing text. The right hand side of the page contains one large div made up of several paragraphs using the p tags. At the bottom of this large div after the closing p tag i have left some space so that the writing does not go right to the bottom of the webpage.
This space varies between browsers. It seems to display exactly how it shows in Dreamweaver in IE9 and Safari but when previewing in Firefox it seems to cut off some of the text at the bottom. This can be fixed by increasing the height of that div but then this also increases the space more in Safari and IE.
I've come to the conclusion that the spacing between each paragraph down the page is larger in Firefox than IE9 or Safari for some reason which is why the last bit of text is getting cut off in Firefox.
Has anyone else had this problem?
Here is link to my webpage: See the difference in the paragraph spacing in firefox compared to IE/Safari, most noticable at the bottom as it cuts off the writing:
www.athatravel.com/NewSite21/srilanka_highlights.html
Do you tried to set a fixed margin-bottom to your -Element... Maybe that is a solution for your issue.
Thanks Eray the reset.css file worked a treat. Thanks for everyones help and advice.I wasnt sure how to accept your's as the accepted answer as you posted it as a comment rather than an answer.
I'm setting up a new website/landing page. If you go to the right column at the bottom (pictures) you will see <li>s with pictures in containers. Everything works great except in IE8 and IE9, extra blank picture containers are generated between the 2nd and 3rd pictures and between the 3rd and 4th pictures. It's as if there should be a thumbnail there but there's nothing in the container.
http://mattmillermusic.com.previewdns.com
Perhaps it's just a case of code blindess since I've been at my computer non stop for a while but I find it odd that these empty LI's don't show up in the other browsers (or in IE7).
Thanks for the help!
Its because of an error in your markup. You do not have closing tags for some of the elements.
In the picture, as you can see (in red). The browser compensates by auto-inserting them, in the process creating redundant elements.
As you can see, you do not have closing tags for <a> elements form your second <li> onwards.
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).