+ Reply to Thread
Results 1 to 6 of 6

 

Thread: IE7 - CSS Problems - Check your site!

  1. #1
    Registered User

    Status
    Offline
    Join Date
    Oct 2005
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts


    IE7 has better support of CSS - Great?

    well it would be except all my newly done CSS sites look rubbish in IE7 - all alignment has gone wrong etc.

    i realise this is probably my problem for not checking other browsers in the first place but seeing as 90% of browsers using my site are IE i didnt care!

    However now i am stuck with being able to fix the site to look good in IE7 but then it looks crap in IE6 (and Vice Versa)

    does anyone know any code to check / change CSS layout issues in both browsers or do i just make a guess on when IE7 has been auto installed for everyone and switch my sites then?

    Or is no-one else having any issues?

  2. #2
    Web monkey

    Status
    Offline
    Join Date
    May 2005
    Location
    Cambridgeshire
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The first trick is to design for a browser that supports CSS properly (Like firefox!)
    Then, using a special feature supported by IE provide CSS corrections where needed.
    It works by first setting up a CSS file that is used by all browsers (with the correct style settings) and then, as CCS uses cascading for setting properties, reset properties for IE browsers by adding this AFTER the main call for the main CSS file:
    Code:
    <!--[if IE]>
    <style type="text/css" media="screen">
    /* This sorts out IE styles */
    body
    	{
    	font-size: 100%;
    	} 
    <![endif]-->
    You can add as much as you need to correct IE display problems, and the corrections are skipped by non IE browsers.
    Personaly, as I use PHP I use an "include" call to call a single file with all the IE correcting in. In theory you could call another sytlesheet withint the IF IE section, but I have never tried this to see if it works.
    A sample header is below:
    Code:
    <head>
    <title>Loans For Bankrupts</title>
    <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <META name="KEYWORDS" content="key,words">
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <!--[if IE]>
    <style type="text/css" media="screen">
    #Menu ul li
    	{
    	float: left;
    	width: 100%;
    	}
    #Menu ul li a
    	{
    	height: 1%
    	}
    #PageContent
    	{
    	padding: 0px 25px 15px 0px;
    	}
    
    </style>
    <![endif]-->
    </head>
    In this example, a stylesheet is called first that renders the page as required using correct CSS styling. Then the IF IE is read ONLY BY IE to correct any layout short falls in IE. Typically this is usually to do with positioning or margins/padding issues.

    Hope this helps
    ------------------
    Camo Clothing - 10% commission on sales

    For a chat Skype or MSN me! (details in profile)

  3. #3
    Web monkey

    Status
    Offline
    Join Date
    May 2005
    Location
    Cambridgeshire
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    P.S. An after thought
    You can also specify which IE is to run the corrections by adding the IE numbers as follows:
    <!--[if IE7]>

    You need to check this (google it) as I do not use this specific IE function
    ------------------
    Camo Clothing - 10% commission on sales

    For a chat Skype or MSN me! (details in profile)

  4. #4
    Registered User

    Status
    Offline
    Join Date
    Nov 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

  5. #5
    Web monkey

    Status
    Offline
    Join Date
    May 2005
    Location
    Cambridgeshire
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Spot on, I found these links usefull. Good to know I was on the right lines
    ------------------
    Camo Clothing - 10% commission on sales

    For a chat Skype or MSN me! (details in profile)

  6. #6
    Registered User

    Status
    Offline
    Join Date
    Nov 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That quirksmode.org is an excellent sites, the DOM compatibility tables are very useful. The conditional comments are also useful for IE specific JS, some of you may be familiar with the suckerfish menus, FF unlike IE allows :hover on elements other than A tags so for IE you can include the IE specific JS in a CC to save your non IE (Opera, Safari, FF) from having to download it.

    Just watch the CC if you run the multiple IE standalones on the same machine they don't always report the correct version vectors. I bought a new Dell Inspiron just for IE7, keeping IE6 on my desktop... so many browsers... so many versions

+ Reply to Thread


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Cashback Site v Charity Site - Whats went wrong?
    By markpearson in forum Affiliate Marketing Lounge
    Replies: 7
    Last Post: 27-05-06, 11:44 AM
  2. Site Problems?
    By MorleyM in forum DGM Affiliates
    Replies: 8
    Last Post: 06-07-03, 08:04 PM
  3. ARELIS 3 Link Popularity Software
    By Qui Gon Jinn in forum Media Coverage & PR Strategy
    Replies: 4
    Last Post: 05-03-03, 07:34 AM
  4. Link exchange and how to check if you’re getting a deal!
    By supercod in forum Media Coverage & PR Strategy
    Replies: 12
    Last Post: 25-12-02, 05:35 PM
  5. Site Problems
    By Marc Gear in forum Affiliate Window & buy.at
    Replies: 4
    Last Post: 31-05-02, 11:23 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
To Top

Content Relevant URLs by vBSEO 3.5.0 RC2