floated span acting like block element in table head

[1DMF]

Hi,

I have a table head as follows...

        <tr>
            <th colspan="4">Adviser Summary <span id="recNav"><img id="recBack" title="Back" src="rec_left.gif" onclick="changeRec(-1);" /><span id="recNum"></span><img id="recForward" title="Forward" src="rec_right.gif" onclick="changeRec(1);" /></span></th>
        </tr>

the accompanying CSS is

/* record navigation */
#recNav {
    float:right;  
    padding:0 5px; 
}
    
#recNav img {
    height:16px;
    cursor:pointer;
    vertical-align:middle;
    padding-bottom:3px;
    display:none;
}

In IE8/Opera/FF it shows fine but in IE8 compat mode or IE7 the TH is forced into two lines and the floated span is on the second line as though it's a block element?

why is this happening?

Thanks,
1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[BillyRayPreachersSon]

Off the top of my head I can't say why it's happening, but to get around this, wrap a span around the text of the cell and float it left, e.g:

<th colspan="4">
	<span style="float:left">Adviser Summary</span>
	<span id="recNav">
		<img id="recBack" title="Back" src="rec_left.gif" onclick="changeRec(-1);" />
		<span id="recNum"></span>
		<img id="recForward" title="Forward" src="rec_right.gif" onclick="changeRec(1);" />
	</span>
</th>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[1DMF]

Hi Dan,

Although this solves the block/newline issue the heading would then be left justified, all table headers need their text center aligned.

How would I do this?

I've tried float:center; but then the recNav span drops down again to the line below?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[Vragabond]

Try putting Adviser Summary after the floated span. I would actually expect the span to appear below the text if it is entered after text. Remember, floated elements are block level elements.

<th colspan="4"><span id="recNav"><img id="recBack" title="Back" src="rec_left.gif" onclick="changeRec(-1);" /><span id="recNum"></span><img id="recForward" title="Forward" src="rec_right.gif" onclick="changeRec(1);" /></span>Adviser Summary</th>

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Vragabond]

1DMF, there is no such thing as [tt]float: center;[/tt], that is why it simply gets ignored in your code.

However, the fact that non-floated span gets pushed to the next line could be an indication that you have another CSS rule interfering. Can you check with Firebug or something similar that the CSS you posted is the only CSS affecting the mentioned span?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[1DMF]

forgot about the center not being a valid float!

The only other CSS affecting that code is

#content th {
    background-color: #CACDE1;
	border: double; 
	border-width: 3px; 
	border-color: #000;
	text-align:center;
}

Even putting the span first, although it solves the span dropping to the next line, the heading is still not center justified and is pushed to the left by the amount the floated span takes up.

I ran it through the error console on FF and the only thing being reported is

http://www.mydomain.com

: potentially vulnerable to CVE-2009-3555

Warning: RDFItemUpdater:_parseV20UpdateInfo: No updates were found for:
{CAFEEFAC-0016-0000-0003-ABCDEFFEDCBA}
If you are an Extension developer and were expecting there to be
updates, this could mean any number of things, since the RDF system
doesn't give up much in the way of information when the load fails.

Try checking that:
1. Your RDF File is correct - e.g. check that there is a top level
RDF Resource with a URI urn:mozilla:extension:{GUID}, and that
the <em:updates> listed all have matching GUIDs.

what ever that means?

if floated div's are block elements, doesn't display:inline; fix that? , it didn't seem to make a difference.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[Vragabond]

No, display property is ignored when an element is floated. Only block level elements can be floated, thus element is transformed to block level and its display property ignored when floated. That's the rules.

Technically, browser is again doing it correctly in not letting your text be centered for the buttons -- since there are elements there that interfere with the position of the text, text is centered based on the remaining position. If you wanted the button real estate to not count into the centering of the element, you will have to position buttons absolutely. In fact, I think it might be possible to simply add position: absolute to the current code and everything would work. That is, since there is no specified position (no left/right/top/bottom values), element will just be absolutely positioned (taken out of the normal document flow) where it is. And float and position in the code should ensure that the position is exactly where you want it. Give that a whirl and see if it works.

If it doesn't work, then you will have to add some relative positioning (to enclose the absolute one in a relevant element) and work with positions.

I am sorry, but I don't know anything about what your error console is reporting.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[1DMF]

I resolved it in the end...

I fixed the recNav span to 100px; placed an empty span in all the other table headings (as there were other tables below this one).

then wrapped the actual title text in another span, set it's postion to relative and then made it's left margin 50px.

now all the headings line up central and the record navigation is in the right place on the same line as the heading.

what a palaver!



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[1DMF]

then made it's left margin 50px.

sorry that was meant to say left position not margin i.e.

<span style="position:relative; left:50px;">Adviser Summary</span>

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts