I'm having a cross-browser compatibility issue with Chrome vs FF.
Here is the web inspected from Chrome, you'll see that the box for the DIV #content is overlapping the box for the H3.
In FF, the #content DIV does not overlap:
The issue is the difference in overlap is causing the background behind the Doctors' heads (the light blue canvas texture) which is relatively positioned DIV to be off. In Chrome is positioned well, in FF the green "view all button" is beyond the background.
Link to the site: http://terminalcitymarketing.com/drafts/highgate/
It looks to me as if they are both in the same place, just chrome is showing you the region differently in the inspector to FF. I don't think its an issue at all.
I have a feeling that if you fix some of your Validation Errors, the problem might fix itself. Of the ones listed, the immediate red-flags that I noticed were that you have a bunch of these errors:
Error: Duplicate ID
Check #wrapper, #mainBox, etc.
on line 72 of the css, i took out the
p{
margin-bottom:12px;
}
and it fixed the positioning of the green view all button. You will then have to reapply the margins more specifically to the elements you want them on
Related
Consider the following example : https://codepen.io/anon/pen/OOrMLm
Each white block can be clicked, which reveals a small red popup in which I need the users to make some choices.
On Firefox, everything seems to work fine (if I use display:inline-block; on the white elements), but on Chrome and Safari the behaviors are kinda weird.
The two bugs are the following :
displaying the red popups in position:absolute that are located on the right hand side seems to affect the flow in the columns (the blue blocks expand), while it does not in Firefox (which is what I want)
clicking inside a red popup that is overlapping onto the 2nd blue div will not be caught as a click inside the popup (it seems like the popup is "below" the 2nd blue div somehow).
I played around with forcing the z-index and transform: translateZ() but with no luck. It seems like display: flow-root; helps a bit on Chrome, but I could not get it to work fully.
Any idea on how to fix this in Chrome and Safari ?
I have a webite where i position some events in a calendar with position relative. But the problem is that in Chrome the layout it pixel perfect, but in firefox and IE it does not work at all.
The events get positon about 10px wrong downwards. And my tooltip that also uses relative positoning gets stuck at its "orginial" position.
I have a live demo at: http://jonasolaussen.se/dev3/?page_id=6
You can see the black box positions different in Chrome and Firefox. And when you click on a tooltip it turns up at the date in Chrome but in the bottom left corner in Firefox.
I cannot understand why!?
Please! Help Me!
One way of doing this would be to use css hack so that you can style it dependant on the browser.
Here is a demo:
#media screen and (min--moz-device-pixel-ratio:0) {
.firefox {
background: red;
}
}
Fiddle example:
http://jsfiddle.net/Hive7/3HYmZ/1/
Here are my references:
http://browserhacks.com/
http://css-tricks.com/snippets/css/browser-specific-hacks/
I know this is an old post and because of your lack of detail I can't be sure, but quite often the reason for this is that different browsers will render their box models differently when widths, padding, margins etc are not explicitly set. setting widths for the elements you wish to position around will usually solve this problem.
I have this small testcase: http://jsfiddle.net/sV8js/
You can see that in Chrome (tested on win7 11.0.696.68) the first 2 links right border is "cut off" and is not shown. FF and IE 7/8/9 seem to show it OK.
Browsershots: http://browsershots.org/http://top3skills.com/1.html
Also "buggy" on Safari (so it's webkit related?)
Anyone knows what's the problem with this approach or how to solve this?
(or if I should report a bug to chrome) Any workaround that doesn't affect other browsers?
Also, my testcase is different from Right border not displaying on google chrome but maybe it's the same bug?
Updated: I don't want to use inline-block as IE7 doesn't support it and I'm finding this bug because I'm removing the inline-block I previously had there :) Also this is dynamic so it's not easy to add after each link because some links can break to a new line, others don't... so I'm trying first to get the "right way" and then resort to more "tricky" ways.
You have set the containing DIV at a fixed width of 250px. This is cutting off the edges. Also, you should add display:inline-block; to your CSS link class. This will make your link a block element while keeping it inline. It will also apply the padding you have asigned properly.
See updated link here http://jsfiddle.net/sV8js/12/
Dan
Try giving those links a display: inline-block or display: block property, as links are inline elements.
you need to add display: block to .referencesSkills
I'm having an issue with my navigation, the first list item appears to have a huge gap on the right.
I have a list of links inside an UL each have their own class so I could set a background icon to them. The first link has a background to give it the rounded effect.
I used relative to push to left so it would have that rounded effect for the hover and active states on the homepage and hover for when i'm on other pages.
Now it all works fine in new browsers apart from IE7 and probably older versions.
I've put it on JSFiddle to make it easier to view.
http://jsfiddle.net/datastream/Gta3h/2/
and http://eminemforum.net/navtest/nav2.html
Thanks
Live Demo (edit)
I got rid of <div id="navHold">.
I removed right: 40px from #topNav2 .home-icon.
I changed the width of #Navigation-Holder from 750px to 830px to make it appear the same width it was before I changed anything.
I've tested that this looks consistent in: IE7, IE8, Firefox, Chrome.
My site http://bit.ly/aokA4I has a search bar on the top right.
You can see it on IE7, FF, Chrome, Safari -- but not on IE8. It gets chopped off.
BTW if you happen to see it on IE8 just refresh the page and it will chop.
If I run IE8 on compatibility mode the search bar becomes visible.
Any ideas how to solve this?
Thanks!!
It's because IE8 is interpreting the nature of its parent container: header_widget_1. The sizing or formatting of this element is causing the <li> element to be clipped prematurely. If you have Google Chrome, you can right click the sidebar element you're asking about and choose "Inspect Element". This will show you what the elements are doing.
Edit: You also have a sizable horizontal scrollbar in IE7.
Edit 2:
You might try altering the height of your #header element to be the height you want. Since height is not expressed in the sidebar class, this may also be contributing to the problem.