View Full Version : CSS Margin Trick Problem

12-12-2007, 04:53 AM
Hey guys,
I'm using a trick I learned from Lynda.com that explains how to get an image to stay flush with the bottom of a page/column. The one where you add an image and align it to the bottom, and add padding-bottom: 5000px and margin-bottom: -5000px.

I have a site I just put up at www.ivcl.org (http://www.ivcl.org) and I have 2 reports of the image in the bottom left (sidebar_flower_3.gif) popping up to the top and covering up the tabs on the left.

Have any of you heard or seen this problem before?
Is anyone able to recreate the error?

I have tested on 4 different browsers on 3 computers and it all looks good to me, but the reports come from IE7 users.

Thanks for any and all help.

12-12-2007, 06:37 AM
is ok for iceweasel/firefox on debian/linux.

could be something wrong with this 2 reports, they could use the same toolbar/extension/plugin for IE7.
if you can contact them for details, maybe you can solve the problem.

12-12-2007, 02:47 PM
Works fine in IE7 on Vista Business though absolute positioning might be better to use in this case. It would also be more cross browser compatible. Just make the #DivContent position:relative; and place the image in the div and make it position:absolute. Use bottom:0; and left to adjust its position. Be sure to add a bottom padding to the left side that is equal to the image height.

Also why on earth are you using tables? I suggest you get with the program and lose the tables. They aren't necessary for your design. If you are displaying data then sure use them but clearly you are using them for layout purposes.

You also have some markup errors. See them here (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.ivcl.org%2F).

Read the link in my sig that talks about why tables are bad.

12-13-2007, 12:23 AM
Thank you both for those helpful responses - now I have another few questions though:

1. The W3 markup tester is telling me I need to close my meta (along with some other tags) with a " /> " not just a " > " - What is the difference?

2. Aerospace_Eng_ what would you recommend I used instead of tables in this instance?

3. In the W3 it says "Line 13, Column 7: XML Parsing Error: Opening and ending tag mismatch: meta line 10 and head.


What the heck is wrong with that?

Thanks so much for all your help guys, it seems like every time I learn a little something new I just get smacked in the face with 9,000 other things I have no idea about and need to learn next. This is a great help for me though.

Thanks so much,

12-13-2007, 12:37 AM
1) XHTML is a child of XML. In XML, all elements must be closed, including "empty" elements. This is one of the syntaxical differences between SGML (which natural HTML was born from) and XML (a subset of SGML.)

The XHTML specs forbid you to use something like <link rel="stylesheet" type="text/css" href="styles.css"></link> due to backwards compatiblity—so we use the .. /> to close it instead (note the space!). You really should be using HTML 4.01 Str., seeing as you seemingly don’t know the differences between the dialects.

2) Well, divs and CSS. There’re a lot of resources about the evil, horrible, child-eating tables :D just click on Aerospace’s sig.

3) This is because you haven’t closed your meta tag. This is like doing <strong><em>Hello, world!</strong> in HTML.

12-13-2007, 10:42 AM
AHH! Ok, I'm down to 1 error here:

SEE HERE (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ivcl.org%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&verbose=1)

Can someone please explain in a bit more simple language why I cannot use this background image in my table?

I plan on switching all my content into divs on the NEXT site I work on, but I would really like to know why exactly this 1 error is showing up.

Thanks guys!