space at top of UIWebView not seen in Firefox or Safari - css

I have a webpage that I'm trying to view in a UIWebView.
It looks like this at the top (space at top before content starts):
In desktop safari, it looks like this (no space at top):
I have the following css for the body tag:
body{
margin:0;
padding:0;
}
Is there something else that I need to do to remove that spacing? Is there a firebug for mobile safari?
thx
edit 1
I also have the following meta tag:
<meta name="viewport" content="width=320;height=420;user-scalable=yes;initial-scale=1.0;">


it will work try it, if this work please mark it as correct answer
*{margin:0;padding:0}


Probably a little bit of a special case but there was an origin.y value on the UIScreen which I just needed to set to 0 which fixed the issue above.
Here's the relavant code:
CGRect webFrame = [[UIScreen mainScreen] applicationFrame];
//webFrame.origin.y += kTopMargin + 39.0; // leave from the URL input field and its label
webFrame.origin.y=0;

Related

How do I set this messy placeholder in iPhone?

I make this form but when i check in my mobile i.e oppo it's look like this: Image
When I check this in iPhone it looks messy: Image

You can try following CSS to fix this issue:
line-height: 1;

NextGen gallary for WordPress not displaying correcting in chrome

The NextGen gallery isn't displaying properly in Chrome, but works fine in firefox. Has anyone found a fix for this problem?
Even the sample page for the gallery display isn't displaying correctly. http://nextgen-gallery.com/gallery-tags/
When you open an image to view it, after moving to a second image, the image moves down a bit and after a few images its sitting below the website, not near the top or in the middle. This is making it fairly unusable.
Thank you

Better Yet:
<style type="text/css">
#shDisplay {
top:15%!important;.
}
</style>
Worked for me, and does not have an absolute value, which is better for different sized monitors!!

just use this in the header of your page :)
it did the job in chrome for me :)
<style type="text/css">
#shDisplay {
top:30px!important;.
}
</style>

thanks to this discussion i have solved a similar problem (first photo open at the bottom of the page in Chrome and Firefox). But i had to change a .css script a little and to add a rule for "fancybox-wrap" div:
<style type="text/css">
#shDisplay {
top:15%!important;
}
#fancybox-wrap {
top:5%!important;
}
</style>
Thank you!

Print Background colours in Chrome

I am trying to print a PHP generated document in chrome, on the browser it looks fine Link to the page I want to print But my printer will not print any coloured backgrounds, can anyone offer any suggestions please? Can I do this with CSS?

You adjust in the browser, whether the background colors and images are printed. See your browsers printing options.
Google Chrome offers this feature starting from version 26 (march 2013).
Also starting from version 17, Chrome allows changing the background print behavior programmatically by using -webkit-print-color-adjust:exact; in the element CSS to print the background.

Gordon's answer is great, but for people whose CSS skills are rusty, here's a more complete example.
Put the following in your document's <head> section.
<style type="text/css">
#media print { body { -webkit-print-color-adjust: exact; } }
</style>
By the way, although Chrome/Chromium's print dialog now has a Background graphics checkbox, it only seems to work if you do not click Print using system dialog (observed with Chromium in Linux).

Chrome > Print (cmd P) > click More Settings > Options: check Background graphics

Can I remove the URL from my print css, so the web address doesn't print?

I have written some stylesheets - including a print.css - and it's working fine.
I'd like to remove the URL from printing out on each of the pages. I am beginning to wonder if it is impossible. Is there an element/option that I can set to display:none to do this?
The reason is that the specific pages that have a 'normal' and 'print' stylesheet have been specially formatted so when printed, it forms a meaningful booklet. Therefore the URL is irrelevant.

In Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (view page source :: tag HTML).
In your code, replace <html> with <html moznomarginboxes mozdisallowselectionprint>.
In others browsers, I don't know, but you can view http://www.mintprintables.com/print-tips/header-footer-windows/

Sadly, no. The header and footer are generated by the browser. Only the end-user can change the footer - it might be an idea to give the user a step-by-step for each browser what to do. See for example here for a set of illustrated walk-throughs for windows based browsers.
The only alternative I know of is generating PDFs, with which you have full control over the printed output.

Use that code.that will help to solve your problem
#media print
{
#page { margin: 0; }
body { margin: 1.6cm; }
}

#media print
{
a[href]:after { content: none !important; }
img[src]:after { content: none !important; }
}

you can try this in the stylesheet:
#page{size:auto; margin-bottom:5mm;}
But this also removes the page number

This solution will do the trick in Chrome and Opera by setting margin to 0 in a css #page directive. It will not (currently) work for other browsers though...

It depends on your web browser. If you're using Firefox you can adjust or turn off those header and footer lines (URL, page number, etc) by going into File > Page Setup then clicking the Margins & Header/Footer tab.

If I understand you correctly, you talk about the page headers and footers. They are printed by the browser. They are not part of your HTML content, so you can't influence them directly.
Show your users how to disable headers and footers in the «Page setup...» dialog.

The headers and footers for printing from browsers is, sadly, a browser preference, not a document-level element that you can style. Refer to my very similar question for further workarounds and disappointment.

Historically, it's been impossible to make these things disappear as they are user settings and not considered part of the page you have control over.
http://css-discuss.incutio.com/wiki/Print_Stylesheets#Print_headers.2Ffooters_and_print_margins
However, as of 2017, the #page at-rule has been standardized, which can be used to hide the page title and date in modern browsers:
#page { size: auto; margin: 0mm; }
Credit to Vigneswaran S for this tip.

Remove the url from header and footer using below method
#page { size: letter; margin-top: 4mm;margin-bottom: 4mm }

I've also tried everything but finally I'm writing below code to make URL shorter:
var curURL = window.location.href;
history.replaceState(history.state, '', '/');
window.print();
history.replaceState(history.state, '', curURL);
But you need to make a custom PRINT button for user to click.

Now we can do this with:
<style type="text/css" media="print">
#page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
</style>
Source: https://stackoverflow.com/a/14975912/1760939

I assume that you are talking about the URL that shows in the footer of the page.
If so, this is set by the browser and it is not something that you can do from your code.

I am not sure but the URL is added by a browser when you want to print. It is not part of the page so can not be affected by CSS. Maybe there is a way but it will be browser dependent.

i found something in the browser side itself.
Try this steps. here i have been mentioned the Steps to disable the Header and footer in all the three major browsers.
Chrome Click the Menu icon in the top right corner of the browser. Click Print. Uncheck Headers and Footers under the Options section.
Firefox Click Firefox in the top left corner of the browser. Place your mouse over Print, the click Page Setup. Click the Margins & Header/Footer tab. Change each value under Headers & Footers to --blank--.
Internet Explorer Click the Gear icon in the top right corner of the browser. Place your mouse over Print, then click Page Setup. Change each value under Headers and Footers to -Empty-.

This is a browser issue. But you can handle this problem by these line of codes:
<style type="text/css" media="print">
#media print
{
#page {
margin-top: 0;
margin-bottom: 0;
}
body {
padding-top: 72px;
padding-bottom: 72px ;
}
}
</style>

For Internet Explorer, go to Tools. Click on the print option and then page set up. Under headers and Footer, make all the choices "empty". Then it will not print out on your printed pages.
I hope this helps.

Weird CSS Sidebar Issue

Here is the site in question
I've got the sidebar working on any other page of the site except for this one; all of the pages have the same template. The sidebar right now is doing the old "go under the content".
When I try and edit its positioning in Firebug to anything but relative and then change it back to relative, it snaps back into place just fine. However, changes I've made in the code do nothing.
The issue started to appear when I added youtuve videos to the posts.
Any ideas beyond quickly changing the positioning with Jquery?

Keep the sidebar where it was (below the <div id="left">) and just change one CSS rule, and add another:
/* layout.css Line 310 */
#content {
display: block; /* Changed from 'table' */
overflow: hidden; /* Keeps 'left' and 'sidebar' from overflowing
}
Tested to work: Firefox 2.0 Win, 3.0 Mac/Win, 3.5 Mac; Safari 4; IE6, IE7, IE8; Chrome 3 Win

What happens when you remove position:relative from #content? Also, I'm able to duplicate the problem on FF3.0.17 XP

It looks to me like the position:relative on #sidebar is what is screwing it up. Try changing it to position: static on the sidebar id.

You've got some mising closing tags: [Invalid] Markup Validation of reneewarren.com/category/blog/ - W3C Markup Validator. And try using a plugin to do a valid embed of flash: WordPress › Kimili Flash Embed « WordPress Plugins.

Try moving the sidebar markup before the content markup.

Have you tried setting a high z-index ?

Resources