Why CSS doesn´t work fine without IFrame?

Hi ,

My index.HTML(At wwww) has a iframe that is used just to call loja-virtual.html file in another directory and it´s ok, but I don´t want to use Iframe because it´s bad to SEO.

I change the index.HTML by index.PHP then the last CSS files below doesn´t work in the called page loja-virtual.html:

<link rel=“stylesheet” href=“http://localhost/estrategia-global/css/reset.css” type=“text/css” media=“all”>
<link rel=“stylesheet” href=“http://localhost/estrategia-global/css/grid.css” type=“text/css” media=“all”>
<link rel=“stylesheet” href=“http://localhost/estrategia-global/css/style.css” type=“text/css” media=“all”>

Don´t WORK: <link rel=“stylesheet” href=“http://localhost/estrategia-global/ext/960gs/960_24_col.css” type=“text/css” media=“screen”>

PS: Whe I use (<meta http-equiv=“refresh” content=“3;URL=http://localhost/homepage/loja-virtual.html” />) in loja-virtual.html the last CSS works.

Code of index.PHP (include(“estrategia-global/loja-virtual-completa.html”)

What is happen?

tks,
Cesar.

  1. Having trouble deciphering your meaning but…

  2. do you have a live copy somewhere of what you are trying to do? (or at the very least upload the FULL code since snippets are meaningless) – It SOUNDS like you’re doing something needlessly overcomplicated – though that’s automatically a given with the multiple separate css files, lack of media types, and ‘grid’ nonsense likely meaning your defeating the entire point of using CSS in the first place.

  3. even if you’re testing locally, absolute pathing off localhost (or even just absolute pathing) for CSS is a really BAD idea, and indicitive of a flawed directory structure for whatever code it is you are trying to build.

  4. including the .HTML file via PHP, did you strip off it’s headers and put them in the parent file, or are you accidentally ending up with two sets of HTML, HEAD and BODY because you didn’t quite grasp how ‘include’ works? This question is part of why incomplete snippets leave us guessing wildly in the dark, as if we can’t see the full code or a copy of it running, it’s all gibberish.

tks 39deathshadow60 by answear me…

If u have more sugestion to call my homepage by index.HTML, please give me.

Explanation:

My index.HTML in www directory exist just to call another files HTML (my homepage) that are in another directories (www\estrategia-global).

The index.HTML has just a IFrame to call all my pages in www\estrategia-global and the CSS works fine. Then, all my pages are under this IFrame

I don´t want to use IFrame because the Google doesn´t index it well and I´d like to change by PHP or other command.

When I change the file index.HTML (with Iframe) by index.PHP (with include command) to call all my homepage (in www\estrategia-global), one CSS file doesn´t work. Each HTML file from my homepages has 4 calls to 4 CSS files and just one (href=“ext/960gs/960_24_col.css” from loja-virtual-completa.html) don´t work with index.PHP. It doesn´t happen with IFrame in index.HTML

When I use the index.PHP and add the line (<meta http-equiv=“refresh” content=“URL=http://localhost/estrategia-global/loja-virtual-completa.html” />) in each HTML files from my homepage all works fine. But, its a wrong way and I don´t want to continue with it.

PS: I add media=“all” to loja-virtual-completa.html and the same CSS above continue with error.



CODE Index.PHP:
<html>
<body>
<? php include("/estrategia-global/loja-virtual-completa.html"); ?>
</body>
</html>

CODE Index.HTML:
<html>
<head>
<title>
Estrat&eacute;gia Global
</title>
</head>
<frameset rows="100%" border=0>
<frame name="site" src="/estrategia-global/loja-virtual-completa.html" />
</frameset>
</html>


CODE from /estrategia-global/loja-virtual-completa.html is Attached with TXT extension, because the tool from this forum doesn´t permit HTML extension.

Do u know why the CSS doesn´t work?

Tks.

Are the 4 css files all in the same directory?

If so then this is wrong:


  <link rel="stylesheet" href="[B]css/[/B]style.css" type="text/css" media="all">
  <link rel="stylesheet" type="text/css" href="[B]ext/[/B]960gs/960_24_col.css" />

One is in the directory called css and the other one isn’t.

When you include html inside the body element you should only include html that is valid inside the body and not all your head content as in your example. You can include head content but you must include it in the right place.

Usually the base html page would have the css file and head content in place by default and then you just include the actual body content where required.

Remember that the path to a css file when using an iframe is the path from the iframe page and not the parent page. When using an include all paths are relative to the main parent page and not from where the included files came from.

I need ‘more’ than that snippet as I still can’t figure out what you’re even trying to do here. Not sure if it’s language barrier or incomplete info, but I suspect you’re not entirely grasping how ‘include’ works – I’d have to see the included file to be sure.

Tks Paul O’B and deathshadow60 by interest in this case.

My CORRECT site, but with IFrame (index.HTML) is at www.estrategiaglobal.com.br and the first page is the file that don´t open correct with index.PHP and lost CSS.

I change the code using your tips then something change to better, but the layout still needs to be correct.

Problem: The class=container_24 from is the problems. It´s the same CSS file that I discuss since I began this conversation. Look:

 <link rel="stylesheet" href="http://localhost/estrategia-global/ext/960gs/960_24_col.css" type="text/css" media="all"/> 

This CSS problem disappear:
a) If I use index.HTML , but it has IFrame
b) If I use index.PHP and click in another pages from my home page, but if I don´t do that the first page continue with the CSS problem
c) If I use (<meta http-equiv=“refresh” content=“URL=http://localhost/estrategia-global/loja-virtual-completa.html” />)where the HTML with

Behaviour:

  1. I can call http://localhost/estrategia-global/ext/960gs/960_24_col.css from IE 8.0 and the file open without problem

  2. The CSS problem just appear in IE 8.0, but not in Chrome and Mozilla.

See the CODE:

Index.PHP (works fine):


<?php
include("estrategia-global\\loja-virtual-completa.html");
?>

The loja-virtual-completa.HTML, ERROR screen shot from IE 8.0, Style with FIREBUG from MOZILLA, 3 good CSS and the one that give me the problem (960_24_col.CSS) are attached.

Do u know why IE 8.0 recuse to open correctly the CSS?

tks

Oh, actually that’s very simple as to why… the CSS is being pointed to differently… you have:

/css
/estrategia-global/css
/estrategia-global/ext

but no /ext!!! When you include it’s treated as the SAME file, so it’s looking for /ext/960gs/960_24_col.css instead of /estrategia-global/ext/960gs/960_24_col.css. unlike iframes, the directory of a PHP included target is NOT taken into account.

Though the page itself has major issues like the wasteful buggy HTML 5 before it’s ready, hordes of multiple CSS files without even differing media types, sending your resets to ‘all’ which pretty well shtups print and non-screen users (not everyone should be getting your ‘for screen’ design), knee deep in hordes of javascript for NOTHING, outdated/buggy font technologies like Cufon, IE conditionals trying to make the HTML 5 work where it shouldn’t, non-semantic markup, nonsensical heading orders, wrapping elements for nothing, presentational CSS classes (likely from that ‘grid’ idiocy), non-breaking spaces in empty div for christmas only knows what – at which point it’s hardly surprising to see 11k of markup for only 2.1k of content; basically at minimum 30% more markup than neccessary, possibly as much as double.

Which is why if you’re going to break it out of frames and slice up your like elements into a poor man’s CMS (which seems to be your intent with the includes) I’d throw it out and start over… I’m on the way out the door in a bit, but if I have time later I’ll toss together a quick rewrite to show you what I mean. You’ve got a fairly simple layout so it shouldn’t take me more than 15 to twenty minutes to belt it out. I could probably do the HTML now… since I tend to write my complete semantic markup before I even THINK about layout.

“proper” markup would go something more like this (before slicing it up into PHP) – I’ll dive into some php and CSS for that when I get back from dinner and a movie and… well, you know.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<!-- fix language encodings above... not sure what language this even is -->

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	name="description"
	content="Fa?a o test-drive agora de 60 dias sem compromisso da loja virtual com mais de 265 funcionalidades. Inclus?o gratuita de sua loja virtual no Buscap?. Suporte 24/7. Seguran?a nas compras com cart?o."
/>

<meta
	name="keywords"
	content="loja, montar, abrir, sistema, criar, estrategia, campinas, wantoil, cesar"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="/theme/screen.css"
	media="screen,projection,tv"
/>


<title>
	Loja Virtual Completa: Para montar ou abrir sua loja online-Estrategia Global
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Estrat?gia Global
		<span></span>
	</h1>

	<div id="phone">(19) 3203-8399</div>

	<ul id="mainMenu">
		<li><a href="loja-virtual-completa.html"	class="current">E-Commerce (Loja Virtual)</a></li>
		<li><a href="criar-site-com-design-e-seo.html">Cria??o de Sites</a></li>
		<li><a href="diferencial-em-criar-sites-marketing-loja-virtual.html">Sobre a empresa</a></li>
		<li><a href="perguntas-mais-frequentes-dos-clientes.html">FAQ</a></li>
		<li><a href="contato-mail-e-telefone.html">Contatos</a></li>
	</ul>

	<div class="banner home"></div>

	<hr />

	<h2>Loja virtual com mais de 265 funcionalidades</h2>

	<hr />

	<h3>Diferencial da loja para alavancagem de suas Vendas</h3>

	<div class="subsection cart">
		<div><!-- image sprite --></div>
		<h4>Facilidade e rapidez na conclus?o das vendas</h4>
		<p>
			Interfaces intuitivas baseadas nos sites que mais vendem na internet como o Submarino, para que o usu?rio encontre com facilidade o produto e finalize sua compra rapidamente sem des?nimar ou desistir por ter dificiculdades no uso do sistema.
		</p>
	<!-- .subsection --></div>

	<div class="subsection bullhorn">
		<div><!-- image sprite --></div>
		<h4>Mais publicidade de seus produtos e empresa</h4>
		<p>
			Inclus?o gratuita de sua loja virtual no buscador de produtos Buscap?  <a style="color:#0000CC" href="http://www.buscape.com.br/sobre-o-buscape" >(Saiba mais...)</a>
		</p><p>
			Interaja com seus clientes e receba feedback (coment?rios) de seus produtos e servi?os, atrav?s dos canais de comunica??o Facebook, WEB 2.0, Twitter e outras m?dias sociais.
		</p>
	<!-- .subsection --></div>

	<div class="subSection place">
		<div><!-- image sprite --></div>
		<h4>Sua empresa na frente da concorr?ncia</h4>
		<p>
			Posicionamento de sua loja entre os primeiros resultados das buscas no Google, yahoo e outros.
		</p>
	<!-- .subsection --></div>

	<hr />

	<h3>Garantia da qualidade</h3>

	<div class="subsection lock">
		<div><!-- image sprite --></div>
		<h4>Seguran?a</h4>
		<p>
			O sistema anti-fraude nas transa??es financeiras ? garantido pela operadora Pagamento Digital, 				que verifica a vida financeira do comprador antes de autorizar a sua compra <a href="https://www.pagamentodigital.com.br/site/PagamentoDigital/Seguranca" >(Saiba mais...)</a>.
		</p><p>
			As mercadorias s?o cobertas pelo seguro do Correio, que abrange desde a perda at? a quebra do produto durante o envio.
		</p><p>
			Toda a loja virtual ? protegida contra hackers e fraudes para tornar o site seguro contra invas?es, utilizando t?cnicas de seguran?a digital (SSL,PCI DSS...).
		</p>
	<!-- .subsection --></div>

	<div class="subsection hours">
		<div><!-- image sprite --></div>
		<h4>Suporte 24/7</h4>
		<p>
			A loja virtual tem suporte 24 hrs durante os 7 dias da semana que s?o garantidos pela Estrat?gia Global e pelo grupo de t?cnicos do provedor dos EUA, onde fica hospedado o sistema.
		</p>
	<!-- .subsection --></div>

	<div class="subsection smile">
		<div><!-- image sprite --></div>
		<h4>Teste drive de 60 dias sem compromisso</h4>
		<p>
			Fa?a um teste drive sem compromisso da loja virtual por 60 dias com os produtos que desejar e tenha a liberdade de cancelar a qualquer momento e sem custo algum.
		</p>
	<!-- .subsection --></div>

	<hr />

	<a href="loja-virtual-funcionalidades.html" class="closing">
		Veja as principais funcionalidades da loja virtual...
	</a>

<!-- #pageWrapper --></div>

<hr />

<div id="footerWrapper"><div id="footer">
	Tel: <b>(19) 3203-8399</b><br />
	Rua Quintino Bocai?va, 613 <br />
	Jd. Chapad?o - Campinas, SP<br />
	Cep: 13070-017
<!-- #footer, #footerWrapper --></div></div>

</body></html>

Though yes, the character encoding did get mushed in the process :frowning: – I’m just not set up for non ASCII-7 languages on the laptop.

Tks a lot man by your time and effort to conduct me…I can see that u have a great knowledge about CSS/HTML.

I saw that my code needs correction and now I don´t have time to do a excellent job about it, like your indication.

Then, Can u give me a tip just for this (<link rel=“stylesheet” href=“http://localhost/estrategia-global/ext/960gs/960_24_col.css” type=“text/css” media=“all”/>) works fine in IE? How can I do to it works in IE?

Tks.