I am currently modifying a site for IE11 compatibility and there is a major bug being caused by the CSS font-faces loading.
I am skinning on top of a theme, and am overriding the original theme's font-family for the body of the site. However, what is happening is the site loads with a default font family, the theme's font family is loaded and finally my skin's font family is applied.
What seems to be happening is that on load, the margins for the unstyled text are being set, then as the additional font styles are loaded, the margins remain the same, resulting in overlapping blocks. The blocks correct themselves when moused over, but this is far from ideal.
See the links below as an example:
http://i.imgur.com/N8V5hfA.jpg
After the page has loaded, divs overlap.
http://i.imgur.com/imRgjji.jpg
Once the element has been moused-over (This is the way the content should display on load).
Is there a way to make IE11 position divs properly depending on the size of the content?
Related
Wkhtmltopdf is shrinking all of the fonts from my HTML document, causing the entire document to appear smaller once converted to PDF.
What I've Tried:
--disable-smart-shrinking: This makes the fonts appear more normal, but cuts off the right side of the page.
I have tried adjusting the margins as well along with disabling smart shrinking, but it does not seem to bring back the cut off parts of the page.
Are there any other commands likely to make the fonts appear normal sized?
I noticed a strange bug (at least on WebKit) on a website I designed with custom fonts (via Typekit) and CSS columns. The text has some additional font feature settings ("calt", "liga", "clig", "kern", "onum") which I've discovered to be the trigger.
The columns have column-width and column-gap settings. When the browser window is resized so that only one column can be displayed, text is not displayed correctly (see attached pictures). I figure that the length of the paragraph is calculated before kerning and/or ligatures are applied, thus forcing some text to display outside of its container. Disabling the font feature setting clears the unwanted effect.
Is this a bug? Has anyone noticed this behavior before? Is there a known solution?
Text rendering on the navbar, at least on Yosemite's Safari and Firefox, is very bad. Text doesn't show the curve it has but is like thicker and more imperfect.
If I zoom in the webpage, it improves, also if I force focus at any element.
I wouldn't care much about this if it were always regular, but the problem is with the focus. The page doesn't seem to be well designed, and I don't like that impression at all. I'm using Bootstrap framework with Ubuntu typography. This happens at a font-weight:500.
Example http://www.bootply.com/Ptp4gXpHAF. Just click the search bar.
This is the difference between what I want and what is rendered:
The image shows blurred due to upload resolution but I think there is a big difference.
I just changed the font-weight to 300. Maybe safari tried to render to higher font weight but when I clicked on it the font-weight property was overridden. Within setting it to 300 it worked just fine.
I'm aware that an iframe can't inherit the css styles of the "main" webpage, but if so I am confused. I have a main page whose background is plain black, with white text. The iframe doesn't have a background colour specified and yet it is black, the same as the main page. However, other css properties in the main page have to be defined separately for the iframe if I want them to be used. Why is this?
If you do not set the background of an HTML document (by setting it on its html element or its body element), the browser default will be used, and it can be expected to be the initial value, transparent.
This means that for a page embedded in another page with the iframe element, you can expect the background of the embedding page to shine through.
You can use Developer Tools to figure out where the black background is coming from. (It's built into the browser.)
If you are using IE or Chrome, you can just press F12 on your keyboard and then use the element selector (top left) to select the IFrame. On the left you will then find all the CSS styles that are applied on that IFrame.
This will give you an insight on what's happening and also give you a new priceless tool to debug in the browser.
Note: If you use firefox, you will need to install firebug.
This can also come useful.
Precedence rules in CSS (1 is most Precedent):
User defined style
Embedded or inline style sheet
Internal style sheet
External style sheet
Browser default style
This may be Firefox specific. See here and here.
I'm having a problem with Internet Explorer on my website (My Website).
The problem is under "Account Summary", the avatar is using absolute positioning. It works fine under Chrome and FireFox, yet for some reason it doesn't in IE 9 (compatible mode fails as well).
The avatar positions correctly when the page is loading, but exactly when the page finishes loading, the avatar shoots off to the right.
Here are some things I've tried and it still fails.
Removed all CSS from head
removed header/footer code
resized avatar
resized display block width/height
some other minor tweaks
Thanks,
The reason is that you have some code that changes the image into a span in IE, so the style that you have specified for the "Last active" span also applies to the avatar.
Add classes to the span and the image so that you can use those in the CSS selectors, so that you don't use the element names in the selectors.