I'm trying to debug a CSS issue on my site that only happens in Safari and Firefox. Chrome renders it just fine.
The images shouldn't stack like that. They should be positioned in each box.
I've tried various CSS position and HTML changes to get this to work but with no luck. Something I'm not doing correctly here?
website address is http://www.thesignpad.com
Pictures of the issue are as shown below:
https://i.stack.imgur.com/evSzj.jpg
https://i.stack.imgur.com/KWJ1S.jpg
All browsers have default css built in. Each browsers defaults are different. There are nice snippets off css out there you can use to reset all css on browsers to be consistent. This will ensure moving forward your work is consisten across browsers.
As per what the exact css issue is I am not sure. It looks like a line height is causeing a div to float onto the next line but I wont know until you post your code.
You can use webkits for all browsers like :
-webkit-text-shadow: 1px 1px 2px black;
-moz-text-shadow: 1px 1px 2px black;
for detail u can visit http://www.peachpit.com/articles/article.aspx?p=1750586
Related
I have an HTML element textarea with defined CSS rule { resize: both }. In FF when the user mouse over the right bottom corner of textarea the cursor changed according to value of property resize, but in Chrome cursor doesn't change.
Please open this example in FF and Chrome to check the difference.
Is it a bug of Google Chrome and can I fix it with CSS on my side?
Update
I reported bug to Chromium:
https://bugs.chromium.org/p/chromium/issues/detail?id=942017
Update 2
The bug was fixed in Chrome 80.
Actually, there are, or at least were ways in which you could style the resizer and add cursor: se-resize; on hover. Check out this post: Can I style the resize grabber of textarea?
It describes how you can use ::-webkit-resizer to style the resizer:
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
Unfortunately it stopped working in Chrome and I couldn't anything similar. (I think it still works in Safari).
But fear not, it's not hard to make a custom handle. Actually, I would encourage you to use a custom one as the default one is too small and hard to hit. Especially with touch. There are actually a lot of sites that use custom handles (or at least automatic resizers based which grows based on the content. Works great on touch too!).
Ie. Stackoverflow uses a custom handle (TextAreaResizer):
GIF of Stackoverflows resize handle
There are also lots of libraries for exactly that purpose, just do a Google search, and you'll find something that works for you :)
This is rendered by browser itself cant be designed using css
I have a html page, in which i have given background using CSS background-image property
I am able to view background in all major browsers(Firefox, IE, Chrome,Safari) of windows but when i run same page in MAc osx browser(safari or chrome), background is not visible, rest all CSS is working good
My CSS is
border-top: 5px solid #00bdb3;
margin: 10px 0 0 0 ;
background-image:url('/Images/back.jpg');
background-repeat:repeat-x;
where is the problem, i am not able to find
i have tried to give inline styling also but results were same, i was still not able to see background in Mac Browsers
i solved it by changing the CSS
background-image:url('/Images/back.jpg');
to
background-image:url('../Images/back.jpg');
Just try to validate your css Just like #Chris Hardie..
If it doesnt meet your need please read this solution.
Hope it helps !!
Webkit browsers (Safari and Chrome) keep cutting off text-shadow on my custom fonts (from TypeKit). I'm not sure what I can do to fix it. I've been looking around but havent found a similar issue anywhere else.
Screenshot in Google Chrome
Looks fine in Firefox
Any suggestions would be awesome. Thanks!
This is a problem because webkit makes the text node box too small to accomedate the font. Probably due to its cursive style etc.
Add a to the end of the text and you will see it works. To offset the extra space that creates you could use a negative right margin. If the only problem is the headers this should work fine...
margin-right: -4px;
Fiddle arround with the value until you get it right
on line 286 of your style.css file change text-shadow property's value to 5px 5px 1px #B2CA52
I'm working on a site and I have some problems that I hope you guys can help me with :)
If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.
In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.
Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:
This is my project.
I hope some one can help me out with this.
If you have something I better I can do, I will be glad to hear that too :)
Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.
Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.
You can put the code below in your css to target Firefox and bring the outline back in:
#-moz-document url-prefix() {
#content{
outline-offset: -11px;
}
}
Live example: http://jsfiddle.net/tw16/n8bet/
#1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers
#2: remove this line from #content css:
outline: 1px solid #B9BDBE;
i have a page which displays a border around the divs #call and #courses
i m using the css:
border: 3px solid #afd4a9;
this is not properly in ie
see it here
thanks
There's nothing wrong with your CSS.
When I disable JavaScript in Internet Explorer, the border is there (but not rounded).
Looking more closely, I see you're using jquery.corner.js for rounding the corners.
I'm not sure why that isn't working for you (I can't see what you're doing wrong), but I recommend switching to CSS3PIE instead for the rounded corners.
In short, you simply download the PIE.htc file, and add a single rule to your CSS for each element:
#myElement {
...
behavior: url(PIE.htc);
}
corners.js removes the borders in ie - see the inline styles for the relavent divs. To have borders in IE, you need to have an outer div wrapping the inner div and use corners on both divs to get a border like effect. Check out the demo page about half way down, under adjornments: Jquery corners demo page
The way corners works in ff and IE is totally different - it simply uses the built in mozilla css styles which keeps the border styling. In IE corners does div insertion.
The problem is that you have a bit of javascript adding a style attribute to your DIVs:
style="border-bottom: medium none; position: relative; border-left: medium none; zoom: 1; border-top: medium none; border-right: medium none;"
You'll have to selectively remove that code for IE, or fix how it works.
Note, you ought to install the Developer Tools for IE (or if you have IE 8, just press F12 to see if they come up). The tool will let you see the HTML code after javascript has run, and it is invaluable in troubleshooting these types of problems.
Your CSS is being overwritten by inline styles, it appears, by this function. $('#courses').corner(); in your index.js file, which is rounding its corners like it's supposed to.