PDA

View Full Version : After outsourcing CSS now MMIE type problem



cellshade
Sep 23rd, 2009, 01:18 AM
Hi Guys,

I was coding my first CSS Page and was finally happy with the design and everything. But I realized I had a lot of CSS rules and styles defined. So I was thinking in outsourcing this CSS to keep the code clean and less overloaded.

My problem is, that since I have outsourced the CSS code, the browser does not load the images as he says it is interpreted as text/html but would be PNG images.

You can have a look at
http://www.apptranslation.com/lab/home.html

That's my HTML file


<head>
<title>AppTranslation.com | Welcome</title>
<link rel="icon" href="http://www.apptranslation.com/lab/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://www.apptranslation.com/lab/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://www.apptranslation.com/lab/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="stylesheet" type="text/css" href="http://www.apptranslation.com/lab/css/AppTranslation.css">
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>

</head>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10506373-1");
pageTracker._trackPageview();
} catch(err) {}</script>

<body link="#666" vlink="#666" alink="#666" onload="setupZoom()""MM_preloadImages('images/oButtons/oProducts.png','images/oButtons/oBenefits.png','images/oButtons/oReferences.png','images/oButtons/oBrochures.png','images/oButtons/oRegions.png','images/oButtons/oAbout.png','images/navspacer.png',)">
<div id="header">
<div id="logopic"><img src="images/Header.jpg" alt="AppTranslation_Logo" width="842" height="80" border="0" /></div>
</div>
<div id="nav">
<div id="navitems"> <a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navspacer','',1)" onmouseover="MM_nbGroup('over','navspacer','images/navspacer.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navspacer.png" alt="" name="navspacer" width="3" height="57" border="0" id="navspacer2" /></a><a href="home.html" target="_top" onclick="MM_nbGroup('down','group1','home','',1)" onmouseover="MM_nbGroup('over','home','images/oButtons/oHome.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/aButtons/Home.png" alt="Home" name="home" border="0" id="home" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navspacer','',1)" onmouseover="MM_nbGroup('over','navspacer','images/navspacer.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navspacer.png" alt="" name="navspacer" width="3" height="57" border="0" id="navspacer" /></a><a href="products.html" target="_top" onclick="MM_nbGroup('down','group1','products','',1)" onmouseover="MM_nbGroup('over','products','images/oButtons/oProducts.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/aButtons/Products.png" alt="Products" name="products" border="0" id="products" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navspacer','',1)" onmouseover="MM_nbGroup('over','navspacer','images/navspacer.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navspacer.png" alt="" name="navspacer" width="3" height="57" border="0" /></a><a href="benefits.html" target="_top" onclick="MM_nbGroup('down','group1','benefits','',1)" onmouseover="MM_nbGroup('over','benefits','images/oButtons/oBenefits.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/aButtons/Benefits.png" alt="Benefits" name="benefits" border="0" id="benefits" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navspacer2','',1)" onmouseover="MM_nbGroup('over','navspacer2','images/navspacer.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navspacer.png" alt="" name="navspacer2" width="3" height="57" border="0" /></a><a href="references.html" target="_top" onclick="MM_nbGroup('down','group1','references','',1)" onmouseover="MM_nbGroup('over','references','images/oButtons/oReferences.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/aButtons/References.png" alt="References" name="references" border="0" id="references" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navspacer3','',1)" onmouseover="MM_nbGroup('over','navspacer3','images/navspacer.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navspacer.png" alt="" name="navspacer3" width="3" height="57" border="0" /></a><a href="regions.html" target="_top" onclick="MM_nbGroup('down','group1','regions','',1)" onmouseover="MM_nbGroup('over','regions','images/oButtons/oRegions.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/aButtons/Regions.png" alt="Regions" name="regions" border="0" id="regions" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navspacer4','',1)" onmouseover="MM_nbGroup('over','navspacer4','images/navspacer.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navspacer.png" alt="" name="navspacer4" width="3" height="57" border="0" /></a><a href="about.html" target="_top" onclick="MM_nbGroup('down','group1','about','',1)" onmouseover="MM_nbGroup('over','about','images/oButtons/oAbout.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/aButtons/About.png" alt="About" name="about" border="0" id="about" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navspacer5','',1)" onmouseover="MM_nbGroup('over','navspacer5','images/navspacer.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navspacer.png" alt="" name="navspacer5" width="3" height="57" border="0" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','brochures','',1)" onmouseover="MM_nbGroup('over','brochures','images/oButtons/oBrochures.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/aButtons/Brochures.png" alt="Brochures coming soon" name="brochures" border="0" id="brochures" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navspacer6','',1)" onmouseover="MM_nbGroup('over','navspacer6','images/navspacer.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navspacer.png" alt="" name="navspacer6" width="3" height="57" border="0" /></a> </div>
</div>
<div id="content">
<div id="white_top"></div>
<div id="white_main"><img src="images/banner.jpg" alt="lets grow together" width="895" height="161" border="0" align="middle" />
<div id="box1"> <span class="h1">Why choosing us?</span>
<ul>
<li><a href="benefits.html"><img src="images/affordable3.png" alt="Affordable" width="30" height="30" hspace="7" border="0" align="left" /></a><a href="benefits.html"><span class="spacer_7px">Affordable</span></a></li>
<li><a href="benefits.html"><img src="images/quality.png" alt="High Quality" width="30" height="30" hspace="7" border="0" align="left" /></a><a href="benefits.html"><span class="spacer_7px">High quality</span></a></li>
<li><a href="benefits.html"><img src="images/support.png" alt="24/7 live contact" width="30" height="30" hspace="7" border="0" align="left" /></a><a href="benefits.html"><span class="spacer_7px">24/7 live contact</span></a></li>
<li><a href="benefits.html"><img src="images/aftersales2.png" alt="After Sales Support" width="30" height="30" hspace="7" border="0" align="left" /></a><a href="benefits.html"><span class="spacer_7px">After sales support</span></a></li>
<li><a href="benefits.html"><img src="images/paypal.png" alt="Easy Payment" width="30" height="30" hspace="7" border="0" align="left" /></a><a href="benefits.html"><span class="spacer_7px">Easy payment</span></a></li>
<li><a href="benefits.html"><img src="images/fast_ico.png" alt="Fast" width="30" height="30" hspace="7" border="0" align="left" /></a><a href="benefits.html"><span class="spacer_7px">Fast</span></a></li>
</ul>
</div>
<div id="box2"> <span class="h1"> Tune in for more details!<br />
</span><a href="#"><br />
<br />
<img src="images/mic2.png" alt="mic" width="121" height="127" border="0" /></a><br />
<br />
Listen what we have to tell you<br />
and get a guided tour through <br />
our product portfolio.<br />
<br />
</div>
<div id="box3"><span class="h1">Our product portfolio</span>
<ul>

<li><a href="products.html"><img src="images/iPhone.png" alt="youtub" width="30" height="30" hspace="7" border="0" align="left" /><span class="spacer_7px">App localization</span></a></li>
<li><a href="products.html"><img src="images/apple.png" alt="appstore" width="30" height="30" hspace="7" border="0" align="left" /></a><a href="products.html"><span class="spacer_7px">Store description</span></a></li>
<li><a href="products.html"><img src="images/youtube_2.png" alt="youtube" width="30" height="30" hspace="7" border="0" align="left" /></a><a href="products.html"><span class="spacer_7px">Voiceover/Subtitle</span></a></li>
<li><a href="products.html"><img src="images/webpage.png" alt="website" width="30" height="30" hspace="7" border="0" align="left" /></a><a href="products.html"><span class="spacer_7px">Website localization</span></a></li>
<li><a href="products.html"><img src="images/manuals.png" alt="manuals" width="30" height="30" hspace="7" border="0" align="left" /></a><a href="products.html"><span class="spacer_7px">Manuals &amp; FAQ's</span></a></li>
<li><a href="products.html"><img src="images/custsupport.png" alt="support" width="30" height="30" hspace="7" border="0" align="left" /><span class="spacer_7px">Native cust. support</span></a></li>
</ul>
</div>
<p>&nbsp;</p>
<div id="testimonial_container">
<div id="testimonial_top"></div>
<div id="testimonial_main">
<div align="center"><strong><em><a href="http://hello.peppermintapp.com/" target="_blank"><img src="images/Peppermint_small.png" alt="Peppermint" width="80" height="80" hspace="5" vspace="5" border="0" align="right" /></a></em></strong><em><span class="quotation">“Reliable and highly energetic! AppTranslator give us what we need.“ </span></em><strong><em><span class="quotation"><br />
</span></em></strong> <br />
<em><br />
<br />
</em>**Featured in multiple AppStores**</div>
</div>
<div id="testimonial_bottom"><em>Sittipon Simasanti&nbsp;(Peppermint) </em></div>
</div>
<div id="testimonial_container2">
<div id="testimonial_top2"></div>
<div id="testimonial_main2">
<div align="center"><strong><em><a href="http://labs.laan.com/blog/2009/08/sonar-ruler-iphone-app-measure-with-sound/" target="_blank"><img src="images/Sonar_Ruler_small.png" alt="Peppermint" width="80" height="80" hspace="5" vspace="5" border="0" align="right" /></a>&quot;<span class="quotation">Thanks a lot for all your help.. I'll come to you next time i have a successful app in germany :)“ </span><br />
</em></strong><br />
<br />
<br />
**Nr. 3 App in Germany**</div>
</div>
<div id="testimonial_bottom2"><em>Chris Laan / Laan Labs&nbsp;(Sonar Ruler) </em></div>
</div>
<div id="merger"><span class="mainheader">Welcome to AppTranslation.com</span>
<p class="main_text">Dear valued developer. <br />
<br />
We appreciate your interest in our products. <br />
<br />
Europe is a difficult market with more than 52 countries and 30 different languages. But did you know you could easily reach hundreds of thousands iPhone users with only one language? <br />
<br />
</div>
<div id="footer">
<div align="center"><a href="images/impressum_APTR.png">Impressum</a></div>
</div>
<div id="white_bottom"></div>
</div>
</div>

</body>
</html>

This is my CSS File ** removed some entries due to limitation of 22k Caracters


@charset "UTF-8";
body {
font-family: "Lucida Grande Bold", "Helvetica Neue", Verdana, Arial, serif;
color: #5C3C1E;
background-color: #ffffff;
text-align: center;
margin: 0px;
}
#container {
width: auto;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header {
background-image: url(/images/headerblue_pix.png);
background-repeat: repeat-x;
height: 80px;
}
#logopic {
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 80px;
}
#nav {
background-image: url(/images/navbeigepix.png);
background-repeat: repeat-x;
height: 57px;
}
#navitems {
height: 57px;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#content {
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
text-align: left;
color: #666;
font-family: "Lucida Grande", "Helvetica Neue", Verdana, serif;
font-size: 15px;
}
#white_top {
background-image: url(/images/white_top.png);
background-repeat: no-repeat;
height: 10px;
width: 900px;
}
#white_bottom {
background-image: url(/images/white_bottom.png);
background-repeat: no-repeat;
margin: 0px;
height: 10px;
width: 900px;
clear: both;
}
#footer {
height: 10px;
width: 900px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 9px;
font-family: "Lucida Grande Bold", "Helvetica Neue", Verdana, serif;
background-image: url(/images/white_main.png);
background-repeat: repeat-y;
}
#white_main {
background-image: url(/images/white_main.png);
background-repeat: repeat-y;
margin: 0px;
width: 900px;
text-align: center;
}
.mainheader {
font-size: 22px;
font-weight: bold;
color: #666;
font-family: "Lucida Grande Bold", "Helvetica Neue", Verdana, Arial, serif;
text-align: left;
}
.main_text {
font-size: 12px;
font-family: "Lucida Grande Bold", "Helvetica Neue", Verdana, Arial, serif;
}
#box3 {
float: right;
height: 287px;
width: 300px;
margin-top: 15px;
margin-right: 10px;
background-image: url(/images/resource_300x300.jpg);
margin-left: 10px;
padding-top: 13px;
}
.h1 {
font-size: 17px;
font-weight: bold;
color: #8BCBEB;
font-family: "Lucida Grande Bold", "Helvetica Neue", Verdana, serif;
}
li {
list-style-position: inside;
list-style-type: none;
text-align: left;
font-size: 15px;
font-family: "Lucida Grande", "Helvetica Neue", Verdana, serif;
padding-bottom: 7px;
padding-top: 3px;
}
a:link {
color: 666;
text-decoration: none;
}
a:visited {
color: 666;
text-decoration: none;
}
a:hover {
color: 666;
text-decoration: underline;
}
a:active {
color: 666;
text-decoration: none;
}
#testimonial_container2 {
width: 348px;
margin-top: 25px;
margin-right: 25px;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
float: right;
clear: right;
}
#testimonial_top2 {
background-image: url(/original/green_testimonial_top.gif);
height: 18px;
width: 348px;
}
#testimonial_main2 {
width: 328px;
background-image: url(/original/green_testimonial_tile.gif);
text-align: left;
padding-right: 10px;
padding-left: 10px;
height: 145px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
#testimonial_bottom2 {
background-image: url(/original/green_testimonial_bottom.gif);
height: 20px;
width: 348px;
background-repeat: no-repeat;
padding-top: 15px;
}
.quotation {
font-family: "Lucida Grande Bold", "Helvetica Neue", Verdana, serif;
font-size: 16px;
font-weight: bold;
}

Does anyone has any idea what I am doing wrong? :-(
The reason is I would like to use the main page as template and import only those CSS rules I really need.

bazz
Sep 23rd, 2009, 05:30 AM
check the location of the images, as written in the css file, are correct ~ perhaps by using an absolute url to start with.

Which folder/directory are the images in? I mean, where is is in relation to the location of the css/html file? you may need to go up a dir from the css file location and then into the images folder.

you can do that with '../images/name_of_img.png'



bazz

cellshade
Sep 23rd, 2009, 11:04 AM
The "deep link" to my files worked out fine.
I had to change the path from /images/xxx.png to http://www.app.../images/xxx.png

The relation of CSS was a folder above but I thought it would have been enough to tell the CSS the images where at /images/xxx.png


Thank you :-)
No I can finally start saving my templates.

But one question I still do have.
How can I edit the CSS file simple? It now says the file is remote that's why I cannot change anything.

So far I saved it as AppTranslation.css and when I am done I upload it.
Isn't there a simple way so it will automatically update the links?

:-) Thanks so far

grahamy84
Sep 23rd, 2009, 11:41 AM
I'm unsure if I understand your question correctly but if you want to change your CSS then you edit it in code view, save and upload to the same file name as your current stylesheet i.e. "AppTranslation.css"

bazz
Sep 24th, 2009, 06:20 PM
The suggestion to use an absolute url was only to make sure that the images were there. Now that we know they are, you might find that a link such as shown below will get the images to display.

../images/image_name.png

if you use /images/image_name.png you are saying the image folder is in your root directory. if however, you were to use ../images/image_name.png, you are saying thet ~ relative to the page ~ the image folder is in the parent directory. if the images folder is a couple of directories 'up' you could use ../../images/image_name/.png

I try to use the relative path ( ../../), when possible.

bazz

marilynn.fowler
Sep 24th, 2009, 11:59 PM
On first perusal of the pasted code, I note that there is no doctype, nor is there the opening HTML tag. You've also got a script between the head and the body. I'm not sure if you're allowed to have javascript freestanding like that.

If you run your code through the W3C code validator, you will catch a number of errors before you start pulling your hair out. Same with W3C CSS validator. I ran your link though the code validator and it came up with 16 errors.