Help with Browser Bug

Question

Hi everyone, hope someone can shed some light onto this for
me. I've design a site that works fine in most browsers, but has a
couple of bugs in Firefox.
If you take a look at the sample below in Internet Explorer
& Firefox you can see there are 2 problems.
1. The background image that should repeated in the body
doesn't appear in firefox (so it just displays the b/g colour)
2. The login boxes on the right hand side have expanded out
of the page and I have no idea why!
Any help, would be brilliant.
Heres the site and style sheet:
http://www.annamik.com/
http://www.annamik.com/annamik.css
This is the CSS for the body and login box:
#body {
background: #92ADBB url(images/body.gif) repeat-y;
width: 771px;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
#body1 {
margin: 0px;
width: 470px;
float: left;
padding-top: 28px;
padding-left: 27px;
padding-right: 28px;
padding-bottom: 28px;
#body2 {
margin: 0px;
width: 189px;
float: left;
padding-top: 22px;
padding-left: 26px;
padding-right: 27px;
padding-bottom: 28px;
.loginBox {
background-color: #CBD8E0;
border: 1px solid;
border-color: #FFFFFF #83939E #83939E #FFFFFF;
padding: 15px 15px 24px 15px;
color:#1B488C;
display: block;
font: bold 10px Verdana, Arial, Helvetica, sans-serif;
line-height: 18px
Cheers
Paul

Answer 1

> 1. The background image that should repeated in the body
doesn't appear in
> firefox (so it just displays the b/g colour)
I see it just fine in FF1.5x.
> 2. The login boxes on the right hand side have expanded
out of the page
> and I
> have no idea why!
There is something inconsistent with your math in the tables
on the right
and the containing box. The widths/padding are pushing the
table much wider
in FF than in IE.
Try doing two things, and you'll see -
1. Add cellspacing="0" to the <table> tag
2. Remove the right and left padding on the td.
The table will now behave properly in both browsers. This
means that you
have sized the table without consideration for the padding in
the cell.
Reset the table width from 189 to 159 and it's going to look
much better
(now you can put the padding back).
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Wanderer Boy" <[email protected]> wrote in
message
news:[email protected]...
> Hi everyone, hope someone can shed some light onto this
for me. I've
> design a
> site that works fine in most browsers, but has a couple
of bugs in
> Firefox.
>
> If you take a look at the sample below in Internet
Explorer & Firefox you
> can
> see there are 2 problems.
>
> 1. The background image that should repeated in the body
doesn't appear in
> firefox (so it just displays the b/g colour)
>
> 2. The login boxes on the right hand side have expanded
out of the page
> and I
> have no idea why!
>
> Any help, would be brilliant.
>
> Heres the site and style sheet:
>
>
http://www.annamik.com/
>
>
http://www.annamik.com/annamik.css
>
>
> This is the CSS for the body and login box:
>
> #body {
> background: #92ADBB url(images/body.gif) repeat-y;
> width: 771px;
> margin: 0px;
> padding-top: 0px;
> padding-bottom: 0px;
> padding-left: 0px;
> padding-right: 0px;
> }
>
> #body1 {
> margin: 0px;
> width: 470px;
> float: left;
> padding-top: 28px;
> padding-left: 27px;
> padding-right: 28px;
> padding-bottom: 28px;
> }
>
> #body2 {
> margin: 0px;
> width: 189px;
> float: left;
> padding-top: 22px;
> padding-left: 26px;
> padding-right: 27px;
> padding-bottom: 28px;
> }
>
> .loginBox {
> background-color: #CBD8E0;
> border: 1px solid;
> border-color: #FFFFFF #83939E #83939E #FFFFFF;
> padding: 15px 15px 24px 15px;
> color:#1B488C;
> display: block;
> font: bold 10px Verdana, Arial, Helvetica, sans-serif;
> line-height: 18px
> }
>
>
> Cheers
> Paul
>