I recently just created a website for a company, http://visionaryminds.com/ , For the most part everything is good except for a few browser inconsistencies.
The reason I am posting is an inconstancy I noticed between Chrome and Firefox (IE also had this problem but I used conditional statements to fix them not realizing the problem bled into Firefox)
http://www.visionaryminds.com
When you open the page you will notice a section in the dark gray rounded container that says "Welcome!". In chrome, it is placed where it should be, creating a nice even margin around the entire container. However in Firefox and IE the margin is triple the size.
It appears that despite being in it's own container it's being pushed by the header container outside of it. Anyone have any ideas? I have been at this for days, playing with positioning and z-index with little luck.
Thanks to all who reply,
Spencer
Welcome to the world of negative margins.
In .content_container remove margin-top: -50px and use top: -50px instead.
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.
See this link:
http://lsp2.tpdserver2.co.uk/test.htm
Displays fine in IE/Chrome but in Firefox (6.0.1) there is a 1px border around the blue header.
If I add a background color to the #header-content, the 1px white border dissapears. This seems crazy.
I cannot work out what is going on with this and the related page I am trying to build depends on not having a background colour for the 2nd fixed container.
Here is an image of the problem I see:
Link to Image
It is layout rendering bug in Firefox. This bug was already reported and as I know it is fixed in next release. Only solution I know is to use opacity:0.9999999. It would render correctly as opacity:1, but fix this annoying bug.
Try #header { opacity:0.9999999; }
Bugzilla : Bug 677095
EDIT: Firefox 8 is not affected with this bug and setting opacity to 0.9999999 will result in weird border around the element, so I prefer not to use it anymore
Browsers add different defaults if you don't "reset" the CSS, that may be what is going on here.
If the z-index value of your #header-content is not greater than 10, then the bug is fixed. If it's 11 or greater then I can see the mysterious gap too.
Really weird.
I cannot reproduce in FF 6.0.1; however, you can probably work around this with
background-color: transparent;
on the #header-content, or white if you don't want it being see through.
This should still give the fix you mentioned while remaining a blank div as required.
Update:
Ok thanks for the screenshot, still cannot reproduce, this time with ff 6.0.2 - I had a look around after noticing I can reproduce a similar issue on different zoom levels.
Blog post explaining the zoom border bug, which includes this test page. I am not sure if this is involved, seems similar but not the same thing, zoom bug will take off a slice of the whole page including the border of #header-content.
As for your comments around transparent, you can use it and still supply a background image, does this not work for you?
I'm not sure if this is a bug in Google Chrome or if this is wanted, but it really annoys me: If I got something like
<body><div style="margin-bottom: 50px;">much content</div></body>
there is no margin shown by Chrome. The div just ends at the bottom browser edge. Literally, any other browser renders this correctly.
Wrap your whole site (or just the area that has the margin you want to capture) in a
<div style="overflow:auto;"></div>
If setting padding does not appeal to you, try the above. I didn't want to set padding, because a margin on the bottom of boxes is my standard way of making room for the next box when data is dynamic and I don't know whether there will be one.
Margins will not "bleed through" a box with overflow specified, so this fixes the problem in Chrome by allowing that last box to have margin inside the new overflow:auto div.
This change is inconsequential to the other browsers who were blocking that margin bleed anyway. I tested in IE 8 and up for regressions on that side and found none.
add a padding-bottom to the element containing your div, even if it's the body element.
This works in all browsers, so you will have to remove the bottom margin from the div.
On Google Chrome {padding-bottom: XXpx;} doesn't work, but {padding-bottom: XXem;} does.
Note the first uses pixels and second ems.
The css padding and margin directives work fine in IE, but not in Chrome. Chrome just ignores them, if they are placed in a .css file. To resolve this problem, put all the padding and margin instructions in a separate file within the <STYLE> tags, and then include it with the help of <?php include ('margins.php');?>. or <!--#include virtual="margins.php"--> into all of your pages, because these directives works in Chrome perfectly if they contained on the page.
I have been looking for a solution to an IE8 issue regarding padding on a div with overflow: auto. When the content is scrollable IE8 doesn't seem to honour the bottom padding. An example of the issue can be seen here http://jsfiddle.net/Gbp5U/ (issue only appears in IE8)
In IE8 when the content is scrolled to the bottom there is a bottom-padding of what appears to be 0px. All other browsers, that I have tested, show the bottom padding. The developer tool in IE8 reports the bottom-padding as 20px but to me that is clearly not the case.
Has anyone else come across this issue and found a solution. The only workaround I have for the moment is to force IE8 to compatibility mode which I would rather not do.
A suggested solution elsewhere was to place the div content within its own div with the appropriate padding as seen here: http://jsfiddle.net/Gbp5U/19/
I'm not a fan of it but I guess it works......
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.