-
Posts
-
I have inserted a number of linked images into tabbed content on this page: http://www.atlassteelruledie.com/tooling. Worked great until I added captions. Now the images won’t align correctly and stair step down on the page. It seems consistent across browsers. How can I get these to align in a nice neat row?
Thanks!
Hey mgould!
Please edit the tab content. Switch to the text or html editor. Make sure that there are no spaces between the captioned images. They are generating line breaks. The code should be like this:
<h3><span style="text-decoration: underline;"><a title="Steel Rule Dies" href="http://www.atlassteelruledie.com/steelruledies"><strong><span style="color: #016cb5; text-decoration: underline;">Steel Rule Dies</span></strong></a></span></h3> <p style="text-align: left;">Atlas Die offers a wide variety of steel rule dies for every unique application. Aside from the traditional wood die and our Rayform die, our patented Gamma Die provides accuracy and high performance for long-term jobs. Our NeverDie Die™ is the most productive die on the market.</p> <p></p><div id="attachment_3139" style="width: 136px" class="wp-caption alignleft"><a href="http://www.atlassteelruledie.com/steelruledies#wooddie"><img class="size-full wp-image-3139 " alt="Steel Rule Wood Die" src="http://www.atlassteelruledie.com/wp-content/uploads/2013/12/Wood-Die-126.jpg" width="126" height="126"></a><p class="wp-caption-text">Wood Die</p></div> <div id="attachment_3142" style="width: 136px" class="wp-caption alignleft"><a href="http://www.atlassteelruledie.com/steelruledies#rayform"><img class="size-full wp-image-3142 " alt="Rayform Steel Rule Die" src="http://www.atlassteelruledie.com/wp-content/uploads/2013/12/Rayform-126.png" width="126" height="126"></a><p class="wp-caption-text">Rayform Die</p></div> <div id="attachment_3140" style="width: 136px" class="wp-caption alignleft"><a href="http://www.atlassteelruledie.com/steelruledies#gamma"><img class="size-full wp-image-3140 " alt="Gamma Steel Rule Die" src="http://www.atlassteelruledie.com/wp-content/uploads/2013/12/Gamma-126.jpg" width="126" height="126"></a><p class="wp-caption-text">Gamma Die</p></div><p></p> <div id="attachment_3141" style="width: 136px" class="wp-caption alignleft"><a href="http://www.atlassteelruledie.com/steelruledies#neverdie"><img class="size-full wp-image-3141 " alt="NeverDie Steel Rule Die" src="http://www.atlassteelruledie.com/wp-content/uploads/2013/12/NeverDie-126.png" width="126" height="126"></a><p class="wp-caption-text">NeverDie Die</p></div>I removed the br tags. Please copy that and replace the one that you have.
Cheers!
IsmaelI am able to make the delete the breaks but the breaks reappear when I change the next tab. For example, I remove the breaks between images on tab 1 (steel rule dies), and update the page. It’s perfectly aligned. However when I remove the breaks between the images on tab 2 and update the page, tab 2 is aligned correctly but the breaks reappear in tab 1. Any idea how this is happening and how I can get the changes to stay? Thanks again
Hi!
Please try to insert this code into the quick css field to hide the line breaks:
div.wp-caption + br{ display: none; }Cheers!
Peter
- The topic ‘Images in tab content’ is closed to new replies.