...

View Full Version : CSS/HTML Problem



chbrandt
05-19-2009, 01:28 AM
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

drhowarddrfine
05-19-2009, 01:47 AM
Then use CSS which you should use anyway.

chbrandt
05-19-2009, 02:01 AM
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?

VIPStephan
05-19-2009, 10:20 AM
[Ö] 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.

abduraooft
05-19-2009, 10:28 AM
I think you are trying to position your loading image at the centre of your page. If so, use the dead centre method (http://www.wpdfd.com/editorial/thebox/deadcentre4.html).

chbrandt
05-19-2009, 09:49 PM
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:


#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:


<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

abduraooft
05-20-2009, 09:14 AM
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.

chbrandt
05-20-2009, 08:24 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum