I'm currently working on a schoolproject and I've been trying out some css-transitions. I'm using the transition property to light up the nav-links in the nav but when the page loads the color of the font and the size change size and color before they quickly transition into the styles I've specified in the css. Do you have any clue what could've caused this? I'm having the same issue with some of the other elements on the page too.
I've tried using the transition on the color property only transition:color,0.5s; but then the text turns blue/purpelish for some reason. I've also tried the webkit-prefix but that didn't really help. If I take away the transitions the problem stops.
Help would be greatly appreciated!
Here's the css for the nav
.main-head a{
text-decoration: none;
font-weight:bold;
font-size:3em;
margin:0.5em;
color:#636363;
transition:0.5s;
}
.main-head a:hover {
transition:0.5s;
color:#eee;
/*border-bottom:3px solid #eee;
border-top:3px solid #eee;*/
}
And here the page if you want to check it out for yourselves. Pay attention at the top when loading the page and you'll notice the weirdness.
http://albmar13.ddi.hh.se/Laboration%201/index.php
Working on a new site design in asp.net with master pages. Header of the page is a 35px tall "menu bar" which contains an asp menu control rendered as an unordered list.
The selected menu item is styled with a differenct colored background and 2px border around the left top and right sides. The bottom of the selected menu item should line up with the bottom of the menu bar so the selected "tab" looks as if it flows into the content beneath. Looks fine in firefox and IE but in chrome the "tab" seems to be 1 pixel higher than the bottom of the menu bar.
Just wondering if there is some sort of bug I dont know about.
I realize that you will most likely need code to help with this problem so ill post up the css as soon as possible.
EDIT:
here is the css for the menu...
div.hideSkiplink
{
width:40%;
float:right;
height:35px;
}
div.menu
{
padding: 0px 0px 0px 0px;
display:inline;
}
div.menu ul
{
list-style: none;
}
div.menu ul li
{
margin:0px 4px 0px 0px;
}
div.menu ul li a, div.menu ul li a:visited
{
color: #ffffff;
display: block;
margin-top:0px;
line-height: 17px;
padding: 1px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
color: #ffffff;
text-decoration: none;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: none;
border-left: 1px solid #fff;
}
div.menu ul li a:active
{
background:#ffffff !important;
border-top:2px solid #a10000;
border-right:2px solid #a10000;
border-bottom: none;
border-left:2px solid #a10000;
color: #000000 !important;
font-weight:bold;
}
div.menu ul a.selected
{
color: #000000 !important;
font-weight:bold;
}
div.menu ul li.selected
{
background:#ffffff !important;
border-top:2px solid #a10000;
border-right:2px solid #a10000;
border-bottom: none;
border-left:2px solid #a10000;
}
div.menu ul li.selected a:hover
{
border: none;
}
The selected classes are added to the li and a elements via jquery...
Here is a screenshot of the problem...
The chrome example is on the top and u can see 1px of red border below the tab.
On the bottom is the firefox image where everything looks OK.
EDIT:
After playing around with this a bit more, I have discovered that it is actually the "header" div itself that is growing by 1px in chrome... This seems very strange to me.
None of these answers solve the problem.
Set:
line-height: 1;
padding-top: 2px;
Because webkit & mozilla rendering engines implement line height differently do not use this it to manipulate measurement for single line items.
For items like menus, buttons and especially really small notification bubbles, reset the line-height to normal and use padding or margins to make them behave the same.
Here's a JSFiddle illustrating this issue:
http://jsfiddle.net/mahalie/BSMZe/6/
I just had this same problem, and I solved it by explicitly setting the line height and font size in <li> element that contains the <a> elements that are the tab links. Hope this helps someone in the future.
(edited html links)
This is a common issue I run into on some of my sites... when it's IE having the pixel difference, I can usually just add a pixel of margin/padding in my IE stylesheet. But when it's Safari/FireFox/Chrome, I usually just live with the pixel and make the FireFox crowd happy (for now—until Webkit rules the web!), even though it looks a little strange in the opposite browser.
However, you might also want to check out the line-height values (or add a value, if there isn't one already) on the containing ul or div element. Tinkering with that allowed me to get the padding exactly the same in FireFox, Chrome and IE.
Here is the solution that I found in this page :
button::-moz-focus-inner {
border: 0;
padding: 0;
}
I have been fighting with this problem for a little while now, and almost gave up on the pixel. However it's come to me in one of those eurika moments: if you get the tab lined up perfectly in Chrome (which leaves an overlap in Firefox), set the ul height to the height of the li (including any padding), you can remove the offending pixels in Firefox by setting overflow to hidden on the ul.
Hope this helps someone out there!
I had the same problem with my main tabs displaying them in Chrome, they were one pixel off in height and there for leaving an ugly slit between the tabs and the white background of the mainframe.
I solved the problem by giving the tab div an upper margin with a floated value. First tried margin-top:0.1px nothing then 0.2 etc. until with an upper margin of 0.5 everything displayed fine over all the major browsers.
I had the exact same issue, turns out chrome had zoom set to 110% and that was breaking the menu. I noticed it when I fired up chrome on another computer and it looked fine.
I had a similar issue and it was due to using ems for font sizes, margins and padding. The browsers were rounding the ems differently and causing intermittent off-by-1px issues all over the site depending on the length of content. Once I changed everything to pixel measurements my problems went away.
Hope this helps!
I've come across this problem in relation to text with transparent backgrounds.
I couldn't get any of the above solutions to work consistently so I ended up using a webkit hack to give those browsers a different line-height. Like so:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.your-class {
line-height:20px;
}
}
Eww, hacky! I try to avoid CSS hacks but I just couldn't find another way. I hope that helps someone.
I managed to solve this issue with a web font I was working with by setting the following:
.some-class {
display: inline-table;
vertical-align: middle;
}
Granted it's a bit hacky but does the job. It does mean though you will have target styles specifically for Internet Explorer
try using display:block with the a element"
eg...
<li>Link</li>
css:
li{line-height:20px;}/*example only*/
li a{display:block;}
I guess this is the only way , use different styles for different browsers the problematic sections
/* FOR MOZILLA */
#-moz-document url-prefix() {
.selector {
color:lime;
}
}
/* FOR CHROME */
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome, if Chrome rule needed */
.container {
margin-top:100px;
}
/* Safari 5+ ONLY */
::i-block-chrome, .container {
margin-top:0px;
}``
if line-height is used for vertically aligning text in a container (which it shouldn't), then consistent behaviour across browsers can be enforced like this:
line-height: 75px
height: 75px
overflow: hidden
you can also make different css for mozila:
-moz-height:2em;
one can also use:
#-moz-document url-prefix{
// your css
}
It's important to realize that web pages will always render differently in different browsers. Acheiving pixel perfection is futile, and nowadays I try to explain to my clients what kind of cost is involved to make every browser render the site exactly alike. More often now, they understand that IE6 and FF4 won't ever render any page the same way. We must try to make our clients understand and embrace the dynamics of the web.
Progressive enhancement and graceful degradation. Peace.
I might be a beginner in CSS, but I found the same problem in W3Cschools.com, in one of their examples.
http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav
this example is about image sprites. You can see in this example, in Chrome, the home icon and prev icon have the 1px divider line, which is not the case in Firefox.
It seems that in Chrome the pixel count is 1pixel different to that of Firefox.
I've built a site using the contempt theme (wordpress) and I'm changing it's CSS to make it wider.
The problem is that I can make it look great on either Internet Explorer or Firefox and chrome but not all 3 at the same time.
If I remove the sidebar tag:
#sidebar {
width:200px;
padding:20px 200px 10px;
}
the page looks OK on IE (as it now - physiocall.co.il) but the sidebar is hidden in Firefox and chrome.
If I add this little tag to the css -
The site looks great on Firefox and chrome (the sidebar pushed left to it's place)
but on IE it goes down - below the entire page.
Any ideas how can I change the css to make it look correct on both IE and Firefox.
Any ideas what cause FF and Chrome to render the css in one way, and IE in another way ?
Thanks.
the entire CSS:
#content {
float:right;
width:649px;
margin:-50px 30px 0;
padding:0 0 20px 45px;
}
#topbar {
max-width:950px;
height:25px;
line-height:23px;
background:#FFFFE6;
overflow:hidden;
border-bottom:1px black solid;
margin:0;
}
#pagebar {
background:url('images/blue_flower/pagebar.jpg');
width:950px;
height:35px;
border-bottom:1px black solid;
margin:0;
padding:0;
}
#pagebar .children li,#pagebar .sub-menu li {
min-width:105px;
border-left:1px #e1e1e1 solid;
border-bottom:1px #e1e1e1 solid;
margin:0;
padding:0;
}
#pagebar ul a {
background-color:#f1f1f1;
width:101px;
}
#page {
width:950px;
}
#sidebar {
width:200px;
padding:20px 200px 10px;
}
sorry to say that, but you should start from scratch and completly rearrange your html output and css. maybe this is a coding practice due to rtl but your #content appears before the sidebar and has a float:right while your sidebar is positioned left to the content with a margin-left:530px.
and your content has a 640 width..
that can't work out and is not to be fixed by some niffty css trick.
sorry.
Since it works in IE but not the modern browsers, this tells me you used IE as your initial test. Never, ever do that. IE is 12 years behind all others in modern standards and compliance. Inept at best, you should never trust IE to do anything right.
It's been a long time since I've used frames so I'm not sure that the lack of a doctype on your index page, which puts you into quirks mode, is causing the problems.
So, while reworking your markup, use any browser but IE for the initial test. Then look to see how IE screws it up. The quirks and bugs in IE are well known, as are the hacks to fix it.
The solution was
#sidebar {
float:left;
width:200px;
margin:-20px 10px 5px 5px;
}
It looks like IE and FF had the opposite default value to the float parameter, hence making it impossible to set it straight. once given a float value, the margin fixed the rest for both browsers.
(before I start I should say yes, I have done all the stupidity checks, yes the link is in my history and has been visited etc)
I'm using Chrome version 6.0.472.63, although it's important that this works on all browsers.
It works on Firefox, IE and Opera.
Basically all i'm trying to do is change the background image of a link if the link has been visited.
I've done alot of trial and error testing so bear with me for multiple examples.
This is what I had originally
.forum_box .title a {
background-image:url(../images/f_unread.png);
background-position:10px center;
background-repeat:no-repeat;
background-color:transparent;
color:#2D4054;
font-size:14px;
padding:10px 12px 10px 44px;
text-decoration:none;
display:block;
font-weight:bold;
}
.forum_box .title a:visited {
background-image:url(../images/f_read.png);
}
Works in every browser except Chrome. Next I tried just making it a colour rather than image.
.forum_box .title a:visited {
background-color:red;
}
Same again, however I changed the link to #fff instead of transparent and the visited link changed red, so apparently the bg colour only works if you set a bg colour for the parent.
.forum_box .title a {
background-image:url(../images/f_unread.png);
background-position:10px center;
background-repeat:no-repeat;
background-color:#fff;
color:#2D4054;
font-size:14px;
padding:10px 12px 10px 44px;
text-decoration:none;
display:block;
font-weight:bold;
}
.forum_box .title a:visited {
background-color:red;
}
However it still doesn't solve my image problem. So in one final attempt I tried this in the hope that for some reason Chrome would only work when the same properties where present in both.
.forum_box .title a {
background:#fff url(../images/f_unread.png) no-repeat 10px center;
color:#2D4054;
font-size:14px;
padding:10px 12px 10px 44px;
text-decoration:none;
display:block;
font-weight:bold;
}
.forum_box .title a:visited {
background:#fff url(../images/f_read.png) no-repeat 10px center;
}
That didn't work either and again continued to work on Firefix, Opera and IE. So I come here to Stack Overflow very confused.
Any help would be greatly appreciated!
UPDATE:
I've attempted a jQuery solution, although it still doesn't work. Despite having :visited links and I can confirm their visited state by changing the font color to red. jQuery('a:visited').length returns 0.
Same problem here.
Changing background-position in a CSS Sprite on a:visited is working for me in Firefox 3.6 but not in Chrome 6.
But probably soon it will stop working in Firefox too. (maybe for FF 4?)
It's a privacy problem, and you can read here a Mozilla article about it (March 2010) http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/
And the bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=147777#c160
I think only possible solution is to use creatively the background-color instead of images.
It's probably a security issue.
Check this post on the mozilla security blog.
I can certainly imagine how they would do it.
Chrome appears to have disabled css for :visited ( except for color ).
This would be to prevent the history sniffing exploit.
See http://www.azarask.in/blog/post/socialhistoryjs/
You might need your single quotes around your img url...
Browsers are funny about when they do care about quotes and when they don't....
This is done for security reasons, as it was possible to load a lot of different images and detect which links the user had visited, any property sending an specific request, or loading a specific resource, depending on what the user has visited is technically seen as a security issue, as it can leak personal interests of the user.
https://blog.jeremiahgrossman.com/2006/08/i-know-where-youve-been.html
URL: www.htiops.com
CSS: www.htiops.com/css/htiOps.css
The last two links in the gray horizontal nav bar are vertically dropping down in FF 3.5.3. It doesn't happen in older versions of FF, IE7, O8, Saf3.
Changing the font in #navBar ul li a from .8em to 10px fixes the drop-off problem, but is not the desired appearance of the menu.
Any thoughts?
The problem is that all the elements are too wide for the container and they are wrapping. I had the exact same thing in Wordpress recently. I shortened the text and it worked fine.
One thing that works - as a hack - is:
#navBar ul {
margin: 0px;
padding: 0px;
color: #fff;
float: left;
font-weight: bold;
display:block;
width: 120%; <-- from 100%
}
Perhaps you can play with the widths and get it all to fit, or shorten some words. (I know, it's a hack and I don't like them, but it's fast and looked ok to me :)