H2 inside div inline-block weird offset - offset

I have an <a> surrounding a <div> which also has some images, a <h2> and a paragraph of text. The <a>'s all are inline-block. Whenever the H2 extends on to two lines the next <a> is offset. Below is a screenshot.
HTML:
<a href="#">
<div>
<div class="imgOverflow">
<img src="/hello/there">
</div>
<h2>This is the title</h2>
<p>This is a paragraph</p>
</div>
</a>
CSS:
a {
display:inline-block;
font-size:16px;
border:1px solid grey;
width:260px;
margin:5px;
color:black;
overflow: hidden;
}
div {
display:block;
padding:5px;
width:250px;
height:300px;
}
p {
font-size:12px;
text-align:justify;
}
h2 {
margin:5px 0 10px 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.imgOverflow {
margin:-5px 0 0 -5px;
width:260px;
padding:0;
overflow:hidden;
height:130px;
display:block;
}
If anybody knows some sort of CSS property to avoid this that would be extremely helpful. Thank you.

I guess that's because your a element is vertically aligned to bottom and your some of your h2 elements are spanning across two lines while the last ones are only one line. Try this:
a {
display:inline-block;
font-size:16px;
border:1px solid grey;
width:260px;
margin:5px;
color:black;
overflow: hidden;
vertical-align: top; /* Notice this line */
}
A working example
EDIT
This edit comes after imray's question.
I've tested the code once again in Ubuntu 12.04 LTS - Chrome 33.0.1750.152 after almost 2 years this question has been replied, and found out that - now - when you remove vertical-align property the code tends to work as well. However, together with that if you remove the overflow property then you will see that display breaks.
Now, imagine the following case:
This is our container:
------------------------------------------------
| Element 2: |
| Element 1: -------------------- |
| ------------- | Lorem ipsum dolor| |
| | Lorem ips | | sit amet | |
| ------------- -------------------- |
------------------------------------------------
When default values are on element 1 and element 2 will be aligned to the baseline of their container and this baseline changes - obviously - according to the height of the container, which at the end gets determined by the height of their children - if otherwise not specified.
Apparently, by the time of writing - as css implementation of browsers tend to change by time, removing vertical-align: bottom and leaving the overflow: hidden seems to make the code work - not tested in other browsers -, but then again simply aligning them to top, should resolve the problem completely because when you align to the top, the elements in the next lines will be aligned to the top of the line.

Related

Seamless scaling of website header on the iphone.

I have a website (http://ukchina-trading.com/) with the following header:
HTML
<div class='leftImage'>
<img src='image/unionjack.png'>
</div>
<div class='title'>
<h1>J Plus Trading</h1>
<h2>Briding the gap between China and the UK</h2>
</div>
<div class='rightImage'>
<img src='image/chinawings.png'>
</div>
CSS
.title h1 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
font-size: 68px;
line-height: 65px;
padding-top: 60px;
margin-bottom: 80px;
}
.title h2 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
position:relative;
top:-88px;
left:3px;
font-size: 16px;
color: #FF3300;
}
.rightImage {
position:absolute;
right: 150px;
top: 2px;
}
.leftImage {
position:absolute;
left: 150px;
top: 2px;
}
When the website is view on a computer the header is fine, but when viewed on the iphone screen the images are pushed over the title, hiding it.
What is the best way to redo the header to stop this?
I'd suggest the best thing to do would be to bring the flags inside the 900px width of the website.
Keep them to the left and right of the "J Plus Trading" text but just use floats rather than absolute positioning.
your problem is the absolute positioning you are using, as this causes the images to be in the same position regardless of anything else on the page. instead of absolute try using float:left; and float:right on your left and right images, and this way the text will not be pushed over it. you may have to create extra containing divs with margins or padding so that the images are positioned how you want them

website for iphone css media queries

I am trying to fit my website for iphone
for that i am using twitter bootstrap responsive css
i gave the container with different border colors for different width
but when i minimize the browser window the border colors are not reflecting for the browser window
http://jsfiddle.net/CXkQp/1/
http://jsfiddle.net/CXkQp/1/embedded/result/
#media (min-width: 1200px) {
.row {
margin-left: -30px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px;
border: 1px solid red;
}
If I understand your question correctly, the page example you posted should be responsive, though I'm not sure that your bootstrap grid is setup the way you need it.
You have nested container divs for one thing # lines 120 and 145
Check what happens if I rename your 2 container divs:
http://jsfiddle.net/panchroma/CXkQp/3/embedded/result/
http://jsfiddle.net/panchroma/CXkQp/3/
line 120
<div class="containerA" style="background-color: white;">
line 145
<div class="containerB">
There are also some validation errors which could possibly be another piece of the puzzle. The cause may be that you can't simply paste HTML head content into the jsFiddle HTML panel as you have done. Check http://doc.jsfiddle.net/use/hacks.html#css-panel-hack for details on what you need to do.
My appologies if I've misunderstood something
Good luck!

CSS Search Box Alignment Issue in iPad/iPhone Only

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.

positioning and font size issues on iPhone Safari

I'm trying to make this website: http://501commons.org render the same on iPhone as on other browsers. On Android it works just fine. I have already added the -webkit-text-size-adjust: 100%; to the body style, which helped a little. What is still not working are the following pieces, and I can't figure out why mobile safari is not displaying them properly:
the top left logo just plain won't show up
the search box in the top right is way too far to the left
the red slogan in the header "A Resource for Nonprofits etc" is too large, too low, and extends beyond the right border
the font of the three nav menu items (Explore the Commons, Volunteer, Invest) is too large
Everything else seems ok, at least on the home page. What's weird is that all four problems above occur in the header.
Any help would be hugely appreciated!
Thanks!
I figured it out:
Top left logo
The logo not showing up was due to a strange non-cascading issue. The logo is an <img> tab inside an <a id="portal-logo" ...>. The #portal-logo has a display: inline-block; rule in the next-to-last stylesheet that applies to it, but not in the last one. In other words, this is what we have:
#portal-logo { /* in the last CSS file */
margin-bottom: 0;
}
#portal-logo { /* in the next-to-last CSS file */
display: inline-block;
margin: 1.375em 0;
}
Adding display: inline-block; to the last stylesheet magically makes the logo appear. Then I had to also fiddle with margins, position, top, etc to make it appear in the right place, but all these are in a CSS file that is loaded conditionally only on mobile browsers, so it's ok. It's just really strange that Safari on iOS does not cascade the display: inline-block; style!
Search box
I made the search box be rendered in the proper place by adding text-align:right; to its container, even though an earlier rule for the same container with text-align:left; makes it work just fine in every other browser.
Slogan
The slogan required the most tweaking. It's contained in a <div id="slogan">. Here is the old rule:
#slogan {
color: #EE3524;
float: right;
font-size: 110%;
font-weight: bold;
margin-right: -190px;
padding-top: 60px;
position: relative;
z-index: 1;
}
And here is the new rule that works on mobile safari:
#slogan {
-webkit-text-size-adjust: 100%;
clear:right;
color:#ee3524;
font-size:17.6px;
font-weight: bold;
float:right;
margin-right:0px;
padding-bottom:50px;
padding-top:0px;
position:relative;
text-align:right;
z-index:1;
}
One of the key differences is the absolute font-size in px, instead of as a % value.
Menu Items font
Likewise, specifying the font-size in px instead of % seemed to be the key here:
Old:
#portal-globalnav li a {
background-color: transparent;
color: #FFFFFF;
font-size: 1.2em;
font-weight: bold;
min-width: 3em;
padding-bottom: 11px;
}
New:
#portal-globalnav li a {
background-color:transparent;
color:#fff;
font-size:15.4px;
font-weight:bold;
padding-bottom:11px;
min-width:3em;
}
YMMV!

Dynamic text overflow for mobile phones

How do I get text-overflow to dynamically adjust when a mobile phone's orientation changes? This is how it should look:
Portrait mode
[] This is a very long ... |
[] Super long title is ... |
[] Hello |
[] Lorem ipsum |
Landscape mode
[] This is a very long title, right? |
[] Super long title is so long that ... |
[] Hello |
[] Lorem ipsum |
I've only been able to successfully see the ellipsis when text-overflow is applied to the immediate element, and this element has a hardcoded width. Now you see the problem: since mobile phones have a dynamic width based off of their orientation, this won't work. If you hardcode the width to make it look right in portrait mode, for example, it won't take advantage of the extra space in landscape mode. I already know a Javascript solution, but I wanted to see if anyone knew a clean CSS solution.
HTML
<ol>
<li>
<img src="foo.jpg" />
<p>This is a ver long title, right</p>
</li>
<li>
<img src="bar.jpg" />
<p>Super long title is so long that it can't fit</p>
</li>
</ol>
CSS
li {
}
li img {
float: left;
width: 4em;
height: 4em;
}
li p {
margin: 0 0 0 5em;
white-space: nowrap;
width: 16em;
text-overflow: ellipsis;
}
How about controlling the width for the ol?
CSS:
ol {
width: 100%;
}
li img {
float: left;
width: 4em;
height: 4em;
}
li p {
margin: 0 0 0 5em;
white-space: nowrap;
/* width: 16em; */
text-overflow: ellipsis;
overflow: hidden;
}
.clear {
clear: both;
}
HTML:
<ol>
<li>
<img src="http://www.codefromjames.com/dogquiz/images/dog.png" />
<p>This is a ver long title, right</p>
<div class="clear"></div>
</li>
<li>
<img src="http://www.codefromjames.com/dogquiz/images/dog.png" />
<p>Super long title is so long that it can't fit.
Super long title is so long that it can't fit. </p>
<div class="clear"></div>
</li>
</ol>
Here's a jsfidder demo for this, note that I added an extra <div> at the end of each <li> with clear:both style: http://jsfiddle.net/akuXJ/1/
What if you instead did width: 90%?
Add overflow: hidden to the list items, see this demo fiddle.
HTML:
<ol>
<li>
<img src="foo.jpg" />This is a ver long title, right
</li>
<li>
<img src="bar.jpg" />Super long title is so long that it can't fit
</li>
</ol>
CSS:
li img {
width: 4em;
height: 4em;
vertical-align: middle;
}
li {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: middle;
}
Or, with the images within paragraph's.
Or, with the images outside paragraph's.
Have you tried display table? If it's supported by the device, it might have the effect of assigning a width to the text by treating it as a table cell.
Something like...
ol { display: table; width:100%; }
li { display: table-row; }
li img { display: table-cell; width: 4em; height: 4em; }
li p { display: table-cell; padding-left:5em; white-space: nowrap; text-overflow: ellipsis; }
If that doesn't work, another option might be display: inline-block