Table not aligning to top of page

**ncriptide** · 04-03-2008, 10:30 AM

I have inserted a table on my home page that I put in a div to control certain aspects of it.

However the table is not appearing right under the copy like it is suppose to . . . there is a LOT of space between the copy and where the table starts.

The site looks fine on a Mac using Safari and Firefox - but you see the space when viewing in Windows on Explorer.

Here's the link to the test page (under development):

http://www.chimneysupply.com/newSite/index.html

Any suggestions?

**wayfarer07** · 12:44 PM

There first thing I would do is not use depreciated attributes in XHTML 1.0 Strict mode. These attributes are "width" and "align". It is preferable to do this from the CSS document, but if you must do it this way, change your document type to "transitional". http://validator.w3.org/check?verbos...e%2Findex.html

**LadynRed** · 04-03-2008, 02:41 PM

You need the Holly Hack on the div holding the table. Put a height: 1%; on it and the problem goes away.

You should NOT put that into your main css file, you should use conditional comments to call a SEPARATE css file that contains ONLY the properties needed to make IE6 behave.

**ncriptide** · 04-03-2008, 03:04 PM

Quote:

Originally Posted by LadynRed

You need the Holly Hack on the div holding the table. Put a height: 1%; on it and the problem goes away.

You should NOT put that into your main css file, you should use conditional comments to call a SEPARATE css file that contains ONLY the properties needed to make IE6 behave.

I'm fairly new at CSS . . . can you give me an example of what you're asking me to do? Thanks!

**LadynRed** · 04-03-2008, 03:08 PM

You need conditional comments in the <head> of your HTML file, like this:

Quote:

Then you need a new css file, my example is called iefixes.css.
In that file you would have ONLY the hacks needed to stop the IE6 bugs, in this case, the Holly Hack (google it !)

#productTable{height: 1%;}

**wayfarer07** · 03:17 PM

All she is saying to make a conditional comment targeting IE6 that links a stylesheet only to that browser. This code would go in the <head></head> of your document:


Then, in that document:

Code:

div#productTable {
    height: 1%;
}

That't it!

Personally, I avoid CCs and use the underscore hack to target IE6, but that is another story.

**ncriptide** · 04-03-2008, 03:15 PM

Thank you, LadynRed!!!!!!!

I really appreciate the help. I'll save the "Holly Hack" in my "Microsoft Weirdo Stuff" folder for future reference. . . :-)

**wayfarer07** · 04-03-2008, 03:16 PM

Oops, looks like you beat me to the punch, Lady

Oh well, I'll leave my comment up anyway...

**LadynRed** · 04-03-2008, 03:16 PM

You're welcome. You should also go read what's on this site:
www.positioniseverything.net for other IE bug-squashing solutions.

**ncriptide** · 04-03-2008, 03:41 PM

I tried both suggestions and no change . . .

I'm putting




in my head section of my index page exactly as above.

Then I created a new css file called, "iefixes.css" and put it in my css folder.

Checked on iE6 - no change. I know I'm probably doing something stupid - what am I missing?

**ncriptide** · 04-03-2008, 03:44 PM

LadynRed,

I noticed in the code example you gave it made reference to "ie7fixes.css" , which I don't have. Is that suppose to be the name of my regular style sheet (home.css)?

**serandfae** · 04-03-2008, 05:24 PM

Nope. That's so if you have any IE7 specific bugs you can put the fixes to them in the named file for it. The css files for the fixes are separate files, and the links to them go after your main style sheet link so those styles override the main one for those particular rules you specified.

The Holly Hack is for IE6 and below only, BTW; IE7 will either ignore or choke on it.

Also, make sure the path you specify in the link href to where your css file is located is valid.

tim

**wayfarer07** · 04-03-2008, 07:01 PM

I'm not sure if this will work, but try this in the IE6 file, along with the Holly Hack:

Code:

div#productTable {
    height: 1%;
    overflow: visible;
}

**bakerc** · 04-07-2008, 08:05 AM

Quote:

Originally Posted by ncriptide

LadynRed,

I noticed in the code example you gave it made reference to "ie7fixes.css" , which I don't have. Is that suppose to be the name of my regular style sheet (home.css)?

The link to 'ie7files.css' is an example only, use whatever names you like to name your stylesheets - just make sure the link points to the right stylesheet.

For EXAMPLE;

you have your main stylesheet 1st (stylesheet.css) then after that you put your conditional statements.

Hope this helps