Ok I have a really weird CSS issue that I was wondering could anyone suggest an explanation for.
Steps to reproduce:
Open Chrome and navigate to http://www.mcwhinneys.com/media
The gallery of photos should be out of alignment, off to the right by about 50-70px
Open the Developer console in chrome
Expected Result:
i do this to inspect the css expecting to see why the images are off to the side, fixing the css and moving on.
Actual Results:
The gallery of images pops into alignment when the developer tools open.
Anyone know why this might happen? It seems as if the css is fine when I inspect it but it definitely doesn't render correctly until the console has been opened.
Well, the actual cause for the wrong layout is the combination of text-align: center on your ngg-gallery-thumbnail-box (I'll call that box from now on) with position: absolute + display: inline-block on the inner ngg-gallery-thumbnail (I'll call that thumb).
It goes like this:
We apply text-align: center to box. This will cause it to center its inline children. It does this (conceptually) by placing each child's left edge at the current "text cursor" position (which, importantly, starts out at box's center), then moving it towards the left to "recenter" it. This is - also importantly - box's "job".
We declare the thumb as inline-block. This will (among other things) cause it to follow text-align of its parent, meaning that - at this point in time - it's centered.
We then declare thumb position: absolute. This will take it out of the flow, positioning its left edge at the same point where it originally would be - because we're not specifying left/right.
The "naive" interpretation of this would be that it's still at the center of box, and everything would be fine, but we get a "side effect"...
Because we took thumb out of the flow, box no longer has any inline content, meaning its text cursor is at the center, and it doesn't need to center anything. Its "job" is done.
But since thumb is inline-block, it's original position is still based on box's text cursor position (the center), meaning that when we make it position: absolute, its left edge will be placed at that center. It's not horizontally centered inside box, because from box's point of view, there are no children in its flow that need centering.
This is halfways to a chicken and egg problem, so Chrome seems to get confused when it does a re-render of the page for the console.
This explanation may also be a bit confused, but you can see the result here - and even in this simple example, Chrome's console will do a reflow when you try to inspect it. In this example it even seems to enough to resize the window without opening the console (v17.0.963.56):
http://jsfiddle.net/h66Gj/
As far as I'm aware, the way it renders it first, is the way it's "meant to be" (last I checked, the W3C recommendations were vague about it, but at least Firefox agrees with the pre-inspect render).
There are many ways to get around it, my favorite being to only use text-align: center to center... text, and try to use e.g. margin: auto to center other content.
It's really hard to tell, but it looks like it might be something to do with the interaction between the styling of the elements with class ngg-gallery-thumbnail. I would try tweaking/simplifying that. Do you need the display:inline-block setting there, for example?
Related
I've been looking at this small issue for a while and I can't seem to fix it. It's an firefox only bug it's fine in IE Chrome etc.
This website I made for a client shows the issue. On the start of the page you see 2 wheel PNG images Three of these images are there, you can switch the z-index by clicking the round circles on the bottom of the image.
As you see the Black colour is slightly more down, I can't seem to wrap my head around the issue since the line height is 0 and the way the black image is positioned is the same as the grey one. They are slightly downsized due to a max-size: 100%, but resizing them to the proper (1000px) doens't seem to help either, (did this locally).
If you open the pictures in photoshop or w/e they're exactly aligned.
Anyone have any idea why it goes wrong on Firefox only?
--> example
Removed the example since it's a website.
Very weird issue indeed. The only thing way I could get it to go away was to absolutely position the wheels. this would require you to set a height on #infographic and take off the margin-top:-100%;. Depending on how you use the #infographic container this solution might not be ideal for you, but at least something to consider to help solve your issue.
It's because of the whitespace between the elements. Unfortunately, some browsers observe it and thus some space is shown although it shouldn't. You can use this workaround:
Generally work with rem instead of em, you need it for this workaround to work easier. First you have to set the font-size of .infographic to zero. Every element inside your .infographic will now become a font-size of zero because you're using em. That's the reason why you should now change to rem, at least for the elements inside .infographic.
Now you're done.
I have encountered a strange bug using my OpenCart website in Chrome. The product images are not showing up but I see the white area where they should come.
If a product doesn't have an image it's aligned to the left but in this case I can see the white area where the picture normally is.
And here's the crazy part, if I click on inspect element, suddenly the image appears.
Some css code
.product-list .image {
float: left;
margin-right: 10px;
overflow: auto;
}
In the CSS you need to set the width and height attributes.
That is weird. Regardless, things to check:
Z-index: The outer box that surrounds the image might be "above" the image itself. Add z-index to the image with a value of 9999 to check
Position: if it's parent container or god knows what else has a weird position it could be affecting where the child element, in this case an image is appearing.
Disable JS - Javascript might be causing an issue here, try disabling it to check.
Also, when you use chrome dev tools, you are technically "hovering" on the image. And you say it suddenly appears. So I'd take a look at your :hover rules as they apply to images. A lot of sites will use a sprite technique that shows one image in normal state, and then shift the background to a different part of the same image on hover. Your normal state could be empty and the hover then moves the bkgd position to the image you want.
Let me know how this turns out.
More scenarios to replicate this issue
1. Close inspect if not already opened.
2. Resize inspect if already opened.
3. Resize browser window.
Just to follow up on this issue, Mary's answer is the correct one, but for our circumstances it was important not to set a width and height in order to maintain responsiveness. But apparently setting width and height to auto works just as well, even though it makes no difference in appearance.
So, since opening the Web Inspector resizes the page in some cases, you should look into:
resize handlers on JavaScript side that might be causing your images to show up
media queries that satisfy certain width and only show images then on CSS side
Picture element having media queries that
aren‘t covering the width you are viewing this with.
For me this was the Picture element having a gap in its media attribute definitions (<source media=(min-width: 1824px)">).
Noormally you can select text with left click function
I work on this Site and am not able to select text in the top areas of the page.
What is wrong with the code?
HTML: link
CSS: link
The footer is on top of the text. Just remove position:absolute form #footer
EDIT:
I can't replicate your issues because my solution is working. Here you can see it
I right clicked the offending text in firefox and used the "inspect element" option, which helpfully tells me what element is sitting directly below the mouse.
Your #footer div is sitting ontop of the text, due to having position:absolute; set with no actual positioning.
If you remove the position:absolute; from #footer and reposition it properly, your problem should go away.
Related note:
I notice that the way you're handling positioning content on the page is a bit weird - you're using position:absolute for nearly everything?
It's outside of the scope of this answer but seriously consider moving away from this -- it's causing this problem and will probably give you a headache in future. That thing you're doing where the contents of your footer have massive margins to push them further down the page past the content? That's an unstable solution and a good sign that your layout has gone wrong somewhere.
This is a fairly simple layout and can be handled fine by basic flow control like floats...
The footer div blocks the text so only the upper part is unselectable. You might want to change your layout or structure of your html and css to avoid blocking the text.
Take a look at this:
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).
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.