my website is not showing up correctly in safari

[mollymoo]

Hi I am building a site using dreamweaver and building it in css. I even followed the instruction from this great website.

It works prefectly in IE and shows up as it should. however, in safari, it only shows up the top sectiona dn photo and navigation. it fails to show the div boxes in the lower half. each section was build using the same method so I am not sure why some seem to show up on the top but not the bottom.

any ideas. should i post it somewhere if someone wanted to see the coding.

i so thought i had it when it looked great in IE, but need it to work for mac users in safari.

thanks

[VHG]

Maybe Safari does not fully support CSS.

More here

http://developer.apple.com/documentation/Apple Applications/Reference/SafariCSSRef/Introducti on.html

[mollymoo]

hi

thanks for the post, but the coding is the same as the coding in the top half that is showing up.

plus the tutorial that i got it from was on how to build his site and that works ok in safari, i am just not sure where i went wrong and wanted to see if anyone minded havin a quick glance to see where it might be playing up.

i have done a css validation scan and it all came up ok

the site is www.sarahhood.co.uk/movies/template.html

if you look at it in IE you see green boxes with orange bordes and a fotter but in safari they do not show up. i can post the css file somewhere if someone needs to look at that too.

thanks

[wildwood]

It doesn't show the bottom in Firefox either. Sorry, I do not know much about cascading style sheets.

[beso]

The missing divs are behind the main photo.
You need to clear the floats around this element.

Add the property
clear: both;

to the style sheet element
#mainphoto

http://www.w3schools.com/Css/pr_class_clear.as p

http://www.positioniseverything.net/easycleari ng.html

[mollymoo]

beso thanks for that. it seems to have sorted out showing them up now, the only thing is it now shows the lighter green seen in IE as white???

also when you see it in safari the text all seems to be bold. do i need to state that it is normal. ie seems to take it as this does it have to be in the text as normal, cos in safari it makes it bold and in turn makes everythin miss inline..

thanks for you help so far. i have republished so you can see what i mean by the white parts.

[beso]

The #main styled element isn't actaully showing as white. It is appearing as a thin band between the main photo and the column elements instead of enclosing them.

Safari and Firefox don't correctly calculate the auto height of the #main styled element from the auto height of the enclosed column elements so they escape.

You can give the columns a minimum height property:
min-height: 20px;

Otherwise:
Add a cleared element as the last element inside the #main element. (Insert the second line where shown below)

<div id="rightcol">Content for id "rightcol" Goes Here</div>
<div style="clear: both;"></div>
</div>

[mollymoo]

beso once again thank you for your help. you have helped me out a great deal thank you will go try that now

[beso]

I have noticed that the text on a lot of sites looks bolder on Safari.

Read this thread:

http://www.webmasterworld.com/css/3614559.htm

Sounds like a rendering issue possibly at a particular screen resolution. Perhaps even involving a mismatch between the monitor native resolution and the selected graphics screen resolution.

Obviously you are targetting the film industry with your site and have rightly expected visits by more Macs than most sites encounter. However you may find the problem is limited to particular hardware running the Windows version which won't be your target audience. I would check it out on a Mac running OSX before I got too worried.

You probably don't need to be too concerned about how it looks in Safari anyway. Those who use it are likely to be accustomed to the different appearance on their computer. I guess you just need to allow enough room to accomodate the chunky font.

Personally I am not all that impressed with the Safari browser. However I have only used it on Windows.

The Safari for Windows download is 19MB compared to Firefox's 7MB . This shouts code-bloat to me. It was written for the Mac and I expect it didn't translate well to Windows. Maybe it even runs inside a mini emulator.

However the new Google browser, Chrome is based on Safari so maybe the situation will improve with a bigger Windows base. The site I manage is just beginning to see significant visits by Chrome in the past month.

[mollymoo]

once again beso thanks. i agree it might just be safari on a pc rather then the mac version and as you say no one will use it on a pc...

thanks again