I have a php file with 's and the things in the div should stay on one page,
for this possebillity i found this:
http://www.w3schools.com/css/pr_print_pagebi.asp
However like you can see its only compatible with opera and nothing more.
I dont want to demand my users to use opera so I was wondering if there was a alternative to the "page-break-inside:avoid".
Thanks
Matthy
Support for print specific CSS is pretty crappy. Have a look at the CSS discuss Wiki for an extensive guide (it also has a link to a browser support compatibility table). I have had some success with page-break-before: always when I was playing around with this sort of thing a few weeks back - as long as your div is less than a page long you may be able to just force a page break before it?
Related
So I’m in the middle of fiddling around with a site and I notice it’s full of old code and IE style resets/hacks/polyfills etc. all of which it’s not necessary to support anymore.
Rather than me trawling through thousands of lines of CSS, is there a simple, efficient and safe way to detect and remove old styles from a stylesheet?
I’m talking _background: gray; -ms-filter:; -WebKit-border-radius:; and all the other proprietary things from back in the day.
This site will support modern browsers only, using standard CSS3 selectors and attributes, so if I can find a way to parse and either automatically remove or at least give me line numbers for the antiquated code, that’d save me a huge amount of time (and save me having to start from scratch!!!)
Thanks in advance guys!
I found an incredibly useful tool: https://www.projectwallace.com/
It doesn’t strip CSS, but gives a good overview!!!
Can anyone tell me the best way to ensure asp.net sites look the same when view in IE, Chrome or Firefox?
I've just finished one which in testing seems fine in IE but not the other 2.
I have not used CSS on this site as its not that big, I just formatted the masterpage as I wanted it.
Could that be the problem?
I usually code for Firefox first. That makes things match almost 100% in Chrome, Safari and IE9 usually. Then I go through and test in IE 8 and 7. Minor adjustments are typically made within the same CSS file. For example, IE7 usually needs to have dimensions of a container explicitly set, where most modern day browsers don't require it and render things properly.
In those rare cases that you do need to style something specifically for one or more versions of IE, use conditional comments. Here are some good links on conditional comments and how to target specific browsers and versions:
http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
http://www.quirksmode.org/css/condcom.html
Unfortunately you will need to use CSS to get this to look similar in all browsers. I say similar as it is unlikely you will ever get it looking exactly the same.
Basically you will need to use the conditional CSS tags http://www.javascriptkit.com/dhtmltutors/csshacks.shtml
I would recommend spliting out the style to the a CSS and getting that working in Chrome and Firefox. Then use the tutorial linked and add in IE hacks to make it look better.
There isn't an easy way of making a site look the same in all the browsers. As caveman_dick said, maybe it's even impossible. You have to use CSS and sometimes javascript...
But to help you, you can use some programs that simulate different browsers engines, so that you could see how your site behaves. Just google browser simulator. :)
Here's something interesting, turnsout that many people out there had this problem, but i couldn't find a solution:
Problem is related (and observed) only with IE8 and IE7:
If i add filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFEEBB', endColorstr='#FFEEBB',GradientType=0 ); to css "body" then all fonts on my page are messed up! If i remove "filter", font's are back in normal.
What's wrong?
P.S. Messed up -> Fonts look jagged, exactly like there's no cleartype!
Internet Explorer disables ClearType rendering in all elements that use a DXTransform.
There's a workaround described here that involves a relatively positioned wrapper element. It seems to be working in IE8 at least.
That looks very much like a proprietary Microsoft filter. Unless you know that 99% of your website users use ie, don't use those filters. Of course, if you are using this in an ie-specific style-sheet, to complement another style-sheet for proper browsers, you can use that filter without ruining your market.
Either way, I would highly recommend not using an ie-specific filter (or anything ie-specific really). Instead you should recommend to your users subtly to change to a more compliant browser, with less security holes and privacy-concerning back doors.
I"m no expert, but it sounds like you are using something that is IE specific. If so, I could not recommend highly enough that you find another way. Gone are the days of IE being the only browser to develop for and doing so will turn away numerous people.
I am trying to figure out the most efficient way to ensure cross-browser compatibility. I have done a bit of research and learned a few interesting things such as the fact that Mozilla/Firefox can't handle a class that has a name starting with a number. Is there a way to make a CSS work for any browser or is it better to just develop multiple CSS and add code to choose which to use based on the browser being used?
You might consider using a CSS Framework such as Blueprint. It includes a CSS reset that should help.
Also, you might want to look at Yahoo's CSS reset
An aside to clarify a point:
... I have done a bit of research and learned a few interesting things such as the fact that Mozilla/Firefox can't handle a class that has a name starting with a number....
Sorry, but that's not a Mozilla limitation, it's in the CSS spec: class names must not start with a number. Any browser that allows them to isn't enforcing the rules properly.
Answered here on StackOverFlow. The relevant part of the spec is at http://www.w3.org/TR/CSS21/syndata.html#characters (see the 2nd paragraph).
To answer your question: There is no way to make a page using just one universal css and have it displayed equally in all browsers, unless you only use an extremely small sub-set of all available css (selectors, values, etc.).
The way I work is:
Use a css reset
Develop for a browser that adheres to the standards pretty well (Firefox, Chrome, Safari, Opera)
Patch things up for IE using conditional comments (because you'll probably need things that don't validate)
A good starting point would be to use CSS reset such as: http://developer.yahoo.com/yui/reset/
Your goal should be CSS that works on all browsers. If you start out with a CSS file per browser, where do you stop? Mobile Safari? Flock? Konqueror? Every version of every supported browser?
Eventually, you might need to compromise, but you can cross that road when you get there.
Regardless of your infrastructure/framework/etc you should test your code on all major browsers. If possible avoid using style sheets for browser specific problems. Browsers will change and adapt which means you might get stuck having to update a bunch of websites when new browsers come out.
CSS is a fickle beast and I haven't found any solution that covers all the quirks except for a lot of due-diligence and testing.
You might use a framework that does this for you, such as GWT, but keep in mind that you will still have some issues.
Here's the situation: I'm trying my hand at some MySpace page customisations. If you've ever tried [stackoverflow], I'm sure you understand how frustrating it can be.
Basically it can be all customised via CSS, within a certain set of rules (e.g. the '#' character is not allowed...how useful!).
Have a look at this blog if you want more info, I used it as the basis for my customisations
So the only problem is with the comments section, where 'friends' post whatever they feel like.
It already has...
max-width:423px;
...set on the table, but I've discovered if long URLs are posted in the comment section, it blows out the table width, regardless of the max setting!
Question: Is there a way to manage text that is going to push the width of the table?
Perhaps splitting/chopping the string? Or is there more I should be doing..?
The URLs are posted as text, not hrefs.
Using Firefox and Firebug btw.
Edit: Also javascript is not allowed ;)
Another edit Just checked with IE7, and it seems to work.. so firefox is being the hassle in this case..
Have you tried the various values for the "overflow" css property? I think that may do what you need in some permutation.
a few browsers support word-wrap
ex.
<div style="width: 50px; word-wrap: break-word">insertsuperlongwordhereplease</div>
browser support currently is IE / Safari / Firefox 3.1 (Alpha)
Your options are pretty limited, if you are using only CSS. You can try
overflow: hidden
to hide the offending parts. CSS 3 supports text-wrap, but support for it is probably non-existent. IIRC there is an IE-only css-property for doing the same thing, but I can't remember it at the moment and my Google-Fu fails me.