12 replies [Last post]
S8nsick66
S8nsick66's picture
Offline
Regular
Sweden
Last seen: 14 years 17 weeks ago
Sweden
Timezone: GMT+1
Joined: 2006-11-17
Posts: 39
Points: 0

Hi!

I'm working on this site: http://www.kicab.se/produkter/industri/slamutrustning/slamutrustning.php
(I've given all boxes ugly colours for clarity)

The problem is the first pink div (class="product clearfix"). I want it to only expand so that the containing image fits. In Firefox though, it expands all the way to the bottom of the red div (id="sidebar"). IE7 does it excactly as I want it, so what am I doing wrong?

In IE6, the pink divs stretch horizontally all over the page, any hints on that?

Not tested on Mac yet. Clearfix is taken from PIE.

I really hope someone out there can help me!
Thanks in advance!
Dennis

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

enclosing floats

Firefox is being correct. The clearing block is clearing that red column, as it should. IE, in all versions, does not support the content property or :after. It does its enclosure of the float element due to the {display: inline-block;} setting hasLayout.

In this case, you'd do better to do this

.product {
    overflow: hidden;  /*Causes modern browsers to enclose 
                         its float children.  IE7 has a 
                         kluged patch that extends hasLayout
                         to the overflow property*/
    display: inline-block;  /*sets hasLayout for IE6+*/
    }

.product {
    display: block;    /*resets display to proper value
                         while not resetting hasLayout*/
    }

See Enclosing Float Elements for a more complete explanation.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

S8nsick66
S8nsick66's picture
Offline
Regular
Sweden
Last seen: 14 years 17 weeks ago
Sweden
Timezone: GMT+1
Joined: 2006-11-17
Posts: 39
Points: 0

Thanks a million! I will try

Thanks a million!
I will try that as soon as possible.

I'm not totally "clear" on these things, I find it very confusing. Thanks for the link too, I'll will read it very carefully.

Dennis

S8nsick66
S8nsick66's picture
Offline
Regular
Sweden
Last seen: 14 years 17 weeks ago
Sweden
Timezone: GMT+1
Joined: 2006-11-17
Posts: 39
Points: 0

Problems with the widths...

Hello again,

I've now tried your solution but I can't get it to work as intended. The floats are enclosed, but the widths are wrong.

I Firefox, the widths of the first two pink divs (.product) are much too narrow.

In IE6, all pink divs are way too wide.

In IE7, everything is still exactly how I want it.

I've read "Enclosing Float Elements" but didn't find a solution.

I really hope you or someone else can help me!
Dennis

S8nsick66
S8nsick66's picture
Offline
Regular
Sweden
Last seen: 14 years 17 weeks ago
Sweden
Timezone: GMT+1
Joined: 2006-11-17
Posts: 39
Points: 0

I've nailed it down to

I've nailed it down to this:

adding "overflow:hidden" makes the margin-right of div.product count from the left side of the sidebar-div. I really can't understand why or what to do about it. Can anyone give me a hint?

Thanks in advance,
Dennis

Kravvitz
Offline
Enthusiast
USA
Last seen: 8 years 6 weeks ago
USA
Timezone: GMT-4
Joined: 2006-10-02
Posts: 56
Points: 3

I found out why but still

I found out why but still don't understand the reasoning. Perhaps Gary can explain it to us.

I suggest you use this clearing method instead.

I prefer it because of the odd things that happen sometimes with the overflow property method.

Code for FF (and/or Opera), apply fixes for IE, not vice versa.
Dynamic Site Solutions

S8nsick66
S8nsick66's picture
Offline
Regular
Sweden
Last seen: 14 years 17 weeks ago
Sweden
Timezone: GMT+1
Joined: 2006-11-17
Posts: 39
Points: 0

Thanks for your

Thanks for your reply!

Unfortunately, the solution you suggest seems the be the one I was using initially (clearfix from PIE), as I wrote in my first post. And as I wrote in that post I had problems with this method.

(my example page has been updated with the suggestions from Gary)

Any further ideas?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Good find, K. I have not

Good find, K. I have not run into this issue. My reading of the bug report leaves huge blank spots in my understanding. In some esoteric and arcane way, it may be correct, but if it is, ???

I would not have structured the page as the OP did, which may explain why I haven't seen this before. Those product class blocks would likely be db derived. It would be a more stable construct to put the loop of products in a container.

I would likely have done it this way:[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
lang="en">
<head>
<title></title>
<meta name="generator"
content=
"HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<meta name="editor"
content="Emacs 21" />
<meta name="author"
content="Gary Turner" />
<style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
}

body {
font: 100% verdana, helvetica, sans-serif;
line-height: 1.4;
color: black;
background-color: green;
}

p {
font-size: 1em;
}

h1, h2, h3 {
font-family: georgia, serif;
text-transform: uppercase;
}

h2 {
font-size: 1.1em;
}

#wrapper {
background-color: yellow;
color: black;
margin: 0 auto;
overflow: hidden;
width: 90%; /*this makes IE enclose float descendants*/
}

#banner {
background-color: lightblue;
color: black;
}

#banner p {
background-color: green;
color: white;
margin: 0 1.4em;
}

#sidebar {
background-color: red;
color: black;
display: inline; /*hack for IE doubled margin*/
float: right;
margin-left: 10px;
width: 200px
}

#content {
margin: 0 220px 0 10px;
}

#message {
background-color: orange;
color: black;
margin: 0 auto;
padding:1px 5px; /*uncollapses margins*/
width: 50%;
}

.product {
background-color: pink;
color: black;
margin-top: 15px;
overflow: hidden;
}

.product img {
float: left;
margin-right: 10px;
}

/*]]>*/
</style>

</head>
<body>
<div id="wrapper">
<div id="banner">
<h1>
generic header
</h1>
<p>
the top site nav, etc. go here
</p>

</div><!-- end banner -->
<div id="sidebar">
<h2>
Industriprodukter
</h2>
<ul>
<li>item 1
</li>
<li>item 2
</li>

<li>item 3
</li>
<li>item 4
</li>
<li>item 5
</li>
</ul>
</div><!-- end sidebar -->
<div id="content">
<div id="message">

<p>
some bunch of Swedish stuff I can't read
</p>
</div>
<div class="product">
<img src=
"http://www.kicab.se/images/produkter/fortjockning.jpg"
alt="K500"
width="230"
height="177" />
<h3>
K500 
</h3>

<p>
Kicabs egentillverkade K500

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

S8nsick66
S8nsick66's picture
Offline
Regular
Sweden
Last seen: 14 years 17 weeks ago
Sweden
Timezone: GMT+1
Joined: 2006-11-17
Posts: 39
Points: 0

Thanks a lot Gary. I too

Thanks a lot Gary.

I too was beginning to think that I should rethink the whole structure of site.

I will try your code as soon as possible.

S8nsick66
S8nsick66's picture
Offline
Regular
Sweden
Last seen: 14 years 17 weeks ago
Sweden
Timezone: GMT+1
Joined: 2006-11-17
Posts: 39
Points: 0

It worked, thank you!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

That link is dead

That link is dead

S8nsick66
S8nsick66's picture
Offline
Regular
Sweden
Last seen: 14 years 17 weeks ago
Sweden
Timezone: GMT+1
Joined: 2006-11-17
Posts: 39
Points: 0

Do you get a 404 Error? I

Do you get a 404 Error? I don't. The page exists. But the web hotel seems to be very crappy because I get "500 Internal Server Error" very often, so I have to reload many times in order to see the pages. Apologies for any inconviences.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

It works now.

It works now.