for the search, my way to preload images! haha

Guide Categories

Website Tutorials

Coding Tutorials

Image Tutorials

Recipes

Entertainment Reviews

Home Remedies

Game Codes and Cheats

Jokes



Search for in

Browser issues

CSS Coding Tutorials | Submited Nov 18, 2007

Written by: Mr. ∃v¡l

How to handle something that looks different in another browser.
Sometimes when coding something IE gets confused and doesn't interpret the code right and something looks fine in one browser and crappy in another.
The best thing to do is code it in Firefox, because 1)Firefox reads code properly and will usually look the same. 2)There's a fix for the IE issue.

Example


Look at at this page in Firefox, and then in IE.
<style>
body{
background:#000 url(http://j6.bz/40K.png) center top no-repeat;}

* html body{background:#000 url(http://j6.bz/40L.png) center top no-repeat;}
</style>

The blue part is what affects IE.

IE7


One just for IE7? Indeed.
Adding an underscore to the declaration that's messed up in IE is all it takes.
<style>
body{
background:#000 url(http://j6.bz/40K.png) center top no-repeat;
_background:#000 url(http://j6.bz/40L.png) center top no-repeat;}

</style>


Pretty simple, but what a pain in the ass.User Picture..

tags Tags: IE FF browser

2Thumbs up  Thumbs down0

Related Tutorials
Style Tags
How to create contact tables
How to Create Scroll Boxes
How to Customize the Pictures Page
Hide Default Layout
Hide Blogs
Hide your MySpace URL
Polaroid Effect for Friend Space
Hide Friends
Hide Comments
Style your MySpace URL
Simple div / overlay tutorial
Images in Text
SEAMLESS TILES IN PSP
Creating Links
Floating display name
Stylizing the name with borders.
Editing MySpace texts
Colourizing Areas Within Images
Adding Text To Animations
7 Comments
  User Picture.. ~ 08/09/08, 7:35pm
Picture..
I added some padding, which seems to be working, is there any other way though?
  Mr. ∃v¡l ~ 08/09/08, 6:35pm
Picture..
Yeah, just the !important. It overrides whatever's causing the problem, and I didn't feel like opening FF to mess with your CSS. I'm glad it worked, though. :D
  User Picture.. ~ 08/09/08, 6:32pm
Picture..
You so RAWK! Thanks sooo much! If I caught that correctly it was just the !important I was missing? If I wasn't sharing the layout with others I'd say the H*ll with it, but I want it to look good, even for people who still use IE. [yay] [jumping]
  Mr. ∃v¡l ~ 08/09/08, 6:22pm
Picture..
Try this:

Code:
.nametext
{color:000000 !important; font-family:Calligraph421 BT !important;
size:26px;
line-height:23px;
text-align:center;
letter-spacing:0px;
text-transform:normal;
color:000000 !important;
background-image:url(http://i286.photobucket.com/albums/ll88/AnGella_/Layout%20Images/opal-2.jpg);
background-repeat:repeat;
background-position:center top;
display:block;
border-width:2px;
border-color:ffcccc;
border-style:outset;
font-weight:bold;
}

  User Picture.. ~ 08/09/08, 6:19pm
Picture..
You rock! Thanks for getting to this so quickly! Here is the page: myspace.com/angellaspage

Here is an example of the code I'm using for the headers in FF:
.nametext
{color:000000 !important; font-family:Calligraph421 BT !important;
size:26px;
line-height:23px;
text-align:center;
letter-spacing:0px;
text-transform:normal;
color:000000;
background-image:url(http://i286.photobucket.com/albums/ll88/AnGella_/Layout%20Images/opal-2.jpg);
background-repeat:repeat;
background-position:center top;
display:block;
border-width:2px;
border-color:ffcccc;
border-style:outset;
font-weight:bold;
}

After this I am going to go to the Myspace default tut and ask you why it doesn't center under the nav bar! [wtf] [lol]
  Mr. ∃v¡l ~ 08/09/08, 6:04pm
Picture..
On a website? Or on MySpace? Can you post the code, or a link to the page with the problem?
  User Picture.. ~ 08/09/08, 6:03pm
Picture..
I can't figure it out... text is one color in IE and another in Firefox within the stylized borders. I can't figure out where to put what. Not a fan of IE.

1 


Sorry, you have to be a member to comment tutorials