Please consider this snippet: http://fruple.com/kemper/test/categorie.html
Firefox screenshot:
Chrome screenshot
why are some of the right borders not showing up?
Try changing the display property for the li elements from inline to inline-block.
It's possibly related to this bug: http://code.google.com/p/chromium/issues/detail?id=58105
You should avoid triggering quirks mode in any case and add a DOCTYPE.
Related
I am using overflow:scroll; in my css to have scrollbars always "on" for an iFrame window, but it works only for Firefox! Any idea about Chrome, Safari and Opera? Thank you in advance!
I have a similar issue with webkit (safari and chrome) based browsers; seems that they value higher the css styles on the html over the actual iframe style itself. Can´t find much documentation on this, but I am sure it is the origin of the problem.
http://trafficonweb.com/iframe-moves.png the iframe moves to left when pulled right on its main content (under the navigation menu). Only on webkit.
This happens when scaling down the iframe with the scale (transform) css property.
This is not the perfect answer but at least a hint; will continue research and post afterwards.
And looking for others to contribute to this issue. Thanks.
I'm designing a navigation bar that HAS to run in IE Quirks mode (i.e. it can't have a DOCTYPE tag at the top). It also needs to work in Firefox and Safari (quirks mode for safari as well). My sample right now works in Safari and Firefox. (View source to see everything, css is in-lined).
My problem is that the border-right doesn't show up in IE! Any ideas?
Here is the working sample
Thanks!
I'm not suggesting this is the correct solution but if you remove the background color of rgb(255,255,255) of the #top-nav a style the bar becomes visible in IE - which I guess suggests the hyperlink (in IE's eyes) is overlapping the div border you have defined?
For nav use ul tag.
http://jsfiddle.net/bdVZ6/2/
The page I am working on can be found here.
In IE7, everything in the main content area is being pushed to the left...
Can someone check it out and let me know what's up?
Here is a screenshot:
I don't have IE7 on this computer, but it looks like you have float:left applied to your main div
#body_container {
float: left; // try removing this
}
EDIT
Had another look at the source and the page appears to be rendering in quirks mode in IE7.
Here are few ways to fix that:
make sure all your code is valid
make sure you are using the right doctype
Details here: Forcing IE7 into standards rendering mode (not quirks)
If this is a problem only in IE7, you might wanna try IE7 compatibility mode
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've been trying to modify the following menu to make it look indentical in IE, Firefox, and Safari/Chrome but I can't seem to get it to look right in Safari/Chrome.
Could anyone tell me how to fix it? When viewed in Safari or Chrome, notice that the menu is ignoring the padding.
View flickr-like menu
Thanks in advance!
Padding on elements that are or are displayed as inline. http://www.maxdesign.com.au/presentation/inline/
Try making the inline elements inline-block in order to get the padding working properly.