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.
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've been working on a few sites, and for some reason, a blank bar keeps showing up at the bottom. I've tried inspecting the elements, and I get nothing that makes any sense. html and body elements are set for margin: 0 and padding: 0.
Any ideas on how to remove the blank bar at the bottom?
Thank you!
Remove the from your clearfixing divs. Even with the height:0, the space character is taking up space. One you remove it, the div will collapse properly.
Probably way off here and I'm not sure but one of the plugins you are using is placing a smiley at the bottom of the page. I think it is popular posts that does this.
Have your tried disabling the plugins one by one to see if this goes?
The problem is a footer on a web page that seem to not follow the correct flow like it does in FireFox. The problem feels like it is an Internet Explorer related bug, because the layout will "magically" snap into place when i move the mouse over the link "Legg til i handlelisten". On pages where the "description" part of the page is longer then the left column, the footer displays correctly. From what I can gather the bug is only active in IE8 when its running in "IE8 Compatibility Mode" or "IE7 mode". I am not able to recreate the bug when running IE6.
I was wondering if anyone is able to find a solution to this bug, maybe some CSS property I can set or a tag that needs modification.
These two images show the error and what its supposed to look like:
http://tinyurl.com/layout-error
http://tinyurl.com/layout-fixed
The page referred to is here: http://tinyurl.com/yb9h34d
Edit: Clear: both; doesnt seem to do anything to solve the problem.
Yes... it looks like a float-caused problem.
Try adding this line into your HTML, just before the footer:
<div style="clear: both;"></div>
I think it is expecting an item that clears the floats.
Try floating the div.container or remove it, as it is useless and a mild case of divitis.
In older browsers, the float property in CSS removes the height from the element. Therefore an element which is floated to the left or right which would normally have a height of say 100px would now have a height of 0px and whatever content is below it would move up to fill that space where the content is supposed to be. Most browsers have fixed that error by now, but it still reappears in even the modern browsers. There is a very simple fix that you can add to your footer container in the CSS:
clear: both;
This will cause the element to clear any boxes that may be floating around and start fresh on its own line, or should anyways. It never hurts to try.
Read more about the clear property: http://www.w3schools.com/Css/pr_class_clear.asp
What happens exactly is that the left column gets shorter by a line when you hover the first link in the leggtilihandleliste div, and it gets longer by a line again when you hover the second link. It's only the left column div that is affected, not the link, the list containing the links or the div containing the list.
I don't know exactly why this is happening, but if you specify a height for the div containing the links, it stops happening (eventhough it's not that div that changes size).
Why does DIV#footer have display:none on it?
Anyway, if you float: left on .footerWithRightAndLeft you should be ok.
You can inspect things in IE if you hit F12, in case you didnt know. It's not as good as firebug, but it's something.