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.
Related
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'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 am building a custom rich text editor. And in its current use, it inserts itself- a div- before a text area that is nested in a div.
This container div is supposed to start out with a top margin that lowers it down on the page, and then the text editor div then sits inline with that.
The problem I am having is, in IE 9, when the editor div gains focus it immediately shifts itself so that its margin-top is 0px. This therefore occurs on the page loading, but also if the user clicks anywhere in the content editable div.
The caret remains at the correct location, but the editor div plus its container have scrolled upward so the editor div has no margin.
This works correctly in IE 8 for some reason.
Without seeing the code, I'm not sure, but have you tried it in quirks mode? There has probably been a fix to make the code work more along standards that doesn't work with IE9. You can either use the built in tools in IE9 to try to identify the problem, or change the DTD and see what happens.
W3 DTD List
I can't figure out WHY there is a mysterious space appearing on the live version of my site but NOT on my local version.
Visit this site.
Notice there's a gap above the div containing "imadake is an izakaya" which reveals the blue/white stripes of the background. On my local version of the site (with all the same files!) there is not gap.
I've tried multiple browsers and it consistently appears online, but not locally.
Help!
There's a <p></p> above that title you recall. Check it out , maybe you're doing some kind of loop and the first iteration places an empty paragraph.
There's a paragraph opening and closing at the top of the entry-content div with nothing in it. Delete this and that should sort it.
Your divs may not be floating. Try placing a float left on each and you should see the strange gap go away.
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).