CSS differences with firefox and safari - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

CSS differences with firefox and safari

background-image

tech0925

7:33 pm on Feb 28, 2011 (gmt 0)

10+ Year Member

I made a css for my php table form. I just noticed that my background image on my table looks fine in firefox but in safari it is larger than it needs to be and continues outwards past the borders.

How can I fix this? Also, I use a mac so I cannot see what it looks like in internet explorer. I wonder how I can verify it there as well.

Here is my css

_{@charset "UTF-8";
/* CSS Document */

/* ------- Speedy Contact Page Layout ----------*/

table {
border: 1px;
border-style: solid;
border-color:#000000;
-moz-border-radius: 7px;
border-radius: 10px;
font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #000000;

}

a:link {color:#000066;} /* unvisited link */
a:visited {color:#000066;} /* visited link */
a:hover {color:#3bb9ff;} /* mouse over link */
a:active {color:#000066;} /* selected link */

.box{
padding:0 0px 0px 0px;
margin:0px;
width: 100px;
height: 100px;
font:12px/18px Arial, Helvetica, sans-serif;
color:#000000;
background:#fff url() 0 0 repeat-x;

}

.box23{
padding:0 0px 0px 0px;
margin:0px;
width: 520px;
height: 396px;
font:12px/18px Arial, Helvetica, sans-serif;
color:#000000;
background:#fff url(images/box2244.gif) 90px; 0 repeat-x;

}

.heading_2{
font-family: Blippo, fantasy;
font-size:28px;
font-weight:normal;
color:#000066;
line-height:28px;
padding:0 0 15px 0;
display:block;
}

td.total
{
padding:10px 0px 0px 0px;
background: none;
text-align:right;
font-weight:normal;
font:11px/18px Arial, Helvetica, sans-serif;
letter-spacing:1px;
}}

Any help with the safari issue would be great. Thanks!

[edited by: alt131 at 2:33 pm (utc) on May 26, 2011]
[edit reason] Thread Tidy [/edit]

Fotiman

8:19 pm on Feb 28, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

First, that code is invalid [validator.w3.org]. You should start by correcting those errors.

Next, for the issue you're seeing, you have applied a background image to the div element that contains the table. Instead, that should be the background image of the table element.

In addition, your CSS is invalid [jigsaw.w3.org] too, so be sure to validate that as well and correct those errors.

tech0925

8:34 pm on Feb 28, 2011 (gmt 0)

10+ Year Member

Thank you! I will work on this now. I was thinking I should have contained it in the table instead of the div tag. When you say code is invalid, what do you mean exactly?

Fotiman

8:57 pm on Feb 28, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Well, if you look at the results of those validation links, it will tell you exactly what is wrong. For example, your tags are not properly nested (you begin your <form> element within a table row, but close it after the end of the table). And you have no <head> element. Also, your CSS is invalid:

background:#fff url(images/box2244.gif) 90px; 0 repeat-x;

presumably you meant:

background:#fff url(images/box2244.gif) 90px 0 repeat-x;

tech0925

9:09 pm on Feb 28, 2011 (gmt 0)

10+ Year Member

Oh ok, thanks so much! I am trying to learn this confusing stuff. LOL I'll get it eventually though. The only problems I having now is this:

CSS
The background image repeats itself across the table like it should but does not repeat itself up and down (height). How can I set the background image to repeat the height also?

Finally, it says that this isn't right:
It took me an hour to get that code but now I have no idea what it should be instead.

table {
border: 3px;
border-style: solid;
border-color:#000000;
-moz-border-radius: 14px;
border-radius: 14px;
font-family: Verdana;
font-weight: normal;
font-size: 11px;
padding:0 0px 0px 0px;
margin:0px;
width: 520px;
height: 396px;
font:12px/18px Arial, Helvetica, sans-serif;
color:#000000;
background:#ffffff url(images/box2244.gif) repeat-x;
}

As far as my code. I can't believe I forgot the head but fixed that. I also added the DOCTYPE and others but am getting all kinds of errors and cannot seem to fix it. I am not sure what you meant about the table. Any advice?

Fotiman

10:26 pm on Feb 28, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

You have "repeat-x" on the background image (repeat along the x axis only, or repeat horizontally). If you want to repeat vertically only, you would specify "repeat-y", and to repeat for both, just "repeat" (or just leave it off, as "repeat" is the default).

Regarding the table, you have this code (I'm omitting the attributes just to make it more clear):


<table> 
  <tr> 
    <td>
      <form><!-- THIS IS NOT CLOSED PROPERLY, SO IS MALFORMED -->
    </td>
  </tr>
  ...
</table>
</form><!-- HERE IS THE CLOSING TAG OUTSIDE OF THE TABLE -->

If you do this:
<b><span></b></span>

That is considered malformed. Nested elements must be closed properly, as in:
<b><span></span></b>

To fix your table/form issue, remove the first row of your table as you have it now, and put the opening <form> tag before the beginning <table> tag:


<form>
<table> 
  ...
</table>
</form>

Hope that helps.

tech0925

10:42 pm on Feb 28, 2011 (gmt 0)

10+ Year Member

Thank You! WooHooo! It finally passed!

Finally, how can I fix the background image problem that I am having right now with my latest CSS above?

I will be glad once I learn all of this stuff! I have learned a lot from everyone here already. Thanks again!

Fotiman

11:29 pm on Feb 28, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

If you just replace that "repeat-x" with "repeat", then it should display as you are intending.

tech0925

11:36 pm on Feb 28, 2011 (gmt 0)

10+ Year Member

Thank You! You are the man! =) That got it. Lastly, my CSS error.

What does this mean exactly?

10 table Property -moz-border-radius doesn't exist : 14px 14px
11 table Property border-radius doesn't exist in CSS level 2.1 but exists in : 14px 14px

How do you suggest fixing this?

Fotiman

12:14 am on Mar 1, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

You won't be able to get rid of those when validating against CSS 2.1 because -moz-border-radius is a browser specific rule (not standard) and border-radius is CSS3. But you can safely ignore these errors. :)

tech0925

12:30 am on Mar 1, 2011 (gmt 0)

10+ Year Member

Awesome! Thank you so much for all the help with this =)