...

View Full Version : Site looks great in Mac Safari, terrible on everything else



switters
05-23-2008, 08:36 PM
Over the past few weeks I've taught myself the basics of CSS & Flash to get a simple portfolio website up and running. Everything looked great to me previewing in Safari on Mac. However, I just noticed that it looks terrible on other Mac browsers (Camino) and also in Internet Explorer and Firefox on PCs. The title in the navigation bar ("CDK Arts") is sitting right on top of the div surrounding the Flash content, and the text for the navigation bar on the top right is tiny and illegible.

Here's the URL so you can check it out: http://cdkarts.com

What am I doing wrong? Why does it look great in Safari Mac, but terrible everywhere else?

rafiki
05-23-2008, 08:55 PM
Hows it meant to look?

_Aerospace_Eng_
05-23-2008, 09:36 PM
You never closed your wrapper div. Also you should be using SWFObject to put your flash on the page. http://code.google.com/p/swfobject/

switters
05-23-2008, 09:38 PM
It's supposed to look like this:

http://cdkarts.com/images/cdkarts.png

switters
05-23-2008, 09:47 PM
You never closed your wrapper div. Also you should be using SWFObject to put your flash on the page. http://code.google.com/p/swfobject/

Don't know how I missed that. There's actually two </div> tags missing. Sheesh!

Thanks.

switters
05-23-2008, 09:51 PM
Thats how it looks in Firefox 3 RC1. From looking at your CSS you are going about this the wrong way. You shouldn't be using relative positioning as much as you do. Put the CDK ARTS first, float that to the left, then put the menu, float that to the right. Now you need to clear your floats.

http://www.positioniseverything.net/easyclearing.html

This is a very simple layout that you are making very complicated to make.

Ummm... yep, I'm a total newbie. I suspected that I was making something that should be simple far more complicated. Thank you so much for fixing my CSS!

However, the issue of why the text appears jagged and small in Camino and Firefox (on a Mac, at least) and in IE on a PC remains unsolved. Here's what I mean:

http://cdkarts.com/images/cdkartscamino.png

_Aerospace_Eng_
05-23-2008, 09:52 PM
This works fine. Notice how much simpler it is? Also note there is no more relative positioning. Learn to let things just flow in the document. I haven't implemented the swfobject code however. The text is small because you set a font-size on #imagenav that is small however you never set the font size for the body so its going off of the browser default font size.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#FFF;
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

a:link, a:visited {
padding-bottom: 1px;
color: #31363e;
text-decoration: none;
}

a:hover {
padding-bottom: 0;
color: #dddddd;
}

#wrapper {
margin: 60px auto;
width: 800px;
}

#banner {
font-size: .9em;
font-weight: bold;
font-family: Arial, Helvetica;
text-transform: uppercase;
list-style-type: none;
float:left;
}


#imagenav {
list-style: none;
font-size: 0.75em;
float:right;
font-family: Arial, Helvetica;
font-weight: 700;
}

#imagenav li {
display: inline;
color: #70757e;
letter-spacing: .06em;
padding-left: 8px;
text-transform: uppercase;

}

#imagenav li a {
border-left: 1px dotted #858c97;
padding: 0 6px 0 8px;
}

#flashcontent {
clear: both;
border: solid thin #666666;
width: 800px;
height: 600px;
}

#flashcontent p {
text-align: justify;
padding-left: 200px;
padding-right: 200px;
top: 140px;
position: relative;
line-height: 140&#37;;

}

#flashcontent p.about {
text-align: justify;
padding-left: 200px;
padding-right: 200px;
top: 220px;
position: relative;
line-height: 140%;
}

#flashcontent ul {
padding-left: 100px;
top: 195px;
position: relative;
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="banner">
<li><a href="index.html">CDK Arts</a></li>
</ul>
<ul id="imagenav">
<li><span class="projectname">"Choice"</span></li>
<li><a href="choicestatement.html">Statement </a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="/blog" target="_blank">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="flashcontent">
<embed style="width:800px; height:600px;" class="viewbook_presentation" type="application/x-shockwave-flash" src="http://embed.viewbook.com/28139/3a558c50d389c2" flashvars=""></embed>
</div>
</div>
</body>
</html>

switters
05-23-2008, 10:29 PM
I can't thank you enough for this. It is far, far simpler as you suggested, and just looking at your CSS I've learned a lot.

Now I need to look into the SWFObject code. I used Dreamweaver's "Insert Media>Flash" menu command to insert some of the Flash pages. For the image slideshows, I'm using an online service called "Viewbook". I followed their instruction, which was simply to add the "embed" code that you can see on all of the image/slideshow pages.

Is something wrong with that?

Thanks again!


This works fine. Notice how much simpler it is? Also note there is no more relative positioning. Learn to let things just flow in the document. I haven't implemented the swfobject code however. The text is small because you set a font-size on #imagenav that is small however you never set the font size for the body so its going off of the browser default font size.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#FFF;
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

a:link, a:visited {
padding-bottom: 1px;
color: #31363e;
text-decoration: none;
}

a:hover {
padding-bottom: 0;
color: #dddddd;
}

#wrapper {
margin: 60px auto;
width: 800px;
}

#banner {
font-size: .9em;
font-weight: bold;
font-family: Arial, Helvetica;
text-transform: uppercase;
list-style-type: none;
float:left;
}


#imagenav {
list-style: none;
font-size: 0.75em;
float:right;
font-family: Arial, Helvetica;
font-weight: 700;
}

#imagenav li {
display: inline;
color: #70757e;
letter-spacing: .06em;
padding-left: 8px;
text-transform: uppercase;

}

#imagenav li a {
border-left: 1px dotted #858c97;
padding: 0 6px 0 8px;
}

#flashcontent {
clear: both;
border: solid thin #666666;
width: 800px;
height: 600px;
}

#flashcontent p {
text-align: justify;
padding-left: 200px;
padding-right: 200px;
top: 140px;
position: relative;
line-height: 140%;

}

#flashcontent p.about {
text-align: justify;
padding-left: 200px;
padding-right: 200px;
top: 220px;
position: relative;
line-height: 140%;
}

#flashcontent ul {
padding-left: 100px;
top: 195px;
position: relative;
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="banner">
<li><a href="index.html">CDK Arts</a></li>
</ul>
<ul id="imagenav">
<li><span class="projectname">"Choice"</span></li>
<li><a href="choicestatement.html">Statement </a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="/blog" target="_blank">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="flashcontent">
<embed style="width:800px; height:600px;" class="viewbook_presentation" type="application/x-shockwave-flash" src="http://embed.viewbook.com/28139/3a558c50d389c2" flashvars=""></embed>
</div>
</div>
</body>
</html>

_Aerospace_Eng_
05-23-2008, 10:33 PM
The embed code they gave you is invalid XHTML. Also in IE you need to "Click to Activate" on the flash so the user can interact with it. SWFObject dynamic publishing takes care of this. I also don't recommend using Adobe's version of "swfobject" as its bloated.

switters
05-23-2008, 10:41 PM
Okay. Should I be using the markup based or java based code? I see in the documentation there are two options.

_Aerospace_Eng_
05-23-2008, 10:45 PM
Read in the documentation about what the difference is. Its up to you. Documentation is there for a reason. We aren't here to hold your hand.

switters
05-23-2008, 10:57 PM
Read in the documentation about what the difference is. Its up to you. Documentation is there for a reason. We aren't here to hold your hand.

Sorry, I did read the documentation but quite honestly this is all so new to me (as I mentioned in the first post, I literally had zero experience with CSS or Flash up until earlier this week) that some of the vocabulary is still foreign.

In any event, I appreciate all of your help so far. I have books on CSS and Flash, but frankly I learn better by doing (and making mistakes).

Thanks again.

switters
05-23-2008, 11:17 PM
Thanks to everyone for your generous help, especially Aerospace_Eng. I think I have it worked out with the proper CSS and SWFObject code (only the index page so far).

http://cdkarts.com

effpeetee
05-24-2008, 05:53 PM
It seems to be OK to me, but it is not like the illustrations that you posted earlier.
Is there an explanation or am I mis-reading.

Frank

_Aerospace_Eng_
05-25-2008, 03:19 AM
It seems to be OK to me, but it is not like the illustrations that you posted earlier.
Is there an explanation or am I mis-reading.

Frank
They changed but it was just flash so it wasn't really causing the page to render incorrectly.

effpeetee
05-25-2008, 03:59 PM
They changed but it was just flash so it wasn't really causing the page to render incorrectly.
Thanks Aero.

The penny has just dropped.
I must be more tired than I thought.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum