Apex 4.2.1: Region grid layout?

See https://apex.oracle.com/pls/apex/f?p=57688:4
Page template - One Level tabs - no sidebar. Theme 24
The Grid Layout section in Region attributes has Start New Grid, Start new row/column, Column No or Automatic and Colspan attributes. How can I set the rowspan attribute so that, in the example page above, regions r1 and r2 are next to each other with no whitespace, regardless of the size of region r3? I thought I could easily set the rowspan of r1 to 2 and that would take care of it but maybe I am missing something.
Help? Thanks

VANJ.
Did you check the html of the renderd page.
Did is what I found.
<table class="regionlayout" role="presentation" summary="">
  <tbody>
    <tr>
       <td valign="top">
           <section id="R8612284225122823493" class="uRegion clearfix"> //R1
       </td>
       <td rowspan="2">
          <section id="R8612284620818823496" class="uRegion clearfix">//R3
       </td>
     </tr>
    <tr>
       <td valign="top">
          <section id="R8612284400865823496" class="uRegion clearfix">//R2
      </td>
    </tr>
  </tbody>
</table>As it is now R1 and R3 are renderd next to each other. And R2 is in a seperate row.
So if R1 and R2 need to be next to each other R2 and R3 need to be swapped.
It maybe something as simple as a wrong sequence.
Nicolette

Similar Messages

  • Apex 4.2.1: Region table layout and pagination

    See https://apex.oracle.com/pls/apex/f?p=57688:2
    Theme 24, table-based layout. Page template = One Level Tabs, Left Sidebar.
    All 4 regions are report regions using the report region and 2-column portlet as the region and report templates respectively.
    Regions 1.1 and 1.2 are supposed to be in the same row in different columns so 1.1 has New Grid=Yes and 1.2 has New Column=Yes. Ditto for 2.1 and 2.2
    1. Trial and error shows that simply changing the Pagination of report region 1.1 from None to Bottom-Right causes the layout to shift such that 1.2 moves to a grid row by itself! What is going on here? Surely a "trivial" change like whether pagination is displayed or not shouldn't cause such a major layout change. Am I missing something?
    2. Regions 2.1 and 2.2 stick together. How can we add some breathing room between them?
    3. If the page template is changed to One Level Tabs, No Sidebar, the behaviour changes. All the regions are rendered in 1 column, ignoring the New Column grid layout setting. Why is this?
    4. In general, with all the layout changes in 4.x, I was under the impression that, when using a HTML Table based page template, simply using the New Grid/New Row/New Column, etc attributes on the Region attributes would be sufficient to build pages with intuitive, declarative layouts with arbitrary "boxes" laid out on the page, regardless of the content/region type. But that doesn't appear to be the case.
    Can some CSS expert (here's looking at you, Paul) please share some insights on how all this works?
    Thanks

    VANJ wrote:
    Can some CSS expert (here's looking at you, Paul) please share some insights on how all this works?Hi Vikas
    Regions 1.1 and 1.2 are supposed to be in the same row in different columns so 1.1 has New Grid=Yes and 1.2 has New Column=Yes. Ditto for 2.1 and 2.2With table-based region layout I'm getting a Column number selector rather than a New Column switch.
    1. Trial and error shows that simply changing the Pagination of report region 1.1 from None to Bottom-Right causes the layout to shift such that 1.2 moves to a grid row by itself! What is going on here? Surely a "trivial" change like whether pagination is displayed or not shouldn't cause such a major layout change. Am I missing something? No abstruse CSS here, just Pagination Sub-template and table-less layouts coming home to roost.
    Unlike the majority of report templates, the 2-column portlet report template doesn't have an outer HTML <tt>table</tt> to act as a container for the engine-generated pagination <tt>tr</tt>. The pagination row is thus treated by the browser as starting a new row in the current open table&mdash;the region layout. Having the pagination <tt>tr</tt> injected into the 2-column portlet source turns it into tag soup. The whole thing spectacularly fails HTML validation.
    I expect the official Oracle line is that 2-column portlet reports are not supposed to use pagination.
    2. Regions 2.1 and 2.2 stick together. How can we add some breathing room between them?Add this rule to the page Inline CSS. This will add some space on the left of all region cells except the first in the row.
    .regionlayout td+td {
      padding-left: 10px;
    3. If the page template is changed to One Level Tabs, No Sidebar, the behaviour changes. All the regions are rendered in 1 column, ignoring the New Column grid layout setting. Why is this?If this is the layout shown in your link above then I'm not reproducing it. Can you upload an export of your app and provide a link to it?

  • Apex 4.2 theme 25 grid layout setting.

    Hi
    I know this is silly question but i had to ask you because i have i tried enough , i have done this before but it not working for me right now. :(
    I have 4 region on page .
    Region 1 Grid Layout
    Start New Row     Yes
    Column          Automatic     
    Column Span     Automatic     Region 2 Grid Layout
    Start New Row     Yes
    Column          1
    Column Span     4Region 3 Grid Layout
    Start New Row     NO
    Column          5
    Column Span     4Region 4 Grid Layout
    Start New Row     YES
    Column          1
    Column Span     8In Region 4 I have 11 number field items with setting.
    New Line YES
    New Field YES
    Width 11
    Height 1
    Column Span null(default)
    Row Span    null(default) I want to arrange first 6 in column 1 last 5 in column 5
    I played around the setting by changing column on item to start with 1 and 5 respectively and and set the NO to start new row.
    But it justs move little away to right not really to actual 5 column in grid.
    Your Input is appreciated.
    Thanks

    BUG in 4.1 application theme 25

  • APEX 4.2 aligning issue of Stop and Start Grid Layout item

    My APEX application application is in the process of moving from 4.0 to 4.2.  I am experiencing an issue with aligning (left margin justified) of Stop and Start Grid Layout items that have a border around them.  Earlier I had an issue with the border itself not showing up in the 4.2 application.  I was able to resolve that with a workaround by adding inline code in the CSS section of the page: #P23_OFFICE_START_TBL {width:682; border:1px solid #369; margin:5px;}. This created the border which I needed, but there are 2 Stop and Start Grid Layout items that are indented and not aligning with the border of the previous line.  I have tried a number of different things but none of them have worked.  This seems like a very simple issue to fix but I am having a tough time resolving it.
    I tried to put the item in question in a different grid, which corrected the indention but then I lost the border around the item.  It seems that the above CSS code does not work on the new grid.  I also tried to put attributes such as margin-left:5px; float: left; clear: left; float: left, in the CSS code but that did not work, too.
    Any suggestions?
    Thanks
    Ajay K

    I deleted and added back the Stop and Start Grid Layout items not aligning properly.  This worked.  Apparently, the 4.0 to 4.2 upgrade did not handle/convert these items properly.  Deleting and adding them back resolved the issue.

  • APEX Theme 25 - Responsive Grid Layout Question

    Hi
    What is the best way to control an item to be positioned right next to the other item on the same row.
    I have a select list that I would like to have an edit button right next to it.
    I created two items for example:
    P_MY_SELECT_LIST Grid set New Line to Yes, Auto
    P_MY_EDIT_LINK Grid set New Line to No, Auto
    But it is not doing what I expected.. what am I missing?
    When it was tables not divs I had no trouble but now I need to learn the kep to using the Grid.
    When I hard code the edit in the Post Element of the item it works great with 2 spaces... but I can't control the item by the AUTH Scheme. I don't want them to show up unless you have the proper role.
    Plus, I want to learn the new 4.2 way!
    Thanks, Bill

    Hi Scott, Bill,
    Because Theme 25 relies on grid for most of it's positioning, it is difficult to do accomplish what was sometimes much simpler when using the tables approach for form layouts. This also happens to be one of the biggest issues with Theme 25: proper form and label positioning.
    If we look back to using tables for form layout we would see that a structure would be created immediately when we started laying out items. Because of the way tables behave, whatever the size of your first label was controlled the width of that cell, and the cells below it. Meaning all of your labels would line up, but only take the space necessary to fit your label.
    However, with a div-based grid, this is no longer possible. There is no structured set of cells that grow / contract together as there are in tables. Because of this, it is difficult to determine the width of a given container and apply that same width to others (for example, picking up your largest label, and applying the width of that label container to the other labels which are below).
    One way to go around this problem, and what we've done in Theme 25, is to used fixed-width labels. So we explicitly set the width of labels, and that makes the layout much more predictable. We know that labels will always be a certain width, and that input fields that follow will begin from the same position. However, this is very different from how forms in tables work:
    1. All labels are the same size, so even if a label is very small, or very large, it will take the same space.
    2. We can no longer align two items be right next to each other without using grids.
    3. When using grids, we have to be mindful of the label's fixed width as it can be larger than the column it is contained in.
    We're working on a cleaner approach to this problem so creating responsive applications and laying form items is easier than it currently is. In the meantime, you can override several styles to help your particular use case.
    Here are just a few styles you can apply to your page to get form alignment to behave (with a specified region static id):
    1. Manually setting the widths of labels for a given region:
    #my_region div.fieldContainer.horizontal>label {
        width: 80px;
    #my_region div.fieldContainer.horizontal div.fieldControls {
        /* width above + 16px spacing */
        margin-left: 96px;
    2. Set Label widths to only take up the space they need:
    #my_region div.fieldContainer.horizontal>label {
        float: none;
        width: auto;
    #my_region div.fieldContainer.horizontal div.fieldControls {
        margin-left: 0;
        display: inline-block;
    3. You can allow fields to float left:
    a. Add to your inline CSS:
    #my_region div.fieldContainer {float: left;}b. Set grid layout attributes for your second item as follows:
    Start New Row: No
    Column: Automatic
    New Column: NoYou can combine these together as well. For example, applying styles #2 and #3 will let you position elements side by side and immediately after each other.
    Scott,
    For some of your issues in particular, here are some possible ways to go around them:
    1. Password field being cut off
    In addition to setting the size of the field to 60, you can apply an inline style to control the width by setting the HTML Form Element Attributes field to:
    style="max-width: 100%;"This will restrict the size of input field to be a maximum of 100% of it's container, and should no longer be hidden when your window is resized.
    2. Customer Report obscured
    You can add an inline style to your page header to set this region's content to scroll. For example giving it a static id of my_region and adding the following to your page's inline css field:
    #my_region section.uRegion>div.uRegionContent {overflow: auto;} Hope this helps!
    Shakeeb

  • Grid Layout - Getting two or more fields to display on the same line/row.

    I am using version 4.2.
    I have a form with a number of items.
    I wish to control the display of the items so that some fields are beside each other (on the same line or row).
    I have set the grid layout as follows:
    :PX_ITEM1
    Start New Row: Yes     
    Column: Automatic               
    Column Span: Automatic     
    :PX_ITEM2
    Start New Row: No     
    Column: Automatic     
    New Column: Yes          
    Column Span: Automatic     
    When I do this the items are not displayed on the same row.
    I can see when you change the "Start New Row" from No to Yes, the item fields ARE moved into the same <Div> that controls the row, but they just aren't displaying how I would like them.
    Has anyone got this working?
    Amanda.

    Hi Amanda,
    I believe I have discovered the cause of the issue you are facing.
    The problem is with the "Alert Region" region template and that it does not have any display points specified so indicate the number of grids that can fit in its region body. Without having any display points, the grid layout system attempts to use all columns available to its container. However, because the Alert Region has additional padding within, the columns will not fit and wrap to the next line.
    To fix this issue, you will have to modify the "Alert Region" region template, go to "Display Points" and click Add Row. You will need to enter the following fields:
    Name: Region Body
    Template Substitution: BODY
    Grid Support: Checked
    Maximum Fixed Grid Columns: -1
    This will fix the issue for you. I've logged a bug within our bug system to track this so we can fix it in a future release of APEX.
    Best,
    Shakeeb

  • Grid Layout in theme 26

    Hi,
    I am using Oracle Apex 4.2.1
    I have been following a Youtube Video from Oracle Learning: http://www.youtube.com/watch?v=dPgQZTsdSBI
    The video demonstrates an example of grid layout for regions. The layout has 12 columns and and 4 regions, the regions using 3 columns each. In the video the regions align perfectly.
    I have tried to recreate this in theme 26 but it does not work. I have set theme 26 to reference the page templates for theme 25. However, this does not work and the regions appear next to each other using 1 grid each with no spacing.
    Any ideas on how to fix this in theme 26?
    Thanks,
    JIM

    JIM wrote:
    Hi,
    I am using Oracle Apex 4.2.1
    I have been following a Youtube Video from Oracle Learning: http://www.youtube.com/watch?v=dPgQZTsdSBI
    The video demonstrates an example of grid layout for regions. The layout has 12 columns and and 4 regions, the regions using 3 columns each. In the video the regions align perfectly. The video demonstration uses theme 25, which has page templates set up for a CSS grid system with 12 fixed-width columns.
    I have tried to recreate this in theme 26 but it does not work.The theme 26 page templates are configured to use HTML table layout with a dynamic, variable number of columns. HTML tables expand to fit their contents, so the width of the columns is also variable.
    I have set theme 26 to reference the page templates for theme 25.Don't know what you mean by this. Please explain in more detail.
    However, this does not work and the regions appear next to each other using 1 grid each with no spacing.
    Any ideas on how to fix this in theme 26?Basically there's nothing to "fix". This is how the table-based layout used in theme 26 works. The regions only appear to use "1 grid each" because their content is all the same size. If you add different content to the regions (as I have) then the table columns change width to fit it. You could use CSS to apply fixed widths to the columns, but that kind of defeats the purpose of using table-based layout.
    The themes in APEX 4.2 don't appear to specify spacing between regions when using HTML table layout, but this can be controlled using CSS.
    Why are you trying to use theme 26 rather than theme 25 as shown in the video demo? They don't look that different.

  • Panel Grid Layout: Column Span unexpected behavior.

    Whenever in a Panel Grid Layout, when i give a cell to span over multiple columns(2,3,4 or any), the cell is spanned over the entire row only.. Why does this behavior happens? In JDeveloper, the spanning is shown correctly in design tab and preview tab.

    Hi Amanda,
    I believe I have discovered the cause of the issue you are facing.
    The problem is with the "Alert Region" region template and that it does not have any display points specified so indicate the number of grids that can fit in its region body. Without having any display points, the grid layout system attempts to use all columns available to its container. However, because the Alert Region has additional padding within, the columns will not fit and wrap to the next line.
    To fix this issue, you will have to modify the "Alert Region" region template, go to "Display Points" and click Add Row. You will need to enter the following fields:
    Name: Region Body
    Template Substitution: BODY
    Grid Support: Checked
    Maximum Fixed Grid Columns: -1
    This will fix the issue for you. I've logged a bug within our bug system to track this so we can fix it in a future release of APEX.
    Best,
    Shakeeb

  • Rowspan in Grid Layout

    Hi,
    I am using Apex 4.2.1.00.08 and trying to do some basic design on a form.
    I have a couple of items and one of them is Shuttle item. I would like to position it on right side of form. I do this by setting Start New Row in Grid Layout to NO.
    Up to this point all if fine. What I miss is setting for rowspan. This Shuttle item is bigger than other items and on the left side of form there is a big gap between item 1 and item 3 (item 2 is shuttle item).
    I know that rowspan should take care of this. But I can't find this property among item properties.
    I can find rowspan if I go into "Edit All" items, but there is no effect setting this value.
    Any ideas?
    P.S.
    I am using Blue Responsive theme.

    Hi,
    I am not sure if the vertical gap can be avoided unless you move P1_TEST to a different region.
    The other option is to push the P1_TEST to the last, after the P1_BLANK page item.
    The "Column Span" property in the grid layout can be used to control the horizontal spacing between the P1_ENAME and P1_TEST page items.
    Thanks,
    Rohit

  • Can I control column color in fluid grid layout?

    The columns in fluid grid layout are gray in CC; they used to be pink. I highly prefer pink, as I almost never design with that color, and I frequently design with gray.
    Is there a way to set a preference for grid column color in CC?
    Thanks.

    NO NO NO NO NO!
    Never make your navigation editable or you will shoot
    yourself in the foot
    when it comes time to change a link there and you would have
    to touch every
    page. <sheesh>
    Give each of those links a unique ID, e.g.,
    <a href="page1.html" id="link1">Page 1</a> |
    <a href="page2.html"
    id="link2">Page 2</a>....
    Then in the head of each child page, add this to the Editable
    Region called
    "head" -
    <style type="text/css">
    a#link2 { color:whatever; otherstuff:whatever; }
    </style>
    Now you would just edit the embedded stylesheet to change
    a#link2 to a#link3
    or whichever button you wanted to affect on that page.
    Alternatively, you can go here -
    http://www.divahtml.com and get
    their
    DivaGPS extension.
    DO NOT MAKE YOUR NAVIGATION EDITABLE.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "malcster2" <[email protected]> wrote in
    message
    news:ga5dev$e89$[email protected]..
    > make those links editable regions on the template, and
    apply the
    > neccessary styles in the individual html pages

  • Dw6 fluid grid layout

    trying to make sense of the fluid grid layout.
    can you use <div class> in fluid grid layout?
    is it best to only insert divs using the fluid grid layout div?
    when you insert a new fluid grid div what is the difference between entering a new line or not?
    the html structure seems to be the same regardless of if you start a new line or not, am i wrong?
    any help would be appreciated!

    Ben Pleysier wrote:
    It's not my code, just rubbish I pulled out of the Bootstrap example sites....plenty more like that........ how about this beauty:
    <div class="spb-row-container spb-row-full-width spb_parallax_asset sf-parallax parallax-window-height parallax-fixed spb_content_element bg-type-cover col-sm-12 no-shadow hidden-xs remove-element-spacing col-natural" data-v-center="true" data-top-style="" data-bottom-style=""  data-midnight="dark" style="background-color:#009fc2;margin-top:0px;margin-bottom:0px;background-image: url(http://www.thesign.pt/wp-content/uploads/2014/10/FM.jpg);">
    I thought we were talking about Bootstrap. No Bootstrap in the above.
    <body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-1172 node-type-static-page not-mobile region-content navbar-is-fixed-top"  onunload="">
    No Bootstrap here either.
    <div class="col-lg-3 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-22 col-xs-offset-2 col-lg-offset-0">
    Please allow me to explain. Bootstrap is based on 12 columns regardless of screen size. Translating the above we get the following for each of the screen sizes
    large 3 cols offset 0
    medium 4 cols offset 1
    small 4 cols offset 1
    extra small 22 cols offset 2
    Our attention immediately falls on the extra small device with 22 columns that are 2 columns offset, total 24 columns. How can this be when there are only 12 columns available. Why would one have offset columns on the smallest screen size when we are already battling for real-estate. I think that if we make the classes believable we can safely ignore the classes for the extra small device. Continuing, we see the same number of columns for medium and small and the same offset. Being a mobile first approach, the classes that we assign to small will filter through to larger screen sizes making the classes for medium screen sizes ineffective. Looking at the 0 offset for large screen sizes?? Why do that when it is the default value. In other words, had Bootstrap been applied properly, the tag would look like
    <div class="col-sm-4 col-sm-offset-1 col-lg-3">
    The other two examples are even more ridiculous. Once again, I implore you to start learning Bootstrap and you will come to the conclusion that you are supplying us with gibberish.
    I'm not supplying the gibberish it's the many websites that rely on frameworks, be they Bootstrap/Foundation/Wordpress - whatever rubbish they are using that I'm lifting this code from that are supplying it.
    Take the Bootstrap form - every form input field I observe is wrapped in a <div> tag, why - it's bloated and redundant coding. Bootstrap, much like Wordpress was never invented to be used to build websites.
    That IS my whole point - there are numerous examples of where Bootstrap IS NOT being used properly because people rely on something they no nothing about and end up with verbose class names splattered around all over their pages, bloated js and css scripts because they are the default files which come with Bootstrap.
    <div class="col-sm-4 col-sm-offset-1 col-lg-3"> to me this is still nasty and overly complex 'class' mark-up. A page full of this tripe would drive me insane.
    The very worst people you could advise to use Bootstrap are the people in this forum because most will have little knowledge of coding (that's why they turn to a framework) and end up with a page full of crap.
    And I'm not verbalising you - you said it yourself. People use lots of 'short cuts' - it doesnt mean it's a good approach to take. No ones re-inventing the wheel apart from Bootstrap, who are obviously trying too. Media queries already exist to produce responsive design, learn how to implement them and free yourself from being entrapped by frameworks where you have to use their naming convention, their break points by default, their over bloated js and css files and somethimes rubbish html mark-up.

  • Dreamweaver cs6 and Fluid Grid Layouts!

    New to Dreamweaver cs6 and Fluid Grid Layouts!
    Could you please tell me if you can create several layout grid designs (in the same website) depending on the page layout you need for each
    page?
    The reason I am asking is my web site has different information on each page (which is laid out differently)
    Maybe create layout.css and layout2.css and so on. AND TIE EACH PAGE IN WITH A PHP INCLUDE NAVIGATION PLACED ON EACH PAGE.
    Is this possible.
    Thanks, Mrs. White

    Different layouts for different pages?  It's certainly possible, but I don't recommend it.  Ideally you want to work with ONE FluidGrid Layout throughout your site with some additional CSS rules for optional regions (classes & styles) that may not be required on all pages. Some examples of optional regions would be contact forms, tables, definition lists, re-usable floats, etc...
    If your Responsive Design is well planned, you shouldn't need more than one main structure for mobile, one for tablet and one for desktops.  If you go down the path of having different structures for 3 devices AND each site page, you will soon be wrestling with a 10,000 lb. gorilla: Herculean to build and not much fun to maintain.
    Server-side includes for site wide headers, footers & navigation are a very good idea whether your site is Responsive or not.  I use them all the time.
    Nancy O.

  • ALV Summation button is not working when GRID layout is specified

    Hi,
    I have created a report with Field: ALV Grid Layout. When i dont select anything in ALV GRID Layout. and execute the report. The outout is displayed in ALV Grid. and if i select amt column and PRESS SUMMATION button. im getting the total. Thats fine.
    When i select any of the saved layout in ALV Grid Layout field.and run the report, the output is geeting displayed. and if i select amt column and press SUMMATION Button, im getting info message in the popup saying "Desired operation cant be performed for Column 'amt'"
    Whts te problem ?
    Thanks in Advance.
    Jhovee.

    PART-II
    FORM f_display_data.
      TYPE-POOLS: slis.                    " ALV Global types
    DEFINE m_fieldcat.
        add 1 to ls_fieldcat-col_pos.
        ls_fieldcat-fieldname   = &1.
        ls_fieldcat-ref_tabname = 'VBAK'.
        ls_fieldcat-do_sum      = &2.
        ls_fieldcat-cfieldname  = &3.
        append ls_fieldcat to lt_fieldcat.
      END-OF-DEFINITION.
      DEFINE m_sort.
        add 1 to ls_sort-spos.
        ls_sort-fieldname = &1.
        ls_sort-up        = 'X'.
        ls_sort-subtot    = &2.
        append ls_sort to lt_sort.
      END-OF-DEFINITION.
      DATA: ls_fieldcat TYPE slis_fieldcat_alv,
        lt_fieldcat TYPE slis_t_fieldcat_alv,
        lt_sort     TYPE slis_t_sortinfo_alv,
        ls_sort     TYPE slis_sortinfo_alv,
        ls_layout   TYPE slis_layout_alv.
      m_fieldcat 'VKORG' ''  ''.
      m_fieldcat 'KUNNR' ''  ''.
      m_fieldcat 'VBELN' ''  ''.
      m_fieldcat 'NETWR' 'X' 'WAERK'.
      m_fieldcat 'WAERK' ''  ''.
      m_sort 'VKORG' 'X'.                  " Sort by vkorg and subtotal
      m_sort 'KUNNR' 'X'.                  " Sort by kunnr and subtotal
      m_sort 'VBELN' ''.                   " Sort by vbeln
      ls_layout-cell_merge = 'X'.
      CALL FUNCTION 'REUSE_ALV_GRID_DISPLAY'
           EXPORTING
                is_layout   = ls_layout
                it_fieldcat = lt_fieldcat
                it_sort     = lt_sort
           TABLES
               t_outtab    = gt_vbak.
    ENDFORM.                               " F_DISPLAY_DATA

  • How do I get my Fluid Grid Layout page to resizes from portrait to landscape for iPhones?

    Starting in portrait on my iPhone 4, the fluid grid layout page does not resize when I turn to landscape.  After I refresh / resize to fit the page on landscape and then turn the iPhone to portrait, the page resizes just fine.  Everything seems to be working just fine on the desktop, ignoring IE.  Could it be my media query tags?
    If anyone knows a solution, it would be much appreciated.  Thanks.
    Here is my test page: http://www.bedroomandmore.com/1_b_fluidGrid.html
    Here are my media query tags (the first set of rules does not have the media query tag and becomes the default):
    @media only screen and (max-device-width: 480px) and (orientation : landscape) {
    @media only screen and (min-width: 481px) {
    @media only screen and (min-width: 769px) {
    Here is most of my media query 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%;
    /* Mobile Layout: 480px and below.(smartphone portrait) */
    .gridContainer {
              width: 95.4184%;
              padding-left: 0.5907%;
              padding-right: 0.5907%;
    #header {
              clear: both;
              float: left;
              display: block;
              margin-left: 0%;
              width: 72%;
              max-height: 0%;
              display: -moz-box; /* Firefox */
              display: -webkit-box; /* Safari and Chrome */
              display: box;
              border: none;
              top: auto;
              padding-top: 0.25em;
    #menuHorizontal {
              clear: both;
              float: left;
              width: 118%;
              height:100%;
              margin-left: auto;
              position:relative;
              top:-1em;
              display: block;
    #slides {
              clear: both;
              float: left;
              margin-left: 0.1em;
              width: 119%;
              position: relative;
              top: -1em;
              display: block;
                        /*Slides container: Important: Use position:relative; with top:-1em; together to position div.
                                  Set the width of your slides container
                                  Set to    display: none     to prevent content flash*/
    .slides_container {
              clear: both;
              width: 100%;
              display: block;
                        /*Each slide: Important:
                                  Set the width of your slides
                                  If height not specified height will be set by the slide content
                                  Set to     display: block     for original setting
                                  slide_container is container size
                                  slides_container div set the size of the image inside--adjust to fit image in it so it is not cropped*/
    .slides_container div {
              clear: both;
              width: 69%;
              display: block;
              /* Mobile Layout: 480px. (smartphone landscape)
                                  Inherits styles from Mobile Layout 480px.
                                  Set to clear:none; to allow div to shift up
                                  Or set to clear:both; to take a whole row of the screen*/
    @media only screen and (max-device-width: 480px) and (orientation : landscape) {
    .gridContainer {
              width: 95.4184%;
              padding-left: 0.7907%;
              padding-right: 0.7907%;
    #header {
              clear:both;
              float: left;
              display: block;
              margin-left: auto;
              width:100%;
              display: -moz-box; /* Firefox */
              display: -webkit-box; /* Safari and Chrome */
              display: box;
              border: none;
    #menuHorizontal {
              clear:both;
              float: left;
              width: 110%;
              margin-left:auto;
              display: block;
    #slides {
              clear:both;
              float: left;
              margin-left: 0%;
              width: 68%;
              display: block;
                        /*Slides container: Important:
                                  Set the width of your slides container
                                  Set to    display: none     to prevent content flash*/
    .slides_container {
              clear:both;
              float: left;
              width: 100%;
              display: block;
                        /*Each slide: Important:
                                  Set the width of your slides
                                  If height not specified height will be set by the slide content
                                  Set to     display: block     for original setting*/
    .slides_container div {
              clear:both;
              width:69%;
              display: block;
                        /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.
                                  Set to clear:none; to allow div to shift up
                                  Or set to clear:both; to take a whole row of the screen*/
    @media only screen and (min-width: 481px) {
    .gridContainer {
              width: 95.9456%;
              padding-left: 0.5271%;
              padding-right: 0.5271%;
    #header {
              clear:both;
              float: left;
              display: block;
              margin-left: auto;
              width: 100%;
              display: -moz-box; /* Firefox */
              display: -webkit-box; /* Safari and Chrome */
              display: box;
              border: none;
    #menuHorizontal {
              clear:both;
              float: left;
              margin-left:auto;
              display: block;
    #slides {
              clear:both;
              float: left;
              margin-left: 0%;
              width: 70%;
              display: block;
                        /*Slides container: Important:
                                  Set the width of your slides container
                                  Set to    display: none     to prevent content flash*/
    .slides_container {
              clear:both;
              float: left;
              width: 100%;
              display: block;
                        /*Each slide: Important:
                                  Set the width of your slides
                                  If height not specified height will be set by the slide content
                                  Set to     display: block     for original setting*/
    .slides_container div {
              width: 100%;
              display: block;

    I found the problem.  There is a bug in Safari for iPhone 4.  Use code to fix found at http://stackoverflow.com/a/6379407

  • How can I convert my web page from a fixed width layout to a fluid grid layout?

    I'm taking a web design class (I'm using Dreamweaver CS6, btw)  wherein the professor started us out building our websites in a fixed width layout but now I want to change my site into a fluid grid layout. My "site" so far is just one long page, and I've already designed it with fluid grid adjustments in mind (most things are centered  in the layout) so it shouldn't need excessive tweaking.
    Is there a way to duplicate the site folder that holds my first page, re-open a new document in fluid, then copy the code in and tweak the width parameters for the different layouts?
    Did I just answer my own question? Help - I am new at this!!
    Thanks all,
    KC

    Herbert2001 wrote:
    A bit off-topic, but Osgood: have you ever used SASS or LESS? When you are building your own grid systems it can save you a tremendous amount of time, and it's a lot of fun.
    Take the following simple example - it generates all the 23 css classes automatically for a 12 grid system. And simply changing one variable allows you to create and calculate any number of columns!
    //variables
    $desktop: 1025px;
    $large-columns: 12;
    @media only screen and (min-width: $desktop) {
         //regular grid span classes
        @for $i from 1 through $large-columns {
            .span-large-#{$i} {
                width: percentage($i/$large-columns);
         // push classes
        @for $i from 1 through (($large-columns)-1) {
            .push-large-#{$i} {
                margin-left: percentage($i/$large-columns);
    No, not explored it yet, and may never....I don't know. I don't really make much money out of web design. It's becoming more and more difficult to find the desire to learn new techniques when the opportunities aren't really there to put them into practice on as regular basis as I would like.  I've got  a very good handle on css, php, html, jQuery - I'm not sure I want to add another layer at the moment, given I'm never quite sure how long I will continue to 'bang my head against the wall' . I'm getting to the stage where I keep asking myself do I really need the problems associated with learning new stuff to the point of being comfortable with it if the financial rewards at the end don't equate to the efforts of learning it.
    I don't really enjoy web development if truth is known. I come from a Graphic Design background which I much prefer but somehow got side tracked and pushed in this direction and there's no way back now, lol. Whilst I concede Web Development is much more exciting its also 100 times more complex/difficult and the skills needed are considerably more.
    Your example looks interesting and I should think I could pick it up reasonably easily given I work with php which uses variables on a similar basis.

Maybe you are looking for

  • HT201269 I can't find my old contacts!!! help!!!

    I just "restored" my iPhone...and I am pretty sure I wiped out all my contacts....Can anyone help me?

  • How to do replication in oracle 10g

    hi, I am new to Oracle. I want to do Data Replication. I am using Oracle 10g. Can any one help me by telling the steps of Oracle replication. Thanks in advance. Message was edited by: user577340 Message was edited by: user577340

  • Acrobat can't open this file

    Documents i receive a message telling me I cant open this file because  The document "HFB.pdf" coiuld not be opened.   Acrobat can open fiiles in the "Adobe PDF document" format. 1. What causes this message? 2. Is there  a workaround? I have already

  • How Uninstall Photoshop Elements 11 for Mac?

    My new iMac shows Error 6 for my PE 11.  How do I uninstall and reilnstall PE 11 into my new computer?

  • Having Trouble With My Ipod HELP ME OUT!!!!!

    There's a problem with my ipod every time i plug it into my mac it connects then disconnects right away not letting do anything. Then it says its syncing with my mac before it disconnects and then there's nothing on it, and when i try it on windows i