Geek Answers Handbook

What is wrong with this HTML5 <address> element?

<div id="header-container"> <address> <ul> <li>lorem ipsum</li> <li>(xxx) xxx-xxxx</li> </ul> </address> </div>

And CSS looks like this:

 #header-container address {float: right; margin-top: 25px;}

When I load the page, it looks great in Chrome and IE, but in Firefox it completely ignores the style. When I look at the source in firefox, it looks higher, but in Firebug it looks like this:

 <div id="header-container"> <address> </address> <ul> <li>lorem ipsum</li> <li>(xxx) xxx-xxxx</li> </ul> </div>
+6
html css html5 firefox stylesheet
source share
3 answers

HTML5 is still a draft . Firefox 3.6 does not yet fully support HTML5.

And according to the HTML4 specification, an address can only contain inline elements:

 <!ELEMENT ADDRESS - - (%inline;)* -- information on author --> <!ATTLIST ADDRESS %attrs; -- %coreattrs, %i18n, %events -- >

That's why Firefox considers it invalid and your page breaks.

+7
source share

An unordered list cannot be wrapped inside an address tag. I checked the use of firebug, and Firefox moves the private address tag in front of the unordered list.

0
source share

Add a display block to CSS. Then add a clear_both div before closing the address. This will fix any problems with block elements inside the built-in ones.

Your CSS:

 #header-container address {display: block; float: right; margin-top: 25px;} .clear { clear: both; }

HTML:

 <div id="header-container"> <address> <ul> <li>lorem ipsum</li> <li>(xxx) xxx-xxxx</li> </ul> <div class="clear"></div> </address> </div>
-one
source share

More articles:


All Articles