SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My first site works on every browser but IE?!

    Hello,

    I have 'finished' my first site for a friend's company. He very kindly let me do him a re-design of his site as my first project and foray into web design. I have hand coded it using textmate and coda on a mac and have tested it on Safari, Firefox, Opera and Camino and it works on all, I have run it through the WC3 XHTML and CSS tests and they came back valid. I don't have access to a PC at home so yesterday went to my local library to test the site on Internet Explorer and the page looked horrible! These are the issues from what I could tell;

    - The images had borders to them instead of being flush in the design

    - The font had changed

    - The top navigation had split onto 2 lines

    I would be most grateful if someone could provide any advice on what I am doing wrong as my eyes have gone fuzzy from too much code! This is my first 'proper' site so apologies if I have committed a blindingly obvious mistake somewhere along the line!

    Also there is 2 issues that I couldn't resolve that are still cropping up in Safari etc,

    - The links to my personal site/copyright/css/xhtml validation at the bottom of the page should be on 3 separate lines but when I added the clickable link to 'deeper province' it has split it into 2, making it 4 lines now. If I take the 'href' code away it goes back to being all on one line?! Not sure what is happening there?

    - All the pages are fine and the same alignment apart from the 'contact' page which the header section seems to jump to the right and muck the alignment up. You can see this quite clearly when you flick between the 'contact' and 'current projects' section. I have literally given up as to what is making that do that!?

    The site is being held temporarily at

    www.deeperprovince.com

    Again, this is my first site so apologies if I am being stupid and have massively overlooked something obvious which I most probably have! Also, I don't have easy access to a PC to keep on re-checking any changes I make to try and fix the IE bugs.

    Thank you in advance

    Dan

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fujiprovince View Post
    - The images had borders to them instead of being flush in the design
    That should be fixed by adding one rule to your CSS style sheet:
    Code CSS:
    img {border:0}

    Quote Originally Posted by fujiprovince View Post
    - The font had changed
    Font settings are merely hints, anyway. You can never know whether a user has a particular font on his/her computer. That's why you should always specify a generic font family at the end of the list.

    Quote Originally Posted by fujiprovince View Post
    - The top navigation had split onto 2 lines
    It does that when I look in Opera 9 on Windows XP, too. You've specified the list width as 425px, which is not the best of ideas. You should never specify dimensions in pixels for anything that will contain text, since the user may change the text size within their browser. Also, if the browser uses a different font than the one you specified, the width may be different even at the designated size.

    On the other had, it doesn't seem to be a disaster to have the navigation on two lines in this layout.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the quick reply and help.

    You should never specify dimensions in pixels for anything that will contain text, since the user may change the text size within their browser
    I didn't consider that, good point.

    I think I might have confused things when I said the images had borders though, I meant that you could see the 'image box', instead of it being flush with the deisgn, not an actual border to the image, although over the weekend I learnt that Photoshop has been embedding colour profiles to my images so that might be a reason for them 'showing up'?

    I will try those changes.

    I choose quite a popular font I thought, Trebuchet MS, you are right though I do need to specify a generic font.

    Thanks again for the help, any more help would be appreciated.

    I think I might need to buy a PC laptop to avoid this in the future!

    Dan

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fujiprovince View Post
    I think I might have confused things when I said the images had borders though, I meant that you could see the 'image box', instead of it being flush with the deisgn
    I tested with IE6, and the problem might be that you're using transparent PNG images, which IE6 and older don't support. There's a workaround, which is described at A List Apart (Cross-Browser Variable Opacity with PNG: A Real Solution).

    Quote Originally Posted by fujiprovince View Post
    I choose quite a popular font I thought, Trebuchet MS, you are right though I do need to specify a generic font.
    You do, as far as I can see (using sans-serif at the end). The font looks about the same in Opera and IE6 for me, but even the same font can be rendered differently in Windows and Mac.

    I noticed another problem in IE, as well: the H1 heading is cut off at the top and bottom. The problem seems to be that you use line-height:1.5em for body.

    When you specify line height as a length or a percentage, it's the computed value that's inherited. In this case, the H1 inherits a line height of 18px, but the font size is 36px. IE seems to clip the top and bottom 9px (which is an error).

    If you want line-and-a-half spacing, you should set line-height:1.5 (without a unit). This will change your layout a bit, so you may have to adjust some other things. Alternatively, you need to specify a larger line height for the H1 (and any other large text).
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thanks again.

    Would I have to apply that to every png image on the site? Seems alot of extra code?

    I am gonna try it with 2 images, the logo and blueprint to try it out, have wrapped them both in divs 'logo' and 'blueprint' respectively and added these 2 rules to my css

    Code CSS:
    #blueprint {
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/blueprint.png', sizingMethod='scale');
    }
     
    #logo {
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='scale');
     
    }

    Does this seem correct?

    I have taken away the width for my nav bar, although I was under the impression that if you 'floated' something then you should declare a width?

    I took away the 'em' from the line height, the structure stayed in place from what I can tell. I have also included some more fonts.

    I am going to go and test this again at the library and also take down specific notes of what I can see is going wrong.

    Is there a true way to test out IE sites on a mac? I don't really want to have to run emulation software or bootcamp or buy windows. I also heard that even then it can still render stuff differntly? I have heard of a site than takes screenshots of sites in different browsers then uploads then screen shots, these would be static images though and although maybe helpful for cosmetic testing will not show you any flaws in the workings of the site.

    What is the best solution at present?

    Also....

    - Any idea why the 'href' seems to effect the line order at the bottom of the page?

    - Why there seems to be a jump in positioning of the header etc, on the 'contact' page

    Many thanks for your help so far! Very much appreciated.

  6. #6
    SitePoint Addict mason.sklut's Avatar
    Join Date
    Oct 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Get VMware Fusion and install Windows XP on it. That way you can use your Mac for the coding part and test with IE using VMware.

    http://www.macupdate.com/info.php/id/23593


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
  •