I'm having with some margin or padding issues with IE8 that I'm hoping someone here will be able to help me out. Below is a screenshot of the site in IE7 with the correct spacing (it looks pretty much the same in FF and Chrome/Safari as well).
alt text http://img80.imageshack.us/img80/9376/screenshot20100721at749.png
Next is the same page in IE8 with a whole bunch of extra spacing between the created by line and description.
alt text http://img687.imageshack.us/img687/9376/screenshot20100721at749.png
You can take a look at the live site here. I've messed around with the padding and margins without any luck, I have no idea where the extra space is coming from. Inspecting the element using the IE developer tools shows an offset that doesn't add up to me, but I'm not sure why this would be happening.
Any help at all would be greatly appreciated.
The problem is with the SPAN at the end of <span style="padding-left: 10px">1 Voter<span>. It should be a closing tag. Change this code to:
<span style="padding-left: 10px">1 Voter</span>
This will fix your problem.
Remove the padding from the div containing The best places for sharing a meal with someone special. and replace the div with a p. See what happens. Adjacent vertical margins should collapse properly.
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 have the typical image with logos and i am styling it as an <ul> when each <ul li a> will have text-indent to hide the anchor and manual width so it's position fits to the one in the footer background image,
works great in firefox and chrome but for some reason it looks horrible in Ie,
does anyone know why??
Posted an example of my problem http://jsfiddle.net/r5Pda/1/
It does not look exactly as in my project but i guess if we solve it here i will be able to,
any clue here?
thanks
I think it is known IE bug: absolutely positioned floating element displays oddly sometimes. Try to fix it according to these experiments.
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.
I have been working on a site for a client and I am about to wrap it up.. but unfortunately IE6 is being a pain in the buttocks.
My main problems are on this page:
http://seaport.bythepixel.com/#storage
The list items dont have bullets
The spacing below the floated items are not being cleared correctly. I applied "clear:both" to my h2 tags and it is clearing.. but the spacing bellow the floated items doesnt seem right. If you compare any other browse with IE6 you will see the spacing issue I am speaking of.
maybe this is just an IEtester problem, but the background image I have applied to "#full" stops and starts randomly. You can see this on the storage page and the floor plans page. I am referring to the gray to white gradient that separates the left navigation column with the right content column.
Any help as always is greatly appreciated!
1) and 3) are clearly the hasLayout bugs. You need to give the elements in question a "layout". Start with giving the #full a position: relative; (validates) or a zoom: 1; (doesn't validate).
2) is likely caused by odd use of overflow: hidden; here and there. Try removing it all and see if that helps.
When you set an overflow (hidden if possible) to all floated elements there might already be a lot of problems solved.
maybe this is just an IEtester
problem, but the background image I
have applied to "#full" stops and
starts randomly.
I can confirm i see this on a machine with IE6 only installed.