page looks different in IE and Firefox

Hi,
I have a page that looks crooked in Firefox but displays normally in
IE.
http://www.legalpersian.com
The page was designed using Visual Web Developer 2005 (part of MS Vsual
Studio 2005 Express).

<form id="form1" runat="server">
<div id="container">

.... banner and logo stuff

<div id="container1">
<table id="layout_table">
<tr>
<td id="right_column" width="500"
height="300" valign="middle">
<div id="sub_container2">
<div id="slogan">&nbsp; </div>
<asp:LinkButton ID="eng"
runat="server" Style="z-index: 100; left: 190px; position: absolute;
top: 73px; height:40px; width:100px;" CssClass="choiceEng"
BackColor="#D3B493" BorderColor="#C9A17D" BorderStyle="Outset"
BorderWidth="4px" PostBackUrl="en/home.aspx" Height="68px"
Width="128px">English</asp:LinkButton>
<asp:LinkButton ID="fa"
runat="server" style="z-index: 100; left: 487px; position: absolute;
top: 73px; height:40px; width:100px;" CssClass="choiceFa"
BackColor="#C9A17D" BorderColor="#D3B493" BorderStyle="Outset"
BorderWidth="4px" PostBackUrl="fa/home.aspx"

فارسی</asp:LinkButton
br /

</div>
</td>
</tr>
</table>
</div>
</div>
</form>

Please let me know if more info is required.

ashkaan57 (AT) hotmail (DOT) com wrote:

Hi,
I have a page that looks crooked in Firefox but displays normally in
IE.
http://www.legalpersian.com
The page was designed using Visual Web Developer 2005 (part of MS Vsual
Studio 2005 Express).

form id="form1" runat="server"
div id="container"

... banner and logo stuff

div id="container1"
table id="layout_table"
tr
td id="right_column" width="500"
height="300" valign="middle"
div id="sub_container2"
div id="slogan">&nbsp; </div
asp:LinkButton ID="eng"
runat="server" Style="z-index: 100; left: 190px; position: absolute;
top: 73px; height:40px; width:100px;" CssClass="choiceEng"
BackColor="#D3B493" BorderColor="#C9A17D" BorderStyle="Outset"
BorderWidth="4px" PostBackUrl="en/home.aspx" Height="68px"
Width="128px">English</asp:LinkButton
asp:LinkButton ID="fa"
runat="server" style="z-index: 100; left: 487px; position: absolute;
top: 73px; height:40px; width:100px;" CssClass="choiceFa"
BackColor="#C9A17D" BorderColor="#D3B493" BorderStyle="Outset"
BorderWidth="4px" PostBackUrl="fa/home.aspx"
فارسی</asp:LinkButton
br /
/div
/td
/tr
/table
/div
/div
/form

Please let me know if more info is required.

I think the problem is with absolute positioning of the
images(buttons). Once I changed them to relative, they started to
behave.
Is this something known that absolute positiong within a div acts
diferently in IE and Firefox?
Can someone recommend a good book or article that describes css tags in
detail?

ashkaan57 (AT) hotmail (DOT) com wrote:

I think the problem is with absolute positioning of the
images(buttons).

Probably. Absolute postioning is a known problem with IE.

Can someone recommend a good book or article that describes css tags in
detail?

CSS doesn't have "tags" and for that matter HTML doesn't have elements
from an asp namespace either. If you want to ever really _understand_
this stuff, then you have to get it clear in your mind just which bits
of technologies you're using at each step. As an example,. the code
you posted wasn't a "web page", it was source code to ASP. The
_results_ of this code are what forms the HTML web page -- debuging
subtle CSS problems would require you rto look at that output, not the
input.

As to books, then Lie & Bos' "Cascading Stylesheets" is one of the best
as both a tutorial an on-going reference and the O'Reilly "Head First
HTML & CSS" is a pretty good tutorial to both HTML and CSS.

For hunting down CSS problems with IE, then the first rules are to
write valid code (both HTML and CSS), to demonstrate it and get it
working with a reasonably compliant browser (not IE), then to worry
about IE. Read websites like alistapart and positioniseverything for
some of the better known-problem lists.

Andy Dingley wrote:

ashkaan57 (AT) hotmail (DOT) com wrote:

I think the problem is with absolute positioning of the
images(buttons).

Probably. Absolute postioning is a known problem with IE.

Can someone recommend a good book or article that describes css tags in
detail?

CSS doesn't have "tags" and for that matter HTML doesn't have elements
from an asp namespace either. If you want to ever really _understand_
this stuff, then you have to get it clear in your mind just which bits
of technologies you're using at each step. As an example,. the code
you posted wasn't a "web page", it was source code to ASP. The
_results_ of this code are what forms the HTML web page -- debuging
subtle CSS problems would require you rto look at that output, not the
input.

As to books, then Lie & Bos' "Cascading Stylesheets" is one of the best
as both a tutorial an on-going reference and the O'Reilly "Head First
HTML & CSS" is a pretty good tutorial to both HTML and CSS.

For hunting down CSS problems with IE, then the first rules are to
write valid code (both HTML and CSS), to demonstrate it and get it
working with a reasonably compliant browser (not IE), then to worry
about IE. Read websites like alistapart and positioniseverything for
some of the better known-problem lists.

Thanks for the reply Andy. I am just learning the ropes with CSS.

The web site in question is in two languages, one in English and the
other in Farsi
(Persian) which is a right-to-left language. So, I used two
stylesheets, with the same info, and changed the right and left
properties (i.e. the left-margin:20px in English version changed to
right-margin:20px in farsi version).
It works fine in IE in both languages. In Mozilla, the English version
works fine but the Farsi version looks crooked. the menu and everything
else is shifted to the left. I spent a couple of days trying to figure
out what is wrong and I can't (being new to CSS). I would GREATLY
appreciate any assistance.
I am not sure if this is appropriate or if it helps but here is the
structure of the pages using CSS (the indentations imply <div
id="header" is contained within <div id="container", ...):

English pages:

Container 800px, relative
Header (relative, 800x226)
Logo (absolute, 150x100, top:82, left:550)
key_visual (absolute, 437x127, top:82, left:86)

container1 (800px)
left_column
left_column_container (padding:0; margin:0)
main_nav_container (margin: 30px 0 0 0)
<Flash menu>
main_container (padding:0 20px 0 60px), relative
layout_table (relative)
right_column (500x475)
<aps_content_placeholder>
sub_container2 (padding:18 0 20
5px), 495
slogan (margin: 0 0
10px 0)
content_container
(490px)

footer (800x120, margin:0, padding:0)
footer_line (margin:0 0 0 195) 500x40
footer_text (margin:10 0 0 25)

Farsi version:

container (800px, relative)
header (relative, 800x226)
logo (absolute, 437x127, top:82, left:86)
key_visual (absolute, 437x127, top:82, left:263)

container1 (800px)
main_container (padding:0 60px 0 20px)
layout_table (relative)
right_column (500x475)
<aps_content_placeholder>
sub_container2 (495px,
padding:18 0 20 5)
slogan (padding: 0 0 10
0)
content_container
(490px)

left_column
left_column_container
main_nav_container (margin: 30
12 0 0)
<menu>
Footer (800x120)
footer_line (margin:0 195 0 0) 500x40
footer_text (margin: 10 25 0 0)

The pages:
http://www.legalpersian.com/en/home.aspx (in English)
http://www.legalpersian.com/fa/home.aspx (in Farsi)