17 replies [Last post]
mikes02
mikes02's picture
Offline
Enthusiast
fresno, ca
Last seen: 12 years 25 weeks ago
fresno, ca
Timezone: GMT-7
Joined: 2007-09-17
Posts: 106
Points: 4

Passes validation:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.miketorosian.com%2Fsbda%2Findex2.php

So here's the link:

http://www.miketorosian.com/sbda/index2.php

In IE7 and FF3 the borders work exactly how I want them to, at the bottom I have a container box that holds 3 floated div's for the 3 column effect I am going for, the middle column has a border-left and border-right attribute, in FF3 and IE7 those borders go all the way down and connect with the border of the container so it is seamless. In IE6, there is a huge gap, I can't seem to figure out why...

here's a pic of IE6 issue:

Thanks in advance.

osgood
Offline
Enthusiast
Last seen: 14 years 15 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

First of all I would remove

First of all I would remove all the .clearfix css, as shown below. Its outdated and messy. That may be causing the gap. (see below the now preferred method of wrapping a container around floated containers using overflow: hidden;

.clearfix {
display: inline-block;
}
.clearfix:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content: ".";
}
html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

To clear the floats all you need to do is add overflow: hidden; to the 'boxes' css, as below.

#boxes{
width: 900px;
margin: 0 auto;
border-top: 1px solid #c7c7c7;
border-bottom: 1px solid #c7c7c7;
overflow: hidden;
}

Test in IE6, IF the gap is still there it could be being caused by the 20px bottom margin on your paragraphs. Zero it out and test in IE6.

p{
margin: 0 0 20px 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
line-height: 1.2em;
text-align: justify;
}

mikes02
mikes02's picture
Offline
Enthusiast
fresno, ca
Last seen: 12 years 25 weeks ago
fresno, ca
Timezone: GMT-7
Joined: 2007-09-17
Posts: 106
Points: 4

Ok, overflow: hidden is

Ok, overflow: hidden is giving me the same result, I guess that is good for IE7 and FF3 so I can remove all that clearfix code, but the gap is still there in IE6. When I remove the 20px off the bottom margin of p it helps close the gap, but there is still a gap there.

Any ideas? Are there better methods of spacing out paragraphs?

Thank you for the overflow:hidden method, definitely better than all that clearfix code!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 49 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

place a -3px right margin on

place a -3px right margin on the right column

mikes02
mikes02's picture
Offline
Enthusiast
fresno, ca
Last seen: 12 years 25 weeks ago
fresno, ca
Timezone: GMT-7
Joined: 2007-09-17
Posts: 106
Points: 4

I won't be able to try it

I won't be able to try it until I get home tonight, but can you explain the reason to use it? thank you.

osgood
Offline
Enthusiast
Last seen: 14 years 15 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

Having looked at your

Having looked at your construction set up again its really not the best idea to use borders on the floated to create those vertical lines. Unless each of your floated has exactly the same amount of text lines then it will fail. At the moment it works because you are using a control environment but I doubt when you start to feed the real text in it will take up the same amount of vertical space, or not so without a lot of messing around.

You should use a repeating background image in the wrapper

to create those verticals. That way it doesn't matter how much or how little text is in each floated
both vertical lines will always sit flush with the bottom keyline.

mikes02
mikes02's picture
Offline
Enthusiast
fresno, ca
Last seen: 12 years 25 weeks ago
fresno, ca
Timezone: GMT-7
Joined: 2007-09-17
Posts: 106
Points: 4

The problem is that there is

The problem is that there is a gradient on the background, so it would have to be a repeating bg image that had a transparent bg, which at the moment i believe is not fully supported. or is there a workaround?

osgood
Offline
Enthusiast
Last seen: 14 years 15 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

Well the web does have its

Well the web does have its limitations and you need to work within those. I often find myself revising the design slightly because what I need to do isn't always possible.

You have a problem if you have a gradient background with creating a repeat. I didn't see that on the link you provided.

You can persist with the borders on the floated but I feel you would be trying to 'force' 3 floated divs, or at least two of them, to remain at the same height to create the the verticals. This would be a bit hit and miss.

Personally I would get rid of the gradient effect.

mikes02
mikes02's picture
Offline
Enthusiast
fresno, ca
Last seen: 12 years 25 weeks ago
fresno, ca
Timezone: GMT-7
Joined: 2007-09-17
Posts: 106
Points: 4

http://www.miketorosian.com/s

http://www.miketorosian.com/sbda/index2.php

I went with your idea, it was a slight background gradient, so I just ditched it and went with a solid color. I used a background image and it expands all the way down now. When the div's were all the same height the borders extended if I used margin-right: -3px; on the right float but as soon as i moved content to make the divs different heights it stopped working so now i am using a background image to repeat the vertical lines all the way down.

I guess the only thing I am still unsure of is the margin-right: -3px;

I noticed in IE6 it was dumping a period down from the right div to the bottom of the left div, the negative margin stopped that, is it simply forcing the right div within the container or something?

Thanks for the help/advice, worked out much better like this.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

You had the famous 3-pixel

You had the famous 3-pixel jog.

When, in IE6, you have a float next to another box (usually a static box), IE6 makes this 3 pixel gap and no matter what you do it won't go away. The 3px is often just enough that now there's not enough room for everything to stay in a row so something drops down (often float drop).

The negative 3px (which I never let just sit in the open, I always hide it behind a Holly Hack, * html) in combination with Haslayout on the other box (floating a box sets haslayout, or setting a height or a width of a number of other things, google Haslayout) magically fixes the problem.

Lots of strange things magically fix problems in IE. Like display: inline on a float to remove the doubled margins. Just strange.

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

osgood osgood osgood you're

osgood osgood osgood you're starting to make a lot of statements here that I and others will find hard not to draw issue with you on.

No clearfix is not redundant, clearing floats is a business that needs different solutions based on the markup in question, overflow:hidden is one clearfix a very useful alternative always on standby ready to use when needed.

Also you might not realise it but this forum is the original home of that technique as it was written by this forums owner Tony Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mikes02
mikes02's picture
Offline
Enthusiast
fresno, ca
Last seen: 12 years 25 weeks ago
fresno, ca
Timezone: GMT-7
Joined: 2007-09-17
Posts: 106
Points: 4

What is the purpose of the

What is the purpose of the Holly Hack and how would I write it?

would it be *html #right {margin-right: -3px;} like that?

Also, since we are using a margin on a floated element, is it also necessary to use display:inline?

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Yup Mike, that's the famous

Yup Mike, that's the famous Holly Hack. Some things you don't need to Holly hack (like, display: inline on floats can just sit out in the open cause everyone else just ignores it).

You only need display: inline on floats in certain instances, generally when the float is first floating child of a container, right up against container's side... but what I do is just look. If I don't see doubled margins (or if I don't have any side margins to being with!) then I don't add display: inline cause it's not needed.

The negative margin is not doubled in either case-- the negative margin doesn't go on the outside of the float, but the inside (inside meaning, the side facing the middle of the parent and not the side facing the outer edge of the parent, where the margins can get doubled).

So if you have a container, with a left-floated sidebar and a static box on the right, the negative margin if needed sits on that sidebar's RIGHT side and any doubled margins, if they appear, would be on the LEFT side of the LEFT floated sidebar which sits against the LEFT side of the container. Whew! : )

I actually agree with Osgood about the techniques in this case with the floats and backgrounds. I won't diss anyone using that generated content thingie, but I personally never, ever use it. I find it more code than necessary to do the same thing plus still gotta hack for IE, so 99% of the time overflow: hidden is great. It hides overflow, so in cases where we need overflow to, overflow, and be seen, we use something else.

Not a fan of clearfix, though to each his own.

I'm no expert, but I fake one on teh Internets

osgood
Offline
Enthusiast
Last seen: 14 years 15 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

I have to give information

I have to give information based on what I think IS the best method to use clearing the floats when using a wrapping container and the clearfix in this case is long winded. Why use a sledge hammer to crack a nut?

For one its more css mark up and more html mark-up. Now you being a purist should note that.

If people want to take issues thats fine, every one is entitled to their opinions, no?

I don't care about this Tony bloke, who ever he is, why should I. It appears as though you are saying his outdated methods are not to be questioned? That can't be good if someone is trying to influence what methods people use by waving a big stick.

I agree there are alternative methods to clearing floats (each to his own) and the one the original poster was using would not be one that I would be advising to use.

osgood
Offline
Enthusiast
Last seen: 14 years 15 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

You only need to use

You only need to use display:inline; when the margin is in the same direction as the float.

And only for IE5/6 I believe. IE7 I think should show it correctly without the display: inline; However I haven't tested for ages because I just use it when I come across a margin in the same direction as a float.

It will do know harm in other browsers so no need to use it in a condition IE comment.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Yup, only lte IE6. And even

Yup, only lte IE6. And even don't need it if you have multiple boxes floated, say, left, the doubled margin should only appear where the first float touches the edge of its parent.

I'm no expert, but I fake one on teh Internets

mikes02
mikes02's picture
Offline
Enthusiast
fresno, ca
Last seen: 12 years 25 weeks ago
fresno, ca
Timezone: GMT-7
Joined: 2007-09-17
Posts: 106
Points: 4

Thank you very much for the

Thank you very much for the great information, definitely made understanding that much easier, I appreciate the time you took to break that down for me, that makes a lot more sense now. :thumbsup:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

osgood wrote:I have to give

osgood wrote:

I have to give information based on what I think IS the best method to use clearing the floats when using a wrapping container and the clearfix in this case is long winded. Why use a sledge hammer to crack a nut?

For one its more css mark up and more html mark-up. Now you being a purist should note that.

If people want to take issues thats fine, every one is entitled to their opinions, no?

I don't care about this Tony bloke, who ever he is, why should I. It appears as though you are saying his outdated methods are not to be questioned? That can't be good if someone is trying to influence what methods people use by waving a big stick.

I agree there are alternative methods to clearing floats (each to his own) and the one the original poster was using would not be one that I would be advising to use.

You didn't give info based on that particular layout you made a statement that " the preferred method now" this gives the impression that clearfix is redundant, it is not; yes in this instance due to the hasLayout width invocation on the element IE was catered for only leaving modern browsers to be dealt with using overflow.

I think a lot of us use stock stylesheets of our own makeup and apart from other defaults stuff like clearfix will reside by default to the bottom of the sheet, the method has a definite and important role to play still.

"I don't care about this Tony bloke" Sad oh that's a little ungracious isn't it? he's your host while here, I only mentioned it as I recognize as I think do others that this is one of those legendary little bits of code as well known and on a par with the Holy hack, just wish I'd thought of it Smile and once again it is NOT an outdated method!

It's not a case of each to his own it's a case of sometimes overflow:hidden can not be used, then we fall back to clearfix.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me