Pop-up images with CSS and h-spacing in IE

@abjJul 08.2007

I’m trying out the nifty CSS pop-up code as described here:

~~[URL=”http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/”]~~http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/[/URL]

Problem is, my thumbnail HTML includes hspace=”20″, since there is text to the right of it,
and I want to create a bit of space around it —

everything’s OK in FF, but in IE7 the thumbnail is shifting position after it’s been
hovered over once, losing the hspace on the left-hand side and aligning with the
regular left margin (as defined by the CSS for p margin-left:30px).

So it displays with zero hspace on the left-hand side, and 40px (double) hspace
on the right-hand side.

Any way to stop the thumbnail shifting in this way?

HTML is as follows:

Thanks!

to post a comment

CSS

7 Comments(s) _↴

@macthewebJul 08.2007 — #The preferred method is to use margin instead of hspace or vspace. This gives you more control too as you can set separate margins for all 4 directions. hspace, vspace, border and align have all been depreciated in the current HTML specifications. Below I've moved their equivalent into the style declaration.

<a class="thumbnail" href="#thumb">

<img src="images/auction_front2.jpg" [COLOR="Blue"]style="margin: 0 20px; float: left; border: 0;" [/COLOR]alt="Mr Scales at the Auction" width="59" height="61">

<img src="images/auction_front.jpg"/></a>

Here the hspace has been replace by margin and the align="left" by float: left and border="0" by border: 0; in style.

Of course you can give your thumbnail images a class and move the CSS to your style sheet, greatly simplifying your markup. Since you have two images within your link, I would apply the class directly to the thumbnail image and not the a tag. That gives you finer grained control.

@abjauthorJul 08.2007 — #Fantastic -- thanks!

@abjauthorJul 09.2007 — #Hi there,

I've added this code to the style sheet as suggested ... trouble now is that

in FF there's what looks like a line-space drop/gap between the top of the

thumbnails and the start of the text to the right of them, whereas in

IE the associated text lines up pretty much with the top of each thumbnail.

Any way to standardise this so it works in both browsers?

Page at http://www.alexanderhutchison.com/publications.htm

@macthewebJul 10.2007 — #First, that's very clever the way you use the span to show large images. I'll remember that.

There are some awkward things you've done with your html though. First, you are using #image. Id should be used only once per page. It would be better as .image. That's the difference between id and class, class is reusable id should be unique. It would be even better if you chose a different class name altogether. A class or an id with the same name as an HTML element, ie. #image or .image is just too easy to get confused.

You have a lot of br tags hanging around. They may be affecting the spacing of the non floated text and not the floated thumbnails. Even when you are not using them for layout whenever you need two line breaks in a row you should be using paragraphs.

You have:

<i>
 </i>&lt;br&gt;
 
 &lt;br&gt;
 &lt;div id="image"&gt;
 &lt;a class="thumbnail" href="#thumb"&gt;
 &lt;img src="images/epitaph2.jpg" alt="Epitaph for a Butcher" width="59" height="78" border="0"&gt;
 &lt;span&gt;&lt;img src="images/epitaph.jpg"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
 
 &lt;p&gt;&lt;span&gt;&lt;strong&gt;
 Epitaph for a Butcher&lt;/strong&gt;&lt;br&gt;
 Kirkcaldy: Akros, 1997&lt;br&gt;
 17 p. (limited edition of 200 copies)&lt;br&gt;
 
 &lt;br&gt;
 Read extracts&lt;/span&gt;&lt;/p&gt;
 
 &lt;br&gt;
 
 &lt;br&gt;

I would do something like:

<i>
 </i>&lt;div class="image"&gt;
 &lt;a class="thumbnail" href="#thumb"&gt;
 &lt;img src="images/epitaph2.jpg" alt="Epitaph for a Butcher" width="59" height="78" border="0"&gt;
 &lt;span&gt;&lt;img src="images/epitaph.jpg"&gt;&lt;/span&gt;&lt;/a&gt;
 
 &lt;h4&gt;Epitaph for a Butcher&lt;/strong&gt;&lt;br&gt;
 Kirkcaldy: Akros, 1997&lt;br&gt;
 17 p. (limited edition of 200 copies)&lt;/h4&gt;
 
 &lt;p&gt;&lt;a href="linktoextracts"&gt;Read extracts&lt;/a&gt;&lt;/p&gt;
 &lt;/div&gt;

With CSS of:

<i>
 </i>.image {clear: both; margin: 20px 0 0 30px;}
 .image image {float: left;}
 .image p, .image h4 {margin-left: 85px;}

This removes all the spurious br tags, encloses each image in a div with its text. Now you can define the whitespace between divs in your CSS. And removing the br tags should fix your alignment problems.

Whenever you need to bold an entire block level element, think about using a heading. I typically style either h4 or h5 the same size as my paragraph text but bold. It gives you a more semantic and simpler markup and helps with search engine optimization.

Withing the div, moving the left margin to the p and h4 tags and away from the image gives you a nice wide left column for the image and spacing for the paragraph. And both the HTML and CSS are simpler. Simple is good.?

@abjauthorJul 10.2007 — #Hi there,

Very close with this one! Thanks for all the advice above -- made all the

changes you suggested, and it works perfectly in IE. Great tips.

Trouble now is with FF, in which the text isn't appearing alongside the

thumbnails, but beginning below them. See screenshot here:

http://www.alexanderhutchison.com/images/fault4.jpg

Also, the page is refusing to load fully in FF ... keeps hanging at the last bit,

although nothing is missing from the page.

@abjauthorJul 10.2007 — #Oh ... and same problem with this formatting in Safari as in FF ...

CSS has been amended to:

[CODE].book {clear: both; margin: 20px 0 0 30px;}
 .book image {float: left;}
 .book p, .image h4 {margin-left: 85px;}[/CODE]

@abjauthorJul 12.2007 — #Ah, I see what it is: should be

.book [B]img[/B] {float: left;}

... which is why FF wasn't recognizing the float I think.

Thanks again for the tip, think this is now closed and I can book my

session for an Indian neck massage ?

Also in #CSS _↴

ie8 and display block Responsive Design !!Table-like layout with css

Success!

Help @abj spread the word by sharing this article on Twitter...

Tweet This

Pop-up images with CSS and h-spacing in IE

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Pop-up images with CSS and h-spacing in IE

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴