Fixed divs in IE6
I am trying to get a fixed Div to behave the same way it does
in IE7, in IE6. I realize IE 6 doesn't support the fixed property
(except for the background)
However, I have a book that says its possible using
conditional statements in the html code and the proper coding in
the css page........unfotunatley the book's example isn't real
clear.
I am actually excited that I got it to stay fixed when you
scroll vertically.......but where I am stuck is to get it to stay
fixed when you scroll horizontally as well........so that when you
scroll horizontally, the base cello image stays in place and the
content slide underneath it as you scroll.......(just like it
behaves in IE7)
Here is the link to the page.....hopefully whoever is helping
me with this has a way to view it both in IE7 and IE6....although
it may not be neccessary to help me.
http://dev.informarch.com/WeekendMusician3/article1/article1a.html
I pasted the HTML code and the CSS code in question in the
code window.
Thank you so much for any help!
Ken
No. Flash supports only a very limited number of html tags, and <div> is not one of them. To see what is supported, look up htmlText in the help documentation. That section conatins a table of them.
Then, I have to wonder what you intend in saying " the same way you use them in dreamweaver" Normally, in dreamweaver they are use to create sections/areas within a web page. In Flash, you do that using other kinds of objects, such as Sprites or MovieClips or simply graphics or textfields or whatever else can be placed on the stage.
Similar Messages
-
Hello.
I've been working on a CSS drop down menu for my website
which works fine in Internet Explorer 7 and all other modern
browsers. But I used Browsershots.org to have a look at the site in
IE6 and it was terrible. I am using Windows Vista so there is no
way of me getting IE 6 on this machine (MultipleIE's doesn't work).
So I need some help fixing for IE6. Page url is
http://runecentral.net/index.php
HTML Code and CSS Code;
First the list
<div class="menu">
<ul id="nav">
<li id="fi"><a href="
http://www.runecentral.net/">Home</a></li>
<li id="fi"><a href="
http://forum.runecentral.net/">Forums</a></li>
<li id="fi"><a href="
http://chat.runecentral.net/">Chat</a></li>
<li id="fi">Guides
<ul>
<li id="si"><a href="/skills.php">Skill
Guides</a></li>
<li id="si"><a href="/quests.php">Quest
Guides</a></li>
<li id="si"><a href="/minigames.php">Mini Game
Guides</a></li>
<li id="si"><a href="/guilds.php">Guild
Guides</a></li>
<li id="si"><a href="/cities.php">City
Guides</a></li>
<li id="si"><a
href="/monsterhunting.php">Monster Hunting
Guides</a></li>
<li id="si"><a href="/moneymaking.php">Money
Making Guides</a></li>
<li id="si"><a
href="/miscellaneous.php">Miscellaneous
Guides</a></li>
</ul>
</li>
<li id="fi">Databases
<ul>
<li id="si"><a href="/items.php">Item
Database</a></li>
<li id="si"><a href="/monsters.php">Monster
Database</a></li>
<li id="si"><a href="/npcs.php">NPC
Database</a></li>
<li id="si"><a href="/shops.php">Shop
Database</a></li>
</ul>
</li>
<li id="fi">Tools
<ul>
<li id="si"><a href="/skillcalcs.php">Skill
Calculators</a></li>
<li id="si"><a href="/skillplanners.php">Skill
Planners</a></li>
<li id="si"><a href="/maxhit.php">Max Hit
Calculator</a></li>
<li id="si"><a href="/combatcalc.php">Combat
Calculator</a></li>
</ul>
</li>
<li id="fi">Maps
<ul>
<li id="si"><a href="/worldmap.php">Official
World Map</a></li>
<li id="si"><a href="/dungeons.php">Dungeon
Maps</a></li>
</ul>
</li>
<li id="fi">Archives
<ul id="nav">
<li id="si"><a href="/newsarchive.php">News
Archive</a></li>
<li id="si"><a href="/pollarchive.php">Poll
Archive</a></li>
</ul>
</li>
<li id="fi"><a
href="/contact.php">Contact</a></li>
</ul>
</div>
Now the main CSS code
.menu ul, li {
margin: 0;
padding: 0;
list-style-type: none;
.menu {
text-align: center;
font-size: 14px;
height: 30px;
line-height: 30px;
.menu a {
text-decoration: none;
color: #FFFFFF;
ul#nav {
width: 100%;
height: 30px;
margin: 0 auto;
ul#nav li {
position: relative;
float: left;
#fi {
width: 75px;
height: 30px;
cursor: pointer;
#si {
width: 170px;
float: left;
height: 25px;
line-height: 25px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
background-color: red;
ul#nav li:hover {
background-color:#00FFCC;
ul#nav li ul {
display: none;
ul#nav li:hover ul {
display: inline;
float: left;
height: auto;
padding: 0;
margin: 0;
text-align: left;
ul#nav li:hover ul li {
display: block;
margin: 0;
padding: 0 0 0 5px;
height: 100%;
ul#nav li#fi a {
display: block;
height: 100%;
ul#nav li#fi:hover {
background-image: url(/img/fixedbar_over.png);
If you need any more code just check the page source.
I know this is quite a lot to ask but I am really stuck as I
cannot do it myself so any help would be greatly appreciated.
Many thanks and regards,
Perry RoperHowever, if it's
http://www.runecentral.com/
then you need to fix some of
the 150 validation errors here:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.runecentral.com%2F
Jo
"josie1one" <[email protected]> wrote in message
news:[email protected]...
>>
http://runecentral.net/index.php
> Appears to be a bad link
>
> --
> Jo
>
>
>
> "Perry|" <[email protected]> wrote in
message
> news:[email protected]...
>> Hello.
>>
>> I've been working on a CSS drop down menu for my
website which works fine
>> in
>> Internet Explorer 7 and all other modern browsers.
But I used
>> Browsershots.org
>> to have a look at the site in IE6 and it was
terrible. I am using Windows
>> Vista
>> so there is no way of me getting IE 6 on this
machine (MultipleIE's
>> doesn't
>> work). So I need some help fixing for IE6. Page url
is
>>
http://runecentral.net/index.php
HTML Code and CSS Code;
>>
>> First the list
>>
>> <div class="menu">
>> <ul id="nav">
>> <li id="fi"><a href="
http://www.runecentral.net/">Home</a></li>
>> <li id="fi"><a href="
http://forum.runecentral.net/">Forums</a></li>
>> <li id="fi"><a href="
http://chat.runecentral.net/">Chat</a></li>
>> <li id="fi">Guides
>>
>> <li id="si"><a href="/skills.php">Skill
Guides</a></li>
>> <li id="si"><a href="/quests.php">Quest
Guides</a></li>
>> <li id="si"><a
href="/minigames.php">Mini Game Guides</a></li>
>> <li id="si"><a href="/guilds.php">Guild
Guides</a></li>
>> <li id="si"><a href="/cities.php">City
Guides</a></li>
>> <li id="si"><a
href="/monsterhunting.php">Monster Hunting
>> Guides</a></li>
>> <li id="si"><a
href="/moneymaking.php">Money Making Guides</a></li>
>> <li id="si"><a
href="/miscellaneous.php">Miscellaneous
Guides</a></li>
>>
>> </li>
>> <li id="fi">Databases
>>
>> <li id="si"><a href="/items.php">Item
Database</a></li>
>> <li id="si"><a
href="/monsters.php">Monster Database</a></li>
>> <li id="si"><a href="/npcs.php">NPC
Database</a></li>
>> <li id="si"><a href="/shops.php">Shop
Database</a></li>
>>
>> </li>
>> <li id="fi">Tools
>>
>> <li id="si"><a
href="/skillcalcs.php">Skill Calculators</a></li>
>> <li id="si"><a
href="/skillplanners.php">Skill Planners</a></li>
>> <li id="si"><a href="/maxhit.php">Max
Hit Calculator</a></li>
>> <li id="si"><a
href="/combatcalc.php">Combat Calculator</a></li>
>>
>> </li>
>> <li id="fi">Maps
>>
>> <li id="si"><a
href="/worldmap.php">Official World Map</a></li>
>> <li id="si"><a
href="/dungeons.php">Dungeon Maps</a></li>
>>
>> </li>
>> <li id="fi">Archives
>> <ul id="nav">
>> <li id="si"><a
href="/newsarchive.php">News Archive</a></li>
>> <li id="si"><a
href="/pollarchive.php">Poll Archive</a></li>
>>
>> </li>
>> <li id="fi"><a
href="/contact.php">Contact</a></li>
>>
>> </div>
>>
>> Now the main CSS code
>>
>> .menu ul, li {
>> margin: 0;
>> padding: 0;
>> list-style-type: none;
>> }
>> .menu {
>> text-align: center;
>> font-size: 14px;
>> height: 30px;
>> line-height: 30px;
>> }
>> .menu a {
>> text-decoration: none;
>> color: #FFFFFF;
>> }
>> ul#nav {
>> width: 100%;
>> height: 30px;
>> margin: 0 auto;
>> }
>> ul#nav li {
>> position: relative;
>> float: left;
>> }
>> #fi {
>> width: 75px;
>> height: 30px;
>> cursor: pointer;
>> }
>> #si {
>> width: 170px;
>> float: left;
>> height: 25px;
>> line-height: 25px;
>> border-right-width: 1px;
>> border-bottom-width: 1px;
>> border-left-width: 1px;
>> border-right-style: solid;
>> border-bottom-style: solid;
>> border-left-style: solid;
>> border-right-color: #000000;
>> border-bottom-color: #000000;
>> border-left-color: #000000;
>> background-color: red;
>> }
>> ul#nav li:hover {
>> background-color:#00FFCC;
>> }
>> ul#nav li ul {
>> display: none;
>> }
>> ul#nav li:hover ul {
>> display: inline;
>> float: left;
>> height: auto;
>> padding: 0;
>> margin: 0;
>> text-align: left;
>> }
>> ul#nav li:hover ul li {
>> display: block;
>> margin: 0;
>> padding: 0 0 0 5px;
>> height: 100%;
>> }
>> ul#nav li#fi a {
>> display: block;
>> height: 100%;
>> }
>> ul#nav li#fi:hover {
>> background-image: url(/img/fixedbar_over.png);
>> }
>>
>> If you need any more code just check the page
source.
>>
>> I know this is quite a lot to ask but I am really
stuck as I cannot do it
>> myself so any help would be greatly appreciated.
>>
>> Many thanks and regards,
>>
>> Perry Roper
>>
>
> -
Fixed div that floats right works fine in IE but floats left in other browsers
I have a div that I want to float right and have remain in that position as a user strolls down the screen. I set the position to fixed which works fine in IE8 but when I view it in other browsers (chrome, safari, firefox) the div does stay in position but it floats to the left.
I believe it's just a simple setting that I'm not familiar with.
Thanks for your help in advance.You can't float a fixed division. Use margins instead.
http://alt-web.com/DEMOS/CSS2-Sticky-Text.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
100% Height div in IE6, Safari
I am trying to figure out how to have a basic 2-column layout
with <div>'s that stretch to 100% of the height of the
browser. It works in NN8, FF, Opera, IE7. It does not work in IE6
or Safari.
Previous tips I receivced about this issue involve crazy .js
hacks, CSS hacks where you repeat background images, and other
complex/ inefficient solutions. Is this really necessary? Hasn't
anyone figured out a more straightforward way to trick the
<div> to be 100% of the height of these browsers?
Really, all I need is for a left column to be 100% height.
Thanks!Does this link help you at all?
http://www.reinspire.net/blog/2005/10/11/css_vertical_stretch/
Regards
Jos
"mkonomos" <[email protected]> wrote in
message
news:[email protected]...
>I am trying to figure out how to have a basic 2-column
layout with <div>'s
>that
> stretch to 100% of the height of the browser. It works
in NN8, FF, Opera,
> IE7.
> It does not work in IE6 or Safari.
>
> Previous tips I receivced about this issue involve crazy
.js hacks, CSS
> hacks
> where you repeat background images, and other complex/
inefficient
> solutions.
> Is this really necessary? Hasn't anyone figured out a
more
> straightforward way
> to trick the <div> to be 100% of the height of
these browsers?
>
> Really, all I need is for a left column to be 100%
height.
>
> Thanks!
>
>
>
> <!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=ISO-8859-1" />
> <title>Untitled Document</title>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
>
> <meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
> <title>Untitled Document</title>
> <link href="css/mcg_cvcoe_research.css"
rel="stylesheet" type="text/css"
> />
> <style type="text/css">
> #wrapper {
> position: absolute;
> width: 100%;
> left: 0px;
> top: 0px;
> margin-top: 0px;
> margin-right: 0px;
> margin-bottom: 0px;
> margin-left: 0px;
> bottom: 0px;
> height: 100%;
> }
> #top_banner {
> background-color: #003399;
> background-position: left top;
> height: 110px;
> width: 100%;
> visibility: visible;
> position: relative;
> background-image: url(../images/cvcoe_banner.jpg);
> background-repeat: no-repeat;
> margin-top: 0px;
> margin-left: 0px;
> margin-right: 0px;
> }
> #blue_bar_under_banner {
> background-color: #000033;
> position: relative;
> visibility: visible;
> width: 100%;
> margin-top: 0px;
> margin-left: 0px;
> margin-right: 0px;
> margin-bottom: 0px;
> height: 10px;
> }
> #global_links_wrapper {
> background-color: #82A8D9;
> z-index: 2;
> }
> #bottom_half_wrapper {
> float: left;
> height: 100%;
> width: 100%;
> position: relative;
> visibility: visible;
> left: 0px;
> top: 0px;
> bottom: 0px;
> }
> #left_nav_bar {
> background-color: #335CAC;
> position: relative;
> visibility: visible;
> width: 10em;
> margin-left: 0px;
> margin-top: 0px;
> float: left;
> margin-bottom: 0px;
> padding-top: 10px;
> display: inline;
> clear: none;
> bottom: 0px;
> height: 100%;
> }
> #right_container {
> position: relative;
> visibility: visible;
> height: 100%;
> margin-top: 0px;
> margin-left: 10em;
> clear: none;
> display: block; background-color:#66FF00;
> }
> #page_title {
> position: relative;
> visibility: visible;
> height: 3em;
> top: 0px;
> margin-left: 1.87em;
> margin-top: 0px;
> background-color:#FFCCCC;
> width: 95%;
> }
> #main_image_container {
> position: relative;
> visibility: visible;
> height: 160px;
> width: 600px;
> top: 0em;
> background-color: #CC99CC;
> margin: 0px;
> float: left;
> bottom: 0em;
> margin-left: 1.87em;
> }
> #text_bar_under_main_image {
> background-color: #CC9933;
> position: relative;
> visibility: visible;
> height: 2.75em;
> left: 1.87em;
> top: 0em;
> float: left;
> background-color:#CC9933;
> margin-left: 1.87em;
> margin: 0px;
> width: 95%;
> }
> #main_text_content {
> position: relative;
> visibility: visible;
> height: auto;
> width: 75%;
> left: 1.87em;
> top: 0em;
> float: left;
> margin-top: 1em; background-color:#00CC99;
> }
> #footer_container {
> border-top-width: 2px;
> border-top-style: solid;
> border-top-color: #990000;
> position: relative;
> visibility: visible;
> height: 1em;
> margin-left: 0em;
> top: 0em;
> left: 0em;
> float: left;
> padding-left: 1.87em;
> padding-top: 1em;
> background-color: #999933;
> width: 95%;
> }
> </style>
>
>
> </head>
>
>
> <body>
> <div id="wrapper">
> <div id="top_banner">
> </div> <!--closes the top_banner-->
> <div id="blue_bar_under_banner"></div>
> <div id="global_links_wrapper">Content for id
"global_links_wrapper"
> Goes
> Here</div>
>
> <div id="bottom_half_wrapper">
> <div id="left_nav_bar">Content for id
"left_nav_bar" Goes Here</div>
> <div id="right_container">
> <div id="page_title">Content for id "page_title"
Goes Here</div>
> <div id="main_image_container">Content for id
"main_image_container"
> Goes
> Here</div>
> <div id="text_bar_under_main_image">Content for id
> "text_bar_under_main_image" Goes Here</div>
> <div id="main_text_content">Content for id
"main_text_content" Goes
> Here</div>
> <div id="footer_container">Content for id
"footer_container" Goes
> Here</div>
> </div>
> <!--closes the right_container-->
> </div>
> <!--closes the bottom_half_wrapper-->
> </div>
> <!--closes the wrapper-->
> </body>
> </html>
> -
Does any one know of a way to created floating div elements for mobile safari. Safari on the desktop of course supports this, but mobile safari and UIWebView do not seem to. Work arounds and suggestions welcome.
Thanks in advance for all advice.
RakeshYes. I have something along these lines:
// In CSS file
.navigation
background-color: #336699;
position: fixed;
top: 80px;
left: 0;
height: 50px;
width: 100%;
padding: 5px;
vertical-align: middle;
// In HTML file
<div id='navigation' class='navigation'>
<span id='welcome'><a href='javascript:welcome()'>Welcome</a></span>
<span class='separator'>|</span>
<span id='rules'><a href='javascript:rules()'>Rules</a></span>
<span class='separator'>|</span>
</div>
This works fine when I test with desktop Safari but not on the simulator (Safari or UIWebView).
Thanks for all help.
Rakesh
Message was edited by: sptrakesh -
Why behaviors don't work when there is a previous fixed div in the same page?
I have an image fixed at the beginning of the page.
After that, I have a div with images in which I have applied the swap image behavior, but the behavior doesn't work.
If I change the positioning of my image fixed, so, if that image is in position absolute, relative o whatever (unless fixed), the following divs show the swap image behavior.
What happens?of course, MurraySummers, but it's long, ans some words are in spanish...
<title>SYNCHRO FACTORY</title>
<link href="synchrofactory.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-repeat: no-repeat;
background-color: #000000;
background-image: url(imagenes/franja_sup_burbujas2.png);
a:link {
text-decoration: none;
a:visited {
text-decoration: none;
a:hover {
text-decoration: none;
a:active {
text-decoration: none;
-->
</style>
<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_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
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_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onload="MM_preloadImages('imagenes/transpPVP.jpg','imagenes/transpPVP.png')">
<div id="contenedor">
<div id="cabecerafija"><img src="imagenes/cabecerafija4.png" width="1280" height="1201" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="circle" coords="71,550,48" href="#logo2" />
<area shape="circle" coords="83,790,40" href="#logo3" />
<area shape="circle" coords="187,672,40" href="#logo1" />
</map>
</div>
<div id="paginahome">
<div id="logo1"><img src="imagenes/logo_cel_700px.png" width="700" height="239" /></div>
<div id="texthome">
<h1>UN DEPORTE<br />
UN ESPECTÁCULO</h1>
<h2>Joyas de sincro. Llévalas, lúcelas. Pasión por la natación sincronizada</h2>
<br />
<br />
</div>
<div id="galeria"><img src="imagenes/fons_sara_videoclip.jpg" width="1030" height="402" /></div>
</div>
<div id="paginatienda">
<div id="text">
<div id="logo2"><img src="imagenes/logo_cel_700px.png" width="700" height="239" id="Image2" /></div>
</div>
<div id="cuadroproductos">
<div id="imatge1"><a href="http://www.synchrofactory.com" onmouseover="MM_swapImage('sincro1','','imagenes/transpPVP.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="imagenes/sincro1_provaweb.jpg" width="200" height="140" id="sincro1" /></a></div>
<div id="imatge2"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sincro2','','imagenes/transpPVP.png',1)"><img src="imagenes/sincro2_provaweb.jpg" width="200" height="140" id="sincro2" /></a></div>
<div id="imatge2"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sincro3','','imagenes/transpPVP.png',1)"><img src="imagenes/sincro3_provaweb.jpg" width="200" height="140" id="sincro3" /></a></div>
<div id="imatge1"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sincro4','','imagenes/transpPVP.png',1)"><img src="imagenes/sincro4_provaweb.jpg" width="200" height="140" id="sincro4" /></a></div>
<div id="imatge2"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sincro5','','imagenes/transpPVP.png',1)"><img src="imagenes/sincro5_provaweb.jpg" width="200" height="140" id="sincro5" /></a></div>
<div id="imatge2"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sincro6','','imagenes/transpPVP.png',1)"><img src="imagenes/sincro6_provaweb.jpg" width="200" height="140" id="sincro6" /></a></div>
<div id="imatge1"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sincro7','','imagenes/transpPVP.png',1)"><img src="imagenes/sincro1_provaweb.jpg" width="200" height="140" id="sincro7" /></a></div>
<div id="imatge2"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sincro8','','imagenes/transpPVP.png',1)"><img src="imagenes/sincro2_provaweb.jpg" width="200" height="140" id="sincro8" /></a></div>
<div id="quadretext">Plata 925 rodiada. Bronce chapado en oro de 2 micras con baño anticadmio y antialérgico según normativa europea vigente. Modelos e ilustraciones patentados. Bla, bla, i requeteblá.</div>
</div>
</div>
<div id="paginacontacto">
<div id="text">
<div id="logo3"><img src="imagenes/logo_cel_700px.png" width="700" height="239" /></div>
</div>
<div id="contacto">
<div id="cuadroimagenes">
<div id="imatge1"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
<div id="imatge2"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
<div id="imatge2"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
<div id="imatge2"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
<div id="imatge1"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
<div id="imatge2"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
<div id="imatge2"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
<div id="imatge2"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
</div>
</div>
</div>
</div>
</body>
</html> -
How to fix divs in ff and Netscape?
this is the test page
http://tmptw.servers121.com/~fivemr00/html/fmr-concept.html
have a look with firefox and netscape (and safari)
Any ideas on what I can do?
R3> If this template is a bad idea do you have any
suggestions as to
> another template I can use that offers a drop down
navigation
> functionality?
Check here -
http://dreamweaverresources.com,
or here -
http://www.projectseven.com/
They are the best in the business, in my opinion.
> Other than the navigation bar issue are there any other
overt problems I
> should
> know about?
The navigation bar issues are the killer for me. But the
layout methods are
a little strange too.
> However, how exactly do I 'clear the float befor
closing'?
> (i'm a tad new to this)
Look at the code on the page I linked and see what change I
made. Google
"clear float" and see what you find....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"romeo the 3rd" <[email protected]> wrote in
message
news:eof6uu$bo6$[email protected]..
> Hi Murray
>
> Yes that's what I want!
> However, how exactly do I 'clear the float befor
closing'?
> (i'm a tad new to this)
>
> I have read before that it is unwise to use the Halo.
> Other than the navigation bar issue are there any other
overt problems I
> should
> know about? If this template is a bad idea do you have
any suggestions as
> to
> another template I can use that offers a drop down
navigation
> functionality?
>
> Thanks for yor reply
> R3
> -
Why won't my divs stay fixed in Chrome after using adobe edge?
Hi, Can someone help me with an Edge problem? I'm using:
load: "http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js",
complete: function() {
EC.debug("Commons ready: "+EC.VERSION);
EC.centerStage(sym);
EC.Parallax.setup(sym); } });
to animate a div by scrolling and then using:
sym.$("Symbol_1").css("position", "fixed"):
to keep the animated div fixed. It stays fixed perfectly in Firefox but it doesn't stay fixed in Chrome although the animation works. Also, any page that I've created in Dreamweaver with a fixed div fails to stay fixed in Chrome after bringing it into Edge and then publishing it. Does anyone know about this? Thanks.Thanks Zaxist.
I had to play with what you gave me a little and removed the "#" from symbol and added "sym." to the "$" in two places ending up with this:
sym.$("body").append(sym.$("Symbol_1").css({"position":"fixed"}));
Works perfect! Thanks again! -
Hi All,
I have given up on the liquid template and now started from scratch with fixed divs.
My problem now is the floating elements.
I adapted this layout to a adobe tutorial with less divs so the floats and clears that the tutorial said some dont work.
Could someone look at my template and check the floating so as it sits like it does and wont move with content added.
I want to add a horizontal spry navigation bar at the bottom like the top but when i add another div it moves eveything and i get an error about 3px line gaps.
If I am not making sense please let me know
Any help would be appreciated.
Thanks in advance
This is my code and css.
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<style type="text/css">
</style>
<script src="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="file:///C|/Users/Nikki/Desktop/tmp/Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../faarcss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
font-family: "Myriad Pro";
h1,h2,h3,h4,h5,h6 {
font-family: "Myriad Pro";
font-weight: bold;
h1 {
font-size: 110%;
h2 {
font-size: 105%;
h3 {
font-size: 100%;
h4 {
font-size: 90%;
h5 {
font-size: 90%;
h6 {
font-size: 90%;
p {font-size: 90%;
</style>
</head>
<body onload="KW_doClock()">
<div id="wrapper">
<div id="topNav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Finance</a>
<ul>
<li><a href="#">Finance Overview</a></li>
<li><a href="#">More than Just a Mortgage</a></li>
<li><a href="#">Line Of Credit</a></li>
<li><a href="#">The Latte Factor</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Insurance</a>
<ul>
<li><a href="#">The Importance of Insurance</a></li>
<li><a href="#">Why do we need Insurance</a></li>
<li><a href="#">Personal Insurance</a></li>
<li><a href="#">Health Insurance</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Financial Planning</a>
<ul>
<li><a href="#">Creating your financial security</a></li>
<li><a href="#">Superannuation</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Budgeting</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Taxation</a>
<ul>
<li><a href="#">Accounting</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Taxation</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Property</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Property Archives</a></li>
<li><a href="#">Property F.A.Q.</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Legal</a>
<ul>
<li><a href="#">Estate Planning</a></li>
<li><a href="#">Solicitors</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Information</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Seminars</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Media</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">About FAAR</a>
<ul>
<li><a href="#">Our Point of Difference</a></li>
<li><a href="#">Our Undertaking</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Site map</a></li>
<li><a href="#">Contact FAAR</a></li>
</ul>
</li>
</ul>
</div>
<div id="logo"><img src="file:///C|/Users/Nikki/Desktop/faar/images/FAAR.logo.jpg" alt="Logo" width="230" height="230" align="left" /></div>
<div id="name">
<img src="file:///C|/Users/Nikki/Desktop/faar.com.au/images/name2.jpg" width="300" height="230" alt="FAAR" /></div>
<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="230" id="FlashID" title="Header">
<param name="movie" value="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" width="450" height="230">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object></div>
<div id="motto">It makes sense to hire an expert - and even more sense to learn from them!</div>
<div id="clock">
<script language='JavaScript'>
// Kaosweaver Live Clock Start
function class_clock(f,s,c,b,w,h,d,m,g,z) { // Copyright 2002 by Kaosweaver, All rights reserved
this.b=b;this.w=w;this.h=h;this.d=d;this.g=g;this.z=z
this.o='<font style="color:'+c+'; font-family:'+f+'; font-size:'+s+'pt;">';
if (m==1) this.o+=doDate("W0",",%20","D1","%20","M0",",%20","Y0",",%20");
var clock=new class_clock("Arial, Helvetica, sans-serif","10","#000000","#FFFFFF","287",1,1,1,0,0)
// If the clock's size needs adjusting, change the 287 above.
d=document
if (d.all || d.getElementById) {d.write('<span id="activeClock" style="width:'+clock.w+'px; background-color:'+clock.b+'"></span>'); }
else if (d.layers) {d.write('<ilayer bgcolor="'+clock.b+'" id="wrapClock"><layer width="'+clock.w+'" id="activeClock"></layer></ilayer>'); }
else {KW_doClock(1);}
function KW_doClock(a) { // Copyright 2003 by Kaosweaver, All rights reserved
d=document;t=new Date();p="";dClock=""; if (d.layers) d.wrapClock.visibility="show";
tD=(t.getTimezoneOffset()-(clock.z*60))*clock.g;t.setMinutes(tD+t.getMinutes())
h=t.getHours();m=t.getMinutes();s=t.getSeconds();if (clock.h)
{p=(h>11)?"PM":"AM";h=(h>12)?h-12:h;h=(h==0)?12:h;}if (clock.d)
{m=(m<=9)?"0"+m:m; s=(s<=9)?"0"+s:s;} dClock = clock.o+h+':'+m+':'+s+' '+p+'</font>';
if (a) {d.write(dClock);}if (d.layers) {wc = document.wrapClock;lc = wc.document.activeClock;
lc.document.write(dClock);lc.document.close();
} else if (d.all) { activeClock.innerHTML = dClock;
} else if (d.getElementById) {d.getElementById("activeClock").innerHTML = dClock;}
if (!a) setTimeout("KW_doClock()",1000);
function doDate(){ // Copyright 2002 by Kaosweaver, All rights reserved.
var t=new Date(),a=doDate.arguments,str="",i,a1,lang="1";
var month=new Array('January','Jan', 'February','Feb', 'March','Mar', 'April','Apr', 'May','May', 'June','Jun', 'July','Jul', 'August','Aug', 'September','Sep', 'October','Oct', 'November','Nov', 'December','Dec');
var tday= new Array('Sunday','Sun','Monday','Mon', 'Tuesday','Tue', 'Wednesday','Wed','Thursday','Thr','Friday','Fri','Saturday','Sat');
for(i=0;i<a.length;i++) {a1=a[i].charAt(1);switch (a[i].charAt(0)) {
case "M":if ((Number(a1)==3) && ((t.getMonth()+1)<10)) str+="0";
str+=(Number(a1)>1)?t.getMonth()+1:month[t.getMonth()*2+Number(a1)];break;
case "D": if ((Number(a1)==1) && (t.getDate()<10)) str+="0";str+=t.getDate();break;
case "Y": str+=(a1=='0')?t.getFullYear():t.getFullYear().toString().substring(2);break;
case "W":str+=tday[t.getDay()*2+Number(a1)];break; default: str+=unescape(a[i]);}}return str;
// Kaosweaver Live Clock End
</script>
<!-- KW Live Clock -->
</div>
<!-- TemplateBeginEditable name="mainContent" -->
<div id="mainContent">
<p><strong>Template for Financial & Accounting</strong></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<!-- TemplateEndEditable -->
<div id="sidebar">
<ul id="MenuBar2" class="MenuBarVertical">
<li class="navMenu"><a href="#">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Finance</a>
<ul>
<li><a href="#">Finance Overview</a></li>
<li><a href="#">More Thank Just a Mortgage</a></li>
<li><a href="#">Line of Credit</a></li>
<li><a href="#">The Latte Factor</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li class="navMenu"><a href="#" class="MenuBarItemSubmenu">Insurance</a>
<ul>
<li><a href="#">Importance of Insurance</a></li>
<li><a href="#">Why do we need Insurance</a></li>
<li><a href="#">Personal Insurance</a></li>
<li><a href="#">Health Insurance</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Financial Planning</a>
<ul>
<li><a href="#">Creating your financial security</a></li>
<li><a href="#">Superannuation</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Budgeting</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Taxation</a>
<ul>
<li><a href="#">Accounting</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Property</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Property Archives</a></li>
<li><a href="#">Property F.A.Q.</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Legal</a>
<ul>
<li><a href="#">Solicitors</a></li>
<li><a href="#">Estate Planning</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Information</a>
<ul>
<li><a href="#">Seminars</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Media</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#">Site Map</a></li>
<li><a href="#" class="MenuBarItemSubmenu">About Faar</a>
<ul>
<li><a href="#">Our Point of Difference</a></li>
<li><a href="#">Our Undertaking</a></li>
<li><a href="#">Site map</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">CONTACT FAAR</a></li>
</ul>
</li>
<li><a href="#">Feedback</a></li>
<li><a href="#">CONTACT FAAR</a></li>
</ul>
</div>
<div id="footer">
<p class="copyright">Copyright © Financial And Accounting Resources 2011
<p class="disclaimer">Disclaimer: Due to the financial industry continually evolving and changing every effort has been made to ensure the accuracy of the information contained within ths website. Financial and Accounting Resources accepts no responsibility or liability for any loss or damage whatsoever (either directly or indirectly) to any person arising from the use or reliance on the information contained in this website.
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"/www/tmp/SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID");
</script>
</body>
</html>
CSS.
@charset "utf-8";
/* CSS Document */
body {
background-color: #FFF;
padding: 0px;
margin-top: 25px;
text-align: center;
background-image: url(images/watermark.jpg);
background-repeat: repeat-y;
background-position: center;
html, body {
margin: 0px;
padding: 0px;
#wrapper {
background-color: #FFF;
width: 1000px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
#topNav {
background-color: #00A0C4;
width: 1000px;
padding-top: -25px;
clear: left;
float: left;
padding-bottom: 5px;
#logo {
background-color: #FFF;
height: 230px;
width: 230px;
float: left;
padding-top: 10px;
#name {
background-color: #FFF;
height: 230px;
width: 300px;
float: left;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
#header {
background-color: #FFF;
height: 230px;
width: 450px;
float: right;
clear: right;
padding-top: 10px;
#motto {
background-color: #FFF;
height: 25px;
width: 1000px;
float: left;
text-align: center;
color: #000;
font-weight: bold;
font-size: 110%;
font-style: italic;
padding-top: 15px;
#clock {
background-color: #FFF;
height: 30px;
width: 1000px;
clear: both;
float: left;
font-size: 100%;
text-align: right;
font-weight: normal;
color: #000;
vertical-align: middle;
padding-top: 10px;
#mainContent {
background-color: #FFF;
height: auto;
width: 720px;
float: right;
margin-bottom: 10px;
padding-right: 25px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-image: url(images/watermark.jpg);
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
text-align: justify;
#sidebar {
background-color: #00A0C4;
width: 225px;
clear: left;
float: left;
height: auto;
padding: 10px;
ul nav {
background-color: #00A0C4;
width: 250px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
list-style-position: inside;
list-style-type: none;
#footer {
background-color: #00A0C4;
height: 100px;
width: 940px;
float: left;
clear: left;
padding: 10px;
body,td,th {
font-family: Arial, Helvetica, sans-serif;
sidebar.menu {
font-size: 100%;
font-weight: bold;
color: #FFF;
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background: #C6D580;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #ADB96E;
color: #FFF;
float: left;
.navMenu {
font-size: 100%;
text-align: left;
padding-right: -10px;
color: #FFF;
font-weight: bold;
.sideNav {
font-size: 80%;
text-align: left;
padding: 10px;
.copyright {
font-family: "Myriad Pro";
font-size: 110%;
font-weight: bold;
color: #FFF;
text-align: center;
.disclaimer {
font-size: 75%;
color: #FFF;
text-align: left;
Thank you
muznikThe table is still above the text, not on the side like in the image you sent.
I have the test document in a folder called "Test" in that folder i have a folder named "CSS" where the text document is saved as style.css
The code i have now is below... Not sure what I'm doing wrong :/
<!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=iso-8859-1" />
<title>Untitled Document</title>
<head>
<title>style.css</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="masthead">
<div id="logo">
</div>
<div id="header">
</div>
</div>
<div id="container">
<div id="left_col">
<table width="188" border="1">
<tr>
<td>Test 1 </td>
</tr>
<tr>
<td>Test 2 </td>
</tr>
<tr>
<td>Test 3 </td>
</tr>
<tr>
<td>Test 4 </td>
</tr>
</table>
</div>
<div id="page_content" style="overflow: auto;">
<p>The Department of the Navy desires a tool for analyzing the affects of budgetary changes upon Fire and Emergency Services provided upon Naval Installations throughout the world. The diversity of these installations suggests that across the board funding changes may affect each location differently. This project presents a Fire Loss Model to support the continued development of the analysis tool.</p>
</div>
</div>
<div id="footer"></div>
</body>
</html> -
Hey peeps. Within a wrapper <div> I have a two-column
layout- a left nav bar <div> and a right container
<div>. It looks great in Safari, FF, Opera, NN. IE6 causes
the right container to drop like it's hot. It stays to the right
when it drops and the top of the container seems perfectly lined up
with the bottom of the left nav container. Any ideas? Here is the
code...Works alright for me on IE PC 5.5 and up.
Try the code below. If it works for you (it does for me),
then maybe
something else is conflicting with the layout.
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper { position: absolute; width: 100%; left: 0px; top:
0px;
height: 100%; margin-top: 0px; margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px; }
#left_nav_bar { background-color: #335CAC; position:
relative;
visibility: visible; height: 100%; width: 10em; margin-left:
0px;
margin-top: 0px; float: left; margin-bottom: 0px;
padding-top: 10px;
display: inline; }
#right_container { position: relative; visibility: visible;
height:
100%;
margin-top: 0px; margin-left: 10em; }
</style>
</head>
<body>
<div id="wrapper">
<div id="left_nav_bar">test</div>
<div id="right_container">test
right</div></div>
</body>
</html>
You cannot lose until you give up !!!
"mkonomos" <[email protected]> wrote in
message
news:erhts1$ila$[email protected]..
> It doesn't seem to fix it in IE6, though it does work
better in IE7.
> MIcrosoft! >:( -
CSS divs running into each other 4x3 screens but not widescreen
I am trying to develop a site:
http://www.poweredupgamers.com.
Everything looks great on a widescreen monitor, but when I view it
on older 4x3 monitors the divs run into each other and the spacing
gets all messed up. This occurs regardless of the resolution the
monitors are using.
I thought by setting up margins with % (5% left margin for
left div, etc.) that the divs would change in size to fill the
pages regardless of the resolution the monitor is set at. The divs
do seem to adjust for the resolution, but the monitor format
appears to be a different issue. Do I need to set fixed div
positions or widths to fix this issue? If so, how do I set them to
ensure the page is filled properly (as little blank space as
possible) regardless of the monitor's resolution?
Does it have anything to do with fixed sizes for certain
images inside divs sizes based on % margins?
Thanks very much for any help!Resolution is not the critical issue. Browser viewport width
is. To make
your decision you need to have some ideas about the following
issues -
1. What is the primary target demographic for this site?
2. What are the browsing habits of that demographic? Do they
normally have
their browser window maximized on the screen?
3. If they usually have their browser maximized, what is the
typical screen
width?
4. If they usually do NOT have their browser maximized, what
is the MINIMUM
screen width in that demographic.
5. How do I want to build the page?
a. Fixed width and left aligned?
b. Fixed width and centering?
c. Flexible to fill whatever width from left to right?
d. Flexible (within limits) and left aligned?
e. Flexible (within limits) and centering?
As you can see, this decision is probably much more complex
than you
thought, and will require that you know quite a bit about
your intended
target visitor and their browsing habits.
If you elect to go with 5a, or 5b, then your decision would
be - 'what is
the mimimum browser width I want to support without
horizontal scrolling?'.
Once you have determined that minimum supported width, all of
your decisions
are made. That's how wide you want your page to be.
If you elect to go with 5c, then you just build your page
within a flexible
container (the simplest example - although an obsolet one -
would be to use
a 100% width table to hold the entire page). Be aware that
pages with
limited text content can look VERY sparse and empty on wide
viewports when
built in this way.
If you elect to go with 5d, or 5e, then you would add this
sophistication to
your decision matrix -
'what is the greatest width I want to allow the page and its
contents to
become?'
In this case, you would use the CSS styles - 'min-width' and
'max-width' on
the primary page container. Just so you'll know, although
these styles are
well supported *now*, earlier versions of IE (and some other
browsers) will
not support them so reliably.
So - which is it? 8)
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"juxtafras" <[email protected]> wrote in
message
news:[email protected]...
>I am trying to develop a site:
http://www.poweredupgamers.com.
Everything
> looks great on a widescreen monitor, but when I view it
on older 4x3
> monitors
> the divs run into each other and the spacing gets all
messed up. This
> occurs
> regardless of the resolution the monitors are using.
>
> I thought by setting up margins with % (5% left margin
for left div, etc.)
> that the divs would change in size to fill the pages
regardless of the
> resolution the monitor is set at. The divs do seem to
adjust for the
> resolution, but the monitor format appears to be a
different issue. Do I
> need
> to set fixed div positions or widths to fix this issue?
If so, how do I
> set
> them to ensure the page is filled properly (as little
blank space as
> possible)
> regardless of the monitor's resolution?
>
> Does it have anything to do with fixed sizes for certain
images inside
> divs
> sizes based on % margins?
>
> Thanks very much for any help!
> -
Edit Window's Fixed Position Causing Problems
Once I've selected text to print and click the Edit button, the edit window opens on my primary (left) monitor (I'm using 2 monitors with the browser on my (right) second monitor) UNDER the Taskbar which is positioned at the top of the left monitor. Because the Edit window is fixed, I can't resize it; can't move it; can't access any of the tools in the window (because they're hidden under the Taskbar)!!
Why can't the Edit Window "honor" the position of the Taskbar? At least, allow me to resize or move the window to another position onscreen.The web is not yet read for this. I wouldn't use it.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"colinwalton" <[email protected]> wrote in
message
news:g3lscq$38e$[email protected]..
>I have a fixed div that stays centred in the same
position while the rest
>of
> the page scrolls underneath it. The page works fine in
the browser, yet
> for
> some strange reason always displays over to the left in
Dreamweaver's
> Design
> View.
>
> If I need to edit the div, I have to temporarily make
its position
> Absolute,
> make the changes, then change it back again.
>
> Is this a bug or am I doing something wrong with the
CSS?
>
> Here is the CSS for the div:
>
> #topWithLogo {
> position:fixed;
> visibility:visible;
> left:50%;
> top:0px;
> width:810px;
> z-index:30;
> margin-left: -405px;
> }
> -
Problems with CSS
I am building a new page for my company. I am trying to place the Div Footer at the bottom of the screen. I have placed (i believe) the appropriate information for the CSS.
The problem is when i minimize the browser the Footer section never leaves the screen and hovers over the other div tags. When I shrink the browser to its maximum the divs fall on top of each other.
What I would like to know is how to make the Footer div below hide like the other divs but remain at the bottom of the page instead of hovering over the other divs. I have read that I should not apply fixed divs.... is that correct?
I have applied to the current CSS to the below web page: http://trbla.com/sample.html
#rhythm {
width: 607px;
margin-top: 300px;
margin-right: auto;
margin-left: auto;
*img {
border: 0;
#rhythm #goldr {
width: 215px;
float: left;
border: 0;
#rhythm #trbnew {
float: left;
width: 181px;
border: 0;
#rhythm #greyr {
width: 211px;
float: left;
border: 0;
#nav {
margin-top: 200px;
width: 607px;
margin-right: auto;
margin-left: auto;
padding-bottom: 100px;
clear: both;
#nav #navonewrap {
float: left;
clear: both;
#nav #navwraptwo {
float: left;
width: 175px;
height: 22px;
#nav #navwrapthree {
float: right;
width: 215px;
margin-right: -75px;
#footer {
bottom: 0px;
clear: both;
position: fixed;
width: 100%;
#footer #left_footer {
float: left;
clear: left;
overflow: hidden;
#footer #r_footer {
float: right;
Thanks for anyones help thus far,
RhythmI think it's the way I'm doing the conditional statement.
'Went through another knowledge-base article that basically had me
incorporate the conditional attribute into the <xsl:for-each
select= . . .> statement and it appears to be a better way. I
also created a xslt fragment and inserted it into a php page rather
than making the whole thing xslt. I think this helps as well, but
can't absolutely close the book on this until the server is
properly configured to transform xslt in php pages.
Here's the latest
http://cals.arizona.edu/arizonawet/workshops/current_workshops-trial2.php -
Trouble changing background color. Using Dreamweaver CS4
I can't get to change the back ground color [The greenish grey color] , within a table, of a web page... Please see http://www.urefillit.com/index2.html Can use some help here... Also I notice that the foliage background is slow in loading... Any suggestions as to what is causing the loading delay?
Thanks in advance!!!!!
Using CS4.........The Code is as follows:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta name="msvalidate.01" content="F33B6715B987C15F0176AAFDA87BE459" />
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<title>Urefillit manufactures and markets Octenol, Asian Tiger lure, and Kaboom replacement type products</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="We are focused on providing high-quality products and a commitment to customer satisfaction - We will do everything we can to meet your expectations for the best priced and highest quality mosquito control and Kaboom replacement type products available on the market today" />
<meta name="Keywords" content="Octenol, Lure, Asian Tiger mosquito lure, Kaboom refills, mosquito magnet mosquito killing machine" />
<meta name="Robots" content="index, follow" />
<style type="text/css">
/*<![CDATA[*/
body {
background-image: url(images/SambucusBlackLaceFoliage.jpg);
background-color: #FFCC66;
body.c7 {background-attachment:fixed}
div.c6 {text-align: center}
p.c5 {font-family: Arial; font-size: 70%; text-align: center}
span.c4 {font-family: Arial; font-size: 70%}
span.c3 {font-family: Courier}
p.c2 {text-align: center}
span.c1 {font-family: Courier; font-size: 120%}
/*]]>*/
.c7 table tr .c11 {
background-color: #F60;
font-size: 18px;
tr .c11 table tr td p {
font-family: "Times New Roman", Times, serif;
font-size: 16pt;
.c7 table tr .c11 table tr td p {
font-family: "Times New Roman", Times, serif;
font-size: x-large;
.c7 table tr .c11 table tr td p {
font-family: "Times New Roman", Times, serif;
font-size: 16pt;
.c7 table tr .c11 #table2 tr th {
background-color: #0F6;
/*]]>*/
</style>
<script src="file:///C|/Scripts/swfobject_modified.js" type="text/javascript">
</script>
<style type="text/css">
/*<![CDATA[*/
table.c16 {background-color: #FFD9B3}
p.c15 {text-autospace:none;}
th.c14 {background-color: #00FF99}
td.c13 {background-color: #00FF99}
th.c12 {background-color: #FF6666}
h2.c11 {font-size: 120%}
span.c10 {font-size: 150%}
span.c9 {text-decoration: underline}
div.c8 {font-size: 70%; text-align: right}
td.c7 {background-color: #003399}
p.c6 {text-decoration: underline}
table.c5 {background-color: #FFCC66}
td.c4 {background-color: #FFFFFF}
div.c3 {text-align: center}
table.c2 {
background-color: #0F6;
font-size: 18px;
th.c1 {background-color: #FFFFFF}
.c7 table tr th .c7 {
color: #008040;
.c7 table tr th .c7 strong {
color: #000;
.c7 table tr th .c7 {
color: #000;
.c7 table tr th .c1 strong {
color: #008000;
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
body {
background-color: #FFCC33;
th.c1 {background-color: #FFCC66}
/*]]>*/
th.c11 {background-color: #FFFFFF}
th.c11 {
background-color: #F93;
position: relative;
left: auto;
top: auto;
right: auto;
bottom: auto;
visibility: visible;
width: auto;
.c7 table tr .c11 #table2 tr th .c2 a .c3 strong {
color: #00F;
.c7 table tr .c11 #table2 tr td a {
color: #00F;
.c7 table tr .c11 #table2 tr td a {
color: #00F;
.c7 table tr .c11 #table2 tr td p a {
color: #00F;
.BLUE { color: #00F;
.BLUE { color: #00F;
.blue { color: #00F;
.blue { color: #00F;
p.c1 {text-align: center}
p.c13 {font-size: 80%; text-align: center}
p.c71 {margin-right:0in;
margin-left:0in;
font-size:9.5pt;
font-family:"Comic Sans MS";
color:#000040;
span.c101 {font-size: 80%}
span.c12 {font-family: Courier New, Courier, monospace}
span.c6 {font-family: Arial}
</style>
<style type="text/css">
/*<![CDATA[*/
img.c16 {border:0;width:88px;height:31px}
span.c15 {font-size: 120%}
div.c14 {color: #FFFFFF; font-size: 150%; text-align: center}
span.c13 {font-size:18.0pt; color:#B90D09;}
strong.c12 {text-decoration: underline}
span.c11 {font-family:'Comic Sans MS'; color:red;}
em.c10 {text-decoration: underline}
span.c9 {color:red;}
table.c8 {background-color: #006600}
td.c7 {background-color: #006600}
span.c6 {font-size: 150%; text-decoration: underline}
p.c5 {text-decoration: underline}
p.c4 {text-align: center; text-decoration: underline}
p.c3 {text-align: center}
span.c2 {text-decoration: underline}
div.c1 {text-align: center}
/*]]>*/
.c7 table tr .c11 #table2 tr td p {
color: #00F;
.eight {
color: #F00;
</style>
<style type="text/css">
/*<![CDATA[*/
<!--
p.MsoNormal {
margin-top:0in;
margin-right:0in;
margin-bottom:10.0pt;
margin-left:0in;
line-height:115%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
.c7 table tr .c11 .c5 strong u span {
color: #008080;
.c7 table tr .c11 p u em {
color: #00F;
.c7 table tr .c11 p em u {
color: #00F;
.c7 table tr .c11 table tr td .c7.c6 .c10 {
font-family: "Courier New", Courier, monospace;
.c7 table tr .c11 table tr td .MsoNormal strong u span {
color: #00F;
.c7 table tr .c11 table tr td .MsoNormal strong u span {
font-family: "Times New Roman", Times, serif;
.c7 table tr .c11 table tr td p strong u {
font-family: "Times New Roman", Times, serif;
.c7 table tr .c11 table tr td p strong u {
font-family: "Times New Roman", Times, serif;
.c7 table tr .c11 table tr td p strong u {
font-size: 16px;
.c7 table tr .c11 table tr td p {
font-size: 10px;
.c7 table tr .c11 table tr td p {
font-size: 12px;
.c7 table tr .c11 table tr td p {
font-size: 12px;
.c7 table tr .c11 table tr td p {
font-size: 12px;
.c7 table tr .c11 table tr td .MsoNormal strong u span {
color: #000040;
.c7 table tr .c11 .c7 tbody tr th a {
color: #000;
.c7 table tr .c11 #table2 tr td a {
color: #000;
.c7 table tr .c11 #table2 tr th .c2 a {
color: #000;
font-size: 18px;
.c7 table tr .c11 #table2 tr th a {
color: #000;
font-size: 18px;
.c7 table tr .c11 p u strong font {
color: #B80738;
.c7 table tr .c11 p u strong {
color: #B80738;
.c7 table tr .c11 table tr td p strong u {
font-size: 24px;
.c7 table tr .c11 table tr td p {
font-size: 16pt;
.c7 table tr .c11 .MsoNormal span {
font-size: 24px;
.c7 table tr .c11 .MsoNormal span {
font-size: 24px;
.c7 table tr .c11 .MsoNormal span {
font-size: 24px;
.c7 table tr .c11 #table2 tr th {
font-size: 16px;
.c7 table tr .c11 #table2 tr th p a {
font-size: 18px;
.c7 table tr .c11 #table2 tr th p a {
font-size: 18px;
.c7 table tr .c11 #table2 tr th p a {
font-size: 18px;
.c7 table tr .c11 table tr td .MsoNormal a {
font-size: 18px;
.c7 table tr .c11 table tr td .MsoNormal a {
font-size: 24px;
.c7 table tr .c11 .MsoNormal span {
font-size: 24px;
.c7 table tr .c11 table tr th a {
font-size: 18pt;
-->
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
table.c11 {background-color: #0033FF}
th.c10 {background-color: #8D8D5E}
span.c9 {font-family:'Times New Roman','serif'; font-size:18pt;}
p.c8 {line-height: normal; margin-bottom: .0001pt; text-align: center}
p.c7 {; font-family: 'Times New Roman', 'serif'; font-size: 14pt; text-align: center}
p.c6 {; font-family: 'Times New Roman', 'serif'; color: #00F; font-size: 18pt; font-style: italic; text-align: center}
span.c5 {font-style: italic}
span.c4 {line-height:115%; font-family:'Times New Roman','serif'; font-size:16.0pt;}
p.c3 {text-align: center}
strong.c2 {text-decoration: underline}
th.c1 {background-color: #FFFFFF}
/*]]>*/
</style>
</head>
<body>
<![CDATA[*/
&amp;lt;!--
#Layer1 {position:absolute;
width:110px;
height:34px;
z-index:1;
left: 430px;
top: 1116px;
visibility: visible;}
#Layer2 {position:absolute;
width:170px;
height:33px;
z-index:1;
left: 536px;
top: 652px;}
p.c7 {color: #000000; font-family: Arial; font-size: 80%}
--&amp;gt;
/*]]>
*/ <script src="file:///C|/Scripts/AC_RunActiveContent.js" type="text/javascript">
</script>
<table class="c11" width="1250" border="15" align="center" cellpadding="5">
<tr>
<th width="888" height="2254" align="center" valign="top" class="c11 c10" scope="col">
<p><br />
<img src="images/webpagepicture.jpg" alt="WEB PAGE HEADER" width="1267" height="212" border="6" align="middle" /><br /></p>
<table width="1188" border="6" align="center" class="c2" id="table2">
<tr>
<th width="143" scope="col">
<p><a href="OctenolLure.html">Octenol Lure</a></p>
</th>
<th width="145" scope="col"><a href="FlowtronTypeLure.html">FlowtronTypeLure</a></th>
<th width="145" scope="col">
<p><a href="AsianTiger.html"></a><a href="AsianTiger.html">Asian Tiger Lure</a></p>
</th>
<th width="146" scope="col"><a href="Combolure.html">Combo Lure</a><br />
(Octenol & Lactic Acid)</th>
<th width="146" scope="col">
<p><a href="SkeeterVacLure.html">SkeeterVac Lure</a></p>
</th>
<th width="145" scope="col">
<p class="c2"><a href="mosquitomagnettroubleshootingguide.html">Mosquito Magnet</a></p>
<p class="c2"><a href="mosquitomagnettroubleshootingguide.html">Repair Guide</a></p>
</th>
<td width="145" align="center" valign="middle" scope="col"><a href="Kaboom.html">Kaboom</a><a href="/Kaboom.html">Replacement Tablets</a></td>
<th width="111" height="104" align="center" valign="middle" scope="col"><a href="https://www.paypal.com/us/verified/pal=sales%40urefillit%2ecom" target="_blank"><img src="https://www.paypal.com/en_US/i/icon/verification_seal.gif" alt="Official PayPal Seal" width="98" height="108" border="0" align="top" /></a><br />
<br /></th>
</tr>
</table>
<br />
<table width="282" border="20" align="center" cellpadding="0">
<tr>
<th class="c1" width="128" scope="col"><img src="images/flying%20mosquito.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" width="97" height="75" /></th>
<th class="c1" width="104" scope="col"><a href="#" onClick="window.open('https://www.sitelock.com/verify.php?site=www.urefillit.com','SiteLock','width=600,height=6 00,left=160,top=170');"><img src="//shield.sitelock.com/shield/www.urefillit.com" alt="website security" align="absmiddle" title="SiteLock" /></a></th>
</tr>
</table>
<p><!-- start RatePoint Site Seal - Please, do not change -->
<!-- end RatePoint Site Seal - Please, do not change -->
<!-- start RatePoint Subscription Tool - Please, do not change -->
<!-- end RatePoint Subscription Tool - Please, do not change -->
======================================================================================</p >
<table width="1002" border="0" align="center">
<tr>
<td width="996">
<p class="c3"><strong class="c2">All About Urefillit, LLC</strong></p>
<p class="c3"><span class="c4">Urefillit, LLC prides itself on quality and consistency of its fine products, which are designed, made and manufactured in the USA. From production to quality control to final shipment, our highly trained team ensures the best quality, and reliable service for our customers. We are focused on providing high-quality products along with a commitment to customer satisfaction. We will do everything we can to meet your expectations for the best priced and highest quality mosquito lures, Kaboom replacement tablets, and bromine tablets available on the market today. With a variety of offerings to choose from, we're sure you will be happy with your purchase. Thank you for visiting our website and if you have any comments or questions, please feel free to contact us. We hope to see you again soon!</span><br /></p>
<p class="c3"><img src="images/made_in_USA.jpg" width="221" height="228" alt="usa" /><br />
<br /></p>
<p class="c3">****************************************************************************** *************<br />
<br /></p>
<p class="c6">REFUND POLICY: <span class="c5">Our number one goal is your satisfaction. If our product does not perform as advertised you may return then unused item for a refund. A 25% restocking fee may apply. Buyer pays the return shipping costs. Special and international orders items DO NOT qualify for a refund.</span><br />
<br /></p>
<p class="c7"><img src="images/ebay-top-rated-seller-tracking.jpg" width="230" height="158" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&userid=fjp800&ftab=Feedbac kAsSeller"><br />
Check Out Our E-Bay Feedback</a></p>
<p class="c7"><br />
****************************************************************************************** ********************<br /></p>
</td>
</tr>
</table>
<table width="1002" border="0" align="center">
<tr>
<td width="996">
<p class="c3"><strong class="c2">Using Octenol to Attract Mosquitoes<br /></strong><br /></p>
<p class="c3">Octenol is an natural chemical that occurs naturally as a by-product of plants and some animals that eat a lot of vegetable produce. If carbon dioxide is mixed with octenol, it has been found to be an attractant to several mosquito species. There are other insects such as no-see-ums and biting midges that are also attracted to this scent. It has been proven to be a very effective product, especially for no-see-ums.<br />
<br />
<img src="images/12137165-cartoon-stop-mosquito.jpg" width="168" height="168" alt="mosquito" /><br />
<br />
Octenol is also a pesticide ingredient that is used to attract mosquitoes and biting flies. It does not kill the insects; it only attracts them. It can be used in combination with other products and devices that do kill them once they are successfully attracted to the device. It is important to be aware that non-pest insects are also attracted and destroyed by some of the devices.<br />
<br />
If octenol is ingested, there is a possibility for toxicity. It is not, however, harmful in the air to humans, pets, or the environment. It is vitally important that it is kept safely away from children to avoid the possibility of ingesting. Placement of the attractant and device utilized to catch biting insects should be carefully considered. It should be kept safely away from children and pets.<br /></p>
<p class="c3">To be most effective in mosquito control, the attractant should be placed between the breeding grounds of the mosquito and the area where the people are located. There are range limits that the attractant will reach and this needs to be considered in the placement of the trap as well.<br /></p>
</td>
</tr>
</table>
<a href="http://www.startlogic.com/join/index.bml?AffID=626972&cid=592'"><br /></a> ==============================================================
<p><img src="images/americanatural_1875_97577.gif" width="234" height="118" alt="** PLEASE DESCRIBE THIS IMAGE **" /></p>
<p>Considering buying a mosquito trap? If so, compare the following traps before you make a purchase:</p>
<a href="http://www.bluerhino.com/BRWEB/Outdoor-Living-Products/Mosquito-Traps.aspx">SkeeterVac</a>
<table class="c6" border="0" align="center">
<tbody>
<tr>
<td align="center">
<div class="c3"><a href="http://www.mosquitomagnet.com/">Mosquito Magnet</a></div>
</td>
</tr>
</tbody>
</table>
<table class="c6" border="0" align="center">
<tbody>
<tr>
<td>
<div class="c3"><a href="http://www.megacatch.com/">Mega-Catch</a></div>
</td>
</tr>
</tbody>
</table>
<table class="c6" border="0" align="center">
<tbody>
<tr>
<td>
<div class="c3"><a href="http://koolatrononline.stores.yahoo.net/mosquito-control.html">Koolatron</a></div>
</td>
</tr>
</tbody>
</table>
<table class="c6" border="0" align="center">
<tbody>
<tr>
<td width="273">
<div class="c3"><a href="http://www.mosquitocontroltrap.com/comparisons">Mosquito Trap Comparison Chart</a></div>
</td>
</tr>
</tbody>
</table>
<p><br /></p>
<table width="126" border="20" align="center" cellpadding="0">
<tr>
<th class="c1" scope="col"><a href="mailto:[email protected]">E-mail Urefillit</a></th>
</tr>
</table>
<br />
<p class="c8"> </p>
<p class="c8"><span class="c9">Urefillit, LLC<br />
800 Shore Drive East<br />
Oldsmar, Florida 34677-4402</span></p>
<p class="c8"> </p>
<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a><br /></p>
<p> </p>
</th>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
<!--
swfobject.registerObject("FlashID");
//-->
//]]>
</script>
</body>
</html>Copy & Paste this code into a new, blank document. SaveAs index3.html. Feel free to adjust CSS colors and backgrounds as desired. You'll find plenty of code comments to help you.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>U Refill It</title>
<meta name="description" content="Your source for mosquito magnet and mosquito killing machine replacement products: Octenol, Asian Tiger lure and Kaboom">
<!--help for older IE browsers-->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
/**CSS Reset**/
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
img {
vertical-align: baseline;
display: block;
max-width: 100%
/**layout**/
body {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: 100%;
/**CSS gradient**/
/* Old browsers */
background: rgb(180,221,180);
/* FF3.6+ */
background: -moz-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(180,221,180,1)), color-stop(17%, rgba(131,199,131,1)), color-stop(33%, rgba(82,177,82,1)), color-stop(67%, rgba(0,138,0,1)), color-stop(83%, rgba(0,87,0,1)), color-stop(100%, rgba(0,36,0,1)));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
/* IE10+ */
background: -ms-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
/* good browsers */
background: linear-gradient(to bottom, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
/* older IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400', GradientType=0 );
#wrapper {
width: 75%;
margin: 0 auto; /**with width, this is centered**/
background: #FFC;
border: 4px groove #F30;
border-radius: 20px;
header, footer {
color: #F30;
text-align: center;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
header img {
border-radius: 15px 15px 0 0;
width: 100%
/**top menu**/
nav {
width: 90%;
margin: 25px auto;
nav li {
list-style: none;
font-weight: bold;
display: inline;
/**menu link styles**/
nav li a {
display: inline-block;
font-weight: bold;
color: green;
text-decoration: none;
padding: 1.15em;
border: 2px outset green;
/**menu links on mouse over**/
nav li a:hover, nav li a:active, nav li a:focus { background: gold }
/**main content**/
article { padding: 2% }
figure img {
margin: 0 auto;
border: 3px solid #FFF;
border-radius: 10px;
box-shadow: 1px 2px 5px #333;
/**typography**/
header h1 {
font-size: 55px;
text-shadow: 2px 3px 3px #666;
header h2 {
font-size: 18px;
font-style: oblique
h3 { margin-top: 20px; }
p {
margin-bottom: 18px;
font-size: 18px;
color: #000;
figcaption {
text-align: center;
font-style: oblique;
margin-bottom: 18px;
</style>
</head>
<body>
<div id="wrapper">
<header>
<img src="http://www.urefillit.com/images/webpagepicture.jpg" alt="U Refill It banner">
<!--this is very good for search engines-->
<h1>U Refill It</h1>
<h2>Your source for mosquito magnet and mosquito killing machine replacement products: Octenol, Asian Tiger lure and Kaboom.</h2>
</header>
<!--top menu-->
<nav>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</a></li>
</ul>
</nav>
<!--main content-->
<article>
<h3>Article Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<figure>
<!--insert your image here-->
<img src="http://placehold.it/500x325" alt="figure">
<figcaption> Figure Caption </figcaption>
</figure>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</article>
<!--begin footer-->
<footer>
<small>© 2014 Your Site Name. All Rights Reserved</small> </footer>
<!--end wrapper--> </div>
</body>
</html>
Nancy O. -
Spry tabbed panels, opening a tabbed panel, problem with IE
i've have made a site, with tabbed panels,
all the pages are made of a template;
everythings works fine; in Firefox and Opera,
but only in IE when i open a tabbed panel from a menubar, the contents is opened behind my header location;
i've used spry 1.6.1 and spryUtils to open the tabbed panel.
because there no other posibilty to open a tabbed panel from my other page.
i've tested the site on CSS and all, and i've don't get any errors.
this site is only on our intranet, and DVD;
so is not a online site
i' dont have anything modified in the java script.
just changed some minor adjustments to the CSS of the tabbed panels
The page is containing a fixed footer and header, FOR all browsers therefore is the CSS IE hacks also.
and all other functions work normal.
i'm only a beginner at this
CSS
body,html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
body{
color: #000;
background-attachment: fixed;
background-image: url(../afbeeldingen/Sitepictures/HaupteingangPB.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 95%;
#img2 {
height: 2cm;
width: 2cm;
border:0;
#img {
margin-right: 10px;
height: 3cm;
width: 3cm;
border:0;
TD{
font-family: Arial;
font-size: 8pt;
line-height: normal;
vertical-align: top;
text-align: left;
#header-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 5;
#header-container {
height: 120px;
background-repeat: repeat-x;
background-position: left bottom;
#header {
width: 1040px;
margin: 0 auto;
position: relative;
#header-content{
width: 1040px;
position: relative;
background-image: url(../afbeeldingen/Sitepictures/background.jpg);
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
#header ul li {
float: left;
margin-right: 2px;
#container {
width: 1040px;
padding-top: 120px;
padding-bottom:50px;
background-color: #FFF;
margin-bottom: 0px;
left: auto;
right: auto;
margin-right: auto;
margin-left: auto;
position: relative;
height: auto;
min-height:100%;
#container a:link {
color: #00C;
text-decoration: none;
#container a:visited {
color: #F8495A;
text-decoration: none;
#container a:hover {
color: #00C;
text-decoration: underline;
#container a:active {
color: #00B004;
text-decoration: none;
#kolommaker
width:1040px;
background-color: #CEECAE;
height: 100%;
float: left;
#boven {
width: 1040px;
position: static;
height: 180px;
background-color: #FFF;
#sitecontent {
width: 1040px;
background-color: #FFF;
height: 100%;
#TabbedPanels1 {
width: 1040px;
position: static;
background-color: #FFF;
height: 100%;
float: left;
.links, .rechts, .midden {
height:100%;
display: inline-table;
background-color: #FFF;
.links{
float: left;
width: 330px;
font-size: 12px;
padding-top: 5px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
.rechts{
padding-top: 5px;
float: right;
width: 330px;
text-align: left;
font-size: 12px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
.midden{
padding-top: 5px;
width: 330px;
text-align: left;
font-size: 12px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
#footer-wrap {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 5;
#footer-container {
height: 50px;
background-image: url(../images/footer-bg.png);
background-repeat: repeat-x;
background-position: left bottom;
#footer {
width: 1040px;
margin: 0 auto;
position: relative;
background: #FFF;
#contentfooter {
width: 1040px;
margin-top: 0;
margin-right: auto;
position:relative;
margin-bottom: 0;
margin-left: auto;
height:50px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #F00;
text-align: center;
.leftfooter {
float: left;
.rightfooter {
float: left;
#iframe {
height: 600px;
min-height: 600px; }
.result_title a:link {
color: #00C;
text-decoration: none;
.result_title a:visited {
color: #F8495A;
text-decoration: none;
.result_title a:hover {
color: #00C;
text-decoration: underline;
.result_title a:active {
color: #00B004;
text-decoration: none;
.description { font-size: 100%; color: #008000; }
.docs {border:0;}
.pdf {border:0;}
.images {border:0;}
.excell {border:0;}
.exe {border:0;}
.clock {
text-align: center;
background: #FFF;
border: 1px solid #CCC;
height: 20px;
width: 175px;
font-size: 12px;
.clearfix {
content:".";
width:100%;
height: 0;
clear: both;
display: block;
visibility: hidden;
/* Hides from IE-mac \*/
.clearfix {height: 1%;} /* for IE/Mac */
CSS IE hacks
html{
overflow: hidden;
body{
overflow: auto;
#header-wrap, #footer-wrap {
position: absolute;
#header-container, #footer-container,{
margin-right: 16px;
#ie6-container-wrap {
position: absolute;
width: 100%;
height:100%;
overflow:auto;
#TabbedPanels1 {
position: absolute;
.TabbedPanels {
position: absolute;
#boven {
padding-top: 100px;
#container {
padding-top: 60px;
height :100%;
#sitecontent {
height: 100%;
#footer-wrap {
bottom: -1px;
#header img, #footer img
display: block;
Template
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Naamloos document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
<script type="text/javascript" src="../Scripts/paswoord.js"></script>
<!--[if lt IE 7 ]>
<link href="../Stijlbladen/ie6hacks.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<!--ZOOMSTOP-->
<div id="header-wrap">
<div id="header-container">
<div id="header">
<div id="header-content">
<table width="890" border="0" cellspacing="1">
<tr>
<td width="100" height="50"><a href="../Sites/Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
<td width="680">
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
<ul class="sub">
<li><b>Alg. Procedure</b></li>
<li><a href="#nogo3" class="fly">Car Policy</a>
<ul>
<li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
<li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">Gsm Policy</a>
<ul>
<li><a href="#nogo8">Gsm Policy NL</a></li>
<li><a href="#nogo9">Gsm Policy FR</a></li>
</ul>
</li>
<li><b>Diversen</b></li>
<li><a href="../Algemeen/Skills.htm">Skills</a></li>
<li><a href="../Sites/Verlof-Recup.html">Verlof</a></li>
<li><a href="../Sites/Verlof-Recup.html">Recup</a></li>
</ul>
</li>
<li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
<ul class="sub">
<li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
<li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
<li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
<li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
<li><a href="#nogo7" class="fly">Onkostennota</a>
<ul>
<li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
<li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">Online Tools</a>
<ul>
<li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
<li><a href="../Sites/login.html">Online map</a></li>
<li><a href="../Sites/Fujitsu.html">Fujitsu Portal</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">FAX Franchisé</a>
<ul>
<li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
<li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
</ul>
</li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
<li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
<li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
</ul>
</li>
<li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
<ul class="sub">
<li><a href="../Sites/Aldi.html">Aldi</a></li>
<li><a href="../Sites/Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
<li><a href="../Sites/Bonita.html">Bonita</a></li>
<li><a href="../Sites/Carrefour.html">Carrefour</a></li>
<li><a href="../Sites/C&A.html">C & A</a></li>
<li><a href="../Sites/Decathlon.html">Decathlon</a></li>
<li><a href="../Sites/Delhaize.html">Delhaize</a></li>
<li><a href="../Sites/Ici Paris XL.html">Ici Paris</a></li>
<li><a href="../Sites/Ikea.html">Ikea</a></li>
<li><a href="../Sites/Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
<li><a href="../Sites/Kruidvat.html">Kruidvat</a></li>
<li><a href="../Sites/Lidl.html">Lidl</a></li>
<li><a href="../Sites/Living Tomorrow.html">Living Tomorrow</a></li>
<li><a href="../Sites/Mediamarkt.html">Mediamarkt</a></li>
<li><a href="../Sites/Scapino.html">Scapino</a></li>
<li><a href="../Sites/Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
<li><a href="../Sites/Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
</ul>
</li>
<li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
<ul class="sub">
<li><a href="../Sites/third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
<li><a href="../Sites/third party.html?tab=4#tabbedpanels1">HP</a></li>
<li><a href="../Sites/third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
<li><a href="../Sites/third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
<li><a href="../Sites/third party.html?tab=1#tabbedpanels1">Scanners</a></li>
<li><a href="../Sites/third party.html?tab=0#tabbedpanels1">Scales</a></li>
</ul>
</li>
<li class="top"><a href="../Sites/Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
<li class="top"><a href="../Sites/Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
</ul>
</td>
</tr>
</table>
<table width="1038" border="0" cellspacing="1">
<tr>
<td><form method="get" action="../indexer/search.html">
<input type="text" name="zoom_query" size="30" />
<input type="submit" value="Search" />
</form></td>
<td> </td>
<td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
</script></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!--ZOOMRESTART-->
<div id="ie6-container-wrap" >
<div id="container">
<!-- TemplateBeginEditable name="EditRegion1" -->
<div id="boven">test<br />
<br />
</div>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Algemeen</li>
<li class="TabbedPanelsTab" tabindex="0">Tools</li>
<li class="TabbedPanelsTab" tabindex="0">Pc's</li>
<li class="TabbedPanelsTab" tabindex="0">Kassa's</li>
<li class="TabbedPanelsTab" tabindex="0">Selfscanning</li>
<li class="TabbedPanelsTab" tabindex="0">Self Check Outs</li>
<li class="TabbedPanelsTab" tabindex="0">EN andere</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven
<p>Hier wordt de inhoud voor id midden weergegeven</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
<div class="TabbedPanelsContent">
<div class="links">Hier wordt de inhoud voor id left weergegeven</div>
<div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
<div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
</div>
</div>
<div class="clearfix:after"> </div>
</div>
<!-- TemplateEndEditable -->
</div>
<div class="clearfix:after"> </div>
</div>
<!--ZOOMSTOP-->
<div id="footer-wrap">
<div id="footer-container">
<div id="footer">
<div id="contentfooter"><div class="leftfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
<div class="rightfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
//-->
</script>
</body>
</html>
PAGE where i open the tabbed panels
<!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"><!-- InstanceBegin template="/Templates/Naamloos-2.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Third Party</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
<script type="text/javascript" src="../Scripts/paswoord.js"></script>
<!--[if lt IE 7 ]>
<link href="../Stijlbladen/ie6hacks.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<!--ZOOMSTOP-->
<div id="header-wrap">
<div id="header-container">
<div id="header">
<div id="header-content">
<table width="890" border="0" cellspacing="1">
<tr>
<td width="100" height="50"><a href="Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
<td width="680">
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
<ul class="sub">
<li><b>Alg. Procedure</b></li>
<li><a href="#nogo3" class="fly">Car Policy</a>
<ul>
<li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
<li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">Gsm Policy</a>
<ul>
<li><a href="#nogo8">Gsm Policy NL</a></li>
<li><a href="#nogo9">Gsm Policy FR</a></li>
</ul>
</li>
<li><b>Diversen</b></li>
<li><a href="../Algemeen/Skills.htm">Skills</a></li>
<li><a href="Verlof-Recup.html">Verlof</a></li>
<li><a href="Verlof-Recup.html">Recup</a></li>
</ul>
</li>
<li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
<ul class="sub">
<li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
<li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
<li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
<li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
<li><a href="#nogo7" class="fly">Onkostennota</a>
<ul>
<li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
<li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">Online Tools</a>
<ul>
<li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
<li><a href="login.html">Online map</a></li>
<li><a href="Fujitsu.html">Fujitsu Portal</a></li>
</ul>
</li>
<li><a href="#nogo7" class="fly">FAX Franchisé</a>
<ul>
<li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
<li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
</ul>
</li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
<li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
<li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
</ul>
</li>
<li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
<ul class="sub">
<li><a href="Aldi.html">Aldi</a></li>
<li><a href="Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
<li><a href="Bonita.html">Bonita</a></li>
<li><a href="Carrefour.html">Carrefour</a></li>
<li><a href="C&A.html">C & A</a></li>
<li><a href="Decathlon.html">Decathlon</a></li>
<li><a href="Delhaize.html">Delhaize</a></li>
<li><a href="Ici Paris XL.html">Ici Paris</a></li>
<li><a href="Ikea.html">Ikea</a></li>
<li><a href="Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
<li><a href="Kruidvat.html">Kruidvat</a></li>
<li><a href="Lidl.html">Lidl</a></li>
<li><a href="Living Tomorrow.html">Living Tomorrow</a></li>
<li><a href="Mediamarkt.html">Mediamarkt</a></li>
<li><a href="Scapino.html">Scapino</a></li>
<li><a href="Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
<li><a href="Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
</ul>
</li>
<li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
<ul class="sub">
<li><a href="third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
<li><a href="third party.html?tab=4#tabbedpanels1">HP</a></li>
<li><a href="third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
<li><a href="third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
<li><a href="third party.html?tab=1#tabbedpanels1">Scanners</a></li>
<li><a href="third party.html?tab=0#tabbedpanels1">Scales</a></li>
</ul>
</li>
<li class="top"><a href="Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
<li class="top"><a href="Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
</ul>
</td>
</tr>
</table>
<table width="1038" border="0" cellspacing="1">
<tr>
<td><form method="get" action="../indexer/search.html">
<input type="text" name="zoom_query" size="30" />
<input type="submit" value="Search" />
</form></td>
<td> </td>
<td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
</script></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!--ZOOMRESTART-->
<div id="ie6-container-wrap" >
<div id="container">
<!-- InstanceBeginEditable name="EditRegion1" -->
<div id="boven"><img src="../afbeeldingen/Sitepictures/Datalogic_logo.jpg" alt="Datalogic" name="img2" width="100" height="100" id="img2" /> <img src="../afbeeldingen/Sitepictures/PSC-Logo4C.jpg" alt="PSC" name="img2" width="450" height="160" id="img2" /> <img src="../afbeeldingen/Sitepictures/NCRlogo.jpg" alt="NCR" name="img2" width="116" height="116" id="img2" /> <img src="../afbeeldingen/Sitepictures/symbol-logo.jpg" alt="Symbol" name="img2" width="200" height="150" id="img2" /></div>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">kassascanners</li>
<li class="TabbedPanelsTab" tabindex="0">Handscanners</li>
<li class="TabbedPanelsTab" tabindex="0">Scales</li>
<li class="TabbedPanelsTab" tabindex="0">Kassaprinters</li>
<li class="TabbedPanelsTab" tabindex="0">HP</li>
<li class="TabbedPanelsTab" tabindex="0">Fujitsu-Siemens</li>
<li class="TabbedPanelsTab" tabindex="0">Datalogic</li>
<li class="TabbedPanelsTab" tabindex="0">Vensafe</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
<div class="TabbedPanelsContent">
<div class="links"></div>
<div class="rechts"></div>
<div class="midden"></div>
</div>
</div>
<div class="clearfix:after"> </div>
</div>
<!-- InstanceEndEditable -->
</div>
<div class="clearfix:after"> </div>
</div>
<!--ZOOMSTOP-->
<div id="footer-wrap">
<div id="footer-container">
<div id="footer">
<div id="contentfooter"><div class="leftfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
<div class="rightfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
//-->
</script>
</body>
<!-- InstanceEnd --></html>
TABBED PANELS CSS
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
width: 1040px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
position: static;
float: left;
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
position: static;
top: 1px;
float: left;
font: bold 0.7em sans-serif;
background-color: #FF0033;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 5px;
padding-bottom: 4px;
padding-left: 5px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #75A7D0;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
border-bottom: 2px solid #EEE;
color: #FFF;
background-color: #000;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
float: left;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
padding: 4px;
height: 100%;
width: 1032px;
float: left;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
background-color: #FFF;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #CCC;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;added also the css for the menubar
pro_dropdown_3.css
.preload1 {
background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
.preload2 {
background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
#nav {
padding:0;
margin:0;
list-style:none;
height:38px;
position:relative;
z-index:500;
font-family:arial, verdana, sans-serif;
background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
background-repeat: repeat-x;
#nav li.top {
display:block;
float:left;
width: auto;
#nav li a.top_link {
display:block;
float:left;
height:35px;
line-height:33px;
color:#ccc;
text-decoration:none;
font-size:11px;
font-weight:bold;
cursor:pointer;
background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
width: 85px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 2px;
#nav li a.top_link span {
float:left;
display:block;
height:35px;
background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
background-repeat: no-repeat;
background-position: right top;
width: 70px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
#nav li a.top_link span.down {
float:left;
display:block;
padding:0 10px 0 12px;
height:35px;
background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
background-repeat: no-repeat;
background-position: right top;
#nav li:hover a.top_link {
color:#fff;
background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
background-repeat: no-repeat;
#nav li:hover a.top_link span {
background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
background-repeat: no-repeat;
background-position: right top;
#nav li:hover a.top_link span.down {
padding-bottom:3px;
background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
background-repeat: no-repeat;
background-position: right top;
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
background-color: #50b5d0;
background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
background-repeat: no-repeat;
background-position: 80px 6px;
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
color:#fff;
background-color: #3f96a9;
background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
background-repeat: no-repeat;
background-position: 80px 6px;
#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
color:#fff;
border-color:#fff;
background-color: #3f96a9;
background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
background-repeat: no-repeat;
background-position: 80px 6px;
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
color:#000;
border-color:#50b5d0;
background-color: #50b5d0;
background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
background-repeat: no-repeat;
background-position: 80px 6px;
Maybe you are looking for
-
How to find serial number, how to find serial number
how to find serial number on Macbook air for registering Applecare?
-
How to create the exe file for java project.
How to create the exe file for java project. am done the project in java swing , i like to create the project in exe format, so any one help for me, send the procedure for that. thanking u.
-
Attempting To Bring Logic Pro Home..
Hello forum. First time posting so I help you can help with kindness. For the record, I have used the search function and will continue to do s0, but I'd like to have some recent opinions on purchasing a new Macbook Pro with Logic 7. I currently use
-
Black ink cartridge mafrunction on hp 6520
07-27-2015 07:51 AMNew HP black cartridge wont print even though level check says it's full.photosmart 6520,Still no luck after folowing advice on previous posts (ran printhead clean, made sure no adhesive on cartridge and unplugged and replugged p
-
Why "condition value column" is there 2times in sales order under condition
Hi Friends, Can any one say that why "condition value column" is there 2 times under condition tab in sales order and in which scenario it will be useful. Thanks in advance JM.