I have used sifr to replace the fonts for headlines. It works fine in Firefox and IE.
http://design.speak-friend.com/
In Opera however, the headlines of the articles (object-tag within a-tag with-in h1-tag) get as wide as the used text is. If I limit the size of the object-tag via css, it just get's cut off (meaning some text is not displayed at all).
Is there any solution to this?
thanks
I had this same problem. I used jQuery to increase the size of the embeds by some set number of pixels, like +40px. I guess you could also grow them linearly, like by 120%.
I'm curious to see how other people solved this problem.
That's odd! I'm going to assume that Flash doesn't suddenly behave differently, so the problem is in reading out the width of the HTML element. I supposed you could try limiting the width of the main element you're replacing to see if that helps. Or perhaps place the text in a <span> and replace that?
Related
Last 24 hours I spent on figuring out how to control widows/orphans but without using widows and orphans selectors in my CSS. Believe it or not, but Kindle Oasis and Paperwhite for that matter (though I don't have this device at hand) use AZW3 files that do not support either widows:2 or orphans:2 or even break-after:avoid. My text has subheads that, if viewed on Kindle, get left behind at the bottom of the pages. I tried KFX, yes, and it is better in terms of layout (widows/orphans and breaks are supported) but KFX has another problem which is a deal-breaker for me - it underlines every link whether you specify text-decoration:none or not. I have about 2000 links in the text that I don't need underlined. Back to the problem - AZW3 doesn't have support for widows/orphans and page breaks. Can someone suggest how to go about accomplishing this:
p {
widows:2;
orphans:2:
}
or
p {
break-inside:avoid;
}
without the above CSS in order to control where text breaks on Kindle devices.
Thank you.
The only way I found how to force the lines to stay together, i.e. to imitate the break-inside:avoid; behavior, is to put an html element such as img which doesn't break across pages behind my text. Example:
<img src="transparent.png" style="height:3em;width:auto;"/>
<h style="margin-top:-2.5em">this is my header</h>
<p>this is my paragraph</p>
Notice that my PNG is called "transparent" - because that is all it is - a transparent square. My margin-top is slightly less than the height of the image thus still leaving some space above the header. Spacing can be modified with regular margins. Interestingly, this works well on Kindle Fire and Kindle Oasis where <h> and <p> text is forced to go to next page together because of the height of the image. Pending a better implementation of page-break and widow/orphan control on Kindles, this is probably the only way to control this behavior.
I'm building media library web app and I want media items listed in a side bar to be fully displayed.
Excel has this neat feature where cells containing strings long enough to overflow automatically adjust the font size to exactly what is needed for the string to remain contained within its padded borders.
I'd like to recreate this with css.
I don't think there is possible to do so. You can, however, create mediaQueries and give different heights or line-heights.
You could use word-wrap: break-word in a div, to make sure the text reorganizes so It won't come out the div's width. However, It would remain with the same size. So, I would definitely use mediaqueries for that
This can't be achieved through CSS alone. Javascript could help you, but it won't be easy.
Try this post: JavaScript Scale Text to Fit in Fixed Div
I've tried using em as well as px, but I cannot get a certain line of text to display at the same size in every browser. I know I'm reaching for a lot but I'm tasked with achieving a pixel-perfect development based on a mock-up, and need a certain text to span the width of an area left-to-right so that it all flushes from side to side with an image.
My last option is to use an image, which I don't want to do. I know that you can specify certain CSS parameters that work on the different browsers such as -moz-SOMECSSPROPERTY:some value; but can you do this with the font size so that one browser has it at one size, and another as another. Oddly enough too though this is actually only happening in the browsers that are on different OS's, i.e. - on my Mac it's as intended, and on Windows (same browsers) different.
Thanks for advice.
It won't be enough to specify the font on a per-browser basis, because (as you noticed) you'll also run into inconsistencies across platforms and devices.
If you want the text to always fit the image flush, the text pretty much has to be an image, too.
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.
I have redesigned only the Home page using the DIV tags from Traditonal HTML tables,
http://www.cricandcric.com
After that my page looks scattering across the screen, if the screen resolution increases.
for the lower screen resolution its looking good, IE and Mozilla compatible
I am not able to make out the mistake which is done, can any one help me check this out.
Can any one share the resources if they on how to make the website which is developed using either HTML or IE more compatible with all VERSIONs of IE and Firefox, with all the different resolutions format, it should work fine,
if any one has any good article share the link to me.
thanks in advance
your "middle1" section has a width defined as 1004px so should be almost the same size as the navigation, however the contents two tables and a div are positioned such that they dont float (certainly I cant see any floating in your CSS).
You're also using tables for layouts - i think thats the crux of the problem. Looks like you are trying to make a three column layout using CSS - have a look at this example: http://ago.tanfa.co.uk/css/layouts/css-3-column-layout-v1.html
I had similar problems for my website and it turned out that fixed width for div elements changed the rendering of the page depending on monitor resolution or screen size. I fixed the problem by using relative width by % instead of px for divs. It was a css issue.