Feeling kinda dirty...

[DaScribbler]

I've managed to go Tableless with my website (suddenly became much easier than I thought), however I've had to do a little bit of creative coding, and was wondering if anybody could show me a more elegant solution so I don't feel so dirty.

Here's what I've done...I've converted 9 cell tables into a div with 3 nested divs, to create my boxes/panels. Everything worked perfectly, Except for IE. The problem being the top div and bottom div which containing nothing but a background image (I'm using images for the borders of my panels instead of CSS borders). In IE I found the div's would not follow the Height: property if it was too small to accomodate text, so it would resize the height to fix it. So my background image was duplicating itself on screen (tiled).

Now I KNOW I could always set the background-repeat: to no-repeat, however I'm a miser when it comes to real-estate in the browser window so I refused that option. Instead, what I did was set font: 1px; then inside the Div I put an empty <font></font> tag. That fixed the problem. However I somehow get the feeling there's a more elegant manner of doing it.

Here's the code....

/***** Layout Divs *****/

.boxSmall { float: left; padding: 0px; }
.boxTopSmall { background-image: url(images/Skins/ScribbleWhite/boxTopSmall.gif); width: 156px; height: 9px; font: 1pt; }
.boxMiddleSmall { background-image: url(images/Skins/ScribbleWhite/boxMiddleSmall.gif); padding-left: 10px; padding-right: 10px; }
.boxBottomSmall { background-image: url(images/Skins/ScribbleWhite/boxBottomSmall.gif); width: 156px; height: 10px; font: 1pt; }

<!-- boxSmall Panel -->

<div class="boxSmall">
<div class="boxTopSmall"><font></font></div>
<div class="boxMiddleSmall"><?php include("$content");?></div>
<div class="boxBottomSmall"><font></font></div>
</div>

[iamlost]

Hey you ain't dirty - you're just associating with non-compliant browsers!

You can drop the <font></font> from your html 'cause your are css-ing now. Unless they are there for some other reason?

IE likes all sorts of defaults that no one asks for - being helpful or being rude, take your pick.

I have used "font: 0;" (which is similar to what you are doing) in similar circumstances. I consider it a "work-around" and am happy it is so simple.

Like you I am open to a more elegant solution ...

[DaScribbler]

actually, I can't drop the <font> tag. Without it, it doesn't seem to work.

[iamlost]

I took out the font tags for my testing and it ran fine - which browser(s) is/are having problems?

[DaScribbler]

IE 6.0 is where the problem arises. It's the only browser where the Div height: property doesn't scale down to the proper height.

The whole project works just fine in Mozilla/FB.

[iamlost]

I was afraid of that - IE6 is on a computer that has been in the shop for far far too long - so I can't run a test.

However! IE6 has two bugs which may have a bearing:

1. IE6 likes to display things as "block" which includes line-height. Try adding "display: inline;" to div and see how it works.

2. Check to see if IE6 is in "standards" mode i.e. using a valid doctype. If it is try without the doctype (for testing, not forever!). If it isn't add a proper doctype (esp. strict) and see how it renders.

Let me know how things work out (or don't).

[SuzyUK]

DaScribbler
rather the empty <font> tags you could just use a &nbsp; again this may not be perfect but at least it's not a deprecated tag.. ;)

what this is doing is puting some "text content" into the empty divs then you can just use the text property line-height in the CSS and IE will takes its cue from that..

.boxSmall {float: left; padding: 0px; width: 156px;}
.boxTopSmall {
background: #fcc url(images/Skins/ScribbleWhite/boxTopSmall.gif);
line-height: 9px;
}

.boxMiddleSmall {
background: #ffe url(images/Skins/ScribbleWhite/boxMiddleSmall.gif);
padding-left: 10px; padding-right: 10px;
}
.boxMiddleSmall p {margin: 0; padding: 0;}

.boxBottomSmall {
background: #ffc url(images/Skins/ScribbleWhite/boxBottomSmall.gif);
line-height: 10px;
}

</style>
</head>
<body>

<div class="boxSmall">
<div class="boxTopSmall">&nbsp;</div>
<div class="boxMiddleSmall"><p>some content please</p></div>
<div class="boxBottomSmall">&nbsp;</div>
</div>

again not the best perhaps, but as discussed over in a similar HTML thread [webmasterworld.com] it was pointed out that avoiding font-size: 1px; might be best from a SE point of view.

2 workarounds, your choice ;)

btw I would still use no-repeat too as that is exactly what you don't want it to do..

Suzy

[DaScribbler]

Actually, I did try putting an &nbsp; in it, but it didn't seem to work for some reason. That was what was recommended to me to begin with.

<snipped>

Went back and tried it again, and this time it seems to have worked. I must have had a syntax problem somewhere that I didn't notice before.

[dcrombie]

I read (somewhere) that you can put <!-- --> inside an empty div to make IE render it properly - seems like a cleaner sol'n than <font> or &nbsp; ...