Website Designed In Notepad++ Looks Bad On Mac

Discussion in 'Web Design and Development' started by northy124, Aug 29, 2008.

  1. northy124 macrumors 68020

    northy124

    Joined:
    Nov 18, 2007
    #1
    Hi

    My friend is coding a site using Notepad++, The site is called ThinkTeen & it is a support forum for teens:D.

    Anyway the site (Located here) looks bad in Safari & Firefox on Mac but looks perfect in IE7, I tried to recreate the site using the source in Dreamweaver & TextEdit but it turned out worse when previewing it:(.

    Mac Screen Shot:
    [​IMG]

    Windows Screen Shot (How it is meant to look):
    [​IMG]

    The problem is the bar at the bottom, Anyway to sort it out?

    Northy
     
  2. monke macrumors 65816

    monke

    Joined:
    May 30, 2005
    #2
    The footer had the following tags "position: relative; margin-top: -60px;". The negative margin-top value will make it ride up into the other elements above it.

    You should also be able to get rid of the position relative tag, I would think, but not so sure.

    One other thing, the images that are being used for the rounded top and bottom of the boxes aren't saved properly. They should be the same colour as the rest of the boxes and need to be saved without a color mode.

    I hope that that fixes everything. :)
     
  3. ct2k7 macrumors 603

    Joined:
    Aug 29, 2008
    Location:
    City of London
    #3
    I've delete the position relative tag to no avail. Not sure why, but the colours are same on Windows just not Mac and I checked in photoshop.

    Thanks :p

    EDIT: Problem Fixed - removed FooterStickAlt !
     
  4. monke macrumors 65816

    monke

    Joined:
    May 30, 2005
    #4
    It's not just the colour, its how you save the images. If you save them with a Colour Profile, it will automatically change the colours to match that profile. It'll look fine (normally) on the computer that you save and view it on, but as soon as you change to another monitor with a different Colour Profile, that monitor will display the images with the colour profile of the other display, but will display the colour that the HTML/CSS specifies in its own way.

    If you save the images without a colour profile, the monitor will display them both as the same colour, as it should.
     
  5. ct2k7 macrumors 603

    Joined:
    Aug 29, 2008
    Location:
    City of London
    #5
    Checked and not saved with colour profile - I didn't make the images, another designer did.
     
  6. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    The color profile is not the issue with the graphics here. The OP is using a PNG image with alpha transparency (edges). MSIE versions <7 has issues with this compared to other browsers, and a fix can be found here. Version 7 should be okay, and we'll see when 8 comes out in stable release. However, with transparency involved I do not advise using PNG, use an optimized GIF format to overcome all issues so you don't have to add JS hacks and worry about Microsoft's insanity.

    Yessss..... I am aware PNG file sizes are very small, comparatively. But if you use a quality image editor with optimization capability you'll be fine no matter the format you select in terms of both file size and control over pixel transparency.

    -jim
     
  7. ct2k7 macrumors 603

    Joined:
    Aug 29, 2008
    Location:
    City of London
    #7
    I'll make them gif (I didn't know they were png?, I didn't design the site, only adding content) for the new website template.

    Consider this template as abandoned as a better template with more feature is comming!
     

Share This Page