Member Avatar for death_oclock

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
  • 144 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by death_oclock
Member Avatar for Jen0608

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

commented: Thanks for nothing -1
Member Avatar for MJ Pieterse

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.

Member Avatar for death_oclock

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.

Member Avatar for MidiMagic

Did you forget to close a tag in the html?

Member Avatar for death_oclock

I am modifying a myspace page so the only tag I added is the <style> tag shown above.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.