Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Site looks great in Mac Safari, terrible on everything else

    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?

  • #2
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Hows it meant to look?

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    May 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's supposed to look like this:


  • #5
    New Coder
    Join Date
    May 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.

  • #6
    New Coder
    Join Date
    May 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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:

    Last edited by switters; 05-23-2008 at 08:54 PM.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Code:
    <!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>
    Last edited by _Aerospace_Eng_; 05-23-2008 at 08:55 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    May 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.
    Code:
    <!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>

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    May 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay. Should I be using the markup based or java based code? I see in the documentation there are two options.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    New Coder
    Join Date
    May 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.

  • #13
    New Coder
    Join Date
    May 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 05-24-2008 at 05:11 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by effpeetee View Post
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •