A Log of Coding Solutions
Found a great article that demonstrates vertically centering multiline text. It uses display:table and display:table-cell among some IE hacks.
Found a better post on stack overflow that does this. The idea is to have an outer div with a specific height and the same line height. Then a span inside to define your true line height.
keywords: css vertical center text
source: http://css-tricks.com/vertically-center-multi-lined-text/source: http://stackoverflow.com/a/14850381
I am replacing a two-column table where the first column is on the left with a width about 90% and the 2nd column is on the right with a width of 10%. The following HTML does not work as the span width only is as wide as the text. When I use floats on the spans, it takes the span elements out of the layout so that the li collapses as if there’s nothing in it.
<ul>
<li><span>left</span><span>right</span></li>
</ul>
Turns out I need to set the display attribute to inline-block for the span elements. Now the width works as expected.
keywords: css width no effect
source: http://csscreator.com/node/28049
In Firefox and Chrome, having a table with an image of height 1 causes the row height to be 6px. Code as shown below:
<table height=”1″>
<tr>
<td><img src=”images/spacer.gif” width=”170″ height=”1″ alt=””></td>
<td><img src=”images/spacer.gif” width=”163″ height=”1″ alt=””></td>
<td><img src=”images/spacer.gif” width=”334″ height=”1″ alt=””></td>
<td><img src=”images/spacer.gif” width=”153″ height=”1″ alt=””></td>
<td><img src=”images/spacer.gif” width=”180″ height=”1″ alt=””></td>
</tr>
</table>
After setting all styles that I could think of (padding, margin, height, vertical-alignment, line-height) and every element to have a height attribute of 1, nothing worked. Turns out all that is needed is a “display:block” for the img element:
<table height=”1″>
<tr>
<td><img style=”display:block;” src=”images/spacer.gif” width=”170″ height=”1″ alt=””></td>
<td><img style=”display:block;” src=”images/spacer.gif” width=”163″ height=”1″ alt=””></td>
<td><img style=”display:block;” src=”images/spacer.gif” width=”334″ height=”1″ alt=””></td>
<td><img style=”display:block;” src=”images/spacer.gif” width=”153″ height=”1″ alt=””></td>
<td><img style=”display:block;” src=”images/spacer.gif” width=”180″ height=”1″ alt=””></td>
</tr>
</table>
keywords: firefox table height 6
source: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084464.html
I have a div with id “stripe” that is using absolute positioning to be at the top of the page and span 100% of the page width. It overlays the top part of the website. The rest of my page is 1000px wide. When viewing on the iPhone, the “stripe” div is only a portion of the screen width. Why?
If you debug the website for the iPhone, you’ll see that the width of the “stripe” dive is only 320px. Sound familiar? That’s because the width of the iPhone is 320px and so 100% of the viewport is 320px according to the iphone. There are many possible solutions for this. One solution is to make the “stripe” div’s position relative. The relative allows the 100% width expand the entire 1000px . Then in the following div set the margin-top to negative of whatever the “stripe” div’s height is.
I created a website that looked great in IE7+, FF, Chrome, and Safari, but on the iPhone a few things looked off. Problems could be from the viewport being 480px wide but the website is 1000px wide so using percentages can mess it up… that’s another post sorry. The problem is, how do I use something like firebug to debug the css and html in the iPhone mobile Safari browser?
The best solution is if you have a Mac OS X and the iOS 5 SDK. If you don’t have a Mac or you don’t have iOS5 SDK and don’t want to download it from the Mac App Store, move on to the next solution. This solution involves a great FREE tool to debug, profile, and inspect web applications running in the iPhone simulator is iWebInspector by Max Firtman. This tool, as it says in the tool, enables a private API available on the iOS 5 framework. It lets you inspect the web page or webapp similar to firefox. To use it:
One thing annoying is that you can’t add CSS attributes to existing CSS classes. A way around this is to add attributes to the element.style section for the element you want to alter. Another thing I noticed is that the Simulator freezes from time to time. To “unfreeze” it I had to quit both the simulator and iWebInspector and start over. Other that it’s great!
A second option to debug a website in the iPhone is by using Firebug Lite. Here’s what you do:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
I prefer the first solution over this one because obviously, Firebug is very small on the iPhone.
keywords: iphone safari on desktop, iphone firebug
sources:
http://www.iwebinspector.com/
http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone
I added the Contact Form 7 wordpress plugin and created my form. I created it with no line breaks whatsoever. It looked like this:
<span>Name</span><span>[text* contact-name]</span><span>Email</span><span>[email* contact-email]</span><span>Message</span><span>[textarea* contact-message x4]</span>[submit “Submit”]
However, on the page, I had <br> tags after Name and each of the labels. WHY?
Apparently WPCF7_AUTOP function in the plugin automatically adds the br tag. The best solution is to add a style to hide the br in the form:
.wpcf7-form-control-wrap br { display: none; }
The rest of the solutions are found here:
http://www.alvaronicardo.com/remove-line-break-from-contact-form-7/
keywords: contact form 7 extra break line