CodeIgniter Forums
Page layout with multiple views in FF and IE - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived General Discussion (https://forum.codeigniter.com/forumdisplay.php?fid=21)
+--- Thread: Page layout with multiple views in FF and IE (/showthread.php?tid=29807)

Pages: 1 2


Page layout with multiple views in FF and IE - El Forum - 04-21-2010

[eluser]Maranax[/eluser]
Hi guys!

Sorry for a stupid question.
I'm pretty new in CI. So, I've got a problem with multiple loaded views.
When I use just one view it seems OK in both browsers. But if I "split" this view into 2 at least (header and content), there is a problem! In IE it looks pretty good, but in Firefox some pictures are missing their position. I use CSS.

Thank you in advance.


Page layout with multiple views in FF and IE - El Forum - 04-21-2010

[eluser]vitoco[/eluser]
the original view ( header and content together ) looks the same in both browsers ??


Page layout with multiple views in FF and IE - El Forum - 04-22-2010

[eluser]djsc00p[/eluser]
[quote author="Maranax" date="1271909264"]Hi guys!

Sorry for a stupid question.
I'm pretty new in CI. So, I've got a problem with multiple loaded views.
When I use just one view it seems OK in both browsers. But if I "split" this view into 2 at least (header and content), there is a problem! In IE it looks pretty good, but in Firefox some pictures are missing their position. I use CSS.

Thank you in advance.[/quote]

You might want to check your HTML source.
It might not be cross-browser compatible.

I don't think that would be a CI issue.


Page layout with multiple views in FF and IE - El Forum - 04-22-2010

[eluser]$ilovephp[/eluser]
can you post or upload the codes?


Page layout with multiple views in FF and IE - El Forum - 04-22-2010

[eluser]Maranax[/eluser]
[quote author="vitoco" date="1271922535"]the original view ( header and content together ) looks the same in both browsers ??[/quote]

Exactly.


Page layout with multiple views in FF and IE - El Forum - 04-22-2010

[eluser]Maranax[/eluser]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
&lt;html &gt;
&lt;head&gt;
&lt;title&gt;&lt;? echo $title; ?&gt;&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css" /&gt;
&lt;link href="style/style.css" rel="stylesheet" type="text/css" /&gt;
&lt;link href="style/layout.css" rel="stylesheet" type="text/css" /&gt;

[removed][removed]
&lt;style type="text/css"&gt;
.logo img { behavior: url("iepngfix.htc") }
&lt;/style&gt;

&lt;/head&gt;

&lt;body id="page1"&gt;
<div id="main">
&lt;!-- header --&gt;
<div id="header">
<div class="row-1">
<div class="logo">
<a href="index.html"><img alt="" src="images/logo.png" /></a>
</div>
<div class="fright">
<div class="contacts">Customer Service<br />+1 800 559 6580
</div>
</div>
</div>
<div class="row-2">
<a href="index.html"><img alt="" src="images/m1-act.jpg" id="r_1" /></a><a href="index-1.html"><img alt="" src="images/m2.jpg" id="r_2" /></a><a href="index-2.html"><img alt="" src="images/m3.jpg" id="r_3" /></a><a href="index-3.html"><img alt="" src="images/m4.jpg" id="r_4" /></a><a href="index-4.html"><img alt="" src="images/m5.jpg" id="r_5" /></a><a href="index-5.html"><img alt="" src="images/m6.jpg" id="r_6" /></a>
</div>
</div>

&lt;!-- content --&gt;
<div id="content">
<div class="wrapper">
<div class="left-column">
<div class="banner-box">
<div>&lt;!--Valid flash version 8.0--&gt;
&lt;object classid="clsidBig Grin27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24"
width="320" height="377" style="margin:-30px; top:-30px;"&gt;
<param name="movie" value="flash/pic_fv8.swf?button=1" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="wmode" value="transparent" />
&lt;!--[if !IE]> <--&gt;
&lt;object data="flash/pic_fv8.swf?button=1"
width="320" height="377" style="margin:-10px;top:-50px" type="application/x-shockwave-flash"&gt;
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
<param name="wmode" value="transparent" />
FAIL (the browser should render some flash content, not this).
&lt;/object&gt;
&lt;!--&gt; <![endif]--&gt;
&lt;/object&gt;&lt;/div>
</div>
<a href="#"><img alt="" src="images/micro.jpg" style="margin:35px 40px;"/></a><br />
<a href="#"><img alt="" src="images/mysql.jpg" style="margin:0 60px;" /></a><br />
<a href="#"><img alt="" src="images/php.gif" style="margin:80px 50px;" /></a>


Page layout with multiple views in FF and IE - El Forum - 04-22-2010

[eluser]Maranax[/eluser]
</div>
<div class="right-column">
<div class="line-hor">
<img class="title" alt="" src="images/1page-title1.gif" /><br />
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vitae tellus. Sed velit leo, lobortis in, pellentesque eu, tempus et, tellus.</h2>
<p>Vestibulum nisi urna, rutrum id, auctor imperdiet, dictum at, nisi. Fusce dui dolor, congue eu, consequat eu, eleifend sit amet, diam. Fusce dictum ultricies pede. Aenean sodales viverra sem. Cras pulvinar felis sed dolor. Pellentesque vestibulum ipsum mauris...</p>
<div class="link-box">
<div class="left">
<div class="right">
<div class="inner">
<div class="wrapper"><a class="link1" href="#">read more</a><a class="link2" href="#">rss feeds</a></div>
</div>
</div>
</div>
</div>
</div>
<img class="title" alt="" src="images/1page-title2.gif" /><br />
<div class="line-hor"><a href="#"><img alt="" src="images/banner2.jpg" /></a>&nbsp;&nbsp;<a href="#"><img alt="" src="images/banner3.jpg" /></a></div>
<img class="title" alt="" src="images/1page-title3.gif" /><br />
<ul class="list1">
<li><a href="#">Lorem ipsum dolor sit</a> Amet, consectetuer adipiscing elit. Morbi vitae tellus. Sed velit leo, lobortis tellus.</li>
<li><a href="#">Praesent viverra turpis non ipsum</a> Suspendisse blandit nibh ac dolor. Phasellus luctus. Etiam faucibus massa. Aenean dui. Proin id ligula consequat ipsum...</li>
<li><a href="#">Vulputate consectetuer dui mauris vel sem</a> Vivamus interdum, diam a tempus cursus, elit nibh fermentum lorem, vel elemen- tum diam dolor fringilla nulla. Aenean porttitor congue ante.</li>
<li><a href="#">Curabitur tesque elementum dolor</a><br />
Duis magna nulla, ullamcorper et, imperdiet dapibus, pulvinar suscipit, nisi. Ut est lectus, lacinia sit amet.</li>
</ul>
<div class="link-box">
<div class="left">
<div class="right">
<div class="inner">
<div class="wrapper"><a class="link1" href="#">more services</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
&lt;!-- footer --&gt;
<div id="footer">
<p><strong>SINTEX</strong> &copy; 2008 | <a href="index-6.html">Privacy Policy</a></p>
</div>
</div>
&lt;/body&gt;
&lt;/html&gt;


Page layout with multiple views in FF and IE - El Forum - 04-22-2010

[eluser]Maranax[/eluser]
Sorry, I posted it in 2 parts - it's pretty long :-(


Page layout with multiple views in FF and IE - El Forum - 04-22-2010

[eluser]vitoco[/eluser]
replace the
Code:
<div class="right-column">
with this :
Code:
<div class=“right-column”>
                    <div class=“line-hor”>
                        images/1page-title1.gif
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vitae tellus. Sed velit leo, lobortis in, pellentesque eu, tempus et, tellus.
                        Vestibulum nisi urna, rutrum id, auctor imperdiet, dictum at, nisi. Fusce dui dolor, congue eu, consequat eu, eleifend sit amet, diam. Fusce dictum ultricies pede. Aenean sodales viverra sem. Cras pulvinar felis sed dolor. Pellentesque vestibulum ipsum mauris…
                        <div class=“link-box”>
                            <div class=“left”>
                                <div class=“right”>
                                    <div class=“inner”>
                                        <div class=“wrapper”>read morerss feeds</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    images/1page-title2.gif
                    <div class=“line-hor”>
                        images/banner2.jpg  
                        images/banner3.jpg
                        images/1page-title3.gif
                        <ul class=“list1”>
                            <li>Lorem ipsum dolor sit Amet, consectetuer adipiscing elit. Morbi vitae tellus. Sed velit leo, lobortis tellus.</li>
                            <li>Praesent viverra turpis non ipsum Suspendisse blandit nibh ac dolor. Phasellus luctus. Etiam faucibus massa. Aenean dui. Proin id ligula consequat ipsum…</li>
                            <li>Vulputate consectetuer dui mauris vel sem Vivamus interdum, diam a tempus cursus, elit nibh fermentum lorem, vel elemen- tum diam dolor fringilla nulla. Aenean porttitor congue ante.</li>
                            <li>Curabitur tesque elementum dolor Duis magna nulla, ullamcorper et, imperdiet dapibus, pulvinar suscipit, nisi. Ut est lectus, lacinia sit amet.</li>
                        </ul>
                        <div class=“link-box”>
                            <div class=“left”>
                                <div class=“right”>
                                    <div class=“inner”>
                                        <div class=“wrapper”>more services</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



Page layout with multiple views in FF and IE - El Forum - 04-22-2010

[eluser]Maranax[/eluser]
Thank you, I appreciate your help!