I've got my page pretty much finished, but I'm having some odd rendering problems in both IE and FF. The page, CSS, and pics are attached so you can take a look at them. (I used CSS Zen Garden as an example for how to blend the HTML with CSS.) So anyway, in FF I see a grey bar across the bottom of the page, and in IE the blue link separators don't appear until you hover over the links (except for the first separator, which never appears at all). Any insight is appreciated.Ok, I found the problem. Apparnetly neither browser likes relative positioning, so what I ended up doing is changing.text, .links
{
position: relative;
top: 120px;
}to.title
{
height: 187px;
}Basically I just had this block take up some extra space as filler, so all the elements below get shifted down as a result. Dirty hack in my opinion, but it does the job.
New problem now, however.
Opened the page in IE5.5. The absolutely positioned banner is centered on the page, but the page-container (and thus all other content) is not centered. It seemes margin: auto doesn't work in IE5. Are there any known hacks for this?whithout looking at your files i guess you have to give the property "text-align: center" to the body and "text-align: left" to the page-container.Yup. The text-align: center doesn't do anything in this case for the modern browsers (which is correct since text-align is supposed to affect inline elements) but it did the trick for IE5. Thanks for the tip.Apparnetly neither browser likes relative positioningNot true. Most browsers would appreciate you closing your span tags, though.Not true.
So you're telling me that the relative positioning was not the cause of the rendering problems? Simply commenting out the relative positioning styles while changing nothing else cures all the problems I had mentioned. If I am mistaken and the cause was in fact something else please show me.
Most browsers would appreciate you closing your span tags, though.
I missed one closing tag, which I have already discovered when I passed my page through the validator.
{
position: relative;
top: 120px;
}to.title
{
height: 187px;
}Basically I just had this block take up some extra space as filler, so all the elements below get shifted down as a result. Dirty hack in my opinion, but it does the job.
New problem now, however.
Opened the page in IE5.5. The absolutely positioned banner is centered on the page, but the page-container (and thus all other content) is not centered. It seemes margin: auto doesn't work in IE5. Are there any known hacks for this?whithout looking at your files i guess you have to give the property "text-align: center" to the body and "text-align: left" to the page-container.Yup. The text-align: center doesn't do anything in this case for the modern browsers (which is correct since text-align is supposed to affect inline elements) but it did the trick for IE5. Thanks for the tip.Apparnetly neither browser likes relative positioningNot true. Most browsers would appreciate you closing your span tags, though.Not true.
So you're telling me that the relative positioning was not the cause of the rendering problems? Simply commenting out the relative positioning styles while changing nothing else cures all the problems I had mentioned. If I am mistaken and the cause was in fact something else please show me.
Most browsers would appreciate you closing your span tags, though.
I missed one closing tag, which I have already discovered when I passed my page through the validator.