Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Website works in Safari but not Firefox, HELP!!

T

tea4thetiller

macrumors newbie
Original poster
Dec 13, 2010
1
0
Hi,
I'm really new to this so please understand.
I created my website in Photoshop and Dreamweaver CS5. Then uploaded
the entire site and it works perfectly in Safari, but in Firefox there is spacing
in between each of the sliced images where the background shows through.
I tried running it through an online validator, and tried fixing some of the bugs, but it didn't seem completely accurate because some of the flagged issues in the html code don't appear in the Dreamweaver code the way the validator says it is.. Can anybody help me out in fixing this problem, or point me in the right direction to where I can learn?
Any and all help will be greatly appreciated.
the site is: www.forcedforthetrees.com

Thanks,
Eddie
 
Unlike Safari, most browsers show a default border around images that are linked.
Add the border="0" attribute to those img tags:

Code: 
<img src="logo.jpg" border="0" />

Then do some online tutorials or take a CSS course to learn better ways of creating this layout (such as using a single, unsliced image, and image map hotspots).
 
tea4thetiller said:
Hi,
I'm really new to this so please understand.
I created my website in Photoshop and Dreamweaver CS5. Then uploaded
the entire site and it works perfectly in Safari, but in Firefox there is spacing
in between each of the sliced images where the background shows through.
I tried running it through an online validator, and tried fixing some of the bugs, but it didn't seem completely accurate because some of the flagged issues in the html code don't appear in the Dreamweaver code the way the validator says it is.. Can anybody help me out in fixing this problem, or point me in the right direction to where I can learn?
Any and all help will be greatly appreciated.
the site is: www.forcedforthetrees.com

Thanks,
Eddie
Click to expand...

Easiest way to solve this problem would be to:

1. Create an external CSS stylesheet. Name it something like global.css.
2. Place this HTML code in between your <head> tags. This will link your newly created external stylesheet to your HTML document. Be sure to include this link of HTML in all of your HTML pages.

<link rel="stylesheet" type="text/css" href="global.css" />
Click to expand...

3. Now open your global.css file and now create a img class that will force all the images to have NO border:

img {
border: 0px;
}
Click to expand...

There that's it! Much easier than having to go into your code and inserting border=0 into all your <img> tags.

Check out this links to read more about external stylesheets and perhaps learn some neat CSS tricks!

http://www.w3schools.com/css/css_howto.asp
http://articles.sitepoint.com/article/css-anthology-tips-tricks-3
http://www.w3schools.com/css/css_intro.asp
 
Last edited:
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back