SpinOneSolutions » HTML http://www.spinonesolutions.com I waste my time so that you don't have to... Mon, 16 May 2011 17:01:16 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 “Mysterious” 3px Gap Below Image http://www.spinonesolutions.com/2010/03/mysterious-3px-gap-below-image/ http://www.spinonesolutions.com/2010/03/mysterious-3px-gap-below-image/#comments Mon, 29 Mar 2010 15:00:14 +0000 Will Wright http://www.spinonesolutions.com/?p=510 The Problem:

I had a “mysterious” 3px gap below a couple of images and no matter what I did I couldn’t seem to get rid of it.  It was as if the image was 3px taller or had 3px of margin or padding, but zeroing all of these attributes had no effect.

The Solution:

I finally hit upon the solution here.

In short, the article says that CSS2 compliant browsers align images to the baseline because they are replaced inline elements. The article goes on to show some appropriate solutions in different situations.

The solution that worked for me was:

img { vertical-align: bottom }
]]> http://www.spinonesolutions.com/2010/03/mysterious-3px-gap-below-image/feed/ 1 Mozilla Strict Three Column Layout with UL http://www.spinonesolutions.com/2009/06/mozilla-strict-three-column-layout-with-ul/ http://www.spinonesolutions.com/2009/06/mozilla-strict-three-column-layout-with-ul/#comments Wed, 24 Jun 2009 15:08:03 +0000 Will Wright http://www.spinonesolutions.com/?p=274 The Problem:

Note: This only applies to XHTML 1.0 Strict Doctypes and Mozilla.

I make this type of layout all the time!  Two fixed width columns on either side of a fluid column.  Recently I had to put a list of article teasers into the center (fluid) column.  No problem, I marked up an unordered list, floated the thumbnail to the left and let the title and teaser paragraph do their thing.  The only problem was that in order to get the box model for the “li” to fully wrap the inner content I had to apply “clearfix” to it.  That’s when everything broke and I started working on a fix which I shall now share with you!

First things first.  Let’s go over the three column layout:

Three Column Layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="screen">
.layout_left {
 background-color:yellow;
 float:left;
 width:250px;
}
.layout_right {
 background-color:green;
 float:right;
 width:250px;
}
.layout_center {
 background-color:grey;
 margin:0px 270px;
}
</style>

</head>
<body>

 <div class="layout_left" >
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elementum mauris. In ultricies lobortis dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent pellentesque, tortor nec rutrum auctor, tellus velit feugiat tellus, id consectetur orci augue in lorem. Donec tempor posuere ligula a ullamcorper. Quisque aliquam lacinia convallis. Sed eget placerat nisi. Etiam dignissim gravida lorem sit amet auctor. In hac habitasse platea dictumst. Nunc blandit imperdiet rhoncus. Donec laoreet, nibh sed consectetur posuere, lacus eros adipiscing felis, eleifend eleifend purus libero ut nulla. Duis commodo felis vitae tellus accumsan non ultrices justo feugiat. Curabitur auctor dolor ut mi iaculis dapibus. Nunc posuere dolor in elit scelerisque cursus. Vestibulum libero lacus, auctor at mattis et, pretium eget massa.
 </div>
 <div class="layout_right >
  Ut placerat tortor sed dui molestie eu fringilla risus ultricies. Phasellus faucibus turpis eu purus lacinia at blandit quam scelerisque. Etiam laoreet purus at augue varius a pellentesque diam accumsan. Nulla sodales auctor nibh, ac vehicula est bibendum a. In vitae quam vel dolor blandit sagittis. Proin ut congue lacus. Nulla facilisi. Sed viverra gravida justo, id feugiat nisl dignissim id. In hac habitasse platea dictumst. Proin faucibus congue pellentesque. Integer nec velit mauris, non ullamcorper leo. Duis sagittis rhoncus tincidunt. Phasellus erat metus, tristique vel lacinia non, tempus sit amet lacus.
 </div>
 <div class="layout_center >
  Cras ac sapien ipsum. Proin orci eros, consectetur rhoncus tempus nec, ultricies sit amet metus. Vivamus condimentum tellus arcu. Mauris lorem risus, congue in tincidunt nec, tincidunt a diam. Aliquam non diam quis augue pellentesque auctor sed vel velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ac lacus sit amet arcu imperdiet facilisis quis et turpis. Sed venenatis dignissim ligula at vestibulum. Nulla non ante elit, eu aliquet leo. Sed laoreet nulla ac justo volutpat ac facilisis nulla eleifend. Morbi nibh sapien, tincidunt ut egestas a, imperdiet eu purus. Suspendisse potenti. Sed eget sapien mi.
 </div>

</body>
</html>

Yea!  Hot!  Now I’m going to add in my list of article teasers and we’ll see what the problem is:

Three Column Layout Broken

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="screen">
.layout_left {
 background-color:yellow;
 float:left;
 width:250px;
}
.layout_right {
 background-color:green;
 float:right;
 width:250px;
}
.layout_center {
 background-color:grey;
 margin:0px 270px;
}

p {
 margin:0 0 1.5em;
}

ul {
 list-style-type:none;
 margin:0px;
 padding:0px;
}
 ul li {
  border:1px solid red;
 }

ul img {
 float:left;
 margin:0px 10px 0 0;
}

</style>

</head>
<body>

 <div class="layout_left" >
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elementum mauris. In ultricies lobortis dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent pellentesque, tortor nec rutrum auctor, tellus velit feugiat tellus, id consectetur orci augue in lorem. Donec tempor posuere ligula a ullamcorper. Quisque aliquam lacinia convallis. Sed eget placerat nisi. Etiam dignissim gravida lorem sit amet auctor. In hac habitasse platea dictumst. Nunc blandit imperdiet rhoncus. Donec laoreet, nibh sed consectetur posuere, lacus eros adipiscing felis, eleifend eleifend purus libero ut nulla. Duis commodo felis vitae tellus accumsan non ultrices justo feugiat. Curabitur auctor dolor ut mi iaculis dapibus. Nunc posuere dolor in elit scelerisque cursus. Vestibulum libero lacus, auctor at mattis et, pretium eget massa.
 </div>
 <div class="layout_right" >
  Ut placerat tortor sed dui molestie eu fringilla risus ultricies. Phasellus faucibus turpis eu purus lacinia at blandit quam scelerisque. Etiam laoreet purus at augue varius a pellentesque diam accumsan. Nulla sodales auctor nibh, ac vehicula est bibendum a. In vitae quam vel dolor blandit sagittis. Proin ut congue lacus. Nulla facilisi. Sed viverra gravida justo, id feugiat nisl dignissim id. In hac habitasse platea dictumst. Proin faucibus congue pellentesque. Integer nec velit mauris, non ullamcorper leo. Duis sagittis rhoncus tincidunt. Phasellus erat metus, tristique vel lacinia non, tempus sit amet lacus.
 </div>
 <div class="layout_center" >
  <ul>
   <li >
    <img src="images/action_1.gif" alt="All for Good" />
    <a href="">All for good</a>
    <p>Small actions add up to a big difference. All for Good helps you find and share ways to do good.</p>
   </li>
   <li>
    <img src="images/action_2.gif" alt="Top Birthday Wish Fundraisers on Causes" />
    <a href="">Top Birthday Wish Fundraisers on Causes</a>
    <p>See the top birthday wish fundraisers on Causes and learn</p>
   </li>
   <li>
    <img src="images/action_3.gif" alt="Raise Awareness for Your Cause" />
    <a href="">Raise Awareness for Your Cause</a>
    <p>Set-up a branded credit card through our partner Capital One&reg; for your organization-with your logo.</p>
   </li>
   <li>
    <img src="images/action_4.gif" alt="Title/Headline" />
    <a href="">Title/Headline</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
   </li>
  </ul>
 </div>

</body>
</html>

Snap yo!  That list be broken.  If you hit that with firebug you’ll see that the box model for that second teaser list item doesn’t wrap the image because it’s been floated to the left.  Since the text for that particular item isn’t that long, it doesn’t push the box model down past the right hand edge of the image and that is what’s causing the thrid list item to stack up to the right of it.

The way I usually make the box model wrap floated elements is to apply the “clearfix” class to the parent element (the li in our case).

Three Column Layout Clearfix

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="screen">
.layout_left {
 background-color:yellow;
 float:left;
 width:250px;
}
.layout_right {
 background-color:green;
 float:right;
 width:250px;
}
.layout_center {
 background-color:grey;
 margin:0px 270px;
}

p {
 margin:0 0 1.5em;
}

ul {
 list-style-type:none;
 margin:0px;
 padding:0px;
}
 ul li {
  border:1px solid red;
  margin:0 0 10px 0;
  padding:0px;
 }

ul img {
 float:left;
 margin:0px 10px 0 0;
}

.clearfix:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

.clearfix {
 display: inline-block;
}

html[xmlns] .clearfix {
 display: block;
}

* html .clearfix {
 height: 1%;
}

</style>

</head>
<body>

 <div class="layout_left" >
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elementum mauris. In ultricies lobortis dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent pellentesque, tortor nec rutrum auctor, tellus velit feugiat tellus, id consectetur orci augue in lorem. Donec tempor posuere ligula a ullamcorper. Quisque aliquam lacinia convallis. Sed eget placerat nisi. Etiam dignissim gravida lorem sit amet auctor. In hac habitasse platea dictumst. Nunc blandit imperdiet rhoncus. Donec laoreet, nibh sed consectetur posuere, lacus eros adipiscing felis, eleifend eleifend purus libero ut nulla. Duis commodo felis vitae tellus accumsan non ultrices justo feugiat. Curabitur auctor dolor ut mi iaculis dapibus. Nunc posuere dolor in elit scelerisque cursus. Vestibulum libero lacus, auctor at mattis et, pretium eget massa.
 </div>
 <div class="layout_right" >
  Ut placerat tortor sed dui molestie eu fringilla risus ultricies. Phasellus faucibus turpis eu purus lacinia at blandit quam scelerisque. Etiam laoreet purus at augue varius a pellentesque diam accumsan. Nulla sodales auctor nibh, ac vehicula est bibendum a. In vitae quam vel dolor blandit sagittis. Proin ut congue lacus. Nulla facilisi. Sed viverra gravida justo, id feugiat nisl dignissim id. In hac habitasse platea dictumst. Proin faucibus congue pellentesque. Integer nec velit mauris, non ullamcorper leo. Duis sagittis rhoncus tincidunt. Phasellus erat metus, tristique vel lacinia non, tempus sit amet lacus.
 </div>
 <div class="layout_center" >
  <ul>
   <li class="clearfix" >
    <img src="images/action_1.gif" alt="All for Good" />
    <a href="">All for good</a>
    <p>Small actions add up to a big difference. All for Good helps you find and share ways to do good.</p>
   </li>
   <li class="clearfix" >
    <img src="images/action_2.gif" alt="Top Birthday Wish Fundraisers on Causes" />
    <a href="">Top Birthday Wish Fundraisers on Causes</a>
    <p>See the top birthday wish fundraisers on Causes and learn</p>
   </li>
   <li class="clearfix" >
    <img src="images/action_3.gif" alt="Raise Awareness for Your Cause" />
    <a href="">Raise Awareness for Your Cause</a>
    <p>Set-up a branded credit card through our partner Capital One&reg; for your organization-with your logo.</p>
   </li>
   <li class="clearfix" >
    <img src="images/action_4.gif" alt="Title/Headline" />
    <a href="">Title/Headline</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
   </li>
  </ul>
 </div>

</body>
</html>

Well that worked, kinda.  It certainly did what it was supposed to do just not what I wanted to do.

The culprint is this line:

html[xmls] .clearfix {
display:block;
}

The Solution:

Now that we know the problem, the solution is actually pretty simple.  All we have to do is write a selector to only target “clearfix” applied to “li”s that are in our three column layout.

three_column_layout_fixed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="screen">
.layout_left {
 background-color:yellow;
 float:left;
 width:250px;
}
.layout_right {
 background-color:green;
 float:right;
 width:250px;
}
.layout_center {
 background-color:grey;
 margin:0px 270px;
}

p {
 margin:0 0 1.5em;
}

ul {
 list-style-type:none;
 margin:0px;
 padding:0px;
}
 ul li {
  border:1px solid red;
  margin:0 0 10px 0;
  padding:0px;
 }

ul li.clearfix {
  display:inline-block !important;
}

ul img {
 float:left;
 margin:0px 10px 0 0;
}

.clearfix:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

.clearfix {
 display: inline-block;
}

html[xmlns] .clearfix {
 display: block;
}

* html .clearfix {
 height: 1%;
}

</style>

</head>
<body>

 <div class="layout_left" >
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elementum mauris. In ultricies lobortis dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent pellentesque, tortor nec rutrum auctor, tellus velit feugiat tellus, id consectetur orci augue in lorem. Donec tempor posuere ligula a ullamcorper. Quisque aliquam lacinia convallis. Sed eget placerat nisi. Etiam dignissim gravida lorem sit amet auctor. In hac habitasse platea dictumst. Nunc blandit imperdiet rhoncus. Donec laoreet, nibh sed consectetur posuere, lacus eros adipiscing felis, eleifend eleifend purus libero ut nulla. Duis commodo felis vitae tellus accumsan non ultrices justo feugiat. Curabitur auctor dolor ut mi iaculis dapibus. Nunc posuere dolor in elit scelerisque cursus. Vestibulum libero lacus, auctor at mattis et, pretium eget massa.
 </div>
 <div class="layout_right" >
  Ut placerat tortor sed dui molestie eu fringilla risus ultricies. Phasellus faucibus turpis eu purus lacinia at blandit quam scelerisque. Etiam laoreet purus at augue varius a pellentesque diam accumsan. Nulla sodales auctor nibh, ac vehicula est bibendum a. In vitae quam vel dolor blandit sagittis. Proin ut congue lacus. Nulla facilisi. Sed viverra gravida justo, id feugiat nisl dignissim id. In hac habitasse platea dictumst. Proin faucibus congue pellentesque. Integer nec velit mauris, non ullamcorper leo. Duis sagittis rhoncus tincidunt. Phasellus erat metus, tristique vel lacinia non, tempus sit amet lacus.
 </div>
 <div class="layout_center" >
  <ul>
   <li class="clearfix" >
    <img src="images/action_1.gif" alt="All for Good" />
    <a href="">All for good</a>
    <p>Small actions add up to a big difference. All for Good helps you find and share ways to do good.</p>
   </li>
   <li class="clearfix" >
    <img src="images/action_2.gif" alt="Top Birthday Wish Fundraisers on Causes" />
    <a href="">Top Birthday Wish Fundraisers on Causes</a>
    <p>See the top birthday wish fundraisers on Causes and learn</p>
   </li>
   <li class="clearfix" >
    <img src="images/action_3.gif" alt="Raise Awareness for Your Cause" />
    <a href="">Raise Awareness for Your Cause</a>
    <p>Set-up a branded credit card through our partner Capital One&reg; for your organization-with your logo.</p>
   </li>
   <li class="clearfix" >
    <img src="images/action_4.gif" alt="Title/Headline" />
    <a href="">Title/Headline</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
   </li>
  </ul>
 </div>

</body>
</html>

That’s it!

]]> http://www.spinonesolutions.com/2009/06/mozilla-strict-three-column-layout-with-ul/feed/ 0 Long Legend Text Display Issue http://www.spinonesolutions.com/2009/04/long-legend-text-display-issue/ http://www.spinonesolutions.com/2009/04/long-legend-text-display-issue/#comments Wed, 08 Apr 2009 15:56:54 +0000 Will Wright http://www.spinonesolutions.com/?p=194 The Problem:

I recently built a form for a customer which had a really long legend!  My content area was floated to allow for a right hand sidebar and I noticed that with the addition of the new legend the layout had broken.

The issue, it turns out, is that both IE and FF handled the legend in an unexpected way.  Let’s throw down some markup for some examples.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="screen">
 label,
 input {
  width:100%;
 }
 
 .container {
  width:250px;
 }
 
 fieldset {
 }

 legend {
 }
</style>
</head>

<body>

<div class="container">
 <fieldset>
  <legend>This is a really long legend as an example, so lets make it really long</legend>
  <label for="input1">Input 1</label>
  <input type="text" id="input1" name="input1" value="input1">
  <label for="input2">Input 2</label>
  <input type="text" id="input2" name="input2" value="input1">
  <label for="input3">Input 3</label>
  <input type="text" id="input3" name="input3" value="input1">
 </fieldset>
</div>

</body>
</html>

FF3 Example

IE7 Example

The Solution:

The solution for FF3 is exactly what I would expect it to be; add white-space:normal; to the legend style definition.

 label,
 input {
  width:100%;
 }
 
 .container {
  width:250px;
 }
 
 fieldset {
 }

legend {
  white-space:normal;
 }

FF3 Fixed

The solution for IE7 is a little bit more involved.  We need to nest a span tag within the legend, and then add the white-space attribute; plus a couple of other ornaments.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="screen">
 label,
 input {
  width:100%;
 }
 
 .container {
  width:250px;
 }
 
 fieldset {
 }
 
 legend {
 }
 
 span {
  display:block;
  white-space:normal;
  width:100%;
 }
</style>
</head>

<body>

<div class="container">
 <fieldset>
  <legend><span>This is a really long legend as an example, so lets make it really long</span></legend>
  <label for="input1">Input 1</label>
  <input type="text" id="input1" name="input1" value="input1">
  <label for="input2">Input 2</label>
  <input type="text" id="input2" name="input2" value="input1">
  <label for="input3">Input 3</label>
  <input type="text" id="input3" name="input3" value="input1">
 </fieldset>
</div>

</body>
</html>

”IE7 ]]> http://www.spinonesolutions.com/2009/04/long-legend-text-display-issue/feed/ 4 CSS hover menu sticking open http://www.spinonesolutions.com/2009/02/css-hover-menu-sticking-open/ http://www.spinonesolutions.com/2009/02/css-hover-menu-sticking-open/#comments Tue, 24 Feb 2009 17:21:15 +0000 Will Wright http://www.spinonesolutions.com/?p=175 Problem

Are your CSS hover menus sticking open in IE after the mouse has left the hit region?

Solution

Given the following markup:

<ul id="nav">
  <li>
    <div class="dropdown">
      <ul>
        <li>NavItem</li>
      </ul>
    </div>
  </li>
</ul>

IE doesn’t like hiding via the off screen positioning method.

#nav ul {
position:absolute;
left:-999px;
}
#nav div.drop:hover ul
{
  left:0;
}

So we’ll just switch it to use the display property instead.

#nav ul {
position:absolute;
display:none;
}
#nav div.drop:hover ul
{
  display:block;
}
]]> http://www.spinonesolutions.com/2009/02/css-hover-menu-sticking-open/feed/ 1