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 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts

    CSS/HTML Problem

    When I try to validate my page, www.audiadesign.com using the xhtml validator, I'm getting an error that I can't seem to fix.

    Error Line 36, Column 28: Attribute "height" exists, but can not be used for this element.

    <table width="100%" height="100%"><tr><td align="center" valign="middle">


    The problem is the height="100%" tag on the table, and I'm pretty sure it's because I'm using the strict doctype. I really wanna keep the doctype as strict if I can, but I'm not sure how to get around this error, because if I take off the height tag, then my table height seems to be 0, and I can't seem to size the table with CSS or anything else. Any ideas?

    Thanks
    Chris
    Last edited by chbrandt; 05-19-2009 at 09:12 AM.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Then use CSS which you should use anyway.

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I also tried that, but I'm not able to get it to work. The whole site is built in CSS, and it's validated as well, but I can't get this one div to be width: 100% and height: 100% and vertical-align: middle, so I put a table around it and it worked, but the table height has to be 100%, and apparently that attribute is not allowed with xhtml strict. Any ideas on how to do it w/ css?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,728
    Thanks
    6
    Thanked 1,015 Times in 988 Posts
    Quote Originally Posted by chbrandt View Post
    […] I can't get this one div to be width: 100% and height: 100% and vertical-align: middle, so I put a table around it and it worked, but the table height has to be 100% […]
    A relative height (in percent) is always relative to the height of the parent element. If the parent has no height specified then 100% of nothing is still nothing.

    You don’t need a table to make an element 100% high, you just need to assign a height to the parent. However, working with these relative units is a little more advanced. To tell you how to approach this it would be better if you showed us your code.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    I think you are trying to position your loading image at the centre of your page. If so, use the dead centre method.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Jul 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Alright, I think the Dead Centre thing is exactly what I'm trying to do, and yes, it is with the loading image as you mentioned. I've tried to implement this, and I've got it all messed up....maybe somebody can straighten me out.

    My CSS:

    Code:
    #overlay {
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	text-align: center;
    	background-color: #FFFFFF;
    }
    #loading {
        font: 10px verdana;
        background-color: #FFFFFF;
        position: absolute;
        width: 100%;
    	height: 100%;
        margin-left: -50%;
        left: 50%;
        top: -50%;
    }
    My page:

    Code:
    <div id="overlay">
    	<div id="loading">
    		<img src="preload.gif" width="32" height="32" alt="Loading" /><br />Loading
    	</div>
    </div>
    The result, audiadesign.com, has the loading image off of the page somewhere, and not dead center. I'm not too bad at CSS, but this advanced alignment stuff gets me every time. Thanks guys

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Why are you still using a table tag there? Anyway, for me in FF2, the loading image looks centered and appears for a while before loading the other parts.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    Jul 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry, I had changed it back at audiadesign.com for something else, but when I was using the above code, the loading image was off the page. Try:

    http://www.audiadesign.com/index2.htm

    Thanks
    Chris


  •  

    Posting Permissions

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