google chrome printing issue (different size) - css

this is the picture that my page looks like
this is the picture when i want to print my page
The height is different, when the css class is the same. I really don't know about this problem. Is there anyone experience this problem. FYI, I am using google chrome. When I use firefox, this issue doesn't appear, but the other thing is a mess and I want to do this on google chrome. Please help me.

Related

Structure misalignment solves itself after refreshing CSS values on inspector

I don't really know how to phrase my problem. My page is working fine and all, responsive included (resizing my PC browser). But when I open the page from a browser in an actual phone, the blue section with icons gets all messed up.
There's apparently nothing wrong with it on the code. The thing that is driving me mad is, and as soon as I change anything from the inspector, it corrects itself (but that's something my users aren't going to do). It doesn't matter whether I change the color of a random text or anything, it reacts correcting itself whenever I make a change in the CSS on the inspector.
Can anyone help me figure this out? I'm attaching a screenshot from my phone before and after changing CSS on the inspector:
In which mobile did you try to show it?
I don't know if you solved it but i try to see your website from my smartphone and i show it correctly.

Having an issue with safari not displaying numbers in <a> tags

I'm doing some browser testing with a responsive site, and ran into an issue with Safari that I cant track down the answer to. On the top of their page, they want a clickable phone number so that mobile devices and Skype users can easily call.
On every other browser it looks like it's supposed to:
The Right Way!
In safari, however, I get this:
The Wrong Way!
(rep is still too low to post pics, thus the Gdrive links)
What's going on here? Ive formatted the number portion to look as follows:
<h3 id="phone">Seattle <a id="ph-number" href="tel:2065272000">(206) 527-2000</a></h3>
The link works in every browser, it's just safari that's having issues with the display portion. Can anyone help me out with this (probably simple:) issue?
Adding as an answer for future searches:
Hard to tell from just the HTML unfortunately. Any way to shine some light on CSS? What font family are you using (it may be missing glyphs somehow)? Double-check font-size?

Safari showing my div in wrong position

It's about this page http://chios-grill.de/anfahrt.html
In Safari and sometimes in Google Chrome the right text box just falls below the whole pages like this: http://imgur.com/Ekeg8el
It works nicely while offline but not while the page is online. Could it have to do something with the Google Maps embed?
If you need the code, tell me. Otherwise you can just use Google Chromes Developer Tool to look into it I guess.
I think this is width problem, because I have updated the width for the div id='textbox' and it's gone down, try to give a little width just to make sure that is compatible for all the browsers.
This will fix this problem. Try it!

IE10, Same Domain IFRAME and Style shset

In my application, I am including one page within another via an iframe. I'm working on a quick prototype here, so I don't want to take additional time right now to implement something fancier].
Everything looks good except for IE10 on Windows 7. From what I can tell, the style sheet of the iframe is being added into the cascade of the style sheet for the page and causing strange display errors. I'm a little dumbfounded this is even possible.
If I comment out the iframe, everything renders correctly.
I can also see the styles changing as the iframe loads:
Pre-iframe: http://screencast.com/t/8qcl2U4Uuy
Post-iframe: http://screencast.com/t/fzR9esWsq
Anyone else experience strange behavior like this?
Thanks in advance.
Thank you for your reply. My coworker was actually able to help me trace this back to an issue with the IE10 developer toolbar.
I was able to create a file that replicates the issue: https://dl.dropboxusercontent.com/u/1686497/iframe.zip
If you open the index, you'll notice that there is no margin on the body. While you have that page open and you open the F12 Developer Toolbar in IE10 (10.0.9200.16540) on Windows 7 (at least), you will see the body becomes padded and the parent window font switches to Times. Hope this helps someone!

cufon problem background image

I'm developing a website and for the first time i found problems using cufon... if you think u know about cofon check this..
http://universite.jvsoftware.com
If you open with firefox and IE, you will notice in the navigation bar, when you over the titles will appear a border (actually is an image) but if you open it with chrome or safari, that image doesnt appear.... the cufon script is easy to find in the source code, also the css.
Let me know if you know how to fix that!!
Kind Regards
Not really a solution to your Cufon problem, but I would just recommend going with a different font replacement tool altogether if you can help it. I like the performance of Typekit or Google Fonts much better than Cufon, but that's just a matter of preference.

Resources