CSS and Table problem

I am having a bit of a problem with some text placement after a table has been displayed. the problem is namely in IE and not in Firefox and its driving me crackers, though I am sure I have overlooked something really simple.

Whats happening is that after inserting a table, text contained in the

tags following the table appear squashed up in the space to the right of the table instead of below it.

Have a look at this code:



This is some text data</p>
<table>
<tr>
<td>Cell 1</td>
</tr>
</table>


Some more text</p>

Simple enough you might think, so what I need to know is why it is coming out like:

This is some text data

[ Cell 1 ] Some more text data


I have tried everything I can think of -

tags around the table, line breaks, css 'display: block', auto margins on the table, table contained in its own div, and nothing appears to work. Any ideas? I think it is a css problem, but I am not 100% sure.



Anyone come across this before?

Cheers

Mike.[/code]

i previed the code in ie and i didnt see a problem....

is there a float:left applied to the table somehow?

Its more to do with the CSS I think. I was reluctant to post it as it is quite big, but I have copied it onto our external server so you can have a look.

html:

http://www.leedshis.nhs.uk/test/

and css:

[/url]http://www.leedshis.nhs.uk/test/stylesheet/website.css[/url]

for anybody with 'really' long pieces of code to post, please use our pastebin and place the pastebin supplied link within the post.

The benfit of this method, is that people can make changes to your code and supply you with a modified version of it(via a different pastebin url)

__________________
Click the 'Thanks!' button if this post has helped you

Rob - Webforumz Founder

In reply to D3mon - No, there is a float right applied to the quicklink in the top right, but thats the only float there is.

Cheers

Mike

could you not place a <br clear="all"> before the

tags? or maybe put clear="all" into the

tag, i dont know if that works or not.......?

The table has been set to align="left", which is the HTML equivalent of the CSS style="float:left". Take that out and you'll be back on track.

You are a star! Cheers. I had almost torn out what little heair I have left. Something so simple can cause so many problems.

Is there any way to override this in CSS so that it cannot happen again? The reason I say that is our users create some the bit between body tags with a visual web based editor (an older version of htmltag).

Cheers

Mike.

Sorta, you could declare all tables to have float:none; inside your CSS file, but it might be overridden if align=left is placed in the html code by your users, since it is more top-level than the external CSS style sheet.

I guess you can only try?

Add this to your CSS sheet:

Code: Select all

table {float:none;}

Unfortunatly, inline styles take precedence over external CSS 95% of the time.... so you'll have to make changes to all the tables by hand.

__________________
Click the 'Thanks!' button if this post has helped you

Rob - Webforumz Founder