homepage Welcome to WebmasterWorld Guest from 54.166.8.138
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS differences with firefox and safari
background-image
tech0925




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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

tech0925




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved