0

I have designed my page using Firefox and it looks exactly as I would expect it to, colors consistent with my design using Photoshop. When I view the page in Internet Explorer, all the colors are changed. It looks as if everything has a slight gray layer over it making it look dreary and "gross." Even the background image looks very different, it is lighter and brown-ish. The transparency I applied doesn't have any effect (yes, I added the IE "filter" property for alpha-opacity). The CSS I have added (in addition to the existing myspace styles) is here:

<style type="text/css">
.bodyContent
{
  background-color: 1e190c;
  background-image: url('http://img15.imageshack.us/img15/706/58119117.jpg');
  background-position: center;
  background-repeat: repeat-y;
  filter: alpha(opacity=80);
  opacity: 0.8;
}

.bodyContent a, .bodyContent a:link, .bodyContent a:active, .bodyContent a:visited
{
  color: ffffff;
  text-decoration:
  underline;
}
.bodyContent a:hover
{
  color: ff6600;
}

.bodyContent br
{
  line-height: 20px;
}

.bodyContent table
{
  border-style: solid;
  border-color: ffffff;
  border-width: 0px 1px 0px 1px;
  background-color: 3c0909;
}
.bodyContent table table table td
{
  border-width: 0px;
}
.bodyContent table table table table
{
  border-spacing: 1px;
}
.bodyContent table[id="headerTable"] td
{
  background-color: 2358b8;
}
.bodyContent table[id="musicJVNav"] td
{
  background-color: transparent;
}

.bodyContent tr, .bodyContent td, .bodyContent table table, .bodyContent table table td
{
  color: ffffff;
  border-width: 0px;
  background-color: transparent;
}

.bodyContent table table table table table strong
{
  color: ffffff;
}
.bodyContent table table table table
{
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  margin: 0px;
  background-image: none;
}
.bodyContent table table table table td
{
  padding: 0px;
  margin: 0px;
}
.bodyContent table table table
{
  width: 100%;
  margin: 0px;
  background-color: 232223;
  border-width: 1px;
  border-color: FFFFFF;
}

.bodyContent table.friendSpace
{
  display: none;
}

.bodyContent .text, .bodyContent .text font
{
  background-color: transparent;
  color: FFFFFF;
}
.bodyContent .nametext
{
  background-image: url('http://img6.imageshack.us/img6/479/thefallcontinent.png');
  width: 300px;
  height: 100px;
  display: inline-table;
  font-size: 0px;
}
</style>

I have screen shot of what I am talking about:
Firefox: http://img257.imageshack.us/img257/6490/shotff.jpg
IE: http://img21.imageshack.us/img21/1043/shotie.jpg

4
Contributors
5
Replies
6
Views
9 Years
Discussion Span
Last Post by death_oclock
-1

this always happen. i have the same problem as well. sometimes it works in firefox then in ie its not. its really frustrating.

Votes + Comments
Thanks for nothing
0

i understand your frustration with the limitations on coloring it exactly the way you want to on the web! the problem comes in that most users browsing these websites would most probably be using IE, so it's always easier desinging for IE and then adding your add ons for FireFox via CSS.

you are also referencing opacity twice in your first CSS reference, which could be a problem, always try and limit it to only one reference in a table and adjust your image to what you really want.

0

Firefox has beaten out IE (thankfully) but there is still too large a demographic of IE users to just ignore. Opacity hasn't quite caught on as standard yet (I doubt anything will for IE) so the first definition is just for IE, the second for most other browsers. And I haven't had this problem designing other sites before, this is the first time I've seen something so blatantly broken by a specific browser.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.