# Arghhhhh! Box model killing me

**URL:** <https://discourse.softpress.com/t/arghhhhh-box-model-killing-me/12127>\
**Category:** Freeway\
**Created:** [October 12, 2011, 4:03pm UTC](https://discourse.softpress.com/t/arghhhhh-box-model-killing-me/12127 "2011-10-12T16:03:05Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mark2](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/m/e19adc/32.png) [@Mark2](https://discourse.softpress.com/u/Mark2)\
**Post date:** [October 12, 2011, 4:03pm UTC](https://discourse.softpress.com/t/arghhhhh-box-model-killing-me/12127/1 "2011-10-12T16:03:05Z")

</div>

Hello

I am following Dan’s Inline Box Model screencast. I’ve created a header, body and footer. I’ve then created a header-wrap (for my centered page). I’ve then inserted a graphic item, html item and a graphic item into the header-wrap for my logo, nav bar and photograph.

But the three items are not touching - there is a gap between them. See

[http://www.practicalintelligence.org.uk/test/](http://www.practicalintelligence.org.uk/test/)

How do I remove this gap and why is it there?

If I insert three HTML items there is no gap. The problem seems to arise when I insert graphic items.

THANKS FOR ANY HELP

Mark

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![chuckamuck](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/c/c68b51/32.png) [@chuckamuck](https://discourse.softpress.com/u/chuckamuck)\
**Post date:** [October 12, 2011, 4:21pm UTC](https://discourse.softpress.com/t/arghhhhh-box-model-killing-me/12127/2 "2011-10-12T16:21:51Z")

</div>

> If I insert three HTML items there is no gap. The problem seems to arise when I insert graphic items.

Did you “insert” the graphic into the html box same as you inserted the html? Have you tried inserting the graphics into the html item as a background?

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [October 12, 2011, 6:08pm UTC](https://discourse.softpress.com/t/arghhhhh-box-model-killing-me/12127/3 "2011-10-12T18:08:34Z")

</div>

Yes the first thing I would do is remove any ‘lone’ graphics from the layout ie

Either put them in an HTML container set to float in your layout or the same approach with the graphic as a background to your HTML item.

Also apply a style to your content/HTML items with 0 space before and after.

David

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Mark2](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/m/e19adc/32.png) [@Mark2](https://discourse.softpress.com/u/Mark2)\
**Post date:** [October 17, 2011, 9:32am UTC](https://discourse.softpress.com/t/arghhhhh-box-model-killing-me/12127/4 "2011-10-17T09:32:57Z")

</div>

Thanks for your advice.

I’ve actually side stepped the issue by having the ‘header’ items, such as logo, nav bar and image as absolute items rather than use box model items.

Once again thanks

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Mark2](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/m/e19adc/32.png) [@Mark2](https://discourse.softpress.com/u/Mark2)\
**Post date:** [November 24, 2011, 4:17pm UTC](https://discourse.softpress.com/t/arghhhhh-box-model-killing-me/12127/5 "2011-11-24T16:17:58Z")

</div>

Hi David

I’m coming back to this issue…

So in FW, when using the box model, you don’t ‘insert graphic item’? You insert a html item and then put the image in as a background to that html item?

This certainly works well for me. But there are a few issues. Is there a way to enter alt text? And it is a pain having to create pass through graphics.

You mentioned “put the image in a HTML container set to float”. Do you mean create a html item, then insert a graphic item into it, exactly the same size as it, and then import the image as normal. So in effect there are two containers for the image, both the same size. I presume this allows me to import tiff images, resize and give alt text?

Mark

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Todd1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/t/838e76/32.png) [@Todd1](https://discourse.softpress.com/u/Todd1)\
**Post date:** [November 24, 2011, 5:15pm UTC](https://discourse.softpress.com/t/arghhhhh-box-model-killing-me/12127/6 "2011-11-24T17:15:59Z")

</div>

> This certainly works well for me. But there are a few issues. Is there a way to enter alt text?

If you go the route of applying the image as a background via CSS then the alt tag is a non-issue. Alt tags apply to the ![]() tag. But there is a way to add text to the image, albeit not as an alt tag. Type whatever text you want in the box as usual then create a new style that sets the margin-left to some huge negative value, say, -4000px and apply it to the run of text or the element. What this does is move the text out of the box so the visitor doesn’t see it but it’s still visible in the code for search engines to chew on. The downside is that if the visitor has disabled images they won’t see anything, no image or text, but that’s not something I would worry too much about.

The technique is referred to as “image replacement”.

Todd

> **[Xiiro.com is for sale | HugeDomains](https://www.hugedomains.com/domain_profile.cfm?d=xiiro.com)**
>
> Great prices on a large selection of domains. Find the pefect domain for your new startup.

Skype: toddbrilliant  
Twitter: @ImXiiro

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Todd1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/t/838e76/32.png) [@Todd1](https://discourse.softpress.com/u/Todd1)\
**Post date:** [November 24, 2011, 5:28pm UTC](https://discourse.softpress.com/t/arghhhhh-box-model-killing-me/12127/7 "2011-11-24T17:28:46Z")

</div>

> The technique is referred to as “image replacement”.

Oops, I made a mistake in my previous post. Let me be more accurate. The CSS would look something like this if your element were named “image”:

```auto
#image {
	background: url(../Resources/my_background_image.jpg) no-repeat;
	width: 400px;
	height: 200px;
	text-indent: -4000px;
}

```

Todd

> **[Xiiro.com is for sale | HugeDomains](https://www.hugedomains.com/domain_profile.cfm?d=xiiro.com)**
>
> Great prices on a large selection of domains. Find the pefect domain for your new startup.

Skype: toddbrilliant  
Twitter: @ImXiiro

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [November 25, 2011, 1:36am UTC](https://discourse.softpress.com/t/arghhhhh-box-model-killing-me/12127/8 "2011-11-25T01:36:59Z")

</div>

And there’s an Action for that, called Image Replacement.

Walter

On Nov 24, 2011, at 12:28 PM, Todd wrote:

> > The technique is referred to as “image replacement”.
> 
> Oops, I made a mistake in my previous post. Let me be more accurate. The CSS would look something like this if your element were named “image”:
> 
> ```auto
> #image {
> background: url(../Resources/my_background_image.jpg) no-repeat;
> width: 400px;
> height: 200px;
> text-indent: -4000px;
> }
> 
> ```
> 
> Todd
> 
> [http://www.xiiro.com](http://www.xiiro.com)  
> Skype: toddbrilliant  
> Twitter: @ImXiiro
> 
> * * *
> 
> freewaytalk mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)