Body Margin Height in ie?

Hi I have a problem with using maginheight only browsing with internet explorer as it does not work?
I'm using it like this: <body marginwidth="0" marginheight="75"></body> this works in firefox and chrome fine but dose'nt move the margin position height moving the <table></table> down the page when browsing in ie?
I have even tried using css but Im not sure if the margin body positioning can be changed using this method?
Any advise or help would be appreciated.
Thanks
Gary

Hi Murray
Thanks but if not sure how you meant the coding should be arranged for CSS?
I have tried it like this below but works still okay in firefox and chrome but not in ie?
body {
background-image: url(sky-clouds.png);
margin-top: 75;
margin-width: 0;
margin-left: 0;
margin-right: 0;
I presume this could be wrong from your example:
body { margin:TTpx RRpx BBpx LLpx }
Gary

Similar Messages

Group total amount in body margin

I have a group total amount and remark fields placed in the body margin. All the fields are inside a frame, which is set to "All Pages". And all the fields is set to "First Page".
My expected result is that the content will only show at the end of each group. But the fact is that, though they are all using "First Page", but the group total amount appears on every pages while the remark fields work!
Any idea? Thanks!

the group total (and remark fields?) should be in a frame outside the grouping frame, not the margin.

Header & footer margins need to be different from body margins

I am writing a paper that will be printed double-sided, using mirror margins.
The paper must include sidebar information such as call outs and comments that will be used by the reader to navigate the document quickly to specific information and to be directed to other parts of the document.
To provide the space for the side bar, I want to restrict the body text to a 4 inch wide area. I want to use text frames to add in sidebar items later.
The sidebar area must always be oriented toward the outside of the page.
I will need to revise the document over time, both for the initial publication and for later versions. This includes incorporating graphics into the 4 inch wide body content.
I want the header and footer to span the entire width of the page, across both the sidebar area and the body text.
I have attempted to accomplish the above by using page styles, with mirroring and the use of conventional-width margins and headers and footers, and then restricting the width of the body text by inserting styles. However, Writer does not mirror the section indentations. Because of this, I have to manually add a new section at the start of each page. When it comes time to revise or add graphics, this will be an unbelievable nightmare because "pagination" will be thrown completely out of whack. It will be unmanageable.
The format I need is pretty common for instructional material.
Is there a way, or an add-on, to allow wider margins for the header and footer, while mirroring an indentation for body text?

I have come up with a solution to the problem...it isn't all that elegant, but it works: I am putting a blank white image into the document, positioned to make the body text wrap around it and then positioning text frames over the blank white image as necessary, anchored to the paragraphs in the body text. In order for this solution to work, it is necessary to anchor the white image to the page itself and manipulate positioning and/or spacing parameters to position it just right to force the proper wrap behavior.
Still, if it were possible to give the headers and footers wider margins than the body text, none of this workaround would be necessary....

Oracle 9i reports body/margin

I am creating a report the fills the whole 8 1/2 x 11 paper. Oracle 9i reports defaults a 1" margin all around the report. Is there a way to modify this margin?

Yes. Go to the paper layout view, and you'll see a button in the top toolbar to edit the margin. Click on this and you'll see a thick black line that represents the body of the report. Click on this and drag it to the edges of the page to decrease the size of the margins.
Hope this helps,
Danny

Remove Black Border Around Embedded Flash Video

Hi-
I have searched on the Web without luck, so again I have to
turn tot he forum for help. I believe this should be simple and
straightforward, but doesn't appear so. I have a simple little
Flash video embedded in a plain old web page created with DW8. When
the page is displayed in my web browser it has a thin black border
around the video. I would like to remove this border (such as one
might with image border=0). I have tried several "fixes" ranging
from setting the BODY margin height to 0 to altering my external
style sheet. None of these worked. I even created a fresh web page
with no external style sheet at all and the border is still there.
How on earth do I get rid of that ugly thing? Any help is greatly
appreciated.
-=SB

can we see this border? URL?
Chris Georgenes
Adobe Community Expert
www.mudbubble.com
www.keyframer.com
www.howtocheatinflash.com
nuie wrote:
> Hi-
>
> I have searched on the Web without luck, so again I have
to turn tot he forum
> for help. I believe this should be simple and
straightforward, but doesn't
> appear so. I have a simple little Flash video embedded
in a plain old web page
> created with DW8. When the page is displayed in my web
browser it has a thin
> black border around the video. I would like to remove
this border (such as one
> might with image border=0). I have tried several "fixes"
ranging from setting
> the BODY margin height to 0 to altering my external
style sheet. None of these
> worked. I even created a fresh web page with no external
style sheet at all and
> the border is still there. How on earth do I get rid of
that ugly thing? Any
> help is greatly appreciated.
>
> -=SB
>

Header Margins Different than Body of Document

I'm trying to create a document (a template, actually) where the desire is to have the header and footer margins be smaller on both the right and left sides (i.e., they are wider, spanning more of the page). It seems like the default behavior or Pages is to align the header and footer margins to the document body margins. I can't seem to find a solution and any help is appreciated. Oh Yes, I want the different margins to persist throughout the document.

Rerunner,
Sure, you can have different margins, and it's easy to do. Just put your cursor in the header, then adjust the margin sliders in the ruler. Click in the text area and you'll see the that those margins are unaffected by the change. Now do the same thing with the footer. Insert a page break and you'll see that the header margins on page 2 are the same as page 1.
Is this what you're looking for?
-Dennis

Dreamweaver adding div height in tooltip?

I dont normally use dreamweaver, but I must for this project,
in dreamweaver for some bizarre reason the tooltip says height 50px
(54px) and has added 4pxs to an image in a div. Anyone know why? It
aligns in the browsers, IE 6, firefox, but why has dreamweaver
added these 4 pixels and given it a gap in dreamweaver?
Picture example:
http://homepage.ntlworld.com/spensley/dreamweaverbug.jpg
anyone know why and what this is all about?
The css:
#logo{
top: 30px;
width:126px;
height: 51px;
padding:0px;
float: left;
html:
<div id="logo"><a href="index.html"><img
src="media/images/gtfLogo.jpg" title="GTF logo" alt="GTF logo
design" longdesc="three circles showing the letters G, T and F in
orange and green" width="126"
height="51"/><a/></div>

Oops - sorry - missed the CSS.
You have a munged <a> tag -
orange and green" width="126" height="51"/><a/></
should be -
orange and green" width="126" height="51"/></a></
Does that solve the problem?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"spongebobcirclepants" <[email protected]>
wrote in message
news:[email protected]...
> <?xml version="1.0" encoding="utf-8"?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
> <head>
> <title>GTF - Gardens, Tools &
Furniture</title>
> <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
> <meta name="keywords"
>
content="tools,gardens,furniture,spades,water,toys,toy,gardening,uk,giant
>
toys,giant,lawnmowers,tool,diy,outdoor,outdoors,pool,shovels,hoses,hose,fish,aqu
> atics,benches,tables,chairs" />
> <meta name="description" content="GTF Company Site"
/>
> <meta name="author" content="Roy Spensley" />
>
> <link rel="stylesheet" type="text/css"
href="style/textformat.css"/>
> <link rel="stylesheet" type="text/css"
href="style/layout.css"
> title="default"
> />
>
> </head>
>
> <div id="wrapper">
>
> <div id="topSpace"></div>
> <div id="logo"><a href="index.html"><img
src="media/images/gtfLogo.jpg"
> title="GTF logo" alt="GTF logo design" longdesc="three
circles showing the
> letters G, T and F in orange and green" width="126"
> height="51"/><a/></div>
> <div id="logoRight"></div>
> </div>
> </body>
> </html>
>
>
> css
>
>
>
> /*BODY*/
>
> body{
>
> margin-top:0px;
>
> margin:0px;
>
> left:0px;
>
> padding:0px;
>
> font-family: arial, Helvetica, sans-serif;
>
> font-size: 100.1%;/*fixes bug in IE*/
>
> color:#333333;
>
> text-align: center;
>
> background-color: #666666;
>
> overflow: auto;
>
> }
>
> /*ALL IMAGES*/
>
> img{
>
> border-style: none;
>
> }
>
>
> /*CONTAINING WRAPPER*/
>
> #wrapper{
>
> width: 800px;
>
> margin-top: 0px;
>
> height: 597px;
>
> background-color: #000;
>
> margin: 0 auto; /*This will now centre in firefox as
well*/
>
> }
>
> #topSpace{
>
> width: 100%;
>
> height: 30px;
>
> padding:0px;
>
> background-color: #fff;
> }
>
> #logo{
>
> top: 30px;
>
> width:126px;
>
> height: 51px;
>
> padding:0px;
>
> float: left;
>
> }
>

Sidebar height help needed

Hi,
I am using Dreamweaver CS5 for the first time and hope I'm on the right track with rebuilding my site. This page is a work in progress (but getting close). I used a built in template (2 column, header, footer) and changed it a bit.
I am wanting to extend the sidebar height so it will meet up with the footer. There is a space at the bottom showing the background color (white) of the center section. I'd like the sidebar background color (gray) to continue down to the footer. I've messed around with padding and margins but nothing fixed this.
Any help would be appreciated.
AND... does it look like I'm on the right track with everything else? (obviously, I haven't linked any of the accordion items yet)
Thank you
Connie
CSS codes:
@charset "UTF-8";
body {
    margin: 0;
    padding: 0;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    background-color: #600;
    background-image: url(../bw4images/bkgd.png);
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
    color: #42413C;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
    color: #6E6C64;
    text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
    width: 960px;
    background: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
    background-color: #FFF;
    border-bottom-width: thick;
    border-bottom-style: ridge;
    border-bottom-color: #600;
    padding: 10px;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
    float: left;
    width: 260px;
    background-color: #E8E8E8;
    border-right-width: 2px;
    border-right-style: ridge;
    border-right-color: #CCC;
    padding-top: 5px;
.content {
    width: 696px;
    float: left;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0px;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
    padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
    margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav li {
    border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background: #C6D580;
/* ~~ The footer ~~ */
.footer {
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    background-color: #CCC;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
    border-top-width: thick;
    border-top-style: ridge;
    border-top-color: #600;
    padding-top: 10px;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
@charset "UTF-8";
/* CSS Document */
@import url("global.css");
h1 {
    color: #600;
    padding-right: 15px;
    padding-left: 15px;
h2 {
    color: #600;
h3 {
    color: #600;
    text-align: center;
h4 {
    color: #FFF;
    padding-left: 2px;
.smalltext {
    font-size: 10px;
    color: #000;
.twelvetext {
    font-size: 12px;
a:link {
    color: #960;
    text-decoration: none;
a:visited {
    color: #600;
    text-decoration: none;
a:hover {
    color: #960;
    text-decoration: underline;
a:active {
    color: #960;
    text-decoration: underline;
.center {
    text-align: center;
.products {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 940px;
    border-collapse: collapse;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #CCC;
    border-left-color: #CCC;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCC;
.odd {
    background-color: #CCC;
.products th {
    text-transform: uppercase;
    color: #FFF;
    background-color: #600;
    background-image: url(../bw4images/bkgd.png);
    text-align: left;
    font-size: 12px;
    font-family: Tahoma, Geneva, sans-serif;
    padding-top: 4px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    border: 1px solid #600;
.products td {
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 8px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
h5 {
    font-size: 14px;
    font-style: italic;
    color: #600;
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
    overflow: hidden;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #000;
    border-bottom-color: #000;
    border-left-color: #000;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
    margin: 0px;
    padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
    background-color: #960;
    margin: 0px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    padding-top: 6px;
    padding-right: 2px;
    padding-bottom: 6px;
    padding-left: 10px;
    background-image: url(../bw4images/SpryAccordionLabel.gif);
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: groove;
    border-top-color: black;
    border-bottom-color: #000;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    height: 200px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    line-height: 1.4em;
.Accordion p {
    font-weight: bold;
    padding-top: 6px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 30px;
    line-height: 1.4em;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
    background-color: #EEEEEE;
    background-image: none;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
    color: #FFF;
    background-color: #600;
    background-image: none;
.AccordionPanelOpen .AccordionPanelTabHover {
    color: #FFF;
    background-color: #600;
    background-image: none;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
    background-color: #960;
    background-image: url(../bw4images/SpryAccordionLabel.gif);
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    background-color: #600;
    background-image: none;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
PAGE 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>Go for the Works...Brassworks 4 Sheet Music Sales</title>
<link href="site_styles/twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
<link href="site_styles/global.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-802730-1']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script></head>
<body>
<div class="container">
<div class="header">
    <p><a href="#"><img src="bw4images/gofortheworks.gif" width="260" height="26" alt="go for the works" /></a>
      
    </p>
    <p class="center"><img src="bw4images/bw4lg.gif" width="496" height="130" alt="logo" /><br />
      - a large selection of <strong>Brass Ensemble Music</strong> sure to fill your every need -<br />
      Solos, Duets, Trios, Quartets, Quintets, Sextets, Choirs, Brass Band and More!<br />
      Plus Method Books, Studies & Etudes - Strings, Woodwinds with Piano</p>
    <p class="center"> </p>
      <table border=0 align="center" cellpadding=0 cellspacing=0 >
        <tr>
          <td style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt;"><form style="margin:0px; margin-top:4px;" action="http://search.freefind.com/find.html" method="get" accept-charset="utf-8" target="_self">
            <input type="hidden" name="si" value="61521846">
            <input type="hidden" name="pid" value="r">
            <input type="hidden" name="n" value="0">
            <input type="hidden" name="_charset_" value="">
            <input type="hidden" name="bcd" value="÷">
            <input type="text" name="query" size="40">
            <input type="submit" value="Search BW4">
          </form></td>
        </tr>
      </table>
    </p>
</div>
<div class="sidebar1">
    <h3>CHOOSE A CATEGORY<br />
      to enter the store
    </h3>
    <div id="HomePageAccordion" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Brass Ensembles</div>
        <div class="AccordionPanelContent">
          <p>Duets<br />
            Trios<br />
            Quartets<br />
            Quintets<br />
            Sextets<br />
            Septets<br />
            Octets<br />
            Choirs 9+<br />
            Tuba-Euphonium</p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Trumpet</div>
        <div class="AccordionPanelContent">
          <p>Solos<br />
            Duets<br />
            Ensembles 3+
          </p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">French Horn</div>
        <div class="AccordionPanelContent">
          <p>Solos<br />
            Duets<br />
            Ensembles 3+ </p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Trombone</div>
        <div class="AccordionPanelContent">
          <p>Solos<br />
            Duets<br />
            Trios<br />
            Quartets<br />
            Ensembles 5+
          </p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Euphonium</div>
        <div class="AccordionPanelContent">
          <p>Solos<br />
            Duets<br />
            Ensembles 3+<br />
            w/ Tuba </p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Tuba</div>
        <div class="AccordionPanelContent">
          <p>Solos<br />
            Duets<br />
            Ensembles 3+<br />
            w/ Euphonium
          </p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Tuba - Euphonium</div>
        <div class="AccordionPanelContent">
          <p>Duets<br />
            Trios<br />
            Quartets<br />
            Quintets 5+
          </p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Christmas Music</div>
        <div class="AccordionPanelContent">
          <p>Quartets (mixed)<br />
            Quintets<br />
            Various Solos & Ensembles
          </p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Hymn Tunes & Sacred Music</div>
        <div class="AccordionPanelContent">
          <p>Quartets (mixed)<br />
            Quintets (mixed)<br />
            Various Solos & Ensembles
          </p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Wedding & Ceremonial Music</div>
        <div class="AccordionPanelContent">
          <p>Quartets (mixed)<br />
            Quintets (mixed)<br />
            Various Solos & Ensembles </p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Brass & Organ</div>
        <div class="AccordionPanelContent">
          <p>Solos w/ Organ<br />
            Ensembles w/ Organ
          </p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Method Books</div>
        <div class="AccordionPanelContent">
          <p>Methods & Etudes</p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Strings</div>
        <div class="AccordionPanelContent">
          <p>Brass & Strings<br />
            WW & Strings
          </p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Woodwinds</div>
        <div class="AccordionPanelContent">
          <p>Solos<br />
            Ensembles<br />
            Sax Ensembles
          </p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Bands</div>
        <div class="AccordionPanelContent">
          <p>Concert Band<br />
            Jazz Band
          </p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Brass CDs & Cassettes</div>
        <div class="AccordionPanelContent">
          <p>CDs & Cassettes</p>
        </div>
      </div>
    </div>
    <p> </p>
</div>
<div class="content">
    <h1>Welcome to Brassworks 4 Sheet Music Sales !</h1>
    <p>To browse through our catalog (3500+ titles), simply use the menu to the left and select a category.
    The full catalog is accessible from every page within the site by navigating to the top menu. Score and sound samples are available on select items. If a sample is missing, please email and we will try to provide a sample for you.</p>
    <h3>Orders are usually shipped within 24-48 hours.    </h3>
    <table align="center" cellpadding="2" cellspacing="2">
      <tr align="center">
        <td><h3><a href="payment_shipping.html">Payment Options - Shipping Information</a><br />
        <span class="twelvetext">We accept Church and School POs - please <a href="contact_brassworks4.html">phone or email</a> your order</span></h3></td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td><h2><span style="text-align: left; font-size: 14px;">New Releases • Tuba/Euph Specialty Catalog • <a href="reviews.html">Reviews</a></span></h2></td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr align="center">
        <td><span class="center"><span class="twelvetext">Download a <a href="PDFs/PrintableCatalog.pdf">PDF Printable Version</a> of our entire catalog.</span></span></td>
      </tr>
    </table>
    <p> </p>

      <div align="center">
        <table border="0" cellspacing="0" cellpadding="3" bgcolor="#FFFFFF" style="border:2px solid #660000;">
          <tr>
            <td align="center" style="font-weight: bold; font-family:Arial; font-size:13px; color:#660000;">Receive our Newsletter</td>
          </tr>
          <tr>
            <td align="center" style="border-top:2px solid #660000"><form name="ccoptin" action="http://visitor.r20.constantcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:2;">
              <input type="hidden" name="llr" value="e9iq8ucab">
              <input type="hidden" name="m" value="1102359044932">
              <input type="hidden" name="p" value="oi">
              <font style="font-weight: normal; font-family:Arial; font-size:13px; color:#000000;">Email:</font>
              <input type="text" name="ea" size="20" value="" style="font-size:10pt; border:1px solid #999999;">
              <input type="submit" name="go" value="Go" class="submit" style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10pt;">
            </form></td>
          </tr>
        </table>
      </div>
      
      
      <div align="center" style="padding-top:5px;"> <img src="https://imgssl.constantcontact.com/ui/images1/safe_subscribe_logo.gif" border="0" width="200" height="14" alt=""/> </div>
</p>
      </p>
</p>
    </p>
    </p>
    <hr />
    <h2><img src="bw4images/smcoverphoto.jpeg" alt="BW4 Group Photo" width="210" height="162" class="fltrt" />Brassworks 4 </h2>
    <p>Although Brassworks 4 is no longer together as a performing quartet, I felt it necessary to include the history of the group within this website. Afterall, this store wouldn't have existed without the hard work and determination of the four of us together. To read more about who we were and what we did, visit <a href="history.html">About Us</a>    </p>
</div>
<div class="footer">
    <table style="width:100%; background-color:#cccccc; border:0;">
      <tbody>
        <tr>
          <td><span class="smalltext">© 2011 Brassworks 4 Sheet Music Sales</span> • <a href="contact_brassworks4.html">Contact Us</a></td>
          <td style="text-align: right;"><span style="text-align: right; font-size: 14px;"><a href="payment_shipping.html">Payment/Shipping </a> • <a href="composers.html">Composers</a> • <a href="reviews.html">Reviews </a>• <a href="brass_links.html">Brass Links</a> • <a href="history.html">About Us </a>• <a href="index.html">Home</a></span></td>
        </tr>
      </tbody>
    </table>
    <p> </p>
    </div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("HomePageAccordion", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>
</body>
</html>

Thank you - I am determined to get this right.
As for navigation, what would you recommend for a catalog with numerous subitems?    I had built a Spry Menu for my catalog template pages (same basic items but in a horizontal menu) But as you mentioned, that is not a good idea. My current site http://brassworks4.com was done in GoLIve and I was able to build my menus in MenuMachine, both vertical on the home page and horizontal on the catalog pages. Now I'm not sure what to do.
I am planning on putting all my data in tables within the same page as a Spry Data Set (so non-javascript people can view the tables) Is that a good idea?
I'm at a loss now for the menus/navigation items.
I appreciate your input.

Header in pdf overlaping body of pdf doc:using fop

I'm generating PDF file with FOP, but my header contents are not fixed, they keep on changing with each report and with each locale of browser.
Because of this my static width / height setting like
margin-top="0.25in"or
margin-top="0.95in"is failing for some reports, i.e my header is overlapping with body contents.
Is there a generic solution which can fix this?
More details:
Header of pdf is overlapping on the contents of body of pdf, because of which I am not able to see my top contents in my body of pdf document.
I want to way by which ,if header contents are increased then body should start after the layout of header.
But in pdf api it is required to set:
<fo:region-body margin-top="1.25in" margin-bottom="0.50in" />
<fo:region-before extent="1.25in"/>
<fo:region-after extent="0.50in"/>which is causing problem bec. when my text in header increases beyond 1.25in which is specified in
<fo:region-body margin-top="1.25in"then in that case header text overlapps body text.

When you distribute a form using the distribute process, Acrobat replaces whatever code you placed in the button with its own. You do not need to use the distribution process to set this up. Instead, Reader-enable the form and your button should work like you want.

CSS height property use in Fluid grid layout

Hi, I'm totally new to fluid grid layout and just got started in it. I have a div tag that has 5px height and I sucessfully applied that and seem fine only on Tablet landscape (1024x768) and Small tablet landscape (800x600), nevertheless it isn't even displaying on Mobile portrait (320x480), Mobile landscape (480x320), Small tablet portrait (600x800) and Tablet portrait (768x1024).
My coding is below
index.html
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="fluid.grid.layout/boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.grid.layout/style.css" rel="stylesheet" type="text/css">


<script src="fluid.grid.layout/respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"></div>
</div>
</body>
</html>
boilerplate.css
@charset "utf-8";
* 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
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
* ==|== 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: 13px; line-height: 1.231; }
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)
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; 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: 1em 0; padding: 0 0 0 40px; }
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; }
/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
style.css
@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
          max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
          width:100%;
          Dreamweaver Fluid Grid Properties
          dw-num-cols-mobile:                    4;
          dw-num-cols-tablet:                    8;
          dw-num-cols-desktop:          10;
          dw-gutter-percentage:          25;
          Inspiration from "Responsive Web Design" by Ethan Marcotte
          http://www.alistapart.com/articles/responsive-web-design
          and Golden Grid System by Joni Korpi
          http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
          margin-left: auto;
          margin-right: auto;
          width: 85.5%;
          padding-left: 2.25%;
          padding-right: 2.25%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 97.5%;
          padding-left: 1.25%;
          padding-right: 1.25%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
          width: 98%;
          max-width: 1232px;
          padding-left: 1%;
          padding-right: 1%;
          margin: auto;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
          height:5px;
          background-color:#FBB829;
respond.min.js
/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:(\/\/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url$)['"]?([^\/$'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/$min\-width:[\s]*([\s]*[0-9]+)px[\s]*$/)&&parseFloat(RegExp.$1),maxw:D.match(/$max\-width:[\s]*([\s]*[0-9]+)px[\s]*$/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send(null)},c=(function(){var v=false;try{v=new XMLHttpRequest()}catch(w){v=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
I really do appreciate your efforts to help me solve this problem... Thank you in advance

Height is determined by content. I can't think of a single reason to have a div height of 5px because almost nothing will fit inside that small a space without problems.
As to why it doesn't show up in other devices, you must have put that style into the Tablet CSS code instead of the default Mobile CSS code.
Fluid Grids build up from Mobile (applied to everything) with specific rules for Tablets, then Desktops.
Best advice, use Fluid Grids for layout only. Use a separate CSS file for content styles.
Hope this helps,
Nancy O.

Need help-confused on top margin space with div in sidebar div

Hello,
I have tried for hours to figure out what is affecting the margin of the top right div #first_ad which is contained in #sidebar2. Right now I have that div first nav with 10px top that looks like 30 in IE7 and 40px in iIE8 (chrome, firefox are fine). I have tried 0 margin on p and h tags and other things to lord only knows what else. I just cannot see what is affecting this.
If I could understand this it would be of great help as I seem to run into this alot with placing a div in a sidebar. I start out by using the dreamweaver templates in cs4 as my base.
Here is the link to the page.
http://www.hanovertypocraft.ca/test2/index3.html
Thank you for any assistance you may give me!!
below is the 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: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #000;
background-image: url(../images/hantypbg2.jpg);
background-repeat: no-repeat;
.thrColFixHdr #container {
width: 900px;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 50px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-image: url(../images/container_bkgd.png);
background-repeat: no-repeat;
.thrColFixHdr #header {
padding: 0;
height: 110px;
margin: 0px;
clear: none;
float: left;
width: 740px;
.thrColFixHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.thrColFixHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 165px; /* padding keeps the content of the div away from the edges */
display: inline;
.thrColFixHdr #container #sidebar1 p {
margin: 0px;
padding: 0px;
#header #head_logo_text {
height: 110px;
width: 355px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 225px;
color: #FFF;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
clear: none;
float: left;
margin-right: 0px;
padding: 0px;
#header #head_logo_text a {
color: #FFF;
#header #head_logo_text p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 21px;
margin: 0px;
padding: 0px;
.thrColFixHdr #container #header img {
margin: 0px;
padding: 0px;
#nav_home {
width: 135px;
padding: 0px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;
height: 320px;
margin-top: 10px;
.thrColFixHdr #sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 140px; /* padding keeps the content of the div away from the edges */
margin-right: 10px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #00F;
.thrColFixHdr #container #sidebar2 h1 {
margin: 0px;
padding: 0px;
.thrColFixHdr #container #sidebar2 p img {
margin: 0px;
padding: 0px;
.thrColFixHdr #container #sidebar2 p {
margin: 0px;
padding: 0px;
#mainContent {
margin-top: 10px;
margin-right: 160px;
margin-bottom: 0;
margin-left: 175px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
#mainContent p {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-weight: normal;
font-size: 16px;
line-height: 20px;
margin: 0px;
padding: 0px;
#mainContent #flash_div {
width: 353px;
margin-right: auto;
margin-left: auto;
border: 3px solid #000;
height: 265px;
overflow: hidden;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
#sidebar2 #first_ad {
height: 140px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #000;
#sidebar2 #second_ad {
height: 140px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #000;
#sidebar2 #third_ad {
height: 140px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #000;
#sidebar2 #fourth_ad {
height: 140px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #000;

Thank you.
I am relatively new at this and you guided me to google the patch and how to overrice it using - padding 10px !important; on my css which let me override the fixes padding.
I was under the misconception that the IE fix being in grey was only for information not actually pertinent.
Again thanks and I will try to research more regarding the implimentation of these patches

Setting max-height with contain for bg image

Hi , I currently have a simple image that I want to sit in the top right corner, however I would like it to scale so the whole image fills the right hand of the viewport (only if they make the viewport smaller than the original image though). The contain function does this job however it also scales the image upwards should the user go full browser which looks horrible. So my question is can I use ( background-size: contain;) but add a max-height line to it also. I have tried every combination possible but nothing. Im either doing something wrong or it cant be done.
Site: http://www.stuartskelton.co.uk
my css is:
body {
margin: 5px;
background-attachment: fixed;
background-image: url(../images/neilquote.gif);
background-repeat: no-repeat;
background-position: right top;
background-size: contain;
Thanks for looking.

You can't add a max-height to the existing rule, but you could use a media query to change the value of background-size like this:
body {
margin: 5px;
background-attachment: fixed;
background-image: url(../images/neilquote.gif);
background-repeat: no-repeat;
background-position: right top;
background-size: contain;
@media screen and (min-height: 462px) {
body {
background-size: 55px 461px;

Can't seem to eliminate top margin of page

Page is here:
http://www.innerkids.net/tgf-odg2/
The wrapper is an outer table
Relevant CSS us:
<style type="text/css">

</style>
I've tried every CSS variation posted here with no success.
Sure would appreciate a hand here

that's really weird. i just recreated your page, and it looks
fine! i
didn't even have to change anything. i have no idea if this
will work,
but maybe you could try replacing your code with mine (it's
worth a
shot, at least):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tina Felluss, LCSW - Home page</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">

</style>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>
<body
onLoad="MM_preloadImages('images/Navpink_01.jpg','images/Navpink_02.jpg','images/Navpink_ 03.jpg','images/Navpink_04.jpg','images/Navpink_05.jpg','images/Navpink_06.jpg','images/Na vpink_07.jpg')">

<table width="846" border="0" align="center"
cellpadding="0"
cellspacing="0">
<tr>
<td width="22" rowspan="2"
background="images/22x22_shadow_left.jpg"></td>
<td colspan="3"><div align="center"><img
src="images/Header.gif"
width="800" height="154"
border="0"></div></td>
<td width="22" rowspan="2"
background="images/22x22_shadow_right.jpg"></td>
</tr>
<tr>
<td width="132" align="right" valign="top"><div
align="center">
<p> </p>

<table width="100%" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td><a href="index.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('home','','images/Navpink_01.jpg',1)"><img
src="images/Navgrey_01.jpg" alt="Home" name="home"
width="128"
height="15" border="0"></a></td>
</tr>
<tr>
<td><a href="mission.htm"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('mission','','images/Navpink_02.jpg',1)"><img
src="images/Navgrey_02.jpg" alt="Mission" name="mission"
width="128"
height="18" border="0"></a></td>
</tr>
<tr>
<td><a href="practice.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('practice','','images/Navpink_03.jpg',1)"><img
src="images/Navgrey_03.jpg" alt="Practice" name="practice"
width="128"
height="19" border="0"></a></td>
</tr>
<tr>
<td><a href="workshops.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Workshops','','images/Navpink_04.jpg',1)"><img
src="images/Navgrey_04.jpg" alt="Workshops" name="Workshops"
width="128"
height="18" border="0"></a></td>
</tr>
<tr>
<td><a href="testimonials.htm"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('testimonials','','images/Navpink_05.jpg',1)"><img
src="images/Navgrey_05.jpg" alt="Testimonials"
name="testimonials"
width="128" height="17" border="0"></a></td>
</tr>
<tr>
<td><a href="faq.htm"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('FAQ','','images/Navpink_06.jpg',1)"><img
src="images/Navgrey_06.jpg" alt="FAQ" name="FAQ" width="128"
height="18"
border="0"></a></td>
</tr>
<tr>
<td><a href="contact.htm"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('contact','','images/Navpink_07.jpg',1)"><img
src="images/Navgrey_07.jpg" alt="Contact us" name="contact"
width="128"
height="20" border="0"></a></td>
</tr>
</table>
</div></td>

<td width="474" class="contentcell">
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec
molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.
Vestibulum
condimentum facilisis nulla. In hac habitasse platea
dictumst. Nulla
nonummy. Cras quis libero. Cras venenatis. Aliquam posuere
lobortis
pede. Nullam fringilla urna id leo. Praesent aliquet pretium
erat.
Praesent non odio. Pellentesque a magna a mauris vulputate
lacinia.
Aenean viverra. Class aptent taciti sociosqu ad litora
torquent per
conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris
magna
eros, semper a, tempor et, rutrum et, tortor. </p>
</td>
<td width="190" valign="top">
<p> </p>

<table width="90%" height="364" border="0" align="center"
cellpadding="0" cellspacing="0" bordercolor="#00FFFF"
background="images/brown_boxbulletin.gif">
<tr>
<td height="91"> </td>
</tr>
<tr>
<td height="91"> </td>
</tr>
<tr>
<td height="91"> </td>
</tr>
<tr>
<td height="91"> </td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p></td>
</tr>
<tr>
<td width="22"><img
src="images/22x22_corner_left.jpg" width="22"
height="22"></td>
<td colspan="3"
background="images/22x22_shadow_bottom.jpg"></td>
<td width="22"><img
src="images/22x22_corner_right.jpg" width="22"
height="22"></td>
</tr>
</table>
</body>
</html>
Ken Binney wrote:
> Page is here:
>
http://www.innerkids.net/tgf-odg2/
>
> The wrapper is an outer table
>
> Relevant CSS us:
> <style type="text/css">
> 
> </style>
>
> I've tried every CSS variation posted here with no
success.
> Sure would appreciate a hand here
>
>
>

Scripting TGetProperty width and height

Hello all,
i have a problem with the flash player in IE6 and FF2.
I have a html page with some flash movie elements on it.
I'm using SWFObject to bind the movies in.
After the onload event is fired, for each flash movie the
javascript function setCorrectSize4Flash will be called to resize
the html container element (embed, object tag) automatically by the
given width and height of the flash movie.
Therefore i'm checking if the movie is completely loaded and
if width and height is not undefined.
So if i'm getting width and height, i'm resizing the
container element to best fit in.
My problem is now, that the same movie used several times in
the same html page has every time different width and height
values. Sometimes the aspect ratio is 1:2 and sometimes it's 2:1.
Is this a problem of the flash player plugin or am i doing
something wrong.
Best regards,
bartmark

Thank you for your answer. But I don't understand:
The question is not the margin. I put in the body margin: 0; padding:0; and there is no margin.
I want to know the viewport: the width and height with the iPad in horizontal position and without the address bar.
This does not coincide with the 1024 x 768. (nor the 946 x 768 if I rest the address bar). I don't understand why
Thank you
Narcís

100% height table with bg image

I need to have a table that is centred and fills 100% height only in the browser. In it will be a background image. Can anyone tell me how to do this? I need to do it as soon as possible as the client has just changed their mind after I completed the job.

Code below, taken from link below, if youre inclined to want to read about how to do it:
http://apptools.com/examples/tableheight.php
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>Untitled Document</title>
<style type="text/css">
html, body, #wrapper {
      height:100%;
      margin: 0;
      padding: 0;
      border: none;
      text-align: center;
   #wrapper {
      margin: 0 auto;
      text-align: left;
      vertical-align: middle;
      width: 400px;
</style>
</head>
<body>
<table id="wrapper" border="0" cellspacing="0" cellpadding="0">
      <tr>
         <td>This is centered</td>
      </tr>
   </table>
</body>
</html>

Body Margin Height in ie?

Similar Messages

Maybe you are looking for