MainContent height is limited?

Am using CS4 and I have an issue on my mainContent, I wonder when I view my file on the browser (Safari, Firefox, Chrome) the height of my content does'nt change but in dreamweaver it is fine. Say I set my CSS height for 3000px but in the browser its only like 1200px. HELP!!! Is there any answer for that? Am working on like gallery blog so i want to set my height longer...

Sorry, but I do not understand what it is that you want to do.
If you have a content container, this will automatically adjust to the height of the content, maybe with the help of a css rule like overflow:hidden.
If you need more specific help, please psot a link to your site.
Gramps

Similar Messages

Vertical height appears limited to not conflict with Dock BOTTOM of screen

I did a clean install of Leopard 10.5.2. Now, Mail, iTunes, and Safari cannot be expanded to occupy the full vertical height, even though my Dock is LEFT of screen. I have not tried other Apple apps. Third party apps are opening behind Dock on LEFT of screen. Anyone else see this vertical height problem with 10.5.2? I did not have this problem with 10.5.0. and 10.5.1.

I had to reinstall Leopard for reasons unrelated to Leopard. When I did this reinstallation, the vertical quirk went away. Very strange.

Open PDF-Output in browser window with full height

Hi,
I must open some BIP-Reports as PDF in a browser window via URL. The problem ist, that the height of the PDF-Output is fixed, as the PDF is shown in an iframe with fixed height.
The height can be set in the BIP preferences, but only to a fixed value (not to something like "100%"). If the height is smaller than the users browser window, then there is unused space below the pdf output. If the height is greater than the users browser window, there are two scrollbars to the right: One for the html-Page and one for the PDF.
I tried the following options:
1. http://<bip-server:port>/xmlpserver/public/<report-name>.xdo?_xmode=4&_xf=pdf
-> Output is PDF, only the PDF is shown (_xmode=4), opens in same browser window but height is limited.
2. http://<bip-server:port>/xmlpserver/public/<report-name>.xdo?_xmode=4&_xf=pdf&_xpt=1
-> PDF is not opend in browser window, but can be downloaded or opened in a separate PDF-Viewers window.
I would like to just open the PDF in the browser window in full height. How can I achive this?

Hello Yesh,
you can open PDFs as a guest user (without authentification):
1. Allow Guest Access (Admin -> Security Configuration -> Check "Allow Guest Access" and select a folder name).
2. Copy your Report into this guest folder
3. You can open the Report as PDF with a link like this:
http://(bip-server-name):9704/xmlpserver/(guest-folder-name)/(report-name)/(report-name).xdo?_xpt=0&_xf=pdf&_xmode=4(&report-parameters)
Just replace the strings in brackets. You find a great description of the URL parameters in Tim Dexters Blog
http://blogs.oracle.com/xmlpublisher/2006/07/accessing_xmlp_enterprise_repo.html
I didn't find an option to set the height of the PDF-Output for the guest user in the BIP-UI. Maybe I missed something. But you can manually edit the configuration file. It is located on your BIP server direcory in the subdirectory xmlp/XMLP/Users. Select the guest users subdirectory and edit the configuration file "user~.profile".
In this XML config file there is an entry "viewerHeight". In the Value-Tag you can enter the PDF output windows height in pixel (but unfortunaly not in % - this was the question of my original posting).
Hope that helps...
Sascha
Edited by: sascha@tesat on Oct 26, 2009 9:02 AM

QT files are not being played at the right height on laptop - why?

Hello eveyone,
The QT files imported in my MacBook pro are HQ but are being played 1280 x 405 (for the length of the screen, but not at the right height). I can't even play view them with the Actual file feature. The Movie Inspector tells me the clipes were shot normal (1920x1080) yet I can't se them properly.
I tried on a different MacBook pro and I have the same problem.
Does anybody know why? What should I do?
Thanks!

Actually, there is no problem with the original files.
Since I do not know how you came to this conclusion or if it is correct, my first thought is, "Show me the proof." I.e., post a captured image of the "Inspector" window for the player you are currently using. This will tell me which QT player you are using, whether the display is controlled by scaled dimension or aspect ratio settings, whether the file was encoded anamorphically or non-anamorphically, and whether the encoded aspect ratio matches the current display aspect ratio. It won't tell me the true aspect ratio of the video but a look at people and objects in a single video frame will normally disclose whether or not the display aspect is reasonably close or not.
If I import them in say Final Cut Pro, I can see them properly...so it's only the Quick Time on our laptops that display the clips wrong.
This isn't really helpful since FCP has settings that allow the user to both change and scale display dimensions and aspect ratios. QT 7 Pro will allow you re-scale the aspect ratio of a display but not alter its encoded aspect ratio while QT X will allow you to resize the display scale but only in reference to its encoded aspect ratio. Neither will allow you to display a file at dimensions greater than your current video card settings (i.e., where actual dimensions are greater than screen display resolutions for the encoded aspect ratio). In a similar manner, "fit" and "fill" option availability will also depend on the device/player and available screen resolutions/aspect ratiios which you have yet to indicate for either platform previously mentioned.
The full length of the screen, but not the full height... Do you have any advide on how to get the settings done? I looked into the QT settings and coulnd't find the right button/panel...
As previously stated, the first step is to determine if the files are being displayed correctly—i.e., at their correct aspect ratio for the allowable display space available for the current screen resolution available on the platforms being used for viewing. For instance, are you viewing in the full screen mode, or with menu bar being displayed and/or with the dock in or out of active display. These settings plus the video card screen resolulution will determine the maximum number of viewing pixels available fort the display height. Once the scale height is set by the QT player, then QT app will scale the display width to what it believes is correct display setting. If the aspect of the display is correct for the scaled height and width, then the file is being displayed correctly at the maximum display height available and there is nothing wrong and nothing to be corrected either in the file or the media player other than your desire to play a file at dimenensions larger than available for your display. (I.e., this is equivlent to saying you want to display a 52 inch diagonal picture on 32 inch HDTV—"it ain't gonna happen."
On the other hand, if the aspect ratio is incorrect for the maximum display height available for the app, system, and platform being used for viewing, then all of the other things I mentioned come into effect with regard to correcting the embedded display settings within the file.
Example: If i take an anamorphically encoded 1440x1080 (1920x1080) file and display it on my monitor set to a resolution of 2560x1440, then I can display the file at its "actual" display size (1920x1080) or even scale it to 2560x1440 (Full Screen Display mode) but if I reset my monitor to a 4:3 aspect resolution of 1600x1200, then I cannot play the file at its actual 1920x1080 display resolution since its width is limited to 1600 pixels and when the 16:9 aspect ratio is applied to the 1600 pixel display width, the display height is limited to 900 pixels in a "Fit to screen mode."
If your source file was recorded at 1920x1080, then the file's aspect ratio is 16:9 (1.78:1). However, your 1280x405 screen size implies that either the file is now being displayed in the "Fit" mode with a changed aspect ratio of 3.16:1 (1280x405) or that you are viewing the file in the "Fill" mode which chops off the top and bottom of your 1280x720 (1.78:1) display. (I.e., the "Fit" mode will scale the display at its current aspect to fit within the available display area and yet allow you see the entire display area as a "scaled view at the correct aspect while the "Fill" mode scales the video to fill your entire screen even if this means losing the top/bottom or left/right portions of the display area when the monitor resolution aspect ratio and video display ratio are not the same.)
Therefore, if your file is correctly formatted as you claim, use the "Command-F" QT shortcut to view the file at its largest available dimensions at the correct aspect ratio on any platform and using either the QT X or QT 7 player. (Don't forget to set the QT 7 "Full Screen" preference.)

Workflow and problems with labels

Hello!
I've been testing out some things in Edge and I've noticed a few things that I've been trying to find some documentation and information about, I would greatly appreciate any enlightenment on the following observations:
Frame labels do not work for me - both with files created from scratch in Edge and ones made of existing HTML + CSS files. I tried the in app lesson on looping the counter and the 'Play from (loop)' doesn't work, I thought it might have been because of an error in the instructions telling users to play from a frame label that exists at the same point in the timeline where there is a 'stop' trigger but even offsetting the 'loop' label would not work. The final sample file works as intended when previewed.
I tried a few tests with new files consisting of really basic stuff - one symbol with an 'on-click' > play from (go/start/in/one/etc) and another symbol simply animated on the x and y axis with an animation to the opacity with a stop trigger placed on the timeline and tested with the play from label placed both at the same time as the stop trigger and offset after the trigger - neither works it has no effect when clicked. (I know about what scripts to do on completion to get it to play from the start) Interestingly play from (milliseconds*) *0.125/1001/2000000 etc does work for me but this is not ideal as it is far more useful to be able to play from labels.
Animating existing HTML - I've got a simple html page set up consisting of a container div with a number of other divs inside which I have been animating in Edge. The Edge file is set up so the container CSS overflow is hidden. Now can someone please clarify if the following method of workflow is a mistake on my part, limitation in HTML+DOM, bugs in edge or combination/none of those things?
Workflow - bring in the html file to edge do simple animated opacity etc on the various elements start adding keyframes and labels etc - the label problems as above. Now my intent is to have each of the div's in the container be clicked on and bring in the next one - in the same place in the viewport. I've noticed that when changing various elements visibility after tweaking animation to look good and then subsiquently setting on-off keyframes for visibility it would suddenly cause all elements lower in the DOM to move position and suddenly have what looked like keyframes for y axis position/transform? Is this bad practice to use the on-off visibility for elements? It meant that what should be a really simple and quick 10 second animation took about 3 hours to make, should we be not using the on-off keyframes for showing/hiding buttons that are in divs that sit on top of each other? Should i set up z-index values for all elements in the CSS files? (I saw a reference to you can assign z-index values in the 'elements' panel but I can only see 'arrange' - is this a different term for z-index?)
I'm a long time user of flash, maya, after effects, digital fusion, combustion, and many other timeline based software tools - it is fairly intuitive to me picking up new systems but the issues with on-off visibility and keyframes below in the timeline really was a very frustrating workflow. I'm used to changing and editing the whole animation on the timeline seeing what works and doesn't - deleting layers, changing timings etc, i found this way of working really slow due to changes to elements position when ones above in the flow were turned on or off. Please do suggest what I should change in my approach to using edge as compared to other animation tools as it looked great on preview but I'm a bit frustrated in using the release. Is this a bug in my release?
Where is the help and reference files for Edge? - is this screen shot it? -
I can't find any info on basic definitions of the tools and options anywhere, and can't find much on anything to do with using edge in production with existing HTML documents, please send me some links if you have them. I've seen the edge javascript API thing but is there anything else?
Cheers.
Here is the approximate code of the page for reference - I actually got the file working in the end but using 'play from (miliseconds)' instead of play from (label) and much frustration slowly editing the timeline and elements visible/hidden status and redoing animation on elements below in the timeline to get them placed correctly.
HTML:
<!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>Master Document with base styles</title>
<link href="css/master_styles.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 480px)" href="css/mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 768px) and (max-width: 1024px)" href="css/tablet.css" />
<link href="css/desktop.css" rel="stylesheet" media="only screen and (min-width: 1025px) and (max-width: 3000px)" />
<style type="text/css">

</style>
</head>
<body>
<div id="container">
         
            <div id="mainContent">
                <div id="mainlogo">
                </div>
            </div>
            <div id="firstButton">
                  <div id="Abutton1">
                  <p><img src="img/a_72_off.png" width="72" height="72" /></p>
                 </div>
            </div>
            <div id="transition1">
                   <p>Wipe transition 1</p>
            </div>
            <div id="secondButton">
                    <div id="Abutton2">
                   <p><img src="img/a_72_off.png" width="72" height="72" /></p>
                   </div>
            </div>
            <div id="secondContent">
                <div id="Abutton3">
                <p><img src="img/a_72_off.png" width="72" height="72" /></p>
                </div>
            <div id="text1">
                  <h1>Heading </h1>
                  <p>Byline</p>
                </div>
             </div>
<div id="transition2">
    <p>Transition 2 - TBC</p>
</div>
      <div id="thirdContent">
      <div id="lastbutton">
        <p><img src="img/end_icon_crop.png" width="150" height="150" border="0" /></p>
      </div>
      <div id="text2">
        <h1>Heading</h1>
        <p>Byline</p>
      </div>
</div>
    <div id="transition3">
        <h4>Small print</h4>
</div>
</div>
</body>
</html>
CSS:
(master_styles.css)
@charset "utf-8";
body {
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #19171B;
    font-family: AFBattersea;
    font-size: 100%;
#container { /* the main holder for all of the viewport content - an image frame */
    text-align: left;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
#mainContent {
    z-index: -1;
#firstButton {
#transition1 {
    color: #FFF;
#secondButton {
#secondContent {
#transition2 {
    color: #FFF;
    height: 100%;
#thirdContent {
#transition3 {
    color: #FFF;
#mainlogo {
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../img/960_off.png);
#Abutton1 {
#Abutton2 {
#Abutton3 {
#text1 {
#text2 {
#lastbutton {
#text3 {
(desktop.css) - I've not included the other css files referenced in the media queries as they only contain names of elements for this purpose
@charset "utf-8";
#container { /* the main holder for all of the viewport content - an image frame */
    text-align: center;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    height: 700px;
    width: 1024px;
.mainContent {
    height: 100%;
#firstButton {
    height: 100%;
#transition1 {
    height: 100%;
#secondButton {
    height: 100%;
#secondContent {
    height: 100%;
#transition2 {
    height: 100%;
#thirdContent {
    height: 100%;
#transition3 {
    height: 100%;
#mainlogo {
    background-image: url(../img/960_off.png);
    height: 72px;
    width: 960px;
    margin-top: 364px;
    margin-right: 36px;
    margin-left: 36px;
#Abutton1 {
    height: 72px;
    width: 72px;
    margin-top: 364px;
    margin-right: auto;
    margin-left: auto;
#Abutton2 {
    height: 72px;
    width: 72px;
    margin-top: 364px;
    margin-right: auto;
    margin-left: auto;
#Abutton3 {
    height: 72px;
    width: 72px;
    margin-top: 364px;
    margin-right: auto;
    margin-left: auto;
#text1 {
    text-align: left;
    margin-top: 16px;
    margin-left: 320px;
#text2 {
    text-align: left;
    margin-top: 16px;
    margin-right: 330px;
    margin-left: 360px;
#text3 {
    text-align: center;
    text-indent: -192px;
    width: 320px;
#lastbutton {
    margin-top: 364px;
    margin-right: auto;
    margin-left: auto;
    height: 150px;
    width: 150px;

Hi,
I wonder if it's related to the multilingual capability of BPM Object presentations.
Could you:
1. right mouse click the project in the Project Navigator tab.
2. click "Project Preferences"
3. click "Languages"
Do you see multiple languages? Is English (or whatever language you're using inside Studio) the default?
When you log into the WorkSpace, could you double check the language you are using (log in -> click "Settings" in the upper right corner) -> with the "Display" tab selected, is the language you chose as the default in Studio selected?
I suspect the reason you see some but not all of the labels is because you have defined some of those labels in the language selected in the Workspace. You can add the addtional labels for the various languages you want to support if you:
1. Open a presentation
2. Click one of the labels
3. In the properties tab on the right, click the field beside the "Display" property
4. Click the button with the "..." on the right side of this field
Hope this helps,
Dan

I have multiple ID Tags on My Page, How To Correct And Change To CLASS ID's

Hello Dreamweaver Word:
I still have problems.
On my website wwww.theexecutivevip.com
My MENU BAR has moved down to the bottom of the page.
On the various product pages [problem is seen in Internet Explorer Browser]
I have multiple "main content" ID tags and the other ID tags that are within them.
When I made the page, I did not make multiple ID tags, but instead I made the page into a template
that had "Repeatable Regions" and as I repeated these regions within a page, the ID's were repeated as well.
So now I have multiple ID's going down my page. How do I correct them and replace them with CLASS ID's.
I of course need to do this change on the template so it can CORRECTLY update all the pages that I built off of it.
Will I need to change each product page manually, since they are all "editable regions" or can I just change the template. The "main content" is not an editable region, but all the product/image ID's are.
Please advise on how I can correct the multiple ID tags to the proper tag types without ruining my work. I tried and it made a mess so I just didn't save it.
In advance THANKS FOR ALL YOUR HELP FOLKS! I hope to be in your position soon where I can help the folks new to Dreamweaver. I just got a book on code/html so I can learn this world of information that you guys seem to know so well.
PLEASE ADVISE!!!
      <div id="maincontent">
        <div id="ProductTitle"><img src="Website Images/WebsiteSubTitle.TravelLuggage.jpg" width="408" height="114" alt="Travel Luggage" /></div>
        <div id="productlayout">
            <div id="product1">
              <div id="image1"><a href="611206.html"><img src="Website Images/611026.Black.Thumb.jpg" alt="Red Bag" width="115" height="125" /></a></div>
              <div id="imagetext1">
                <div>
                  <h3 align="center"><strong>611026 <br />
                  OGIO© Transporter <br />
                  Travel Garment Bag</strong></h3>
                <p align="center"><a href="611206.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>                                  </div>
                <p> </p>
              </div>
              <p> </p>
            </div>
          </div>
            <div id="productlayout2">
              <div id="product2">
                <div id="image2"><a href="108226.html"><img src="Website Images/108226.Thumb.jpg" alt="Pen" width="115" height="126" border="0" /></a></div>
                <div id="imagetext2">
                  <div>
                    <div align="center">
                      <h3>
                    <h3 align="center">108226 </h3>
                    <h3 align="center"><strong>OGIO©</strong> Terminal Travel Bag</h3>
                      </h3>
                    </div>
                    <p align="center"><a href="108226.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                  </div>
                </div>
              </div>
            </div>
              <div id="productlayout3">
                <div id="product3">
                  <div id="image3"><a href="109053.html"><img src="Website Images/109053.Black.Thumb.jpg" width="118" height="127" alt="Golf" /></a></div>
                  <div id="imagetext3">
                    <div>
                      <div align="center">
                        <h3><strong>109053 <br />
                        OGIO© Travel Bag w/Detachable Carry-on</strong></h3>
                        <p><a href="109053.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

Hello Murray:
I updated my template with your corrections. Thanks for the help.
Everything looks GREAT in Firefox, except the only product page that is all jambled is www.theexecutivevip.com/winebarsets.html.
I don't know where all those spaces come from. I'll copy the code below.
In Internet Explorer, my submenu doesn't work on the pages. It is also still going down the page on Internet Explorer.
Please advise.
code for the "winebarsets" page
<!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>The Executive VIP – The Wine Connoisseur</title>

<style type="text/css">

</style>
<script src="file:///C|/Users/ICHEVE~1/AppData/Local/Temp/Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="file:///C|/Users/ICHEVE~1/AppData/Local/Temp/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="file:///C|/Users/ICHEVE~1/AppData/Local/Temp/SpryAssets/SpryEffects.js" type="text/javascript"></script>
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
</style>

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>









<script type="text/javascript">
function MM_effectHighlight(targetElement, duration, startColor, endColor, restoreColor, toggle)
Spry.Effect.DoHighlight(targetElement, {duration: duration, from: startColor, to: endColor, restoreColor: restoreColor, toggle: toggle});
</script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body>
bckgrndlastbackgroundimbackgroundimagebackground
<div class="container">
<div class="content">
    <div id="wrapper">
      <div id="header">Join Our Community Today</div>
    
      <div id="logo"><a href="http://www.theexecutivevip.com"><img src="Website Images/ExecutiveVIP.Logo.jpg" width="153" height="87" alt="Back To Home Page" /></a></div>
      
      <div id="flashtitle">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="932" height="186" id="FlashID" title="VIP Title">
          <param name="movie" value="WineConnoisHeader.swf" />
          <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/iCheveux Group/Desktop/Website Folder/Scripts/expressInstall.swf" />
          
          
          <object type="application/x-shockwave-flash" data="WineConnoisHeader.swf" width="932" height="186">
            
            <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/iCheveux Group/Desktop/Website Folder/Scripts/expressInstall.swf" />
            
            <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>
            
          </object>
          
        </object>
      </div>
      
      <div class="maincontent">
        <div class="ProductTitle"><img src="Website Images/WebsiteSubTitle.WineCases.jpg" width="408" height="114" alt="Wine Cases" /></div>
        <div class="productlayout">
            <div class="product1">
              <div class="image1"><a href="EH3515.html"><img src="Website Images/EH3515.Thumb.jpg" alt="EH3515" width="130" height="118" /></a></div>
              <div class="imagetext1">
                <div>
                  <strong class="titleforproducts">EH3515
                  GioiaDouble
                  Wine Holder</strong>
                  
                <a href="EH3515.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>                                  </div>
                <p> </p>
              </div>
              <p> </p>
            </div>
          </div>
            <div class="productlayout2">
              <div class="product2">
                <div class="image2"><a href="EH3500.html"><img src="Website Images/EH3500.Thumb.jpg" alt="EH3500" width="115" height="127" border="0" /></a></div>
                <div class="imagetext2">
                  <div>
                    <div align="center">
                      
                    <h3 align="center" class="titleforproducts">EH3500 </h3>
                    <h3 align="center" class="titleforproducts">Portelli Leather Double Wine Case</h3>
                      
                    </div>
                    
                      <a href="EH3500.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                  </div>
                </div>
              </div>
            </div>
              <div class="productlayout3">
                <div class="product3">
                  <div class="image3"><a href="LG9102.html"><img src="Website Images/LG-9102.Thumb.jpg" alt="LG-9102" width="119" height="128" /></a></div>
                  <div class="imagetext3">
                    <div>
                      <div align="center">
                        <strong class="titleforproducts">LG-9102 <br />
                        <br />
                        Upper West Side <br />
                        Single Wine Case</strong>
                        
                        <a href="LG9102.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        <div class="productlayout4"></div>
        <div class="productlayout5"></div>
        <div class="productlayout6">
          <div class="product6"></div>
        </div>
      </div>
      
      <div class="maincontent">
        <div class="ProductTitle"><img src="Website Images/Blank.jpg" width="408" height="120" /></div>
        <div class="productlayout">
            <div class="product1">
              <div class="image1"><a href="557-65-113.html"><img src="Website Images/557-65-113.ArubaCabana.Thumb.jpg" alt="557-65-1113" width="116" height="128" /></a></div>
              <div class="imagetext1">
                <div>
                  <strong class="titleforproducts">557-65-113 <br />
                  <br />
                  Aruba Single-Bottle <br />
                  Wine Case</strong>
                  <a href="557-65-113.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>                                  </div>
                <p> </p>
              </div>
              <p> </p>
            </div>
          </div>
            <div class="productlayout2">
              <div class="product2">
                <div class="image2"><a href="LG9099.html"><img src="Website Images/LG-9099.Thumb.jpg" alt="LG-9099" width="118" height="127" border="0" /></a></div>
                <div class="imagetext2">
                  <div>
                    <div align="center">
                      
                    <h3 align="center" class="titleforproducts">LG-9099</h3>
                    <h3 align="center" class="titleforproducts">Champagne/Wine Holder</h3>
                      
                    </div>
                    <a href="LG9099.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                  </div>
                </div>
              </div>
            </div>
              <div class="productlayout3">
                <div class="product3">
                  <div class="image3"><a href="LG9158.html"><img src="Website Images/LG-9158.Thumb.jpg" alt="LG-9158" width="119" height="128" /></a></div>
                  <div class="imagetext3">
                    <div>
                      <div align="center">
                        <strong class="titleforproducts">LG-9158 <br />
                        <br />
                        Upper West Side <br />
                        Double Wine Case</strong>
                        <a href="LG9158.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        <div class="productlayout4"></div>
        <div class="productlayout5"></div>
        <div class="productlayout6">
          <div class="product6"></div>
        </div>
      </div>
      
      <div class="maincontent">
        <div class="ProductTitle"><img src="Website Images/Blank.jpg" width="408" height="120" /></div>
        <div class="productlayout">
            <div class="product1">
              <div class="image1"><a href="66897.html"><img src="Website Images/Large.668-97.Encore.WineCase.Thumb.jpg" alt="668-97" width="114" height="128" /></a></div>
              <div class="imagetext1">
                <div>
                  <strong class="titleforproducts">668-97 <br />
                  <br />
                  Encore Insulated <br />
                  Single Bottle Case</strong>
                  <a href="66897.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>                                  </div>
                <p> </p>
              </div>
              <p> </p>
            </div>
          </div>
            <div class="productlayout2">
              <div class="product2">
                <div class="image2"><a href="66743.html"><img src="Website Images/Large.667-43.Manhattan.WineCase.Thumb.jpg" alt="667-43" width="113" height="126" border="0" /></a></div>
                <div class="imagetext2">
                  <div>
                    <div align="center">
                      
        <h3 align="center" class="titleforproducts">667-43 </h3>
        <h3 align="center" class="titleforproducts">Manhattan Two-Bottle Cocktail Case</h3>
                      
                    </div>
                    <a href="66743.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                  </div>
                </div>
              </div>
            </div>
              <div class="productlayout3">
                <div class="product3">
                  <div class="image3"><a href="67365133.html"><img src="Website Images/Large.673-65-133.Escape.WineCase.Thumb.jpg" alt="673-65-133" width="114" height="128" /></a></div>
                  <div class="imagetext3">
                    <div>
                      <div align="center">
                        <strong class="titleforproducts">673-65-133<br />
                        <br />
                        Escape Insulated <br />
                        Wine Case</strong>
                        <a href="67365133.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        <div class="productlayout4"></div>
        <div class="productlayout5"></div>
        <div class="productlayout6">
          <div class="product6"></div>
        </div>
      </div>
      
      <div class="maincontent">
        <div class="ProductTitle"><img src="Website Images/WebsiteSubTitle.OutdoorDining.jpg" width="408" height="114" alt="Outdoor Dining" /></div>
        <div class="productlayout">
            <div class="product1">
              <div class="image1"><a href="611701.html"><img src="Website Images/611701.RedOpen.Thumb.jpg" alt="611701" width="116" height="128" /></a></div>
              <div class="imagetext1">
                <div>
                  <strong class="titleforproducts">611701 <br />
                  <br />
                  Pulley Cooler <br />
                  w/Pullman Handle</strong>
                  <a href="611701.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>                                  </div>
                <p> </p>
              </div>
              <p> </p>
            </div>
          </div>
            <div class="productlayout2">
              <div class="product2">
                <div class="image2"><a href="GR4901.html"><img src="Website Images/GR4901.Thumb.jpg" alt="GR4901" width="125" height="117" border="0" /></a></div>
                <div class="imagetext2">
                  <div>
                    <div align="center">
                      
                    <h3 align="center" class="titleforproducts">GR4901 </h3>
                    <h3 align="center" class="titleforproducts">Glacier 2-Person Picnic Set</h3>
                      
                    </div>
                    <a href="GR4901.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                  </div>
                </div>
              </div>
            </div>
              <div class="productlayout3">
                <div class="product3">
                  <div class="image3"><a href="GR4900.html"><img src="Website Images/GR4900.thumb.jpg" width="117" height="127" alt="GR4900" /></a></div>
                  <div class="imagetext3">
                    <div>
                      <div align="center">
                        <strong class="titleforproducts">GR4900 <br />
                        <br />
                        Ranier 4-Person <br />
                        Picnic Set</strong>
                        <a href="GR4900.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        <div class="productlayout4"></div>
        <div class="productlayout5"></div>
        <div class="productlayout6">
          <div class="product6"></div>
        </div>
      </div>
      
      <div class="maincontent">
        <div class="ProductTitle"><img src="Website Images/Blank.jpg" width="408" height="120" /></div>
        <div class="productlayout">
            <div class="product1">
              <div class="image1"><a href="75000175.html"><img src="Website Images/Large.750-00-175.Buccaneer.Tailgate.Thumb.jpg" alt="750-00-175" width="118" height="129" /></a></div>
              <div class="imagetext1">
                <div>
                  <strong class="titleforproducts">750-00-175 <br />
                  <br />
                  Buccaneer Tailgating Charcoal Grill/Cooler</strong>
                  <a href="75000175.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>                                  </div>
                <p> </p>
              </div>
              <p> </p>
            </div>
          </div>
            <div class="productlayout2">
              <div class="product2">
                <div class="image2"><a href="77085175.html"><img src="Website Images/Large.770-85-175.VulcanWithTrolley.Thumb.jpg" alt="770-85-175" width="112" height="127" border="0" /></a></div>
                <div class="imagetext2">
                  <div>
                    <div align="center">
                      
            <h3 align="center" class="titleforproducts">770-85-175</h3>
            <h3 align="center" class="titleforproducts">Vulcan Tailgating Grill/Cooler With Trolley</h3>
                      
                    </div>
                    <a href="77085175.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                  </div>
                </div>
              </div>
            </div>
              <div class="productlayout3">
                <div class="product3">
                  <div class="image3"><a href="77000175.html"><img src="Website Images/Large.770-00-175.Vulcan.Thumb.jpg" alt="770-00-175" width="111" height="130" /></a></div>
                  <div class="imagetext3">
                    <div>
                      <div align="center">
                        <strong class="titleforproducts">770-00-175 <br />
                        <br />
                        Vulcan Tailgating <br />
                        Gas Grill/Cooler</strong>
                        <a href="77000175.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        <div class="productlayout4"></div>
        <div class="productlayout5"></div>
        <div class="productlayout6">
          <div class="product6"></div>
        </div>
      </div>
      
      <div class="maincontent">
        <div class="ProductTitle"><img src="Website Images/WebsiteSubTitle.WineBarSets.jpg" width="408" height="114" alt="Wine & Bar Sets" /></div>
        <div class="productlayout">
            <div class="product1">
              <div class="image1"><a href="EH3313.html"><img src="Website Images/EH3313.Thumb.jpg" alt="EH3313" width="130" height="118" /></a></div>
              <div class="imagetext1">
                <div>
                  <strong class="titleforproducts">EH3313 <br />
                  <br />
                  Attache <br />
                  Martini Set</strong>
                  <a href="EH3313.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>                                  </div>
                <p> </p>
              </div>
              <p> </p>
            </div>
          </div>
            <div class="productlayout2">
              <div class="product2">
                <div class="image2"><a href="EH3319.html"><img src="Website Images/EH3319.Thumb.jpg" alt="EH3319" width="131" height="118" border="0" /></a></div>
                <div class="imagetext2">
                  <div>
                    <div align="center">
                      
<h3 align="center" class="titleforproducts">EH3319 </h3>
<h3 align="center" class="titleforproducts">Frasco Wine/Bar Set</h3>
                      
                    </div>
                    <a href="EH3319.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                  </div>
                </div>
              </div>
            </div>
              <div class="productlayout3">
                <div class="product3">
                  <div class="image3"><a href="EH3309.html"><img src="Website Images/EH3309.thumb.jpg" alt="EH3309" width="114" height="128" /></a></div>
                  <div class="imagetext3">
                    <div>
                      <div align="center">
                        <strong class="titleforproducts">EH3309 <br />
                        <br />
                        Colta II <br />
                        Wine/Bar Set</strong>
                        <a href="EH3309.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        <div class="productlayout4"></div>
        <div class="productlayout5"></div>
        <div class="productlayout6">
          <div class="product6"></div>
        </div>
      </div>
      
      <div class="maincontent">
        <div class="ProductTitle"><img src="Website Images/Blank.jpg" width="408" height="120" /></div>
        <div class="productlayout">
            <div class="product1">
              <div class="image1"><a href="68904.html"><img src="Website Images/Large.868-00-113.WineTools.Thumb.jpg" alt="689-04" width="116" height="131" /></a></div>
              <div class="imagetext1">
                <div>
                  <strong class="titleforproducts">689-04 <br />
                  <br />
                  Metro 4-Piece <br />
                  Wine Tools</strong>
                  <a href="68904.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>                                  </div>
                <p> </p>
              </div>
              <p> </p>
            </div>
          </div>
            <div class="productlayout2">
              <div class="product2">
                <div class="image2"><a href="CPP2027.html"><img src="Website Images/CPP-2027.Thumb.jpg" alt="CPP-2027" width="118" height="125" border="0" /></a></div>
                <div class="imagetext2">
                  <div>
                    <div align="center">
                      <span class="titleforproducts">CPP-2027 <br />
                      <br />
                      Charming Wine <br />
                      Gift Set </span>
                    </div>
                    <a href="CPP2027.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                  </div>
                </div>
              </div>
            </div>
              <div class="productlayout3">
                <div class="product3">
                  <div class="image3"><a href="PL7705.html"><img src="Website Images/PL-7705.Thumb.jpg" alt="PL-7705" width="113" height="124" /></a></div>
                  <div class="imagetext3">
                    <div>
                      <div align="center">
                        <strong class="titleforproducts">PL-7705 <br />
                        <br />
                        Rosewood Wine <br />
                        Gift Set</strong>
                        <a href="PL7705.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        <div class="productlayout4"></div>
        <div class="productlayout5"></div>
        <div class="productlayout6">
          <div class="product6"></div>
        </div>
      </div>
      
      <div class="maincontent">
        <div class="ProductTitle"><img src="Website Images/Blank.jpg" width="408" height="120" /></div>
        <div class="productlayout">
            <div class="product1">
              <div class="image1"><a href="86313504.html"><img src="Website Images/Large.863-13-504.Celebration.WineSet.Thumb.jpg" alt="863-13-504" width="116" height="125" /></a></div>
              <div class="imagetext1">
                <div>
                  <strong class="titleforproducts">863-13-504 <br />
                  <br />
                  Celebration <br />
                  Wine Set</strong>
                  <a href="86313504.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>                                  </div>
                <p> </p>
              </div>
              <p> </p>
            </div>
          </div>
            <div class="productlayout2">
              <div class="product2">
                <div class="image2"><a href="88100504.html"><img src="Website Images/Large.881-00-504.Chablis.WineSet.Thumb.jpg" alt="881-00-504" width="112" height="106" border="0" /></a></div>
                <div class="imagetext2">
                  <div>
                    <div align="center">
                      
          <h3 align="center" class="titleforproducts">881-00-504</h3>
          <h3 align="center" class="titleforproducts"> </h3>
          <h3 align="center" class="titleforproducts">Chablis Wine Set</h3>
                      
                    </div>
                    <a href="88100504.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                  </div>
                </div>
              </div>
            </div>
              <div class="productlayout3">
                <div class="product3">
                  <div class="image3"><a href="88500179.html"><img src="Website Images/Large.885-00-179.Chaianti.WineSet.Thumb.jpg" alt="888-00-179" width="117" height="126" /></a></div>
                  <div class="imagetext3">
                    <div>
                      <div align="center">
                        <strong class="titleforproducts">888-00-179 <br />
                        <br />
                        Grenache Black <br />
                        Wine Set</strong>
                        <a href="88500179.html"><img src="Website Images/ProductDetail.Button.jpg" width="97" height="30" alt="Product Detail" /></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        <div class="productlayout4"></div>
        <div class="productlayout5"></div>
        <div class="productlayout6">
          <div class="product6"></div>
        </div>
      </div>
      
      <div id="navigation">
        <ul id="MenuBar1" class="MenuBarVertical">
          <li><a href="index.html" title="The Executive VIP">Home</a></li>
          <li><a href="aboutus.html" title="Extend Your Brand">Extend Yor Brand</a></li>
          <li><a class="MenuBarItemSubmenu" href="#">For The VIP</a>
            <ul>
              <li><a href="winebarsets.html" title="The Wine Connoisseur">The Wine Connoisseur</a></li>
              <li><a href="confections.html" title="Gourmet Confections">Gourmet Confections</a></li>
              <li><a href="madeforipadiphone.html" title="Made for iPad & iPhone">Made for iPad & iPhone</a></li>
              <li><a href="viplounge.html" title="The VIP Lounge">The VIP Lounge</a></li>
              <li><a href="laptopaccessories.html" title="Laptop Accessories">Laptop Accessories</a></li>
              <li><a href="clocks.html" title="Clocks">Clocks</a></li>
              <li><a href="finetimepieces.html" title="Fine Timepieces">Fine Timepieces</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Bags & Luggage</a>
            <ul>
              <li><a href="checkpointlaptopbags.html" title="Checkpoint Friendly Laptop Bags">Checkpoint Friendly Laptop Bags</a></li>
              <li><a href="travelluggage.html" title="Business Travel Luggage">Business Travel Luggage</a></li>
              <li><a href="theladytraveler.html" title="The Lady Traveler">The Lady Traveler</a></li>
              <li><a href="travelaccessories.html" title="Travel Accessories">Travel Accessories</a></li>
              <li><a href="golf.html" title="The Golf Enthusiast">The Golf Enthusiast</a></li>
              <li><a href="organizationfitness.html" title="Professional Organization & Fitness">Professional Organization & Fitness</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Brand Promotions</a>
            <ul>
              <li><a href="promotional.html" title="Promotional Products">Promotional Products</a></li>
              <li><a href="writinginstruments.html" title="Writing Instruments">Writing Instruments</a></li>
              <li><a href="drinkware.html" title="Drinkware">Drinkware</a></li>
            </ul>
          </li>
          <li><a href="vipdiscussion.html" title="The VIP Discussion">The VIP Discussion</a></li>
          <li><a href="purchase.html" title="How To Purchase">How To Purchase</a></li>
          <li><a href="contactus.html" title="Contact Us">Contact Us</a></li>
        </ul>
        <div id="Earth"><em><img src="Website Images/Earth Ornament.jpg" width="201" height="289" alt="Earth" /></em></div>
        
      </div>
      <div id="footer">
        <div id="nextpagebutton"></div>
      
        <div id="copywrite">© iCheveux 2011</div>
      
        <div id="privacypolicy">Our Privacy Policy</div>
        
        <div id="ContactSales"><strong>Contact Sales: 1-877-436-9857</strong></div>
        </div>
    </div>
    </div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

So frustrated! Need help positioning image...

Hi folks...
I am learning CSS in fits and starts, and clearly I don't have a good enough grasp on it. I hope someone can help me.
I created this page, and tried to place an image in the large "main content" area to the right of the slideshow. It didn't work, kept getting shifted elsewhere. So I specified it as the background image for that div instead... It looks fine in Firefox and Safari (I'm on a Mac), however, a colleague with Internet Explorer 7 on a PC says that it shows up way down at the bottom of the page after the slideshow
I've looked at all the ways to insert the image but none of them work. I know I must be missing something very simple. Can anyone help?
Here's the URL... http://greatdiamondrentals.com/index.html
and the source 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>Great Diamond Rentals, Diamond Cove, Great Diamond Island, Maine</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("jquery", "1.3.2");
    </script>
<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#slideshow').cycle();
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
} else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
} else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
</script>
<style type="text/css">

</style>
<meta name="Keywords" content="Maine, Vacation, rentals, Great Diamond Island, Diamond Cove, vacation homes, Island, Casco Bay, Portland, Maine Coast, Atlantic Ocean, Oceanside, seaside, Family, New England, lobster, beach, beaches, islands, rental, hotel, inn, bed and breakfast, holiday, ferry, fort, historic" />
<meta name="Description" content="Vacation on a Maine island! Beautiful historic homes available for rent at Diamond Cove on Great Diamond Island in Casco Bay near Portland, Maine." />
</head>
<body class="twoColFixLtHdr" onload="MM_preloadImages('images/visited_homes.jpg','images/visited_about.jpg','images/vi sited_amenities.jpg','images/visited_map.jpg','images/visited_faq.jpg','images/visited_con tsact.jpg')">
<div id="container">
<div id="header">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><a href="http://greatdiamondrentals.com/view_our_homes.htm" target="_top" onclick="MM_nbGroup('down','group1','viewhomes','images/visited_homes.jpg',1)" onmouseover="MM_nbGroup('over','viewhomes','images/visited_homes.jpg','images/visited_hom es.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav_viewourhomes.jpg" alt="View Our Homes" name="viewhomes" width="186" height="30" border="0" id="viewhomes" onload="" /></a></td>
        <td><a href="about_the_island_2010.html" target="_top" onclick="MM_nbGroup('down','group1','about','images/visited_about.jpg',1)" onmouseover="MM_nbGroup('over','about','images/visited_about.jpg','images/visited_about.j pg',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav_about.jpg" alt="images/visited_about.jpg" name="about" width="192" height="30" border="0" id="about" onload="" /></a></td>
        <td><a href="amenities.htm" target="_top" onClick="MM_nbGroup('down','group1','amenities','images/visited_amenities.jpg',1)" onMouseOver="MM_nbGroup('over','amenities','images/visited_amenities.jpg','images/visited _amenities.jpg',1)" onMouseOut="MM_nbGroup('out')"><img name="amenities" src="images/nav_amenities.jpg" border="0" alt="amenities and activities" onLoad="" /></a></td>
        <td><a href="map_2010.html" target="_top" onClick="MM_nbGroup('down','group1','map','images/visited_map.jpg',1)" onMouseOver="MM_nbGroup('over','map','images/visited_map.jpg','images/visited_map.jpg',1) " onMouseOut="MM_nbGroup('out')"><img name="map" src="images/nav_map.jpg" border="0" alt="island map" onLoad="" /></a></td>
        <td><a href="FAQ_2010.html" target="_top" onClick="MM_nbGroup('down','group1','FAQs','images/visited_faq.jpg',1)" onMouseOver="MM_nbGroup('over','FAQs','images/visited_faq.jpg','images/visited_faq.jpg',1 )" onMouseOut="MM_nbGroup('out')"><img name="FAQs" src="images/nav_faq.jpg" border="0" alt="FAQs" onLoad="" /></a></td>
        <td><a href="contact2009.html" target="_top" onClick="MM_nbGroup('down','group1','contact','images/visited_contsact.jpg',1)" onMouseOver="MM_nbGroup('over','contact','images/visited_contsact.jpg','images/visited_co ntsact.jpg',1)" onMouseOut="MM_nbGroup('out')"><img name="contact" src="images/nav_contact.jpg" border="0" alt="contact us" onLoad="" /></a></td>
      </tr>
    </table>
    <h1> </h1>
</div>
<div id="sidebar1">
      <div id="slideshow">
<img src="/images/slide1.jpg" />
<img src="/images/slide2.jpg" />
<img src="/images/slide3.jpg" />
<img src="/images/slide4.jpg" />
<img src="/images/slide5.jpg" />
<img src="/images/slide6.jpg" />
<img src="/images/slide7.jpg" />
<img src="/images/slide8.jpg" />
<img src="/images/slide9.jpg" />
<img src="/images/slide10.jpg" />
</div>
</div>
<div id="mainContent">
    <h1> </h1>
</div>
    
    <div id="footer">
      <p>Great Diamond Rentals, c/o Phoenix Management, P.O. Box 759, Saco, Maine 04072 - (207) 766-3005 - fax (207) 571-3066 -<a href="mailto: [email protected]"> [email protected]</a></p>
      
</div>
    <br class="clearfloat" />

</div>
</body>
</html>

staceyetc wrote:
Hi folks...
I am learning CSS in fits and starts, and clearly I don't have a good enough grasp on it. I hope someone can help me.
I created this page, and tried to place an image in the large "main content" area to the right of the slideshow. It didn't work, kept getting shifted elsewhere. So I specified it as the background image for that div instead... It looks fine in Firefox and Safari (I'm on a Mac), however, a colleague with Internet Explorer 7 on a PC says that it shows up way down at the bottom of the page after the slideshow
I've looked at all the ways to insert the image but none of them work. I know I must be missing something very simple. Can anyone help?
Here's the URL... http://greatdiamondrentals.com/index.html
The width of your #mainConent <div> is too wide hence in IE it is displaced to beneath the side bar.
Change it to 560px wide and also add float: left; as shown below:
.twoColFixLtHdr #mainContent {
    height: 579px;
    width: 560px;
    float: left;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-right: 0px;
    padding-bottom: 0;
    padding-left: 0px;
    margin-left: 0px;
    background-image: url(images/GDRmaincontent.jpg);
    background-position: right top;
    background-repeat: no-repeat;
background-color:#609;

Why aren't my CSS and div tag boxes displaying the background images I'm plugging in?

I'm using the CSS dialog boxes to places images via the background image option into my dreamweaver site. Everything looks fine in dreamweaver but when I view it any of the browsers, two of the images I've place as div tag background images don't work....the overal background image of the site works, but these don't show up ....
here's my code if it helps to answer
<!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>Main</title>
<style type="text/css">
body {
background-image: url(images/realgrade.jpg);
background-repeat: repeat-x;
text-align: center;
html, body {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 0px;
padding-top: 25px;
#wrapper {
width: 930px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/possible%20image. jpg);
background-repeat: no-repeat;
#header {
height: 192px;
width: 237px;
background-image: url(images/logo_fill.jpg);
background-repeat: no-repeat;
position: absolute;
left: 35px;
top: -25px;
#mainNav {
background-color: #33F;
height: 200px;
width: 272px;
float: left;
margin-top: 233px;
#maincontent {
height: 600px;
width: 608px;
float: right;
margin-bottom: 45px;
padding-right: 25px;
background-repeat: no-repeat;
background-position: center 270px;
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/opaqueMaincontent .png);
#sidebar {
background-color: #F36;
height: 250px;
width: 272px;
clear: left;
float: left;
#footer {
height: 525px;
width: 870px;
clear: both;
padding-top: 45px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
background-image: url(images/footer_image.jpg);
background-repeat: no-repeat;
margin-top: 45px;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
    <p> </p>
    <p> </p>
    <p> </p>
</div>
<div id="mainNav">
<p> </p>
</div>
<div id="maincontent"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
here's what I'm going for
here's what I'm getting in the browser
Please help!

Your image files are pointing to your hard drive, not your server. You have this
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/imag es/opaqueMaincontent.png);
and you should have this
background-image: url(imag es/opaqueMaincontent.png);
Also, is your images file named imag es?
Gary

Can you use a flex application as part of a whole web page?

Hello all,
Have a quick question. I am coming over from a flash developing background, and I commonly used smaller flash files as 'part' of a entire web page. For example, a small flash video player section with a combo box to select the video to play; this swf file would be sized at about 600px wide by 400px high. Then I would just put that in a div tag and add it to my web page. I am trying to do this with flex, but I am running into issues. It seems that the actual published swf wants to run at 100% of the browser window size. I tried adjusting these dimensions; first trying within flex in the <application> height and width props, but that didnt do the trick; then tried to just use the published .swf file in the web page, and set its <object> properties to my required height and width, which 'almost' works but still falls apart when the video player's full screen button is pressed.
So, is it possible to use a flex 'app' as part of a web page, or was flex intended to run on its own and 'not' as part of a web page? Thanks in advance!

You definitely can. I typically drop the Flash/Flex app into a "mainContent" div within my larger page structure, so my page would look something like this:
<html>
<style type="text/css">
     #mainContent {height: 600px; width: 900px;}
</style>
<body>
<div id="topNav">BLAH</div>
<div id="sideNav">BLAH</div>
<div id="mainContent">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            id="MyFlashApp" width="100%" height="768"
            codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
            <param name="movie" value="MyFlashApp.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#FFFFFF" />
            <param name="allowScriptAccess" value="sameDomain" />
            <embed src="MyFlashApp.swf" quality="high" bgcolor="#FFFFFF
                width="100%" height="100%" name="MyFlashApp" align="middle"
                play="true"
                loop="false"
                quality="high"
                allowScriptAccess="sameDomain"
                type="application/x-shockwave-flash"
                pluginspage="http://www.adobe.com/go/getflashplayer">
            </embed>
    </object>
</div>
</body>
</html>
Note that I'm only using the HTML approach, but the Javascript should work just as well. With the flash set to width=100% and height=100%, it will fill the enclosing div, but that's it. So, if you wanted to make this expand vertically but not horizontally, just set your CSS style to height: 100% and leave width a px or em value. Note that the enclosing divs (i.e. if you had a wrapper div around the navs and mainContent) would also have to expand/contract.
I don't know about the effects of going full screen, though.

Dell 2408WFP at mac mini over hdmi

I have an new mac mini server, where I try to connect an Dell 2408WFP to over hdmi.
Besides the problems with shadows around the letters in written text and menus, which I solved by setting the resolution to 1600x1000, I have a big color problem, which I can't solve by any calabrating procedure. Green and blue colors are dominating, and all brown to red colors are reduced or missing. For example the Icon of the addressbook appears not in this standard beige color but in green. As you can imagine, this is the absolute kill for any work on images. Since the Dell monitor is a good standard one, which I never had any problems with before, there must be a problem with hdmi ore even worse with the graphics of the mac mini.
Has anybody similar experiences and found a solution. I bought the hdmi cable expecting to have the best connection possible then, and to have only one cable between the mac mini and the monitor. Are there any limitations in the hdmi-standard concerning resolution and color management? I didn't test any dvi cable yet, since I am still hoping to find a solution for this problem.

I have exactly the same issues as you, ie the lack of clear / sharp text and the colour management problem. Did you get anywhere with this?
I was using this Dell display with Windows 7 and had none of these problems. I calibrated the display using a semi-professional calibration utility (i1Profiler / Eye-one Match) and the results under Windows were great. But with the Mac Mini I find that many colours lack saturation. Yellows are very faint, and reds look more like a brown-orange. I tried replacing the HDMI cable with a DVI cable and the Mac HDMI -> DVI converter but I don't see any improvement.
Interestingly I find that the text looks best at the monitor's native resolution, ie 1920 x 1200 but it's still nowhere as crisp as text is under Windows.
For me the colour management issue is the biggest problem. I do lots of underwater photography and I just wouldn't dare work on any of my photos with the display as it is.
The profile I find works the best is sRGB IEC61966-2.1 but it's way off being natural / correct.
I specifically bought the Dell display as it has variable height and fits neatly in the corner off my office where the height is limited, I don't have room for a 27" thunderbolt display even if I could find the funds (~$1600 in the UK!)
I'm running 10.7.2 (Lion) in case it makes a difference.

Inconsistent results wrapping text using floats in CSS

I have <div id="sidebar1"> that floats right, inside of
<div id="mainContent"> which houses all the content. IE won't
allow the text to extend (wrap) the entire width of <div
id="mainContent"> once it is past or below <div
id="sidebar1"> that floats right. Firefox allows it and displays
correctly. I am using SPRY widgets in <div id="sidebar1">
Below is the 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>Citecast Digital Signage</title>
<link href="/CSS/twoColElsRtHdr.css" rel="stylesheet"
type="text/css" />

<script src="Scripts/AC_RunActiveContent.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<script type="text/javascript"
src="p7pm/p7popmenu.js"></script>
<script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<style type="text/css" media="screen">

</style>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet"
type="text/css" />
</head>
<body class="twoColElsRtHdr"
onload="P7_initPM(1,7,1,-20,10)">
<div class="twoColElsRtHdr" id="container">
<div id="header">
</div>

<div id="container_margintop">
<div id="menu">

</div>
<div id="sidebar1">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Research shows digital
signage is more memorable, less annoying than other
media</div>
<div class="AccordionPanelContent">
<p><strong>Caveats to keep in mind
...</strong></p>
<p>Like any research sponsored by a party with a
vested interest in the outcome, these results need to be taken with
a grain of salt. </p>
<p> <a
href="/Pages/articles-columns-news/researchShows...caveats to keep
in mind.shtml">more ...</a> </p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Research shows digital
signage is more memorable ... <strong>What does it all
mean?</strong></div>
<div class="AccordionPanelContent">
<p>Some of the above results simply indicate how much
time the respondents spend interacting with each type of media.
</p>
<p><a
href="/Pages/articles-columns-news/researchShows...what does it all
mean.shtml">More ...</a> </p>
</div>
</div>
</div>
<br />
<br />
<div align="center"><img
src="/Images/clarkpowell-integrator-logo.png" alt="clark powell"
width="214" height="69" /></div>
<div align="center"><img src="/Images/cp 25yr
seal.png" /></div>
<br />
<div align="center"><img
src="/Images/princeton_logo_horiz.jpg" alt="princeton"
/></div><br />
<br />
</div>
<div id="mainContent">
<h1 align="center"> </h1>
<h2 align="center">Turn Key Digital Signage</h2>
<p align="center">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','344','height','400','title','Citecast
digital signage
example','src','/flash/home-tv-reflection','quality','high','pluginspage','
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','/flash/home-tv-reflection'
); //end AC code
</script>
<noscript>
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
width="344" height="400" title="Citecast digital signage
example">
<param name="movie" value="/flash/home-tv-reflection.swf"
/>
<param name="quality" value="high" />
<embed src="/flash/home-tv-reflection.swf" quality="high"
pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="344"
height="400"></embed>
</object>
</noscript>
</p>
<h3>Complete Digital Signage Solution</h3>
<p align="left"><strong>Citecast is a turnkey,
worry free digital signage solution</strong> that includes
content, appropriate hardware, software, installation, training and
support. </p>
<p align="left">Need it quickly? Citecast can be
deployed rapidly so that you are up and communicating fast.
We make it easy to try Citecast with a low cost of entry and
reasonable monthly usage fees. There is no need to purchase
expensive equipment or grow and train your staff. </p>
<p align="left">A Citecast Solution is high end
digital signage without a huge capital investment.
Citecast’s affordable options offer alternatives to
costly capital expenditure by allowing you to use existing
operating or marketing budgets. </p>
<div class="spacershad"></div>
<h3 align="center" class="twoColElsRtHdr">Compelling
digital signage at the point of decision! </h3>
<p class="text1">
What is it worth to you and your organization to have a
sales representative who is always in the right
place to interact with the right people when they are at the
point of decision? What is it worth
to have representation that is informative, always accurate,
and up-to-date delivering an efficient,
positive, message to a captive market in at their point of
decision. </p>
<p class="text1"><a
href="/Pages/Products_and_Services/Examples.shtml">View Citecast
examples </a>
</div>
<br class="clearfloat" />
</div>
<div class="clearfloat"></div>
<div id="footer">
<p></p>
</div>

</div>
<script type="text/javascript">

</script>
</body>
</html>

Can't see your CSS code this way. Much better to publish to a
testing
folder on your remote server.
But as a guess, I think this might work. Add this to your
outer div's CSS.
#mainContent {
height: 1%; /** IE6 peekaboo fix **/
overflow: auto; /** Mozilla clear floats **/
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"Dad Blame" <[email protected]> wrote in
message
news:[email protected]...
> I have <div id="sidebar1"> that floats right,
inside of <div
id="mainContent">
> which houses all the content. IE won't allow the text to
extend (wrap) the
> entire width of <div id="mainContent"> once it is
past or below <div
> id="sidebar1"> that floats right. Firefox allows it
and displays
correctly. I
> am using SPRY widgets in <div id="sidebar1">
> Below is the 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>Citecast Digital Signage</title>
> <link href="/CSS/twoColElsRtHdr.css" rel="stylesheet"
type="text/css" />
> 
> <script src="Scripts/AC_RunActiveContent.js"
type="text/javascript"></script>
> <script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
> <script type="text/javascript"
src="p7pm/p7popmenu.js"></script>
> <script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
>
> <style type="text/css" media="screen">
> 
> </style>
> <link href="SpryAssets/SpryAccordion.css"
rel="stylesheet"
type="text/css" />
> </head>
>
> <body class="twoColElsRtHdr"
onload="P7_initPM(1,7,1,-20,10)">
>
> <div class="twoColElsRtHdr" id="container">
>
>
> <div id="header">
>
> </div>
>
> 
>
>
>
> <div id="container_margintop">
>
> <div id="menu">
> 
> </div>
>
>
>
> <div id="sidebar1">
> <div id="Accordion1" class="Accordion"
tabindex="0">
> <div class="AccordionPanel">
> <div class="AccordionPanelTab">Research shows
digital signage is more
> memorable, less annoying than other media</div>
> <div class="AccordionPanelContent">
> <p>
Caveats to keep in mind ...</p>
> <p>Like any research sponsored by a party with a
vested interest in
the
> outcome, these results need to be taken with a grain of
salt. </p>
> <p> <a
href="/Pages/articles-columns-news/researchShows...caveats
to
> keep in mind.shtml">more ...</a> </p>
> </div>
> </div>
> <div class="AccordionPanel">
> <div class="AccordionPanelTab">Research shows
digital signage is more
> memorable ...
What does it all mean?</div>
> <div class="AccordionPanelContent">
> <p>Some of the above results simply indicate how
much time the
> respondents spend interacting with each type of media.
</p>
> <p><a
href="/Pages/articles-columns-news/researchShows...what does
it
> all mean.shtml">More ...</a> </p>
> </div>
> </div>
> </div>
> <br />
> <br />
>
>
> <div align="center"><img
src="/Images/clarkpowell-integrator-logo.png"
> alt="clark powell" width="214" height="69"
/></div>
>
> <div align="center"><img src="/Images/cp 25yr
seal.png" /></div>
> <br />
> <div align="center"><img
src="/Images/princeton_logo_horiz.jpg"
> alt="princeton" /></div><br />
> <br />
>
>
> </div>
>
> <div id="mainContent">
> <h1 align="center"> </h1>
> <h2 align="center">Turn Key Digital
Signage</h2>
> <p align="center">
> <script type="text/javascript">
> AC_FL_RunContent(
>
'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.
cab#
>
version=9,0,28,0','width','344','height','400','title','Citecast
digital
> signage
>
example','src','/flash/home-tv-reflection','quality','high','pluginspage','h
ttp:
>
//www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFla
sh',
> 'movie','/flash/home-tv-reflection' ); //end AC code
> </script>
> <noscript>
> <object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
>
codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.ca
b#ve
> rsion=9,0,28,0" width="344" height="400" title="Citecast
digital signage
> example">
> <param name="movie"
value="/flash/home-tv-reflection.swf" />
> <param name="quality" value="high" />
> <embed src="/flash/home-tv-reflection.swf"
quality="high"
>
pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Ve
rsio
> n=ShockwaveFlash" type="application/x-shockwave-flash"
width="344"
> height="400"></embed>
> </object>
> </noscript>
> </p>
>
> <h3>Complete Digital Signage Solution</h3>
> <p align="left">
Citecast is a turnkey, worry free digital
signage
> solution that includes content, appropriate
hardware, software,
> installation, training and support. </p>
> <p align="left">Need it quickly? Citecast can be
deployed rapidly
so
> that you are up and communicating fast.
> We make it easy to try Citecast with a low cost of entry
and
> reasonable monthly usage fees. There is no need to
purchase expensive
equipment
> or grow and train your staff. </p>
> <p align="left">A Citecast Solution is high end
digital signage
without
> a huge capital investment.
> Citecast?s affordable options offer alternatives to
costly
capital
> expenditure by allowing you to use existing operating or
marketing
budgets. </p>
> <div class="spacershad"></div>
> <h3 align="center"
class="twoColElsRtHdr">Compelling digital
signage at
> the point of decision! </h3>
> <p class="text1">
> What is it worth to you and your organization to have a
sales
> representative who is always in the right
> place to interact with the right people when they are at
the
point of
> decision? What is it worth
> to have representation that is informative, always
accurate, and
> up-to-date delivering an efficient,
> positive, message to a captive market in at their point
of
decision.
> </p>
> <p class="text1"><a
>
href="/Pages/Products_and_Services/Examples.shtml">View Citecast
examples
</a>
>
> </div>
> <br
> class="clearfloat" />
> </div>
>
> <div class="clearfloat"></div>
>
> <div id="footer">
> <p></p>
> </div>
> 
>
> </div>
>
> <script type="text/javascript">
> 
> </script>
> </body>
> </html>
>
>

URL iView Issue

Hello All,
I created a URL iView and I can preview it successfully. However, upon embedding the URL iView in a page and previewing the page, I get a blank container/iView. Any ideas on why this happens and how it can be fixed?
Regards,
Motaz

Dear Motaz,
Are you seeing any javascript error at the left bottom corner while accessing this URL iview during runtime?
If the portal host and the ivew has different domains, then
this contravenes the javascript same origin policy:
http://en.wikipedia.org/wiki/Same_origin_policy
You can Relax the domain also in the called application (you can use
javascript code like provided in Note 764773 ' iView Automatic Height
feature limitations' to do that). But note that if the javascript code
does other manipulations on the portal parent, you might get unexpected
effects, like the portal framework being replaced by the application
content.
Please also refer the Note 632440 'Domain barrier in the browser of the SAP Enterprise Portal
Regards,
Sowmya K

Ap div moves in IE

I placed an image in the draw ap div tool and placed it above
a background image. When previewed in IE, the image in the ap div
moved to the left, which is also the edge of the div for the main
content. What am I doing wrong.
Thank you

This is the ap div tag in html: <div
id="apDiv5"><img src="../images/welcome-mate.gif" width="250"
height="105" /></div>
This is the main content area: <div
id="mainContent"><img src="../images/hOUSE.jpg" width="575"
height="553" /></div>
This is the css code: .thrColFixHdr #mainContent {
float: right;
margin-left: 5px;
width: 575px;
height: 553px;
margin-top: 5px;
color: #000033;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
background-image: none;
#mainContent {
height: 553px;
width: 565px;
overflow: auto;
The page is from a template that I am using for all my pages.
The ap div is acting as if it was just a div and align left
for the width.
The only thing that is right about the ap div is that it
stays in place in relation to the height. I hope this makes sense.
Thanks for the help.

Why is Box Not Showing Up?

Hi, I have done all of this using only the "code" view. I am
trying to figure out why I can't see the "main content" box in
green when it is green in my code?
http://www3.telus.net/~jessum/#
.maincontent {
background-color: #0CC;
height: 200px;
.header {
background-color: #09F;
height: 200px;
-->
</style></head>
<body>
<div class=header>header</div>
<div class=maincontent>main content</div>
<div class=sidebar>sidebar</div>
<div>header</div>
<div>header</div>
<div>header</div>
</body>
</html>

> Hi, I have done all of this using only the "code" view.
I am trying to figure
> out why
>
>
http://www3.telus.net/~jessum/
What is your question??
<!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>Untitled Document</title>
<style type="text/css">

</style></head>
<body>
<div class=header>header</div>
<div class=maincontent>main content</div>
<div class=sidebar>sidebar</div>
<div>header</div>
<div>header</div>
<div>header</div>
</body>
</html>
Alan
Adobe Community Expert, dreamweaver
http://www.adobe.com/communities/experts/

Adding template break box model and font

I have been working on this one for a few hours now and I can't figure it out. I am working with the HTML5 Boilerplate and recreating the home page for our company. When I do not include the template, the file works fine in IE. But the second I apply a template the whole page becomes broken and the IE box model applies and my font sizing gets messed up.
I have included a link to the files on a testing server, if this is not allowed, let me know and I can put up the code.
Excuse the cupcakes from FlexSlider, I have not yet finished that piece.
Working (no template): http://www.qa.mpay.com/index.asp
Not working (template): http://www.qa.mpay.com/copy.asp
Do I just need to rework my entire code so that it is more compliant with the IE Box Model qualifications, ie. div inside of a div with width on one and padding/margin on the other?

Alright here's the code for the one that's not working. After posting last night, I realized the links were probably only viewable internally.
UPDATE: Just added <html> after <!doctype html> like I've seen you post about in another forum discussion. That seems to have fixed it. Why is that needed? Isn't it the html tag being opened in the line <html class="no-js" lang="en"> What I mean by this, is why does it work fine in other browsers when that is missing, but it messes up with IE?
P.S. I'm starting to blame H5BP for poor documentation, but I'm learning a lot in the process.
TEMPLATE: (without <html>)
templates>template_page_home_new.dwt
<!doctype html>





 <html class="no-js" lang="en"> 
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>MPAY Inc.</title>


<meta name='description' content='Payroll Software/Services- Business Process Outsourcing, Reseller and Referral Programs for Payroll Providers, Brokers, CPAs, and more offered by MPAY Inc'/>
<meta name='keywords' content='MPAY, payroll, payentry.com, millennium, millennium payroll, payroll processing, payroll software, online payroll, outsourcing, business process outsourcing, timekeeping, Boston, MA, Charlotte, NC, work comp, workers comp, SecureView, online tax forms'/>


<meta name="viewport" content="width=device-width,initial-scale=1">



<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/flexslider.css" type="text/css" media="screen" />

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

<script src="../js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<div id="container">
    
<div id="navigation">
    <div id="logoregion">
          <div id="logo">
              <a href="default.asp"><img src="../images/logo.gif" alt="mpay_logo" /></a>
          </div>
          <div id="headerlink">
              <ul>
                      <li><a href="../client-login.asp"><p class="new">NEW!</p>  <img src="../images/blue_bullet_line.gif" alt=""> Client Login  </a></li>
                      <li><a href="contact_us.asp"><img src="../images/blue_bullet_line.gif" alt=""> Contact Us  </a></li>
                      <li><a href="careers.asp"><img src="../images/blue_bullet_line.gif" alt=""> Careers  </a></li>
                      <li><a href="about_us.asp"><img src="../images/blue_bullet_line.gif" alt=""> About Us</a></li></ul>
          </div>
          <div id="contact">
          (781) 810-9000<br />
          <a href="mailto:[email protected]">[email protected]</a>
          </div>
      </div>
      <div id="mainnav">
          <ul class="navigation-controls">
                  <li><a href="../index.html"><p class="navigation-text">Home</p></a></li>
                  <li><a href="../services.html"><p class="navigation-text">Services</p></a></li>
                  <li><a href="../products.html"><p class="navigation-text">Products</p></a></li>
                  <li><a href="../solutions.html"><p class="navigation-text">Solutions</p></a></li>
                  <li><a href="../support.html"><p class="navigation-text">Client Support</p></a></li>
                  <li class="nav-border-right"><a href="../resources.html"><p class="navigation-text">Resources</p></a></li>
           </ul>
      </div>
    </div>
    

    
        <div id="footer">
          <div id="footercontent">
              <div id="legal">
              <a href="../index.html">MPAY Inc.</a>  |
              <a href="../legal.html">Legal Notices</a>  |
              <a href="../privacy.html">Your Privacy</a>
              </div>
              <div id="copyright">
               <script type="text/javascript">
      now=new Date();
      year=now.getFullYear();
          </script>
               © Copyright
               <script type="text/javascript">
      document.write (year);
               </script>
               MPAY, Inc. All Rights Reserved.</div>
         </div>
       </div>

   </div>



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.2.min.js"><\/script>')</script>

<script defer src="../js/plugins.js"></script>
<script defer src="../js/script.js"></script>

    
     <script type="text/javascript">
       /* <![CDATA[ */
       document.write (
          '<img src="http://marketing.mpay.com/acton/bn/1170/visitor.gif?ts='+
          new Date().getTime()+
          '&ref='+escape(document.referrer) + '">'
       /* ]]> */
       </script>

<script>
    window._gaq = [['_setAccount','UA-12607129-1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
</script>
</body>
</html>
File it's being applied to:
copy.asp
<!doctype html>





 <html class="no-js" lang="en"> 
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>MPAY Inc.</title>


<meta name='description' content='Payroll Software/Services- Business Process Outsourcing, Reseller and Referral Programs for Payroll Providers, Brokers, CPAs, and more offered by MPAY Inc'/>
<meta name='keywords' content='MPAY, payroll, payentry.com, millennium, millennium payroll, payroll processing, payroll software, online payroll, outsourcing, business process outsourcing, timekeeping, Boston, MA, Charlotte, NC, work comp, workers comp, SecureView, online tax forms'/>
<style type="text/css">

</style>


<meta name="viewport" content="width=device-width,initial-scale=1">



<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

<script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<div id="container">
    
<div id="navigation">
    <div id="logoregion">
          <div id="logo">
              <a href="default.asp"><img src="images/logo.gif" alt="mpay_logo" /></a>
          </div>
          <div id="headerlink">
              <ul>
                      <li><a href="client-login.asp"><p class="new">NEW!</p>  <img src="images/blue_bullet_line.gif" alt=""> Client Login  </a></li>
                      <li><a href="contact_us.asp"><img src="images/blue_bullet_line.gif" alt=""> Contact Us  </a></li>
                      <li><a href="careers.asp"><img src="images/blue_bullet_line.gif" alt=""> Careers  </a></li>
                      <li><a href="about_us.asp"><img src="images/blue_bullet_line.gif" alt=""> About Us</a></li></ul>
          </div>
          <div id="contact">
          (781) 810-9000<br />
          <a href="mailto:[email protected]">[email protected]</a>
          </div>
      </div>
      <div id="mainnav">
          <ul class="navigation-controls">
                  <li><a href="index.html"><p class="navigation-text">Home</p></a></li>
                  <li><a href="services.html"><p class="navigation-text">Services</p></a></li>
                  <li><a href="products.html"><p class="navigation-text">Products</p></a></li>
                  <li><a href="solutions.html"><p class="navigation-text">Solutions</p></a></li>
                  <li><a href="support.html"><p class="navigation-text">Client Support</p></a></li>
                  <li class="nav-border-right"><a href="resources.html"><p class="navigation-text">Resources</p></a></li>
           </ul>
      </div>
    </div>
    

    <div id="slideshow">
        
        <div class="flexslider">
        <ul class="slides">
            <li>
                <a href="#"><img src="img/planet_hollywood.jpg" />
                <div class="flex-caption">
                    <div id="slideone">
                        <h2 class="gold" >MPAY Sales & Product <br />Roadmap Workshop</h2><br />
                        <h3 class="white">
                        March 2, 2012 / Las Vegas
                        <br />
                        </h3>
                         <br /> <br /> <br />
                        <p class="gold underline">
                        Learn more about IPPA Event
                        </p>
                    </div>
                </div></a>
            </li>
            <li>
                <a href="#"><img src="img/inacup_samoa.jpg" />
                <div class="flex-caption">
                    <h2 >Our Products</h2><br />
                    <h3 >Payentry.com
                    <br />Secure and reliable online solution for payroll and human resource management
                    Millennium
                    <br />User-friendly PC solution provides a flexible system with robust functionality
                    </h3>
                </div></a>
            </li>
            <li>
                <a href="#"><img src="img/inacup_donut.jpg" />
                <div class="flex-caption">
                    <h2 >Our Solutions</h2><br />
                    <h3 >Business Process Outsourcing<br />
                Reseller Program<br />
                Referral Program<br />
                Direct Services
                    </h3>
                </div></a>
            </li>
            <li>
                <a href="#"><img src="img/inacup_pumpkin.jpg" />
                <div class="flex-caption">
                    <h2 >Compliance & Security</h2><br />
                    <h3 >Payroll Processing and Tax Management<br />
                Employee Management<br />
                New Hire Reporting<br />
                Workers’ Compensation<br />
                Wage Garnishment<br />
                COBRA Administration
                    </h3>
                </div></a>
            </li>
            <li>
                <a href="#"><img src="img/inacup_donut.jpg" />
                <div class="flex-caption">
                    <h2 >Paperless Solutions</h2><br />
                    <h3 >Secure Document Delivery via SecureView<br />
                Employee Self Service with Online Tax Forms<br />
                Money Network Payroll Distribution Service
                    </h3>
                </div></a>
            </li>
        </ul>
        <div >
        <ul class="custom-controls">
                <li><a href="#">Upcoming Events</a></li>
                <li><a href="#">Our Products</a></li>
                <li><a href="#">Our Solutions</a></li>
                <li><a href="#">Compliance & Security</a></li>
                <li><a href="#">Paperless Solutions</a></li>
         </ul>
         </div>
      </div>
    </div>
    <div id="main" role="main">
        <div id="banner">
          <div id="leftbanner" class="bluedropshadow">Learn how MPAY can find a <br />solution that’s right for you.</div>
          <div id="bannerdivision">
          <img src="img/banner_division.png" alt="" />
          </div>
          <div id="rightbanner">
            <div id="emailbutton">
            <a href="#"><img src="img/email_us_button.png" alt="Email Us!" /></a></div>
            <div id="or" class="bluedropshadow">or</div>
            <div id="callus">
            Call us today at<br />
            781-810-9000</div>
          </div>
        </div>
      <div id="bannerbottom">
          </div>
        <div id="leftcol">
          <div id="introduction">
          <p>MPAY Inc. is a <a href="#">payroll software</a> and <a href="#">services</a> company providing strategic <a href="#">business solutions</a> to employers and business partners nationwide. MPAY presents a variety of programs, including <a href="#">business process outsourcing</a>, to a wide range of <a href="#">industries</a>. MPAY’s offerings streamline processes, improve productivity, and simplify administration, allowing clients to get the most out of their workday.</p>
          </div>
          <div id="twitterfeed">
              <div id="twitterlogo">
              <h4>Twitter<br />Feed</h4>
              </div>
              <div id="twitter">
              </div>
            <p class="viewall"><a href="#">View All</a></p>
          </div>
        </div>
        <div id="rightcol">
          <div id="mediacenter">
            <div>
            <h4>Media Center</h4>
            </div>
            <div id="medialinks">
            <p class="medialinks"><a href="#"><img class="mediaicons" src="img/news_icon.png" alt="News Icon" />News</a></p>
            <p class="medialinks"><a href="#"><img class="mediaicons" src="img/press_icon.png" alt="Press Release Icon" />Press Releases</a></p>
            <p class="medialinks"><a href="#"><img class="mediaicons" src="img/calendar_icon.png" alt="Calendar Icon" />Calendar</a></p>
            <p class="medialinks"><a href="#"><img class="mediaicons" src="img/client_icon.png" alt="Client Testimonials Icon" />Client Testimonials</a></p>
            </div>
          </div>
          <div id="affandawards">
            <div id="affandawardstitle">
            <h4>Affiliates & Awards</h4>
            </div>
            <div id="affandawardsframe">
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="200" height="150" title="sponsors_small">
                <param name="movie" value="sponsors_small.swf">
                <param name="quality" value="high">
                <embed src="sponsors_small.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="150"></embed>
              </object>
            </div>
          </div>
          <div id="socialmedia">
            <div id="reachout">
            Reach <br />Out To Us!
            </div>
            <div id="socialarrow">
            <img src="img/social_arrow.gif">
            </div>
            <div id="socialicons">
            <a href="#"><img class="socialmediaicons" src="img/facebook_30px.gif" alt="Facebook Icon" /></a>
            <a href="#"><img class="socialmediaicons" src="img/twitter_30px.gif" alt="Twitter Icon" /></a>
            <a href="#"><img class="socialmediaicons" src="img/linkedin_30px.gif" alt="LinkedIn Icon" /></a>
            </div>
          </div>
        </div>
    </div>


    
        <div id="footer">
          <div id="footercontent">
              <div id="legal">
              <a href="index.html">MPAY Inc.</a>  |
              <a href="legal.html">Legal Notices</a>  |
              <a href="privacy.html">Your Privacy</a>
              </div>
              <div id="copyright">
               <script type="text/javascript">
      now=new Date();
      year=now.getFullYear();
          </script>
               © Copyright
               <script type="text/javascript">
      document.write (year);
               </script>
               MPAY, Inc. All Rights Reserved.</div>
         </div>
       </div>

   </div>


        
    <script type="text/javascript">
        $(window).load(function() {
            $('.flexslider').flexslider({
                manualControls: '.custom-controls li a'
    </script>
    
<script type="text/javascript">
$(document).ready(function(){
    $.getJSON('http://twitter.com/status/user_timeline/MPAYInc.json?count=3&callback=?', function(data){
        $.each(data, function(index, item){
            $('#twitter').append('<div class="tweet"><p>' + item.text.linkify() + '</p><p class="timestamp">' + relative_time(item.created_at) + '</p></div>');
    function relative_time(time_value) {
      var values = time_value.split(" ");
      time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
      var parsed_date = Date.parse(time_value);
      var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
      var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
      delta = delta + (relative_to.getTimezoneOffset() * 60);
      var r = '';
      if (delta < 60) {
        r = 'a minute ago';
      } else if(delta < 120) {
        r = 'couple of minutes ago';
      } else if(delta < (45*60)) {
        r = (parseInt(delta / 60)).toString() + ' minutes ago';
      } else if(delta < (90*60)) {
        r = 'an hour ago';
      } else if(delta < (24*60*60)) {
        r = '' + (parseInt(delta / 3600)).toString() + ' hours ago';
      } else if(delta < (48*60*60)) {
        r = '1 day ago';
      } else {
        r = (parseInt(delta / 86400)).toString() + ' days ago';
      return r;
    String.prototype.linkify = function() {
        return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
            return m.link(m);
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.2.min.js"><\/script>')</script>

<script defer src="js/plugins.js"></script>
<script defer src="js/script.js"></script>

    
     <script type="text/javascript">
       /* <![CDATA[ */
       document.write (
          '<img src="http://marketing.mpay.com/acton/bn/1170/visitor.gif?ts='+
          new Date().getTime()+
          '&ref='+escape(document.referrer) + '">'
       /* ]]> */
       </script>

<script>
    window._gaq = [['_setAccount','UA-12607129-1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
</script>
</body>
</html>
CSS
css>style.css
* HTML5 ✰ Boilerplate
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
* Detailed information about this CSS: h5bp.com/css
* ==|== normalize ==========================================================
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
   Base
   ========================================================================== */
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 100%; line-height: 150%; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
::-moz-selection { background: #496793; color: #fff; text-shadow: none; }
::selection { background: #496793; color: #fff; text-shadow: none; }
/* =============================================================================
   Links
   ========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
   Typography
   ========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
   Lists
   ========================================================================== */
ul, ol { margin: 0em 0; padding: 0 0 0 0px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
   Embedded content
   ========================================================================== */
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
* Correct overflow not hidden in IE9
svg:not(:root) { overflow: hidden; }
/* =============================================================================
   Figures
   ========================================================================== */
figure { margin: 0; }
/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
legend { border: 0; *margin-left: -7px; padding: 0; }
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
button, input { line-height: normal; *overflow: visible; }
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
table button, table input { *overflow: auto; }
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
* Consistent box sizing and appearance
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
* Remove inner padding and border in FF3/4: h5bp.com/l
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
   Tables
   ========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* =============================================================================
   Eric Meyer Reset Snippet
   ========================================================================== */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
body {
    max-width: 49.6875em;
    text-align: center;
    margin: auto;
    #container{
    text-align: left;
    margin: auto;
a {
        color: #6699CC;
        text-align:left;
        text-decoration:underline;
        border: none;
    a:link { color: #6699CC;}
    a:visited { color: #6699CC;}
    a:hover { color: #496793;}
    a:active { color: #496793;}
/* ==|== text styles ====================================================== */
p{
    color:#444444;
    font-family:Verdana, sans-serif;
h2{
    font-size:2.5em;
    line-height:1.25em;
    letter-spacing:.02em;
    color:#00274c;
    font-weight:bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;
h3{
    font-size:1.5em;
    line-height:1.25em;
    letter-spacing:.02em;
    color:#00274c;
    font-weight:bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;
h4{
    font-size:1.3125em;
    line-height:1.25em;
    letter-spacing:.02em;
    color:#00274c;
    font-weight:normal;
    font-family:Verdana, sans-serif;
h5{
    font-size:1.3125em;
    line-height:1.25em;
    letter-spacing:.02em;
    color:#00274c;
    font-weight: bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;
/* ==|== navigation styles ====================================================== */
/* Custom Nav */
#navigation{
    margin:10px 20px 5px 20px;
    width:775px;
#headerlink a:link { color: #666;}
#headerlink a:visited { color: #666;}
#headerlink a:hover { color: #00274C;}
#headerlink a:active { color: #00274C;}
#headerlink li{
    font: .625em "Arial Narrow", sans-serif;
    display: inline;
    text-decoration: none;
    list-style-image:url(../images/blue_bullet.gif);
    letter-spacing:.08em;
#headerlink a{
    text-decoration: none;
#headerlink {
    padding: 2px 135px 0px 0px;
    float: right;
.new {
    text-align:right;
    font: bold 1.175em "Arial Narrow", sans-serif;
    color:#8f9d4e;
    display:inline;
#header {
    margin: 15px auto 0 auto;
    width:775px;
#logoregion {
    width:775px;
    height: 91px;
    background:url(../images/header_small.gif) no-repeat 0 0;
#contact{
    font: bold .75em/1.35em sans-serif;
    color: #919194;
    padding: 10px 135px 0 0px;
    float: right;
    text-align:right;
.nav-border-right{
    border-right: 1px solid #6699cc;
#logo {
    padding: 32px 0 0px 8px;
    float: left;
#mainnav {
    width: 100%; width: 775px;
    height: 28px;
.navigation-text{
    text-align: center;
    font-weight:bold;
    font-size:.75em;
    font-family: sans-serif;
    letter-spacing:.01em;
    padding-top:2px;}
.navigation-controls {width: 100%;}
.navigation-controls li {margin: 0 0 0 0px; float:left; display: inline-block; zoom: 1; *display: inline; list-style:none;}
.navigation-controls li:first-child {margin: 0;}
.navigation-controls li a {color: #00274c; text-align:center; width: 129px; height: 28px; display: block; background: url(../img/main_navigation_tab.gif) no-repeat 0 0; cursor: pointer; text-decoration:none;}
.navigation-controls li a:hover {background-position: 0 -28px; color: #00274c; }
.navigation-controls li a.active {background-position: 0 -28px; color: #00274c; cursor: default; }
#nav a:link { color: #000000;}
#nav a:visited { color: #00274C;}
#nav a:hover { color: #919194;}
#nav a:active { color: #919194;}
#nav li{
    list-style-type: none;
    display: inline;
div#nav a{
float: left;
text-decoration:none;
padding-top: 2px;
padding-right: 15px;
/* ==|== slideshow styles ====================================================== */
#slideshow {width: 100%; width: 775px; margin: 0 16px; }
#slideone{
    width:60%;}
.gold{
    color:#d79b00;}
.white{
    color:#fff;}
.underline{
    text-decoration:underline;}
/* ==|== main styles =========================================================== */
/* ==|== main content column styles ======================================================= */
#main{
    background:url(../img/body_bg.jpg) no-repeat 0 0;
    width: 775px;
    height: 885px;
    display:inline-block;
    margin-top: 90px;
    padding: 30px 20px 0px 20px;
    background:url(../img/body_bg.jpg) no-repeat 0 0;
    width: 795px;
    display:inline-block;
    margin-top: 90px;
    padding: 30px 0px 0px 0px;
#maincontent{
    height: 885px;
    padding: 0px 20px;
/* ==|== banner styles ====================================================== */
#banner{
    font-size:1.3125em;
    line-height:1.25em;
    letter-spacing:.02em;
    font-weight: bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;
    height: 70px;
    width: 755px;
    margin: 0px 0px 0px -10px;
    padding: 0px 20px 20px 20px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    -khtml-border-top-left-radius: 2px;
    -khtml-border-top-right-radius: 2px;
    background-color: #496793;
    background-image: url(../img/banner_bg.gif);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#496793), to(#2c5079));
    background-image: -webkit-linear-gradient(top, #496793, #2c5079);
    background-image:    -moz-linear-gradient(top, #496793, #2c5079);
    background-image:     -ms-linear-gradient(top, #496793, #2c5079);
    background-image:      -o-linear-gradient(top, #496793, #2c5079);
#leftbanner{
    float: left;
    padding-top:20px;}
.bluedropshadow {
    color:#00274c;
    text-align:left;
    text-shadow: 1px 1px 1px #6882a4;}
#bannerdivision{
    float: left;
    padding: 16px 20px 0 30px;}
#rightbanner{
    float: right;
    padding-top:20px;
#emailbutton{
    float: left;
    padding: 5px 0px 0px 0px;
#or{
    float: left;
    padding: 13px 25px 10px 20px;}
#callus{
    color:#ffffff;
    width: 180px;
    text-align:right;
    text-shadow: 1px 1px 1px #00274c;
    float: right;}
#bannerbottom{
    height: 20px;
    background:url(../img/banner_bottom.jpg) no-repeat 0 0;
    width: 795px;
    margin: 0px 0px 0px -10px;
/* ==|== left column styles ======================================================= */
#leftcol{
    float: left;
    width: 485px;
#introduction{
    padding: 15px;
    margin: 10px 30px 30px 30px;
    width: 390px;
    background-color:#FFFFFF;
    border: 1px solid #ededed;}
#twitterfeed{
    text-align:right;
    margin: 30px;
    width: 415px;
#twitterlogo{
    text-align:left;
    padding:37px 0 0 160px;
    height: 78px;
    background:url(../img/mpay_twitter_bird.png) no-repeat 0 0;
.tweet {
    padding: 1px 0px 1px 0px;
    margin: 7px 0;
    text-align:left;
    font-family: Verdana, sans-serif;
    font-size:.75em;
    line-height:1.75em;
.timestamp {
    text-align:right;
    font-weight: normal;
    color:#8f9d4e;
.viewall {
    padding: 12px 0 0 0;
/* ==|== right column styles ====================================================== */
#rightcol{
    float: right;
    width: 290px;
#mediacenter{
    margin: 10px 30px 50px 30px;
#medialinks{
    padding: 10px 0 0 0;
.mediaicons{
    vertical-align:middle;
    padding: 0px 10px 0 0;
.medialinks{
    vertical-align:middle;
    padding: 10px 0 0 0;
#viewall {
    padding: 12px 0 0 0;
#affandawards{
    margin: 50px 5px 23px 14px;
#affandawardstitle{
    margin: 0px 25px 0px 16px;
#affandawardsframe{
    margin: 20px 0 0 0;
    padding: 27px 40px 50px 29px;
    background:url(../img/flash_bg.png) no-repeat 0 0;
#socialmedia{
    margin: 23px 30px 30px 30px;
#reachout{
    float:left;
    font-size:1.875em;
    line-height:1.25em;
    color:#8f9d4e;
    font-weight:bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;
#socialarrow{
    float: right;
    padding: 20px 0 0 0;
#socialicons{
    float: left;
    padding: 15px 0 0 0;
.socialmediaicons{
    padding: 0 5px 0 0;
/* ==|== footer styles =

MainContent height is limited?

Similar Messages

Maybe you are looking for