7 replies [Last post]
hommealone
Offline
newbie
Kingston, NY USA
Last seen: 17 years 5 weeks ago
Kingston, NY USA
Timezone: GMT-5
Joined: 2004-08-16
Posts: 5
Points: 0

Hi folks. I've been teaching myself layout w/ CSS by trying to re-create my homepage. After having (what apparently is) the usual problem with DIVs not scaling properly, I learned about adding "clear"ing DIVs to make my divs expand to contain floated elements within them. I even used Tony Aslett's method to write the clearing fix into my CSS code instead of adding DIVs with HTML.

Everything seemed to be working fine, (in IE6, Firefox, NN7, and others,) BUT, when I looked at the page with IE5, HUGE blank spaces got added to the end of every "fixed" DIV!

This happens whether I add extra clearing DIVs in the HTML, or whether I write the "clear" fix (see below) into my CSS.

Has anyone encountered this problem before? More importantly, does anyone know how to fix it? Any suggestions appreciated!

You can look at the "new" CSS version of my page here. It seems to work with everything but IE5.(You can compare it to the old version which is in my signature.)

This is what I used in my CSS, thanks to "PositionIsEverything":

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 1 hour ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

float clearing problem in IE5 only!

Hi hommealone,
As you are using two class names in the element

Quote:
<div class="logos clearfix">

It looks like the styles for logos specifically the height:auto is overriding the clearfix values.
Try commenting out the height:auto for logos.

Hope that helps

hommealone
Offline
newbie
Kingston, NY USA
Last seen: 17 years 5 weeks ago
Kingston, NY USA
Timezone: GMT-5
Joined: 2004-08-16
Posts: 5
Points: 0

&quot;commenting out&quot;?

Hi Tony,

Thanks so much for getting back to me on this so quickly, and for looking over my code.

I'm afraid that I don't know what exactly you mean by "commenting out" the height:auto.

Is that the method I've seen whereby people write a comment (to a specific browser) into the CSS, telling that browser to do something that other browsers will ignore? For example:

/* Hides from IE-mac \*/ 
* html .clearfix {height: 1%;} 
/* End hide from IE-mac */

Or is it something else entirely?

Do you simply mean that, in my style sheet, in the logos section, I should change from:
height: auto
to:
/* height: auto */

Can you be more specific, or re-phrase that?

Thanks again! I've been going a bit crazy trying to make this work

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 19 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

float clearing problem in IE5 only!

to comment out you should change from:
Code:
height: auto

to:
Code:
/* height: auto */

hommealone
Offline
newbie
Kingston, NY USA
Last seen: 17 years 5 weeks ago
Kingston, NY USA
Timezone: GMT-5
Joined: 2004-08-16
Posts: 5
Points: 0

float clearing problem in IE5 only!

Thanks. I'll try it and see if it works.

hommealone
Offline
newbie
Kingston, NY USA
Last seen: 17 years 5 weeks ago
Kingston, NY USA
Timezone: GMT-5
Joined: 2004-08-16
Posts: 5
Points: 0

what exactly does &quot;commenting out&quot; do?

Yes, that did the trick. Thanks so much!

So now, please tell me - exactly what does "commenting out" actually do?

Does it make the piece of code that was commented out invisible to all browsers? Only some browsers?

Knowing that will help me to understand what my initial problem was, but also probably help me to find and fix more bugs in the future.

Thanks again,
- Paul

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 1 hour ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

float clearing problem in IE5 only!

Hi hommealone,
Comments are hidden from all browsers, they are a way to add notes to your code.
In CSS files you use /* this is a comment */ to comment out html you can use <!-- this is a comment --> in other languages such as PHP and JavaScript you can use

 /* this is a comment */ 
// and this is a one line comment 

Comments become handy when bug finding as you can narrow down whats causing the problem.
In your problem above I suggested commenting out a section to see if it was causing the problem.
If that was the problem then after testing you can remove the problem all together.

Hope that helps

hommealone
Offline
newbie
Kingston, NY USA
Last seen: 17 years 5 weeks ago
Kingston, NY USA
Timezone: GMT-5
Joined: 2004-08-16
Posts: 5
Points: 0

Thanks again

Tony wrote:

Quote:
Hope that helps

Yes, indeed it does. I'd been picking up most of that by reading tutorials and forum postings on the web, and intuiting the rest, but having it spelled out clearly was most helpful and reassuring.

Thanks for offering this great forum; I know that a lot of time and work must go into it! It is remarkably helpful for us learners. Thanks again!

- Paul