annoying FireFox Issues

[GaryDean]

If you go to my website, www.deanblakely.com, in I.E. you will see that it
displays fine but if you browse it in FireFox 1.7 you will see stuff on the
Master Page that is not alligning right.

I have the following elementID in my One.CSS file...
#masthead
{
text-align: right;
margin-right: 13px;
margin-left: 13px;
width: 844px;
padding: 0;
background-color: #cde;
background-image: url( './images/DOTNETONEsmall.png' );
background-repeat: no-repeat;
height: 100px;
}
and all of those lines you see are in a div with an id of Masthead.

Also if you go to www.deanblakely.com/Intro.aspx you will see text in
another div with an id of the following elementID...
#column_w
{
width: 770px;
margin: 20px;
padding-right: 0px;
padding-left: 20px;
padding-bottom: 20px;
padding-top: 20px;
}
It's 770px wide but Firefox wraps in less than half that distance.

What is wrong and what can be done to make this stuff align right?
Thanks
Gary

 

[Masudur]

If you go to my website,www.deanblakely.com, in I.E. you will see that it
displays fine but if you browse it in FireFox 1.7 you will see stuff on the
Master Page that is not alligning right.

I have the following elementID in my One.CSS file...
#masthead
{
text-align: right;
margin-right: 13px;
margin-left: 13px;
width: 844px;
padding: 0;
background-color: #cde;
background-image: url( './images/DOTNETONEsmall.png' );
background-repeat: no-repeat;
height: 100px;}

and all of those lines you see are in a div with an id of Masthead.

Also if you go towww.deanblakely.com/Intro.aspxyou will see text in
another div with an id of the following elementID...
#column_w
{
width: 770px;
margin: 20px;
padding-right: 0px;
padding-left: 20px;
padding-bottom: 20px;
padding-top: 20px;}

It's 770px wide but Firefox wraps in less than half that distance.

What is wrong and what can be done to make this stuff align right?
Thanks
Gary

hi....

Inside your div masthead you have used a table.... to populate phone
email etc in different rows...
apply style to that table...
set style="float:right"....

Thanks
Masudur

 

[=?ISO-8859-1?Q?G=F6ran_Andersson?=]

If you go to my website, www.deanblakely.com, in I.E. you will see that it
displays fine but if you browse it in FireFox 1.7 you will see stuff on the
Master Page that is not alligning right.

I have the following elementID in my One.CSS file...
#masthead
{
text-align: right;
margin-right: 13px;
margin-left: 13px;
width: 844px;
padding: 0;
background-color: #cde;
background-image: url( './images/DOTNETONEsmall.png' );
background-repeat: no-repeat;
height: 100px;
}
and all of those lines you see are in a div with an id of Masthead.

This is not an issue with Firefox, but with IE. You are relying on a
rendering bug in IE to make it look the way you intend, but it renders
correctly in Firefox.

You are using text-align to position the table inside the div, however
text-align does not apply to block elements, but IE does apply it anyway.

Use float:right on the table to position it correctly.

Also if you go to www.deanblakely.com/Intro.aspx you will see text in
another div with an id of the following elementID...
#column_w
{
width: 770px;
margin: 20px;
padding-right: 0px;
padding-left: 20px;
padding-bottom: 20px;
padding-top: 20px;
}
It's 770px wide but Firefox wraps in less than half that distance.

What is wrong and what can be done to make this stuff align right?
Thanks
Gary

The div element is 770px wide, and both browsers does actually render it
that way. However, you have placed a table inside the div, and made the
center column (which contains the text) 400px wide.

You are then using a link with inline-block inside the top cell to force
the column to be wider, but Firefox does not support inline-block yet so
the column stays at 400px.

The solution is simple, just make the column the width that you want it.

 

[GaryDean]

Goran,
Many thanks. that worked great