I am encountering issues with aligning a CSS Search Input Box like the Google style one found on this tutorial page.
I have edited the code to suit my design but for some reason I am unable to get this to align properly within the iPhone/iPad with the right element not aligning with the left element at the bottom.
The alignment issue can be seen here
The code is as follows:
HTML:
<div id="search">
<form name="" action="" type="">
<input type="text" name="field" id="field" />
<div id="delete"><span id="x">x</span></div>
</form>
</div>
CSS:
#search {float:left; margin:11px 0 0 156px;}
#field {float:left;width:200px; height:22px; line-height:22px; text-indent:0px; font-family:arial,sans-serif; font-size:12px; color:#999; background: #fff; background:url('search-icon.png') no-repeat left center; padding-left:25px; border:solid 1px #d9d9d9; border-right:none; -webkit-appearance:none; -webkit-border-radius:0px;}
#field:focus {outline:none;}
#delete {float:left; width:16px; height:24px; line-height:22px; padding:0 0 0 6px; font-family:"Lucida Sans", "Lucida Sans Unicode",sans-serif; font-size:14px; background:#FFFFFF; border:solid 1px #D9D9D9; border-left:none; -webkit-appearance:none; -webkit-border-radius:0px;}
#delete #x {color:#999999; cursor:pointer; display:none; }
#delete #x:hover {color:#666666;}
I noticed that changing the height:24px below:
#delete {float:left; width:16px; height:24px; line-height:22px; padding:0 0 0 6px; font-family:"Lucida Sans", "Lucida Sans Unicode",sans-serif; font-size:14px; background:#FFFFFF; border:solid 1px #D9D9D9; border-left:none; -webkit-appearance:none; -webkit-border-radius:0px;}
To height:27px; aligns correctly in Safari on the iPad/iPhone but then doesn't display correctly on IE/FF/Chrome.
Any help would be very much appreciated with this. Thanks
I tested locally it works, if you add the following on top of your page then the problem should be fixed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Set #delete {height:22px;}
The height on your #field is set to 22px so it must be the same on #delete.
As a side note, I'm sure you do already, but if not, Firebug or Chrome tools can be very helpful in debugging CSS, HTML, Javascript, and much more.
THE FIX
OK. I troubleshooted further for you. This seemed to work for me (and made sense), but I didn't have a good way to test on iOS, so you will have to update the link. For some reason, it was adding padding - 1px - to three sides of the #field form. Try changing #field { padding-left:25px } to #field { padding: 0 0 0 25px; } This should work as long height is set to the same value on both #field and #delete. Let me know if it works, and I'll update my answer.
Related
I am coding HTML emails and would like to change the font size on mobile. I have used the code that google used as a text but changed it a bit and added font size. Below is the code that I tested. The color changed but the font size did not. Any hints or ideas where I might find an answer?
Thank you in advance for the help, it is muchly appreciated.
Vince
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
#media screen and (max-width:500px) {
.colored {
color:red;
}
p {
font-size: 10px;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is red if the window width is
below 500px and blue otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
You may just need to add the !important flag.
p {
font-size: 10px!important;
}
I am working on a web base app for my school with different versions of CSS for handheld, tablet and desktop. I am using media queries for this. The app is almost done and it works correctly on almost all browsers and android. The app looks awesome on Iphone/Ipad however buttons do not work making the app useless in these devices.
This is what I have:
//Source code
<div id="signinbutton" class="blue_button">Sign In</div>
//desktop.CSS
.blue_button {
width: 130px;
height: auto;
padding: 8px;
margin: 0% auto 20% auto;
background-image:url(../../images/bluebar5.png);
color: #FFF;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14pt;
font-weight: bolder;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: default;
}
.blue_button:hover {
opacity: 0.7;
}
//Handheld.css (this overwrites css on desktop)
.blue_button {
width: 260px;
font-size: 18pt;
background-image:url(../../images/bluebar6.png);
}
I tried applying the style to #signinbutton without success.
You should use a <button> or <input type="button"> tag instead of a div. While the <div> button functionality may work in some browsers, it can be a bit of a hack compared to the traditional button tags
You can wrap your div around <a> like this. It's perfectly valid with html5 now.
<div id="signinbutton" class="blue_button">Sign In</div>
You just need to adjust
Reference:
https://css-tricks.com/snippets/jquery/make-entire-div-clickable/
Try adding to the style of the div {cursor:pointer}.
Recently I have been working on a contact form for my portfolio website. The form works and I have managed to successfully send HTML mail from the server it's hosted on to my email address. Like most of my emails, these will be primarily read on my iPod Touch so the theme I based the mail template on is engineered for a screen 320px by 480px.
Even though the mail container element is set to width:100% and the same on all inner elements, there is a ~20px gap at the right side of the screen, as if that's the edge of the document:
Here is the script and style-sheet for reference:
PHP (snippet), request_form.php:
...
$email_subject = "Graphic Request - ".clean_string($first_name);
$email_message .= '<html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/><link rel="stylesheet" href="http://blieque.comli.com/mail-styles.css" type="text/css"></head><body><table id="all" cellspacing="0" cellpadding="0">';
$email_message .= '<tr><td id="head"><h1>New Request</h1></td></tr>';
$email_message .= '<tr><td class="info"><span id="param">Name:</span> '.clean_string($first_name).'</td></tr>';
$email_message .= '<tr><td class="info sub"><span id="param">Email Address:</span> '.clean_string($email_from).'</td></tr>';
$email_message .= '<tr><td class="info sub"><span id="param">Service:</span> '.clean_string($service).'</td></tr>';
$email_message .= '<tr><td class="info sub jstfy"><span id="param">Details:</span> '.clean_string($request).'</td></tr>';
$email_message .= '<tr><td id="foot"></td></tr></table></body></html>';
...
CSS, mail-styles.css:
body {
margin: 0 !important;
font-family: Arial, Helvetica, sans-serif;
color: #242424 !important;
text-decoration: none !important;
}
#all {
width: 110%;
}
#head {
background: #1393A1;
color: #61BDC7;
border-bottom: solid 0.5em #61BDC7;
width: 100%;
padding: 1em 0.5em;
height: 20px;
}
td.sub {
border-top: solid 0.25em #1393a1;
}
td.info {
padding: 0.35em 0.5em;
font-size: 12pt;
}
td.jstfy {
text-align: justify;
}
span#param {
color: #1393a1;
font-weight: bold;
}
td[class=info] {
text-transform: capitalize;
}
#foot {
background: #1393a1;
width: 100%;
height: 20px;
color: transparent;
border-top: solid 0.5em #61BDC7;
}
#line {
background: #1393a1;
width: 94%;
height: 0.25em;
margin-left: auto;
margin-right: auto;
}
The email also doesn't work well with online email viewers as they tend to have their own overriding style-sheets for common tags like <h1>. I hope the solution is something obvious.
This worked for me:
html, body {
width: 100%;
padding: 0;
margin: 0;
}
When I used min-width instead of width, the content got too wide. I also have these viewport settings in my header:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
You could try adding min-width: 100% to the <body> element to deal with the gap.
And as the others suggested, moving your styles inline should deal with the rest of your problems.
Maybe try
html, body {
margin: 0;
padding: 0;
}
HTML emails don't handle external stylesheets very well so this may be your problem.
You should only use inline styles on HTML emails as a general rule of thumb.
Here's a good guide on HTML emails:
http://kb.mailchimp.com/article/how-to-code-html-emails
This is happening because body has padding by default on most browsers. add:
body{
padding:0px;
}
I've dealt with this issue numerous times. Every time it occurs I always realize that it's happening because I'm using cellpadding incorrectly on one of my tables.
For example, I got caught up for a bit today because near the bottom of one of the emails I was working on there is a table with a press banner that stretches horizontally across the bottom like this:
<center><!-- Press Banner -->
<table border="0" cellpadding="15" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a role="link" href="#" target="_blank" title="#">
<span class="press">
<img class="desktop" src="#" border="0" style="display:block;">
</span>
</a>
</td>
</tr>
</table>
</center>
That image is 600 pixels wide and is switched for a 320 pixel wide background image for the mobile layout. I needed to add some vertical spacing between that block and the others so I chose to add cellpadding="15" to do so, without realizing that 15 pixels would also stretch out horizontally. But on the iOS device this is extra space only renders on the right side, not the left, so its not obvious what the problem is.
To fix it, I removed the cellpadding and used table spacers instead on the top and bottom.
<tr>
<td><table border="0" cellpadding="6" cellspacing="0"><tr><td height="4"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table></td>
</tr>
There are many other reasons that this issue could occur as other people have already mentioned, but just adding this potential cause for anyone else who may be overlooking the same error that I made.
Additionally as a rule of thumb, you should never import CSS in an HTML email, you should inline as much style as possible and use depreciated CSS2 tags and oldschool HTML styling elements whenever possible to achieve the highest level of cross device, client compability. I recently uploaded a project to github(link) which is the html email template I've created while building emails for some time. It's pretty much the most compatible template you'll find anywhere.
I am using Typekit to load the league-gothic font and for some reason Safari is completely eliminating the word-spacing so there are no gaps between the words. Before I go with a css hack, I was wondering if anyone could help. Here is the html:
<div class="page-header">
<h1 data-name="about">About Campaign Title</h1>
</div>
And here is the CSS:
h1 {
font: 70px/normal "league-gothic", sans-serif;
text-transform: uppercase;
color: #4e4e4e;
}
I tried placing an h1 tag all over the page and still saw the problem. I also set word-spacing to both inherit and normal, seeing the same result.
Thanks.
This turned out to be a problem with the new text-rendering property. We are using bootstrap.css from Twitter and Bootstrap had the text-rendering property set to optimizeLegibility. We set it back to auto as follows:
h1 {
font: 70px/normal "league-gothic", sans-serif;
text-transform: uppercase;
color: #4e4e4e;
text-rendering: auto;
}
I'm using CSS to style the input buttons on my website, but on IOS devices the styling is replaced by Mac's default buttons. Is there a way to style buttons for iOS, or a way to maybe make a hyperlink that behaves like a submit button?
You may be looking for
-webkit-appearance: none;
Safari CSS notes on -webkit-appearance
Mozilla Developer Network's -moz-appearance
Please add this css code
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
I recently came across this problem myself.
<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->
Hope that helps.
Use the below css
input[type="submit"] {
font-size: 20px;
background: pink;
border: none;
padding: 10px 20px;
}
.flat-btn {
-webkit-appearance: none; /*For Chrome*/
-moz-appearance: none;/*For Mozilla*/
appearance: none;
border-radius: 0;
}
h2 {
margin: 25px 0 10px;
font-size: 20px;
}
<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />
<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />
I had the same issue today using primefaces (primeng) and angular 7.
Add the following to your style.css
p-button {
-webkit-appearance: none !important;
}
i am also using a bit of bootstrap which has a reboot.css, that overrides it with (thats why i had to add !important)
button {
-webkit-appearance: button;
}
-webkit-appearance: none;
Note : use bootstrap to style a button.Its common for responsive.