CSS To the Rescue!Episode 1: Wrapping Spans – Conversion Wednesday

By Dan G


As I’m sure a lot of you already know, CSS stands for Cascading Style Sheets. It’s the style sheet language that is used to describe and control the presentation of a markup language like HTML. I’m also certain that if your in the ecommerce world you’ve dabbled in CSS at least once or twice before. Whether it was to change the positioning of a banner or the font size of a price, CSS is what you can use to override the default style structure of the page and make it your own.

So let’s start with a basic case where CSS would be used to solve a problem. I’ll explain how the scenario’s code should have been created in the first place, the way it actually was created, and the CSS solution that was put in place to fix the crossbrowser issue that resulted from the actual code:

Let’s say you have some text, and in this case that text is “Follow Daily Deals”, and let’s say you wanted to position an arrow image to the right of the text.

The easiest way to create this scenario so that it is cross-browser friendly would be to to create both of these items in a table with adjoining columns. As seen in the HTML here.

I’ll show you what was actually coded on the site in the next slide.

So this is the HTML that was actually coded before I came upon it. And because we couldn’t change the HTML code, the only tool we had for solving this issue was making a change to the CSS file used on the page. As you can see, the original developer for this only created one div and threw in two spans to place the “Follow Daily Deals” text to the left of the arrow image. Which does work for some browsers, but unfortunately, not for all of them. This code was not cross-browser compatible HTML unless some CSS was added to save the day. (mainly because the preset width for this div was not quite large enough to accommodate both elements on the same line in all browsers.)

I’ll reveal the solution on the next page.

The CSS solution to this cross-browser predicament was simple. All we had to do was make the width of the div (which was originally 130 pixels) a little larger to accommodate both elements in the div on the same line, and just as a precaution, we also add a CSS RULE to the surrounding div to prevent the items in the div from wrapping.

After these two changes to the CSS were live; the wrapping elements that existed before the change went the way of the dodo bird and this portion of the site was displayed flawless in all of the major browsers.

So the next time you have two or more elements that you would like to position side-by-side, and you want to ensure that the display is the same in all browsers definitely use a table in your HTML, otherwise, prepare to use CSS to get cross-browser compatibility.

So that’s it, that’s our first episode in the “CSS To The Rescue” series. If you’ve found something today that you realize your site could use and you don’t have the time or effort to put into changing some CSS or Javascript on your site. Consider asking us to help you with these changes! We can comb your site and pick out all of the major outlying issues. Repair them with specific tests for your site. Then procure and analyze the change’s overall effect, and present you with the winning changes. It’s that easy!