please take a look at my site here: http://utilitiessavings.co.uk
The search box at the top-right, in the nav bar is positioned differently in chrome and FF. I can't seem to find a way to change it to make it consistent. Obviously I want it to look like it does in ff in all browsers.
I expect this in IE, but not these two!
Thanks!
To this input
body.custom li form input {}
add
margin:0;
Altough chrome sets some user agent style as margin:0em seems like that doesn't affect the input.
Related
I'm developing a new website.
Testing out the page in different browsers, I find that the nav bar renders differently depending on the browser. In Chrome and Safari it looks correct, but in Opera, IE and Firefox the nav bar renders differently. I've validated the HTML, I'm not sure what to do.
Looks like you have a problem with floats after unfloated content - very similar to a question I just answered:
CSS issue with IE8
Let me know if reviewing that question gets you going in the right direction.
Your UL is styled up in the right corner. In IE hit F12 and start going through the +'s of code and you can find under nav role, the UL is way off to the right. I would start editing CSS in the nav role and ul first.
So I have a submit button that is styled with the following css:
#search_submit {
width:150px;
font-size:1.5em;
}
In safari it look like this:
In firefox it looks like this:
I would like to get the font to display at 1.5em as it does in firefox, but I would like to maintain the rounded corners that are present in safari (which disappear in firefox, only when I add the font-size:1.5em
I read somewhere that its better to use em for cross browser support? is this not the case?
Using em for font-size is not necessarily 'better' for cross browser support. It's recommended because of its scalable nature, but it may not always have the consistency of using pixels (pixel perfect as they say...)
It generally isn't that difficult to get the buttons to look the same between firefox and safari. Without a link to see the page it's hard to say why yours are so different and my guess is you have other css styles on the page effecting your buttons.
I have a div that on hover will change positioning on an image and toggle a div via css. The list uses upper-alpha for styling. This CSS works fine in every browser except IE. The issue that I'm having is that in IE, after hovering over the div, it changes to 0. from A, B, C, etc..
Here's an example in jfiddle:
http://jsfiddle.net/YALdD/
if this works for you, just put the letters in the lists and get rid of the upper-alpha style, like this: http://jsfiddle.net/mjgasner/6J6Nf/3
Here's the workaround that is mentioned from the link in the comment above:
http://jsfiddle.net/mjgasner/94tu4/1/
It clearly doesn't work.
AND
IE won't render those as animations, as they are not supported.
http://www.w3schools.com/css3/css3_animations.asp
You can animate the color change in all browsers (even IE6!) with jQuery UI:
http://jqueryui.com/demos/animate/
Here is the link to W3Schools: http://www.w3schools.com/cssref/pr_list-style-type.asp
You can see all browsers supported for certain element.
If you need something else let us know.
What version of IE are you using?
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
http://betawww.helpcurenow.org/media/press/
You'll see I have used spans within an anchor, with the span.hover-description set to display:none; by default, and on a:hover that span is set to display block and absolutely positioned to create a tool-tip effect when hovering over the name and email of the "For Immediate Release" contact names.
Everything looks as desired in Firefox, but Chrome reveals my unknown blunder somewhere.
Any help on what's the problem that is causing Chrome to not display like Firefox?
Incidentally, Explorer shows the tool tip as expected, although I'm getting a funky bottom margin issue below the names, and Safari has the same issue as Chrome (must be a webkit rendering setting that I need to accommodate for).
OK, I figured it out. Since I'm using a pretty complex nesting structure to accomplish the CSS tool-tips, I overlooked the fact that I had actually nested a p tag within a p, and of course that is a no-no.
Firefox is really friendly to a lot of validation errors, but Chrome and Safari seem to be much more strict.
In the end I changed the p's to span elements and all is well across browsers.