Website Designed In Notepad++ Looks Bad On Mac

[northy124]

Hi

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

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:

Windows Screen Shot (How it is meant to look):

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

Northy

 

[monke]

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.

 

[ct2k7]

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.

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

EDIT: Problem Fixed - removed FooterStickAlt !

 

[monke]

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

EDIT: Problem Fixed - removed FooterStickAlt !

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.

 

[ct2k7]

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.

Checked and not saved with colour profile - I didn't make the images, another designer did.

 

[SrWebDeveloper]

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

 

[ct2k7]

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!