Justification within a div on IE

[JonnyOctopus]

Hello,

I'm a first time poster, but I am completely stuck, and would really value any help anyone can offer. I am setting up a website, and although I have done a fair bit of HTML, and I'm fairly new at using styles and divs.

Is it possible to set up a div in IE, so that the overflow is hidden, but the content is right justified. This seems to work fine in firefox, but IE doesn't seem to want to do it.

I am trying to set up a page where a bit of javascript makes it appear as if the buttons are sliding on from the right, but in IE, it looks as if they are slowly being revealed instead.

(There is an example at

http://www.revolverav.tv/prototype/ietest4.asp,

if you want to see what I mean).

Anyone got any ideas?

 

[vacunita]

I would start by giving your page a correct doctype. Otherwise
IE is in quirks mode, and will never behave as expected.

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Once you have a correct Doctype, try Validating your page,, so that there are no errors. (make sure you validate the resulting HTML, and not the ASP code)

http://validator.w3.org/

That way you know the inconsistency is not due to some error that gets handled differently in different browsers.


----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[JonnyOctopus]

Wow, that really escalated waaaay beyond my understanding quickly. I thought I was doing pretty well up to now. Thanks for the suggestions Vacunita , but I think I'm getting involved in a huge can of worms, and I'm not sure I'm getting any closer to fixing the problem.

I looked at the list of !DOCTYPEs, but to be honest, I didn't have a clue where to start. I set up the document initially in an old version of frontpage, and I thought it was "just HTML". So, I tried to go through the list of common doctypes, and see what happened. I tried all of them listed on that page for HTML 4.01, 2.0 and 3.2, as well as all combinations of XHTML 1.0, 1.1, basic 1.0 and basic 1.1. None of these worked in IE, but most of them failed in firefox too, and showed a huge list of errors in the console.

The only one that didn't show any errors, and showed the correct behaivoir in firefox were the ones for HTML 2.0 and HTML 3.2, so I tried these with the validation page. The validation page didn't like them at all, and threw up a load of errors for attributes which looked fine to me.

To simplify things, I set up a very basic example of the problem, with no client side or server side code at all. This can be seen at

http://www.revolverav.tv/prototype/example.htm.

I set this up with the two doctypes that hadn't show any errors in the original document (HTML 3.2, HTML 2.0), and the validator page only picked up one error, saying this doctype couldn't be correct, as these doctypes didn't support the STYLE attribute. The validator suggested I tried a transitional doctype instead, so I tried the HTML 4.01 Transitional doctype instead. This passed validation successfully.

However, you can still see the same problem in this document that you could on the original. This document is simply a table inside a DIV, where the table is wider that the DIV style allows, and the overflow is hidden. In Firefox, you see the column called "right side", which is correct, but in IE, you still see the column called "Left side"

Any other suggestions very gratefully received, as I haven't got a clue what to try next.

 

[vacunita]

I'm not exactly sure why IE does not align the table itself, but rather the text inside it.








----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[vacunita]

Forgot to say, the 4.01 Transitional is the most common one and the suggested one to use, unless you have specific needs that require older or other specific doctypes.

In your case Transitional is o.k.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Vragabond]

Fix your html to the current standards. Your table should not flush to the right in any browser.

<body>
  <div [!][s]align="right"[/s][/!] style="overflow: hidden; width: 50px; [!][s]text-align: right;[/!][/s]">
    <table cellspacing="0" cellpadding="0" border="2" [blue][b]style="margin: 0 0 0 auto;"[/b][/blue]>
      <tr>
        <td>Left Side</td>
        <td>Right Side</td>
      </tr>
      <tr>
        <td>Left Side</td>
        <td>Right Side</td>
      </tr>
    </table>
  </div>
</body>

Only valid part of the code shown. Your old method relied on browser interpreting old align control as float and I suppose IE didn't want to. Text was flushed to the right because of [tt]text-align: right;[/tt]. It aligns text, not boxes. New margin command specifies that the table should have a margin on the left side that fills the entire empty space surrounding the table, meaning it will be pushed entirely to the right side (because margin there is 0).

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[JonnyOctopus]

Thanks for the suggestion Vragabond. I've attempted setting up the code like this, but now it doesn't align to the right in either browser.

http://www.revolverav.tv/prototype/example2.htm

 

[Vragabond]

It is true, they are not showing it correctly. However, that is more due to a confusing technique that you're using to achieve the effect -- which you will never be able to get working across all browsers. I suggest you add a big enough width (actually it should also work without width at all) to your div to be able to hold your table. Make sure the div has overflow: hidden set. Then use table's [tt]margin-left[/tt] to control where the table is. Make it start at negative width of the table and have it come down to 0. This way you will achieve what you want in a more natural way.

Also, if this will be site navigation, a list element would be more appropriate than a table.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[JonnyOctopus]

I admit it probably is a weird way of doing it. I haven't really played around with styles and divs much before, but I've alwyas been one to dive straight in.

Anyway, I had a go with your suggestion about using a negative margin, and that has worked perfectly. I've put it into the page, and it is working perfectly in both IE and firefox. Many, many thanks for the suggestion Vragabond.