Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post

    CSS Margin Trick Problem

    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 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.
    AJ

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    is ok for iceweasel/firefox 2.0.0.10 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.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

    Read the link in my sig that talks about why tables are bad.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    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.

    </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,
    AJ

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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 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.
    Last edited by Apostropartheid; 12-13-2007 at 12:45 AM.

  • #6
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    AHH! Ok, I'm down to 1 error here:

    SEE HERE

    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!
    AJ


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •