Stacking div in IE
I'm having a problem with this page displaying correctly in IE, only. Preview in any other browser, and you'll see how the page is correctly displayed. The navigation/menu should display on the right, and the left div displays the content that is selected from the right. Any idea why this page is not working right in IE? Link example here
You have quite a few errors in your code and IE is the worst at guessing what was meant when it runs into errors.
Run your page through the validator here: http://validator.w3.org/ and clean out the errors. If it still displays wrong in IE after those are taken care of, post back and we can take a closer look.
Similar Messages
-
How to make those shadowed borders left and right of your page?
Hi, Can someone tell me if I am on the right track? Here's what I've done so far. I've specified the background colour in the properties section. I've set up a 3 column table (fixed size) that has small columns left and right and a big one in the middle. For those small columns I've pickwhipped to 2 small gifs with the shadow. Previewed in Safari and everything looks ok.
My question: is this the best way to do this? Or does it need a CSS approach? And if so, how?
Now I want to give the bottom a shadow as well. Do I proceed in the same way? So make a left corner, right corner and a bottom? I'm working with GL CS2.The best way to slice things up depends on how the page is layed out. If the content area has a fixed width that centers (or doesn't), then might make more sense to have 3 vertically stacked divs with the background and drop shadows, then nest another div in the middle with margins for the actual content. Or, if the content size is completely fluid, the same structure could still work with floating divs (or absolutely positioned relative to a single container?) holding the corner images. Or there's always the old-school tables way of slicing things up (though I'd avoid that).
There's more than one way to do it, and I don't know that any single option is necessarily the "right" way to go... as long as it works and validates? -
Why is bad alignment happening when I go to my website?
Hello,
Go to http://www.peterdanko.com/peterdanko.com/greenbelt2.html
Please note on the bottom of the <div#right_text_column....there should be three text links: Pricing, belt colors, and finishing...and they should all be in a row....not a column like shown in the link above. BTW..for what its worth, it looks ok in design view. Could this also be why there is a green underline in line 6 of re: header_footer.css rules? I've checked all my divs and as far as I can tell they look OK.
Thanks!<div>s are block level elements. They'll always occupy the full width of their containing element unless you style them otherwise.
In this case, pricing, belt colors and finishing are three stacked <div>s each taking the full width of <div id="right_text_column">.
You need to give them each a smaller width (say 30% each of the space), then float them next to each other
e.g.
#pricing, #finishes, #belt_samples {
width: 30%;
float: left; -
Should I use the FLOAT tag here?
Hello again- Should I be using the FLOAT tag in cases where I have several vertically stacked DIVs that have the WIDTH set at 100%? Or am I just being silly in thinking I should? Thanks in advance-
No.
float is something you use when you need text to flow around something. And if you're trying to do a column or an aside, you'd definitely not want it to float, unless it sits inside a larger <div> or element with text.
Here's an example:
.container {
width: 960px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
background-image: url("../images/bkg.png");
-webkit-box-shadow: 0 0 20px #111;
box-shadow: 0 0 20px #111;
padding: 1px;
.sidebar1 {
float: left;
width: 180px;
padding-bottom: 10px;
color: #fff;
.content {
padding: 10px 0;
width: 780px;
float: left;
Here, you have a container and a sidebar and main content area. Both are floated left, in that they start at the left hand side of the container.
-Mark -
Printing content in SpryTabbedPanels
Does anyone have any idea how to disable the Spry script
functions so that the content will linearize when using a print
style sheet if one uses the SpryTabbedPanels widget? I need the
tabs and panels to show on the screen, but the tabs to disappear on
the panel content to linearize. This was easy to do with stacked
divs (and no script), but that method had other issues.
The tabbed interface lives within a Dreamweaver nested
template.
Any suggestions?
Thanks.
Skip KeatsHi Skip,
Do you mean something like this?
<style type="text/css" media="print">
.TabbedPanelsTabGroup {
display: none !important;
.TabbedPanelsContent {
display: block !important;
overflow: visible !important;
height: auto !important;
</style>
--== Kin ==-- -
Is "height:100%" on divs or tables pretty much safe to use at this point?
I know it wasn't, a few years ago... and required a bunch of hacks to work universally.JTANNA wrote:
No because my ESP is down today because we are still in a holiday mode (I am based in chilly London). I spent just 5 minutes on that code and now I have spent another 3 minutes to modify it slightly so use this CSS:
height: 100%;
body, html {
height: 100%;
body {
width: 100%;
margin: auto;
text-align: center;
#wrapper {
width: 980px;
height: 100%;
position: relative;
display: table;
margin: 0 auto;
text-align: left;
overflow: scroll;
#left {
display: table-cell;
width: 300px;
background-color: gray;
vertical-align: middle;
#images {
display: table-cell;
background-color: silver;
max-width: 680px;
text-align: left;
vertical-align: middle;
Having observed the code more closely, I see that this does not align the text with the image if there is more than one image. It treats Text#1, Image#1, Text#2 and Image#2 as 4 distinct elements. In other words, if the amount of text on the first row is minimal, the text on the next row will be too high in relation to the image on that row.
The only solution I see to this problem, is taking id="left" out of the flow via absolute postitioning, and using it only as a visual aid (to see the white column), and then superimposing stacked divs that would each contain 1 text and 1 image.
i.e.:
<div id="wrapper">
<div id="left></div> <-- just a 100% tall white div, for appearance
<div>
<div>Text goes here.</div>
<img src="image">
</div>
<div>
<div>Text goes here.</div>
<img src="image">
</div>
</div>
So the text will always be correctly paired with its related image.
Feel free to correct me if I err, here. -
Hi,
I've made a picture gallery
http://www.olicorse.com/portfolio/graphics/logos/logos.html
and have positioned the captions under each image using Absolute
Positioned divs.
For some reason it is displaying oddly in Internet Explorer,
although it works fine in Firefox and Safari and when I asked why,
a member on here though told me I shouldn't use AP Divs because
they will always stay in the exact same place so if the viewer
increases the font or something, everything else will move and this
might be the problem.
However, in order to make the captions appear and disappear
when the viewer changes the image, I have stacked them one on top
of each other and used Hide/Show behaviours. If I just use Static
Positioned divs, the captions will appear after one another so that
there is a big gap when they are hidden.
Is there a way of stacking Static Divs on top of each other,
rather than having them appear after one another? Failing that, can
anyone take a look at the site in IE and try and work out what's
going wrong? I also think that it's not showing the margin I have
added to the main gallery picture as this is what pushed the footer
down to make room for the caption.
Please help!!!Please do not start a new thread for a problem that you have
already posted.
It makes it very hard for us to help you.
What also makes it very hard for us to help you is when you
a) don't read
the replies you get fully, and b) don't then ask questions
about the things
you don't understand. You have not done this.
Can we take this back to the original thread, please.
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
==================
"olicorse" <[email protected]> wrote in
message
news:[email protected]...
> Hi,
>
> I've made a picture gallery
>
http://www.olicorse.com/portfolio/graphics/logos/logos.html
and have
> positioned
> the captions under each image using Absolute Positioned
divs.
>
> For some reason it is displaying oddly in Internet
Explorer, although it
> works
> fine in Firefox and Safari and when I asked why, a
member on here though
> told
> me I shouldn't use AP Divs because they will always stay
in the exact same
> place so if the viewer increases the font or something,
everything else
> will
> move and this might be the problem.
>
> However, in order to make the captions appear and
disappear when the
> viewer
> changes the image, I have stacked them one on top of
each other and used
> Hide/Show behaviours. If I just use Static Positioned
divs, the captions
> will
> appear after one another so that there is a big gap when
they are hidden.
>
> Is there a way of stacking Static Divs on top of each
other, rather than
> having them appear after one another? Failing that, can
anyone take a look
> at
> the site in IE and try and work out what's going wrong?
I also think that
> it's
> not showing the margin I have added to the main gallery
picture as this is
> what
> pushed the footer down to make room for the caption.
>
> Please help!!!
> -
Stacking a Div ontop of another Div inside of a div?
ok so i am not a programmer, just a designer doing a family a favor building him a website. In using divs i am trying to get a div to overlap another div, while inside another div. confused? ok in simple: i have a div "wrapper" that holds the website center since the design is off center, inside this div i have another div which holds my body of the website "main", also inside the wrapper div i have a second div called "element" which is to sit top left and overlap the main div. The idea is to have an image cutting into the top left of the website, while keeping the rest of the site centered. I have attached a sample picture, and will post the code. if anyone can help please let me know thank you.
CODE:
<body>
<div id="wrapper">
<div id="element"><img src="images/Gears.gif" width="305" height="310" alt="gear image" /></div>
<div id="main">
<div id="header">
<h1><img src="" alt="" name="Picture" width="100" height="180" align="right" id="Picture" style="background-color: #00FF00" />Don Pike <span class="eng">B.Sc. P. Eng.</span></h1>
<h3>text</h3>
<h3> </h3>
<h3>phone </h3>
<h3>email</h3>
<h3> </h3>
<h3>address</h3>
<h3>city</h3>
</div>
<div id="content">
<h2>Lorem ipsum dolor sit amet,</h2>
<p> consectetur adipiscing elit. Suspendisse vitae pulvinar enim. Nunc eget ipsum diam, quis commodo nisi. Donec blandit mi mi, sit amet facilisis magna. Mauris eget diam est. Sed condimentum, nisi nec volutpat tincidunt, massa elit faucibus arcu, at dignissim purus tellus et velit. Integer at fringilla lacus. Nullam egestas leo vel mauris pretium gravida. </p>
</div>
<div id="footer">
<table width="432" align="center" cellspacing="15">
<tr>
<td width="144"><a href="resume.html"><img src="images/Gears_03.gif" width="144" height="144" alt="resume" /></a></td>
<td width="144"><img src="images/Gears_05.gif" width="144" height="144" alt="portfolio" /></td>
<td width="122"><img src="images/Gears_07.gif" width="144" height="144" alt="about me" /></td>
</tr>
</table>
<p> </p>
</div>
</div>
</div>
</body><head>
<style>
#page{
width:100%;
height:100%;
text-align:center;
#wrapper {
width: 860px;
position: relative;
float: none;
margin: 0px;
height: auto;
padding: 0px;
margin:0 auto;
#element {
top:0px;
left:0px;
padding: 0px;
height: 310px;
width: 305px;
position: absolute;
z-index: 100;
#main {
background-color: #333;
height: auto;
width: 550px;
border: 1px solid 333333;
position: absolute;
float: right;
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
left: 155px;
top: 125px;
#header {
padding: 0px;
height: 180px;
width: 360px;
float: none;
position: relative;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 170px;
#content {
color: 555555;
background-color: #FFF;
padding: 20px;
height: auto;
width: 470px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
#footer {
background-color: #FFF;
padding: 0px;
height: 180px;
width: 510px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
body {
background-color: #CCC;
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 25px;
color: #FFF;
margin: 0px;
padding: 0px;
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCC;
margin: 0px;
padding: 0px;
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
color: #000;
padding: 0px;
margin: 0px;
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #333;
margin: 0px;
padding: 0px;
.eng {
font-size: 12px;
ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #333;
</style>
</head>
<body>
<div id = "page">
<div id="wrapper">
<div id="element"><img src="images/Gears.gif" width="305" height="310" alt="gear image" /></div>
<div id="main">
<div id="header">
<h1><img src="" alt="" name="Picture" width="100" height="180" align="right" id="Picture" style="background-color: #00FF00" />Don Pike <span class="eng">B.Sc. P. Eng.</span></h1>
<h3>text</h3>
<h3> </h3>
<h3>phone </h3>
<h3>email</h3>
<h3> </h3>
<h3>address</h3>
<h3>city</h3>
</div>
<div id="content">
<h2>Lorem ipsum dolor sit amet,</h2>
<p> consectetur adipiscing elit. Suspendisse vitae pulvinar enim. Nunc eget ipsum diam, quis commodo nisi. Donec blandit mi mi, sit amet facilisis magna. Mauris eget diam est. Sed condimentum, nisi nec volutpat tincidunt, massa elit faucibus arcu, at dignissim purus tellus et velit. Integer at fringilla lacus. Nullam egestas leo vel mauris pretium gravida. </p>
</div>
<div id="footer">
<table width="432" align="center" cellspacing="15">
<tr>
<td width="144"><a href="resume.html"><img src="images/Gears_03.gif" width="144" height="144" alt="resume" /></a></td>
<td width="144"><img src="images/Gears_05.gif" width="144" height="144" alt="portfolio" /></td>
<td width="122"><img src="images/Gears_07.gif" width="144" height="144" alt="about me" /></td>
</tr>
</table>
<p> </p>
</div>
</div>
</div>
</div>
</body>
SORTED? -
Div Image not showing in Live View
Why can't I see my image placed within a Div tag in Live View? Makes no sense. I've changed the z-index to 1000, also tried 1 nothing changes. Please advise if anyone can help. Thank you!
I've applied BOLD to the Div tag in question
HTML Code:
<!doctype html>
<html><!-- InstanceBegin template="/Templates/pavemend_website1.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Permanent Concrete and Asphalt Repair Home Page</title>
<meta name="description" content="CeraTech's Pavemend family of high performance concrete repair products have become the choice of professionals across the country for their rapid return to service, versatility, ease of use, and superior durability.">
<style type="text/css">
#apDiv8 {
position: absolute;
width: 200px;
height: 115px;
z-index: 2;
</style>
<!-- InstanceEndEditable -->
<link href="pavmend_styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
#pavemendlogo {
background-image: url(_images/NEW%202012%20PAVEMEND%20LOGO%20WHITE.png);
background-repeat: no-repeat;
height: 78px;
width: 196px;
#prochoicetype {
background-image: url(_images/pro_choice_concrete_type.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px;
#prochoicetype {
background-image: url(_images/pro_choice_concrete_type.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px;
</style>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div id="wrapper">
<div class="container">
<div id="apDiv1"><!-- InstanceBeginEditable name="HeaderLogo" --><a href="pavemend_home_page.html"><img src="_images/NEW 2012 PAVEMEND LOGO WHITE.png" width="197" height="79" class="fltlft" /></a>
<div id="resources"></div>
<!-- InstanceBeginEditable name="Header" -->
<div class="headerResources"></div>
<!-- InstanceEndEditable -->
<nav>
<ul id="menu">
<li><a href="pavemend_home_page.html">OUR PRODUCTS ▼</a>
<ul>
<li><a href="slq_product_page.html">SLQ<sup>®</sup></a></li>
<li><a href="sl_product_page.html">SL<sup>®</sup></a></li>
<li><a href="dotline_product_page.html">DOTLine™</a></li>
<li><a href="15.0_product_page.html">Pavemend 15.0<sup>®</sup></a></li>
<li><a href="TR_product_page.html">Pavemend TR<sup>®</sup></a></li>
<li><a href="VR_product_page.html">Pavemend VR<sup>®</sup></a></li>
<li><a href="IA_product_page.html">Instant Asphalt™</a></li>
<li><a href="kemrok_product_page.html">KEMROK™</a></li>
<li><a href="kemrokVR_product_page.html">KEMROK VR™</a></li>
<li><a href="firerok_product_page.html">FIREROK™</a></li>
<li><a href="antiwear_product_page.html">Anti-Wear™</a></li>
<li><a href="antiscale_product_page.html">Anti-Scale™</a></li>
</ul>
</li>
<li><a href="resources_page.html">RESOURCES</a></li>
<li><a href="technical_support.html">TECHNICAL SUPPORT</a></li>
<li><a href="contact_page.html">CONTACT US</a></li>
</ul>
</nav>
</section>
<!-- InstanceBeginEditable name="Sidebar" -->
<div class="sidebarleftlong">
<nav>
<ul>
<li><a href="#">PAVEMEND PRODUCT <br> BROCHURE</a></li>
<p><li><a href="#">KEEP TRAFFIC MOVING <br> BROCHURE</a></li></p>
<p><li><a href="#">CASE STUDIES</a></li></p>
<p><li><a href="#">INSTANT ASPHALT REPAIR</a></li></p>
<p><li><a href="#">SL PRODUCT VIDEO</a></li></p>
<p><li><a href="#">SLQ PRODUCT VIDEO</a></li></p>
<p><li><a href="#">DOTLINE FIELD <br> APPICATION VIDEO</a></li></p>
</ul>
</nav>
<div id=""></div>
<!-- end .sidebar1 --> </div>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="Content" -->
<div class="content">
<p> </p>
<img src="_images/resources_header.png" alt="slheader" width="553" height="31" class="productlogos" />
</section>
<p> </p>
<section>
<p><strong>Pavemend</strong><sup>®</sup> Rapid, Permanent Concrete and Asphalt repair products are quickly becoming the choice for Turnpike, State DOT Bridge Crews and discriminating engineers who value superior, permanent repairs and reduced traffic disruptions.</p>
<p>Typical repair applications include full and partial depth bridge deck repairs, bridge header joints, approach slabs, form & pour repairs, dowel bar retrofits, joint nosings and more. <strong>Pavemend</strong><sup>®</sup> products require only the addition of water, with no bonding agents or curing requirements and offer all season rapid repair capability.</p>
<p>Featuring technology developed here in the USA, <strong>Pavemend</strong><sup>®</sup> (by CeraTech Inc) products are easier to use, offer greater durability, provide superior return on investment, and are by far the most sustainable repair products available today.</p>
<p><img src="_images/Done Smart Logo.png" width="150" height="17" alt="donesmartlogo" />
</section>
<!-- end .content --></div>
<!-- InstanceEndEditable -->
<div class="footer"><!-- InstanceBeginEditable name="Footer Logo" --><img src="_images/NEW 2012 PAVEMEND LOGO WHITE.png" width="160" height="64" class="flt_rgt" /><!-- InstanceEndEditable -->
<table width="510" summary="footer material">
<tr>
<td width="210"><strong><em>Manufactured by</em></strong></td>
<tr>
<td><img src="_images/CTI_logo_white.png" width="200" height="47" alt=""/>
<td width="50" align="center"><a href="#../twitter.com/Pavemend">Twitter</a>
<div id="apDiv7"></div>
<td><strong><em>Planet Friendly Technology</em></strong></td>
</tr>
</table>
<div id="apDivPFT1"></div>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
<!-- InstanceEnd --></html>
CSS:
@charset "UTF-8";
/* BEGIN HORIZONTAL DROP-MENU */
#menu {
clear: left;
position: relative;
width: 100%; /**adjust width as needed**/
margin: 0;
padding: 0;
background-image: url(_images/topnavpanel.png);
color: #FFFFFF;
#menu ul {
margin: 0;
padding: 0
#menu li {
list-style: none;
float: left;
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #000000;
/**top level menu**/
#menu li a {
display: inline-block;
text-decoration: none;
/* adjust width as needed or use auto */
width: 13em;
padding: 8px;
font-weight: bold;
line-height: 12px;
color: #000;
border-top-style: none;
font-size: 90%;
margin-bottom: 0;
margin-left: 2%;
margin-right: 2%;
margin-top: 0;
border-bottom-style: none;
/**top menu style on mouse over**/
#menu li:hover > a {
color: #FFF;
width: 13em;
/**sub-menu**/
#menu li ul {
display: none;
text-align: center;
padding: 0;
margin-bottom: 0;
margin-left: 40px;
margin-right: 0;
margin-top: 0;
border-bottom-style: none;
/**sub-menu, help for older IE**/
#menu li:hover ul, #menu li.hover ul {
display: block;
position: absolute;
z-index:1000;
padding: 0;
#menu li:hover li, #menu li.hover li {
float: none;
background-color: #E1D5BB;
/**drop-menu style**/
#menu li:hover li a, nav li.hover li a {
width: 14em; /* adjust width as needed or use auto */
margin-top: 0;
/**drop-menu style on mouse over**/
#menu li li a:hover {
color: #FFF;
background-color: #03C;
/* Clear floated elements at the end*/
#menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
/**END HORIZONTAL DROP-MENUS STYLES**/
#apDiv11 {
position: absolute;
width: 190px;
height: 180px;
z-index: 2;
background-image: url(_images/WomanPhone.png);
background-position: 10px;
background-repeat: no-repeat;
margin-top: 240px;
#apDivSustainability {
position: absolute;
width: 200px;
height: 420px;
z-index: 3;
background-image: url(_images/sustainabilitySB2.png);
background-repeat: no-repeat;
#apDiv10 {
position: absolute;
width: 75px;
height: 73px;
z-index: 2;
background-image: url(_images/PFTLogo.png);
float: right;
margin-left: 650px;
margin-top: -110px;
#apDiv9 {
position: absolute;
width: 200px;
height: 207px;
z-index: 3;
background-image: url(_images/slphoto1.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivslqphoto {
position: absolute;
width: 200px;
height: 267px;
z-index: 3;
background-image: url(_images/slqphoto.jpg);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivdotlinephoto {
position: absolute;
width: 200px;
height: 267px;
z-index: 3;
background-image: url(_images/dotlinephoto.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDiv15photo {
position: absolute;
width: 200px;
height: 179px;
z-index: 3;
background-image: url(_images/15.0_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivTRphoto {
position: absolute;
width: 200px;
height: 267px;
z-index: 3;
background-image: url(_images/TR_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivAWphoto {
position: absolute;
width: 200px;
height: 150px;
z-index: 3;
background-image: url(_images/AWPhoto.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivASphoto {
position: absolute;
width: 200px;
height: 134px;
z-index: 3;
background-image: url(_images/ASphoto.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivVRphoto {
position: absolute;
width: 200px;
height: 150px;
z-index: 3;
background-image: url(_images/VR_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivIAphoto {
position: absolute;
width: 200px;
height: 162px;
z-index: 3;
background-image: url(_images/IA_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivKemrokphoto {
position: absolute;
width: 200px;
height: 207px;
z-index: 3;
background-image: url(_images/KEMROK%20pic.jpg);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivFirerokphoto {
position: absolute;
width: 200px;
height: 248px;
z-index: 3;
background-image: url(_images/Firerok_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivtechsupportphoto {
position: absolute;
width: 200px;
height: 248px;
z-index: 3;
background-image: url(_images/techsupport_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivKemrokVRphoto {
position: absolute;
width: 200px;
height: 207px;
z-index: 3;
background-image: url(_images/Kemrok%20VR%20pic.jpg);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDiv8 {
position: absolute;
width: 180px;
height: 167px;
z-index: 2;
background-image: url(_images/SLbktandbag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 520px;
#apDivslq {
position: absolute;
width: 80px;
height: 105px;
z-index: 2;
background-image: url(_images/SLQbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -125px;
margin-left: 515px;
#apDivdotlinebag {
position: absolute;
width: 88px;
height: 167px;
z-index: 2;
background-image: url(_images/dotlinebag.png);
background-repeat: no-repeat;
float: right;
margin-top: -165px;
margin-left: 280px;
#apDivkemrokbag {
position: absolute;
width: 121px;
height: 167px;
z-index: 2;
background-image: url(_images/kemrok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -165px;
margin-left: 570px;
#apDivPFT1 {
position: absolute;
width: 121px;
height: 167px;
z-index: 2;
background-image: url(_images/PFTLogo.png);
background-repeat: no-repeat;
float: right;
margin-top: -75px;
margin-left: 470px;
#apDivkemrokVRbag {
position: absolute;
width: 121px;
height: 167px;
z-index: 2;
background-image: url(_images/kemrokvr_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDivFirerokbag {
position: absolute;
width: 90px;
height: 167px;
z-index: 2;
background-image: url(_images/firerok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 570px;
#apDivAWbucket {
position: absolute;
width: 90px;
height: 167px;
z-index: 2;
background-image: url(_images/firerok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDivAWbucket {
position: absolute;
width: 90px;
height: 167px;
z-index: 2;
background-image: url(_images/firerok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDivAWbucket {
position: absolute;
width: 80px;
height: 96px;
z-index: 2;
background-image: url(_images/AWbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDiv15bag {
position: absolute;
width: 88px;
height: 111px;
z-index: 2;
background-image: url(_images/15.0bucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -115px;
margin-left: 260px;
#apDivTRbucket {
position: absolute;
width: 80px;
height: 106px;
z-index: 2;
background-image: url(_images/TRbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -120px;
margin-left: 370px;
#apDivAWbucket {
position: absolute;
width: 205px;
height: 150px;
z-index: 2;
background-image: url(_images/AWArt.png);
background-repeat: no-repeat;
float: right;
margin-top: -140px;
margin-left: 420px;
font-size: 120%;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
#apDivASArt {
position: absolute;
width: 205px;
height: 150px;
z-index: 2;
background-image: url(_images/ASArt.png);
background-repeat: no-repeat;
float: right;
margin-top: -140px;
margin-left: 420px;
font-size: 120%;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
#apDivVRbucket {
position: absolute;
width: 80px;
height: 87px;
z-index: 2;
background-image: url(_images/VRbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -105px;
margin-left: 470px;
#apDivIAbucket {
position: absolute;
width: 251px;
height: 106px;
z-index: 2;
background-image: url(_images/IAbuckets.png);
background-repeat: no-repeat;
float: right;
margin-top: -120px;
margin-left: 400px;
body {
background-color: #666;
color: #000;
text-align: center;
background-image: url(_images/roadblurred.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
padding-top: 60px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
.formtext {
font-size: 100%;
text-align: left;
.bodyfootnote {
font-size: 70%;
margin-left: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
.red {
font-size: 70%;
color: #F00;
.popups {
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
text-transform: capitalize;
text-decoration: none;
list-style: none;
h1, h2, h3, h4, h5, h6, p {
/* [disabled]margin-top: 0; */ /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 23px;
line-height: 25px;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #FFFFFF;
text-decoration: none;
font-size: 100%;
padding: 5px;
a:visited {
color: #FFFFFF;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
background-color: #03C;
color: #FFF;
height: 12px;
alignment-baseline: text-after-edge;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
width: 960px;
background-color: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
background-image: url(_images/Bridge4WebScreened.png);
background-repeat: no-repeat;
margin-bottom: 0;
margin-left: 0px;
margin-right: 0px;
margin-top: 0;
text-align: left;
.containerTS {
width: 960px;
background-color: #FFF;
margin: 0 0px; /* the auto value on the sides, coupled with the width, centers the layout */
background-image: url(_images/US_Map.png);
background-repeat: no-repeat;
text-align: left;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #000;
background-image: url(_images/BannerBlured960.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerSL {
background-color: #000;
background-image: url(_images/PMND%20SL%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerPurchase {
background-color: #000;
background-image: url(_images/contact%20us%20pavemend%20header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerSLQ {
background-color: #000;
background-image: url(_images/PMND%20SLQ%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerDOTline {
background-color: #000;
background-image: url(_images/DOTLINE%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.header15 {
background-color: #000;
background-image: url(_images/PMND%2015.0%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerTR {
background-color: #000;
background-image: url(_images/PMND%20TR%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAW {
background-color: #000;
background-image: url(_images/anti_wear_pavemend_header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAS {
background-color: #000;
background-image: url(_images/anti%20scale%20pavemend%20header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerVR {
background-color: #000;
background-image: url(_images/PMND%20VR%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerIA {
background-color: #000;
background-image: url(_images/Instant%20asphalt%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerKemrok {
background-color: #000;
background-image: url(_images/KEMROK%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerKemrokVR {
background-color: #000;
background-image: url(_images/KEMROK%20VR%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerFirerok {
background-color: #000;
background-image: url(_images/FIREROK%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAntiWear {
background-color: #000;
background-image: url(_images/anti_wear_pavemend_header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerTechSupport {
background-color: #000;
background-image: url(_images/FEBlurred.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerResources {
background-color: #000;
background-image: url(_images/ResourceBanner.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.header h1 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20pt;
font-style: normal;
font-weight: bolder;
color: #FFF;
padding-top: 150px;
padding-left: 30px;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: right;
width: 180px;
margin-left: 0px;
margin-right: 30px;
clear: none;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: italic;
background-image: url(_images/Testimonialb.gif);
background-repeat: no-repeat;
height: 456px;
text-decoration: none;
z-index: 1000;
.sidebarPurchase {
float: right;
width: 200px;
margin-left: 0px;
margin-right: 20px;
clear: none;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: italic;
background-image: url(_images/purchaseSB.png);
background-repeat: no-repeat;
height: 420px;
margin-top: 0px;
text-decoration: none;
background-color: #217CC0;
background-position: 10px 10px;
.sidebarleft {
float: left;
width: 195px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 85%;
font-style: oblique;
height: 200px;
text-decoration: none;
padding-top: 8px;
padding-left: 10px;
margin-right: 5px;
background-color: #217CC0;
vertical-align: bottom;
line-height: 30px;
font-weight: bold;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: -4px;
.sidebarleftlong {
float: left;
width: 195px;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: oblique;
height: 280px;
text-decoration: none;
padding-top: 20px;
margin-right: 5px;
background-color: #217CC0;
vertical-align: bottom;
line-height: 17px;
font-weight: bold;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: -4px;
color: #FFF;
font-size: 85%;
text-align: left;
padding-left: 10px;
.sidebargreen {
float: left;
width: 195px;
height: 410px;
text-decoration: none;
padding-top: 20px;
margin-right: 5px;
background-color: #8CC63F;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: -4px;
padding-left: 10px;
.nav2 {
font-family: bebas-neue;
font-style: normal;
font-weight: 400;
color: #FFF;
.sidebarleft nav ul li a {
text-decoration: none;
color: #FFF;
.sidebarleftlong nav ul li a {
text-decoration: none;
color: #FFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bold;
.content {
width: 730px;
float: left;
background-image: none;
background-repeat: no-repeat;
background-position: left;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
padding: 10px 0;
text-align: left;
font-size: 100%;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px;
text-decoration: none;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
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 */
text-decoration: none;
ul.nav li {
border-bottom: 1px solid #666;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
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-color: #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-color: #DFEBF3;
color: #FFF;
text-decoration: none;
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both;
background-color: #000000;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-left: 760px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
#apDiv1 {
position: absolute;
width: 900px;
height: 94px;
z-index: 1;
margin-top: 80px;
margin-left: 30px;
white-space: 3;
font-size: 100%;
text-align: left;
sllogo {
background-image: url(_images/SLwhitelogo.png);
background-repeat: no-repeat;
.slLogo {
background-image: url(_images/SLwhitelogo.png);
background-repeat: no-repeat;
height: 100px;
width: 240px;
.productlogos {
margin-left: 23px;
margin-top: 10px;
.Bold {
font-weight: bold;
.inherent {
font-style: inherit;
sup {
position: relative;
top: -1ex;
vertical-align:baseline;
font-size: 75%;
#apDiv2 {
position: absolute;
width: 650px;
height: 31px;
z-index: 2;
background-repeat: no-repeat;
padding-right: 15px;
padding-left: 15px;
margin-right: 15px;
margin-left: 15px;
top: 369px;
background-image: url(_images/homeheader.png);
.footer table tr td {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 75%;
color: #FFF;
height: 8px;
width: 160px;
margin-left: 10px;
padding-left: 15px;
border-collapse: collapse;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
.footer p {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 80%;
color: #FFF;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 30px;
.footer table tr th h4 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 75%;
color: #FFF;
float: left;
padding-left: 15px;
height: 0px;
.footer table tbody tr td a {
color: #FFF;
#wrapper {
width:970px; /**adjust as needed**/
margin:0 auto; /**centers page on screen**/
.flt_rgt {
float: right;
margin-top: 15px;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
.title {
/* [disabled]margin-right: 30px; */
margin-top: 35px;
margin-left: 10px;
background-image: ;
background-repeat: no-repeat;
/* [disabled]margin-left: 20px; */
top: 30px;
/* [disabled]margin-top: 30px; */
left: 30px;
.flt_products {
float: right;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
.container section nav {
background-image: url(_images/topnavpanel.png);
background-repeat: no-repeat;
height: 30px;
width: 960px;
padding-top: 3px;
#apDiv3 {
position: absolute;
width: 468px;
height: 41px;
z-index: 2;
background-image: url(_images/savetimetext.png);
background-repeat: no-repeat;
margin-left: 15px;
#apDiv4 {
position: absolute;
width: 400px;
height: 41px;
z-index: 3;
background-image: url(_images/ULTRAFLOR.png);
background-repeat: no-repeat;
margin-left: 10px;
margin-top: 45px;
#apDiv5 {
position: absolute;
width: 250px;
height: 103px;
z-index: 4;
background-image: url(_images/HI%20RES%20PRODUCT%20FAMILY%20w%20IA.png);
background-repeat: no-repeat;
float: right;
right: auto;
margin-left: 675px;
margin-top: -22px;
#apDiv6 {
position: absolute;
width: 40px;
height: 38px;
z-index: 5;
background-image: url(_images/PFT%20No%20Text%20No%20Flip.png);
margin-top: -25px;
margin-left: 83px;
#apDiv7 {
position: absolute;
width: 20px;
height: 17px;
z-index: 5;
background-image: url(_images/twitter-bird-dark-bgs.png);
margin-top: -15px;
margin-left: 85px;
nav ul {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the space between the navigation on the content below */
font-size: 90%;
nav ul li {
text-decoration: none;
color: #FFF;
nav ul a:link , nav ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
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;
text-align: left;
color: #FFF;
nav ul a:hover, nav ul a:active, nav ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
color: #FFF;
text-decoration: none;
.orange {
color: #FAA634;
.white {
color: #FFFFFF;
.red {
color: #F00;
.red1 {
color: #F00;
.toppanel {
background-image: url(_images/topnavpanel.png);
background-repeat: no-repeat;
height: 30px;
width: 960px;
#apDiv12 {
position: fixed;
width: 960px;
height: 30px;
z-index: 5;
background-image: url(_images/topnavpanel.png);
background-repeat: no-repeat;
float: left;
top: 229px;
.white {
.CeraTechLogo {
background-image: url(_images/CTI_logo_white.png);
background-repeat: no-repeat;
width: 200px;
height: 60px;
.apDivPFT {
background-repeat: no-repeat;
padding-left: px;
padding-top: 0px;
#prochoicetype {
background-image: url(_images/pro_choice_concrete_type.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px;
#resources {
background-image: url(_images/ResourcesType.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px; -
I am really in trouble with AP Div-How do I fix it on the web?
Hi,
I am really in trouble with my website. I have added some pictures and text on top of Fireworks Image and have published it on the website.
But the concern is, when I zoom in & zoom out, I can see the previous text on the screen and also the picture and texts I have added using Ap Div tag are scattered moving all to the left when I zoom out. Can someone help me how to fix this in one particular place so that it doesn't move when I zoom in or zoom out!!! I am using Adobe Dreamweaver CS3, if this will help.
Appreciate your sincere help on this.
Thanks in advance.Frankly, there's a lot that is wrong with that page:
1. Most of your content is in the images - this means that you will get very poor search engine ranking
2. Your extensive use of absolute positioning for layout - this means that when you enlarge the text size in the browser, you will have overflow problems on the page (for example, the terrible problems at the bottom of the page)
3. You have used tables for layout - this is because of your use of Fireworks to create the HTML
Each of these problems is solvable but none of them are solvable easily without a redesign of the page. A web page should be built from the top down, stacking content containers (i.e., <div>, <section>, <article>, <aside>, etc.) vertically or floating them horizontally or both. These containers would be loaded with the text content of the page, and images would be used only for cosmetic appearance. Using CSS to style/locate the content will allow you to completely move away from tables for layout. Most typical pages can be created without the use of absolute positioning which should be used only for special purposes, not for layout of the page elements. -
Inserting pictures into a div in a certain formation. help. thanks!
I'm new to forums and Dreamweaver cs4 and code... I really could use some help. I want to put pics where the black boxes are but i cant seem to get them stacked as they look. I also want to be able to have words/paragraphs to the left of the four pictures. I tried; insert picts with padding/floating, tables, seperate divs, create web photo album, i just cant get them lined up like that. I'm using dreamweaver cs4 and i have my layout seperated with divs, so the white body part is a indidual loating div. Please help. Thanks.
ps. The "right body" div (white box) is set at like 600w x 400h. I dont want that dimenstion to change.
thanks again everyone who can help.You want something like this??
http://alt-web.com/TEMPLATES/2-col-fixed-with-floats.shtml
View source in browser to see the code.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Promlem with loading QT content in Safari into a div via innerHTML
Hello,
I have created a website where I'm loading QT content into a div via Javascript by using InnerHTML. I'm generating the Object/embed with javascript. Take a look at the following javascript function:
//This function generates object/embed tags on the page
//each time a movie thumbnail is clicked
function showMovie(folder, previewUrl, movieUrl)
var content = new getObj('content');
var movieObj = new getObj('contentMovie');
if(BrowserDetect.browser == 'Safari')
//I added this bit becaus Safari kept on playing the previous movie
movieObj.obj.Stop();
content.obj.innerHTML = '';
var urlStart = "[(base_url)]" + folder + "/";
var qtUrl = movieUrl.split('../')[1];
qtUrl = urlStart + qtUrl;
var myQTObject = new QTObject(previewUrl.split('.')[0] + ".gif", "contentMovie", "489", "280");
myQTObject.altTxt = "Upgrade your Quicktime Player!";
myQTObject.addParam("name", "contentMovie");
myQTObject.addParam("href", movieUrl);
myQTObject.addParam("controller", "true");
myQTObject.addParam("scale", "tofit");
myQTObject.addParam("target", "myself");
myQTObject.addParam("autoplay", "true");
myQTObject.addParam("saveembedtags", "true");
myQTObject.addParam("enablejavasript", "true");
content.obj.innerHTML = myQTObject.getHTML();
As you can see I'm specifically checking to see if the browser is Safari, then I'm stopping the movie via javascript. It seems that Safari keeps all the movies in memory and somhow loads them on top of each other instead of disposing of them when the innerHTML is set to an empty string... this took care of one problem which was preventing Safari from playing multiple movies at once(somehow stacking on top of each other). However, the fastStart movies keep loading in the background so you could argue that Safari is leaking memory and loading movies in the background that should not be there.
Does anyone have a clue on how to fix this? Wouldn't you define this as a bug? I took a look at the QT javascript API and it seems to me that there is no command that tells the movie to stop loading or howto dispose of it. Maybe I can swap the movie URL via javascript if the browser is Safari, but I'd like to know if there is another way since I'm using a poster movie and I imagine it will complicate things. Anyway, you can test for your self on www.koggull.com/index.php, if you don't understand the problem. I suggest that you keep Activity Monitor open, then you can see how Safari eats up memory when browsing my website. All help would be greatly appreciated.
MacBookPro Core2 duo 2.33 Ghz Mac OS X (10.4.8)FYI I posted a similar question in one of the Quicktime forums. I haven't gotten any answers: http://discussions.apple.com/thread.jspa?threadID=764296&tstart=0
-
Offset div / positioning problem in IE
I've posted this problem in another thread but it was a sub question. Anyway, the problem I'm having is positioning a div over all other divs. I've managed to get it to work perfectly fine on Firefox and Chrome the way I wanted. The problem is usually when it comes to internet explorer. I just want the image or div placed on the right side of the site but changing the properties always has the same result, internet explorer places is far beyond where it's suppose to be. I'll add images, the code, and the live site below. Any help would be appreciated.
Chrome View:
Firefox View:
*IE View (Wrong):
Website: http://emergencyclean-up.com
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Emergency Clean Up Homepage</title>
<style type="text/css">
body {
background-color: #333333;
#entireSite #sidebar #spacer {
height: 300px;
width: 350px;
#entireSite #sidebar #newsletter {
background-image: url(../Images/NewsLetterBackground.png);
height: 165px;
width: 350px;
color: #FFF;
</style>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
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_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_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>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('../Images/Buttons/buttonOver_01.gif','../Images/WaterDamageOver .png','../Images/FireDamageOver.png','../Images/MoldRemediationOver.png','../Images/SootRe movalOver.png','../Images/OdorControlOver.png','../Images/facebook-logoOver.png','../Image s/yelp-logoOver.png','../Images/LinkedIn_logoOver.png','../Images/twitter-logoOver.png')">
<!-- This begins the coding for centering the entire webpage -->
<div style="width:100%;">
<div style="width:900px; margin-left:auto; margin-right:auto;">
<div style="width:100%; float:left;background-color:#333333;">
<!-- This begins the background layer for the navbarArea -->
<div id="navbarArea">
<!-- This begins the container div for the navbar -->
<div align="center">
<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><strong><a href="index.html">Home Page</a> </strong></li>
<li><strong><a href="About Us.html">About Us</a></strong></li>
<li><strong><a href="Services.html">Services</a> </strong></li>
<li><strong><a href="Testimonials.html">Testimonials</a></strong></li>
<li><strong><a href="Contact Us.html">Contact us</a></strong></li>
<li><strong><a href="Special Offers.html">Special Offers</a></strong></li>
</ul>
</div></div>
<!--- This ends the container div for the navbar -->
</div>
<!-- This ends the background layer for the navbarArea -->
<!--This begins the entireSite area *excludes navbar* -->
<div id="entireSite">
<!-- This begins the container for the sidebar image -->
<div id= "sidebar">
<!-- This begins a spacer div -->
<div id= "spacer">
</div>
<!-- This ends a spacer div -->
<!--This begins newsletter div -->
<div id= "newsletter">
<center><font size="5">Subscribe to Our Newsletter</font></center>
<form action="subscriptionform.php" method="post" id="Newsletter">
<table width="100%" border="0" cellpadding="3">
<tr>
<td>Name:</td>
<td><input name="News Letter Name" type="text" size="30" maxlength="40" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input name="News Letter Email" type="text" size="30" maxlength="40" /></td>
</tr>
<tr>
<td>Zip Code:</td>
<td><input name=" News Letter Postal Code" type="text" size="10" maxlength="12" /></td>
</tr>
</table>
<center><input name="Subscribe" type="Submit" id="Subscribe" /></center>
</form>
</div>
<!-- This ends newsletter div -->
</div>
<!-- This ends the sidebar image area-->
<!-- This begins the maintext area -->
<div id= "maintext">
<!-- This begins the titlebar inside the maintext area-->
<div id= "titlebar">
<br />
</div>
<!-- This ends the titlebar of maintext area -->
<br />
<center><img src="../Images/Logo.png" width="500" height="160" alt="Logo" />
<br />
<br />
<center>Choose from one our various services offered here at Emergency Clean-up.</center>
<br />
<table width="100%" border="0" cellpadding="0">
<tr>
<td><center><a href="Water Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('WD','','../Images/WaterDamageOver.png',1)"><img src="../Images/WaterDamage.png" alt="Water Damage" name="WD" width="75" height="75" border="0" id="WD" /></a>
<br />
Water Damage</center></td>
<td><center><a href="Fire Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FD','','../Images/FireDamageOver.png',1)"><img src="../Images/FireDamage.png" alt="Fire Damage" name="FD" width="75" height="75" border="0" id="FD" /></a>
<br />
Fire Damage</center></td>
<td><center><a href="Mold Remediation.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MR','','../Images/MoldRemediationOver.png',1)"><img src="../Images/MoldRemediation.png" alt="Mold Remediation" name="MR" width="75" height="75" border="0" id="MR" /></a>
<br />
Mold Remediation</center></td>
<td><center><a href="Soot Removal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SR','','../Images/SootRemovalOver.png',1)"><img src="../Images/SootRemoval.png" alt="Soot Removal" name="SR" width="75" height="75" border="0" id="SR" /></a>
<br />
Soot Removal</center></td>
<td><center><a href="Odor Control.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('OC','','../Images/OdorControlOver.png',1)"><img src="../Images/OdorControl.png" alt="Odor Control" name="OC" width="75" height="75" border="0" id="OC" /></a>
<br />
Odor Control</center></td>
</tr>
</table>
<br />
<center> For more services please click <a href="Services.html">here</a>. </center>
</div>
<!-- This ends the maintext area -->
<!-- This begins the bottombar image -->
<div id= "bottombar">
<img src="../Images/bottomBar.png" width="900" height="25" alt="bottombar" /></div>
<!-- This ends the bottom bar image -->
<!-- This begins the hotlinks area -->
<div id= "hotlinks">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FB','','../Images/facebook-logoOver.png',1)"><img src="../Images/facebook-logo.png" alt="Facebook" name="FB" width="25" height="25" border="0" id="FB" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YP','','../Images/yelp-logoOver.png',1)"><img src="../Images/yelp-logo.png" alt="Yelp" name="YP" width="25" height="25" border="0" id="YP" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TR','','../Images/twitter-logoOver.png',1)"><img src="../Images/twitter-logo.png" alt="Twitter" name="TR" width="25" height="25" border="0" id="TR" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LI','','../Images/LinkedIn_logoOver.png',1)"><img src="../Images/LinkedIn_logo.png" alt="Linked In" name="LI" width="25" height="25" border="0" id="LI" / align="left"></a>
</div>
<!--This ends the hotlinks area -->
<!-- This begins the copyright area -->
<div id= "copyright">
<br />
<p align="right">Content copyright 2012. EMERGENCYCLEAN-UP.COM. All rights reserved.</p>
</div>
<!-- This ends the copyright area -->
</div>
<!-- This ends the entireSite container-->
<div id="containerEmergency"><img src="../Images/emergency contact.png" width="220" height="220" />
</div>
</div>
</div>
</div>
<!-- This ends the coding for centering the entire webpage *excludes navbar* -->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>I often find that differences between FF and IE often boil down to errors in closing page element tags... like not closing <div> or <script> tags. So first validate and fix any of those issues:
http://validator.w3.org/
a number of those 35 errors relate to closing tags.
Then to review z-indexing (stacking order) from an older post:
Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
The actual display of a positioned element will depend on whether or not it's parent element also has a declared position or not.
z-indexing ONLY works with elements that have a declared position.
Using a declared position like absolute tells and browser to take that element out of the natural flow and do something different with it. So you've got the browser parsing in order from top to bottom, then throwing in some elements that are completely out of the flow.... they can be very hard to control, because there are special rules that apply to elements with declared positions.
The least understood of those rules is what I call the "Parent Rule". Giving an element a declared position like relative or absolute can have huge differences in how that element is actually displayed depending on whether or not the PARENT of that element also has a declared position.
So a div which is position:absolute for example will display one way if it's parent also has a declared position and it will display in a completely different manner if it's parent does NOT have a declared position... to review:
If a div's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
So be sure to give a declared position to both the parent and the child <div>.
Neglecting to follow this rule is the main reason why the use of declared positioning fails.
And just one more point, almost never is it necessary to use a declared position, and that method certainly should not be used for general page layout.
But if and when a special situation comes up that you really do need z-indexing... then of course you will also have to use a declared position. Understanding the "Parent Rule" will make working with z-indexing and declared positions much easier and more successful.
Best wishes,
Adninjastrator -
Making divs expand to the height of the highest div
I'm currently building my portfolio website. I'm not a coder and find it difficult so I really need simple answers if possible please. The page I'm working on can be found here: http://www.infomaticfilms.com/jack/jrimg/g_and_d.htm. It's far from finished as I don't want to move on until I fix this problem. This page will be a generic page for all the various project pages which means they will all have different heights. Rather than make individual pages for each project I'd like to make just one that I can use for all by merely deleting the content each time and re-saving the page. If you click on the Me or Contact link you can see the other pages to see the border. I read an article from Stack Overflow and I'm very close to the solution. I have a problem with Firefox though which adds 1 pixel to the right hand border. Here's the HTML:
<div class="contentAndBorders">
<div class="borderLeft"></div>
<div class="mainContentProjectPage">
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
</div>
<div class="borderRight"></div>
</div>
I'm looking to put the content into the div with the class of mainContentProjectPage. I need the divs with the classes of borderLeft and borderRight to expand with the height of mainContentProjectPage which is what they do. It's basically three columns. The first and third columns are the white borders to the left and right and the middle column is for the content. Here's the CSS:
.contentAndBorders {
width: 950px;
position: relative;
overflow: hidden;
.mainContentProjectPage {
float: left;
background-color: #F55816;
width: 100%;
padding-left: 24px;
.borderLeft {
float: left;
background-color: #FFF;
width: 1.3%;
background-attachment: scroll;
background-image: none;
background-repeat: repeat;
background-position: 0px 0px;
position: absolute;
left: 0px;
height: 100%;
margin: 0;
.borderRight {
background-attachment: scroll;
background-color: #FFF;
background-image: none;
background-repeat: repeat;
background-position: 0px 0px;
width: 1.3%;
float: left;
position: absolute;
right: 0px;
height: 100%;
margin: 0;
I don't really understand how it works, just that it does. If anyone knows a better way of achieving the same result then I'd be very grateful as this is the final part of my site. My question is does anyone know how to get rid of the extra 1 pixel on the right hand border? It looks perfect in Safari and Chrome. Any help and advice would be a life saver.
Thanks
JackI'm not a coder and find it difficult so I really need simple answers if possible please.
You need to understand HTML & CSS code. If you don't take time to learn the basics, you will continue to be frustrated by the process, your results and by our answers to your questions.
PART 1
Height is determined by page content. The more content a page contains, the longer the page is. All sites contain both long and short pages. So keep your design flexible. Don't paint yourself into a rigid box.
The CSS height property should never be used on containers that hold text as this will vary from user to user depending on their device and browser settings. Remove height values from your CSS code. If needed to reveal a background-image, for example, use the min-height: property.
PART 2
All browsers add default margins and padding (spaces) to every html element. If you want to shore up the spaces between elements, apply margin:0; padding:0 to all elements or incorporate a CSS Reset method into your site. http://cssresetr.com/
Finally, when you need a plumber, hire a plumber. Building web sites looks easy but it's not. This site will be the first impression many people have of you and your body of work. You don't get 2nd chances at 1st impressions. So put your best foot forward. Hire an experienced web designer to help you or take some time off to learn everything you need to learn to do it right.
Best of luck,
Nancy O. -
my home page create flash animation right side, left side postioned naviation. The file is opened in chrome submenu below the flash animation. safari is working well. how can front to my subnavigation menu.
Any body know how ca do this please send that particular code to me. i am apply spry menu where i put changes code is given below for references
<!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/art-template2.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>::index::</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
#top_half {
margin: 0;
height: auto;
width: 100%;
border-bottom: 1px solid #bbb1a7;
background-color: #222;
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(BackGround_Image.png);
background-repeat: repeat;
.dropshadow {
-moz-box-shadow: 3px 3px 4px #999; /* Firefox */
-webkit-box-shadow: 3px 3px 4px #999; /* Safari/Chrome */
box-shadow: 3px 3px 4px #999; /* Opera and other CSS3 supporting browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";/* IE 8 */
: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');/* IE 5.5 - 7 */
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {
font-size: 9px;
color: #CCCCCC;
.style3 {
color: #000000
a.pagelink:link { color: #FFFFFF; text-decoration: none }
a.pagelink:visited {
color: #FF0000;
text-decoration: none
a.pagelink:active { color: #CCFFCC; text-decoration: none }
a.pagelink:hover {
color: #FF0000;
text-decoration: none
a.pagelink2:link { color: #FFFFFF; text-decoration: none }
a.pagelink2:visited {
color: #FFFFFF;
text-decoration: none
a.pagelink2:active {
color: #FFFFFF;
text-decoration: none
a.pagelink2:hover {
color: #FF0000;
text-decoration: none
.style5 {color: #FFFFFF}
.style6 {font-size: 11px}
.style7 {
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.style8 {font-style: italic}
-->
</style>
<!-- InstanceEndEditable -->
</head>
<body>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF"><img src="down.jpg" alt="" width="900" height="10" /></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td width="35%" valign="bottom"><img src="fa-logo.jpg" width="180" height="90" /></td>
<td width="39%"> </td>
<td width="24%" align="right" valign="bottom"><div align="right"><img src="pic-web/92913275.jpg" width="115" height="97" /></div></td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#000000">
<td width="2%" height="27"><img src="pic-gallery/spacer.gif" width="20" height="20" /></td>
<td width="96%"><marquee scrwidth="100%" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">
<span class="style7"> ARTIST LISTS: </span><span class="style6"><a href="artist-name-pic/a/arpana-kaur.html" target="_blank" class="pagelink2">ARPANA CAUR </a> <span class="style5">|</span></span> <span class="style6"><a href="artist-name-pic/b/prabha/b-prabha.html" target="_blank" class="pagelink2"> B.PRABHA </a> <span class="style5">|</span></span> <span class="style6"><a href="artist-name-pic/c/charan-sharma.html" target="_blank" class="pagelink2"> CHARAN SHARMA |</a> <a href="artist-name-pic/f/fn-souza.html" target="_blank" class="pagelink2">F.N. SOUZA</a> </a> <span class="style5">|</span></span> <span class="style6"><a href="artist-name-pic/h/m-f-hussain.html" target="_blank" class="pagelink2"> M.F.HUSSAIN | </a><a href="artist-name-pic/k/k-g-subramanyan.html" target="_blank" class="pagelink2">K.G.SUBRAMANYAN</a> </a> <span class="style5">| </span></span><span class="style6"><a href="artist-name-pic/l/laxman-aelay.html" target="_blank" class="pagelink2">LAXMAN AELAY </a> <span class="style5">| </a></span><a href="artist-name-pic/l/laxman-gound.html" class="pagelink2">LAXMA GOUD</a><a href="artist-name-pic/l/laxman-gound.html" target="_blank" class="pagelink2"> </a> <span class="style5">|</span></span> <span class="style6"><a href="artist-name-pic/p/paresh-maity/paresh-maity.html" target="_blank" class="pagelink2"> PARESH MAITY |</a> <a href="artist-name-pic/s/s-h-raza/s-h-raza.html" target="_blank" class="pagelink2">S.H. RAZA</a></a> <span class="style5">| </span></span><span class="style6"><a href="artist-name-pic/s/satish-gujral/satish-gujral.html" target="_blank" class="pagelink2">SATISH GUJRAL </a><span class="style5">| </span></span><span class="style6"><a href="artist-name-pic/s/seema-kohli/seema-kohli.html" target="_blank" class="pagelink2">SEEMA KOHLI | </a><a href="artist-name-pic/s/sheik-shahjahan/sheik-shahjahan.html" target="_blank" class="pagelink2">SHEIKH SHAHJAHAN</a> <span class="style5">| </span><a href="artist-name-pic/s/subash-awchat/subash-awchat.html" target="_blank" class="pagelink2">SUBASH AWCHAT</a> <span class="style5">| </span><a href="artist-name-pic/s/sujata-bajaj/sujata-bajaj.html" target="_blank" class="pagelink2">SUJATA BAJAJ</a> </a> <span class="style5">| </span></span><span class="style6"><a href="artist-name-pic/s/suryaparkesh/suryaparkesh.html" target="_blank" class="pagelink2">SURYA PRAKASH </a> <span class="style5">| </span></span><span class="style6"><a href="artist-name-pic/t/thota-vaikuntam/thota-vaikuntam.html" target="_blank" class="pagelink2">THOTA VAIKUNTAM </a></span>
</marquee></td>
<td width="2%"><img src="pic-gallery/spacer.gif" alt="" width="20" height="20" /></td>
</tr>
<tr bgcolor="#000000">
<td colspan="3"><img src="down.jpg" alt="" width="900" height="10" /></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><img src="pic-gallery/spacer.gif" width="151" height="5" /></td>
<td> </td>
<td valign="top"> </td>
<td> </td>
</tr>
<tr>
<td width="17%" valign="top"><ul id="MenuBar1" class="MenuBarVertical">
<li><a href="index.html">HOME</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
<ul>
<li><a href="introduction.html">INTRODUCTION</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">ART FORM</a>
<ul>
<li><a href="acrylic-on-canvas-new.html">ACRYLIC ON CANVAS</a></li>
<li><a href="tribal-art.html">TRIBAL ART</a></li>
<li><a href="mixed-media.html">MIXED MEDIA</a></li>
<li><a href="oil-on-canvas-new2.html">OIL ON CANVAS</a></li>
<li><a href="water-color.html">WATER COLOR</a></li>
<li><a href="sculpture.html">SCULPTURE</a></li>
<li><a href="print.html">PRINTS</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">ARTIST </a>
<ul>
<li><a href="artist-list-new3.html">ALPHABETICAL ORDER</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">EVENTS</a>
<ul>
<li><a href="awakening-the-spirit.html">AWAKENING THE SPIRIT</a></li>
<li><a href="press-release.html">PRESS RELEASE</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">REACH US</a>
<ul>
<li><a href="contact-us.html">CONTACT DETAILS</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">ORDER</a>
<ul>
<li><a href="procedure-to-order.html">PROCEDURE TO ORDER</a></li>
</ul>
</li>
</ul></td>
<td width="1%"><img src="pic-gallery/spacer.gif" width="10" /></td>
<td width="81%" align="right" valign="top"><!-- InstanceBeginEditable name="EditRegion3" -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><embed src="web-header4.swf" width="720" height="332" align="middle" class="border style8" quality="high" bgcolor="#FFFFFF"
name="web-header3" id="web-header" allowscriptaccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
flashvars="pagename=spalding_home&PageState=default"
swliveconnect="true"></embed></td>
</tr>
</table>
<!-- InstanceEndEditable --></td>
<td width="1%"><img src="pic-gallery/spacer.gif" alt="" width="10" height="1" /></td>
</tr>
<tr>
<td valign="top"> </td>
<td> </td>
<td valign="top"> </td>
<td> </td>
</tr>
<tr>
<td colspan="4" valign="top"><img src="down.jpg" width="900" height="13" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"><img src="pic-gallery/spacer.gif" width="15" height="1" /></td>
<td width="23%"><div align="left"><a href="artist-list-new2.html"><img src="pic-gallery/artist.jpg" width="210" height="143" border="0" /></a></div></td>
<td width="1%"><img src="pic-gallery/spacer.gif" width="10" height="1" /></td>
<td width="23%"><a href="art-form.html"><img src="pic-gallery/pic-second.jpg" width="210" height="143" border="0" /></a></td>
<td width="1%"><img src="pic-gallery/spacer.gif" alt="" width="10" height="1" /></td>
<td width="23%"><a href="awakening-the-spirit.html"><img src="pic-gallery/art-events.jpg" width="210" height="143" border="0" /></a></td>
<td width="1%" align="center"><img src="pic-gallery/spacer.gif" alt="" width="10" height="1" /></td>
<td width="24%" valign="top"><div align="right"><a href="procedure-to-order.html"><img src="pic-gallery/collectors-corner.jpg" alt="" width="210" height="143" border="0" /></a></div></td>
<td width="2%" valign="top"><img src="pic-gallery/spacer.gif" alt="" width="15" height="1" /></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="4" valign="top"><img src="upward.jpg" width="900" height="13" /></td>
</tr>
<tr>
<td colspan="4" valign="top" bgcolor="#000000"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"> </td>
<td width="93%" bgcolor="#000000" class="style2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="57%">© 2011 – Fabuleux Art Pvt. Ltd. All Rights Reserved Created by <a href="http://www.newton.co.in/" class="pagelink">Newton® Consulting India Pvt Ltd</a></td>
<td width="15%"> </td>
<td width="28%"><div align="right"><span class="style3"><a href="enquiry.html" class="pagelink"><span class="style5">Enquiry </span></a><span class="styleI have seen this issue. And it seems like it is more related to the buttons being placed on multiple layers rather than the buttons placed on a master page vs non-master page. I have yet to determine what causes a button to randomly ignore the stacking order of layers. But if you move all buttons to same layer, and then have all in the proper stacking order, this should maintain the same stacking order once exported to PDF. I realize that this could defeat the purpose of layer functionality, especially when working with many overlapping buttons.
Maybe you are looking for
-
I am trying to install MS Office.man 2011 and when I get prompted to go get the activation code on line I have to log on with my windows live id. I had one when I had a pc and have since forgot my password so I enter my live id and goto the rest pass
-
How to get Database Vendor Name or Database Type...
Hello, Is it possible to get the vendor or database from jdbc connection? Or maybe from the loaded Driver Class... The classpath and the jdbcurl seems not to be the right way Greetings & Thanks Peter
-
ContentPresenter not working with webcenter framework tutorial 11.1.1.4
Hello All, I am going through the (Tutorial for Oracle WebCenter Developers 11g Release 1 (11.1.1.4.0)(E10273-06) .I have made the UCM content server connection as shown in the tutorial and i had dragged the Home.html of UCM Content Folder on to the
-
Error message: Helvetica Medium outline font missing when creating PDF's
Error message: Helvetica Medium outline font missing when creating PDF's. Where can I downlaod it and why is it suddenly happening?
-
I can't stand my AirPort Extreme "n" anymore. It's freezing all the time. It will not accept the network disk passoword. It won't connect with wired stations. Wi-Fi won't connect with non-apple PCs. And also, even with the network connected I cannot