Internet Explorer doesn't position relative an IMAGE the same as Firefox

I put 850px for now I was using 797px which we used earlier I believe, but couldnt since layout has gotten wider for some reason. Going to look into what has cause the main containers to expand layout. Not a good thing since you want to keep layout support for 800x600 monitor resolutions.

remove this...

#top_banner
{
      width : 850px;
}

also change this...

#rap {
       width: 850px;

       background: #0000FF;
       margin: 0 auto;
       text-align: left;
         vertical-align:top;
       }


to 797px; and my previous CSS code make it 797px, that should fix the layout width problem, just did a search on CSS for 850 and those are the 2 declarations I found. Going to test in browser.

I made the layout wider even though I was aware of 797 for 800 monitors. I felt my overall layout was too narrow.  I'll probably take your advice and go back to 800 for the widest audience.

Now I'll test your code.

since you coded for wider size your absolute positions for #right_container will be off when yuo adjust to new size.

make a backup off your CSS code and try this out and see if you like it. It fits perfectly for me in 800x600, 797px is still too wide seeing it needs to accoutn for scrollbars etc....I also edited the absolute positioning let me know if you like.




 /*
Theme Name: ROWBY
*/

/* -------------------- Body and Page Layout ----------------------- */

body {
       background: #0000FF;
      font-family: Arial, Helvetica, sans-serif;
       font-size: 12px;
       margin: 0;
       padding: 0;
       text-align: center;
         vertical-align:top;
       }


#rap {
       width: 775px;

       background: #0000FF;
       margin: 0 auto;
       text-align: left;
         vertical-align:top;
       }

#masthead {
            font-family: Georgia, 'Times New Roman', serif;
            color: #0000FF;
            text-align: left;
            padding: 5px 5px 5px 2px;
                  vertical-align:top;
            }

h1.masthead {
               font-size: xx-large;
               font-weight: bold;
               text-transform: capitalize;
               padding: 0;
               margin: 0;
                     color: #0000FF;
               }

h2.masthead {
      color:#0000FF;
      border: 0px;
    font-size: small;
               padding: 0 0 0 1px;;
               margin: 0;
                     vertical-align:top;
               }

#masthead a {
              color:#FF0000;
              text-decoration: none;
              }

#main {
        float: left;
        width: 400px;
        height: 100%;
            vertical-align:top;
            background: #0000FF;
           }
        }


#content {
           float: left;
           width: 400px;
           overflow: hidden;
               vertical-align:top;
               background: #0000FF;
           }
#sidebarNonMenu {
        float: left;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
            vertical-align:top;
        }

#menu {
        float: left;
            vertical-align:top;
        padding-left: 5px;
        padding-right: 5px;
            color: #FFFF00;
        }

#menu a {
          text-decoration: underline;
          color: #FFFF00;

          }

#rmenu {
         float: right;
         width: 165px;
         padding-left: 10px;
         padding-right: 5px;
         padding-top: 10px;
             vertical-align:top;
             color: #0000FF;
}
.clearer {
           clear: both;
           height: 0;
           margin: 0;
           padding: 0;
               vertical-align:top;
           }


#footer {
          margin-bottom: 0;
}


/* --------------------- WordPress Stuff ----------------------- */


a {
      color: #675;
}



a:visited {
      color: #342;
}

a:hover {
      color: #9a8;
}

acronym, abbr {
      border-bottom: 1px dashed #FF0000;
}

acronym, abbr, span.caps {
      cursor: help;
      font-size: 90%;
      letter-spacing: .07em;
}

blockquote {
      border-left: 3px solid #050;
}
      margin-left: 15px;
      padding-left: 5px;
}



cite {
      font-size: 90%;
      font-style: normal;
}


h2 {
     color:#FF0000;
     font-family: Arial, Helvetica, sans-serif;
     border-bottom: 1px solid #050;
     text-align: left;
     font-weight: bold;
     margin-bottom: 10px;
     margin-left: 10px;
     padding: 3px;

     }

h3 {
     color: #e63;
     font-family: Arial, Helvetica, sans-serif;
     font-size: medium;
     text-align: left;
     font-weight: bold;
     margin-bottom: 10px;
     text-transform: capitalize;
     }

h3 a,
h3 a:hover,
h3 a:visited {
               color: #808080;
               }

ol#comments li p {
      font-size: 100%;
}


/* ------------------ Classes used by the_meta() --------------*/


ul.post-meta {
font-size: 20;

               list-style: none;
               }

ul.post-meta span.post-meta-key {
font-size: 20;

      font-weight: bold;
}


#footer {
      background: #0000FF;
      color:#FFFF00;
      font-size: 12px;
      margin: 10px 0 0 0;
      padding: 3px;
      text-align: center;
 }

#footer a,
#footer a:visited {
                    color: #FFFF00;
                    text-decoration: none;
                    }
#footer a:hover {
                  text-decoration: underline;
                  }

.feedback {
            font: normal x-small 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
            letter-spacing: -1px;
            color: #ffffff;
            clear: both;
            font-size: .75em;
            padding: 5px 0 10px 0;

            }

.feedback a {
              color: #248;
              text-decoration: none;
 }
.meta {
      font-size: 20;
      color: #BC0808;
      margin: 0 0 0 0;

}

.meta li, ul.post-meta li {
font-size: 20;
      display: inline;
}

.meta ul {
font-size: 20;
      display: inline;
      list-style: none;
      margin: 0;
      padding: 0;
}

.meta, .meta a {
font-size: 20;
      color: #248;
      font-weight: normal;
      letter-spacing: 0;
                 text-transform: lowercase;
                 text-decoration: none;
}

.meta a {
font-size: 20;

      color: #ae0000;
      font-weight: normal;
      letter-spacing: 0;
                 text-decoration: none;
}



.metacomment {
               float: right;
               position: relative;
               top: -15px;
               display: inline;
               font: normal x-small 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
               letter-spacing: -1px;
               margin-right: 16px;
               }

.post {
      margin-top: 5px;
      margin-right: 15px;
      margin-left: 15px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-style: normal;
      font-weight: normal;
      color: #000000;
}

h2.storytitle {
font-family: verdana, arial, helvetica, sans-serif;
color: #0000FF;
}

.storytitle A:link {
color: #0000FF;
text-decoration: none;
}

.storytitle A:visited {
color: #0000FF;
text-decoration: none;
}

.storytitle A:hover {
color: #CC0000;
text-decoration: underline;
}

.storycontent,
.storycontent p {
                  color: #000000;
                  font-family: Arial, Helvetica, sans-serif;
                  font-size: small;
                  font-weight: normal;
                  line-height: 130%;
                  text-align: left;
                  margin-bottom: 10px;
                  text-align: left;
                  }

.storycontent a {
                  color: #c44;
                  border-bottom: #050 1px dotted;
                  text-decoration: none;
                  }

.storycontent a:hover,
.storycontent a:visited:hover {
                         border-bottom: 0px;
 }

.storycontent a:visited {
                          color: #e63;
                          border-bottom: #050 1px dotted;
                          }


.storycontent ul {
                   padding: 0;
                   margin: 0;
                   }

.storycontent li {
                   list-style: none;
                   padding: 10px;
                   }

.storycontent li:before {
                          content: "\00BB \00A0 \00A0 ";
                          }
.storycontent img {
            padding: 4px;
            border: #050 1px solid;
}


#commentform #name,
#commentform #email,
#commentform #url,
#commentform textarea {
                        background: #fff;
                        border: 1px solid #050;
                        padding: .2em;
                        }

#commentform textarea {
                        border: #050 1px solid;
                        width: 80%;
                        }

#commentlist li ul {
      border-left: 1px solid #ddd;
      font-size: 110%;
      list-style-type: none;
}




#menu form {
             margin: 3px 3px 3px 0;
             }

#menu input#s {
      width: 80%;
      background: #eee;
      border: 1px solid #999;
      color: #000;
}



#menu ul {
      color:#FFFF00;
      font-weight: bold;
      font-size:14px;
      list-style-type: none;
      margin: 0;
      padding: 0;
      text-transform: lowercase;
}

#menu ul li {

             color:#FFFF00;
             font-family: Arial, Helvetica, sans-serif;
             font-size:14px;

              text-align: left;
              font-weight: bold;
              text-transform: uppercase;
              padding-top: 10px;
              letter-spacing: .3em;
              margin-top: 5px;
              padding-bottom: 5px;
              }

#menu ul ul {
              color:#FFFF00;
                    font-variant: normal;
              font-weight: normal;
              line-height: 100%;
              list-style-type: none;
              margin: 0;
              padding: 0;
              text-align: left;
              }

#menu ul ul li {
      color:#FFFF00;
      border: 0;
      font: normal x-small 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
      letter-spacing: 0;
      margin-top: 0;
      padding: 0;
      padding-left: 12px;
}

#menu ul ul li:before {
       color:#FFFF00;
      content: "\00BB \00A0 \00A0 ";
      }


#menu ul ul li a {
       color:#FFFF00;
      text-decoration: none;
        text-transform: uppercase;
}

#menu ul ul li a:hover {
      border-bottom: 1px solid #809080;
}

#menu ul ul ul.children {
      font-size: 142%;
      padding-left: 4px;
}

#menu .menutitle {
                     border-bottom: 1px solid  #222281;
                     width: 90%;
                }

/* Right menu */

#rmenu form {
      margin: 3px 3px 3px 13px;
}

#rmenu input#s {
      width: 80%;
      background: #eee;
      border: 1px solid #e63;
      color: #248;
}

#rmenu img {
            text-align: center;
            background-color: #ddd;
            border: 1px #e63 solid;
            padding: 3px;
 }


#rmenu ul {
      color: #c44;
      font-weight: bold;
      list-style-type: none;
      margin: 0;
      padding: 0;
      text-transform: lowercase;
}

#rmenu ul li {
               color: #248;
               font-family: Arial, Helvetica, sans-serif;
               font-size: x-small;
               text-align: left;
               font-weight: bold;
               text-transform: uppercase;
               padding: 0;
               letter-spacing: .3em;
               padding-bottom: 5px;
               margin-top: 5px;
              }

#rmenu ul li a {
                 text-transform: lowercase;
                 color: #248;
                 text-decoration: none;
                 }

#rmenu ul ul {
              font-variant: normal;
              font-weight: normal;
              line-height: 100%;
              list-style-type: none;
              margin: 0;
              padding: 0;
              text-align: left;
              }

#rmenu ul ul li {
      border: 0;
      font-family: Arial, Helvetica, sans-serif;
      letter-spacing: 0;
      margin-top: 0;
      padding: 0;
      padding-left: 12px;
                  text-transform: lowercase;
}

#rmenu ul ul li:before {
                         content: "\00BB \00A0 \00A0 ";
                         color: #ae0000;
      }


#rmenu ul ul li a {
                    color: #222281; /* Blue */
                    text-decoration: none;
                    text-transform: lowercase;
                    }

#rmenu ul ul li a:hover {
                          border-bottom: 1px solid #809080;
                          }

#rmenu ul ul ul.children {
      font-size: 142%;
      padding-left: 4px;
}

#rmenu .menutitle {
                    color: #222281;
                    border-bottom: 1px solid #222281;
                     width: 90%;
                }






/* ------------------------ WP Calendar styling ---------------------*/



#wp-calendar {
               line-height: 140%;
               color: #ffffff;
              font-family: Arial, Helvetica, sans-serif;
               font-size: x-small;
               font-weight: bold;
               padding: 2px;
               text-align: center;
               width: 90%;
               }

#wp-calendar #next a {
      padding-right: 10px;
      text-align: right;
}

#wp-calendar #prev a {
      padding-left: 10px;
      text-align: left;
}

#wp-calendar a {
      display: block;
      text-decoration: none;
}

#wp-calendar a:hover {
      background: #e63;
      color: #222281;
}

#wp-calendar caption {
                       color: #222281;
                      font-family: Arial, Helvetica, sans-serif;
                       font-size: x-small;
                       border-bottom: 1px solid #e63;
                       text-align: left;
                       font-weight: bold;
                       text-transform: uppercase;
                       padding: 0px;
                       margin-top: 5px;
                       letter-spacing: .3em;
                       }

#wp-calendar td {
                  text-align: center;
}

#wp-calendar #today {
                      background: #e63;
                      color: #deb;
                      }

#wp-calendar th {
      text-align: center;
      font-weight: normal;
      font-style: normal;
      text-transform: capitalize;
}

#wp-calendar table {
                  padding: 2px;
                  border-collapse: collapse;
                  border: 0px;
                  width: 90%;
                  }

/* Comments template */

#comments {
            padding: 10px 10px 15px 15px;
            }

#comments p {
             font-family: Arial, Helvetica, sans-serif;
              color: #248;
              font-size: x-small;
              font-weight: normal;
              text-align: justify;
              margin-bottom: 10px;
              }

h2#comments {
             font-family: Arial, Helvetica, sans-serif;
              font-size: small;
              font-weight: bold;
              border: 0px;
              padding-bottom: 2px;
              padding-left: 0;
              margin-left: 0;
              }

h2#comments a {
                text-decoration: none;
                }

h2#postcomment {
               font-family: Arial, Helvetica, sans-serif;
              font-size: small;
              font-weight: bold;
              border: 0px;
              padding-bottom: 2px;
              padding-left: 0;
              margin-left: 0;
              }

h2#postcomment a {
                text-decoration: none;
                }

img.wp-smiley {
        padding: 0;
        border: 0px;
}

.english {
       border: 1px #222281 solid;
       margin: 10px;
       padding: 4px;
}

img.alignleft {
               float: left;
               margin: 2px 7px 0 0;
               display: inline;
               }

img.alignright {
               float: right;
               margin: 0 0 3px 7px;
               display: inline;
               }

/* FROM BOBBY */
.oddp {
      background-image: url(http://www.rowby.com/wordpress/wp-content/themes/Rowby/images/posttopright.gif);
      background-position: top right;
      background-repeat: no-repeat;
      margin: 0px 20px 20px 0px;
      padding: 3px 15px 5px 15px;
      background-color: #CCFFFF;
      position:relative;
    left : 15px;
    top : 0;

      }

.evenp {
      background-image: url(http://www.rowby.com/wordpress/wp-content/themes/Rowby/images/postetopleft.gif);
      background-position: top left;
      background-repeat: no-repeat;
      margin: 0px 20px 20px 0px;
      padding: 3px 15px 5px 15px;
      background-color: #FFFFCC;
      position:relative;
    left : 15px;
    top : 0;
      }


/* use if using a background image for the above, to fix it in somethingerother browser */
* html .post {background-attachment: fixed; height: 1%;
}
/* ENDOF BOBBY */
/* FROM header */
.style1 {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 24px;
      font-weight: bold;
      color: #FFFF00;
      font-style: italic;
}
#wholesome {
   position:relative;
    left : -40px;
    top : 2px;
    float: center;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      font-style: italic;
      font-weight: bold;
      color: #FFFF00;
      text-align:center;
}

#wp_quotes
{
     width: 175px;
     height:100px;

     font-size:12px;
     color: #0000FF;
      padding-top:2px;
      padding-left:5px;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: bold;

       background-image:url(images/rowby-sez.gif) ;
       background-repeat: no-repeat;
}

#right_container
{
    position:relative;
    left : 0px;
    top : -160px;
    float: right;
}
#top_text {
   position:relative;
    left : -40px;
    top : 8px;
    float: center;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;
      font-style: italic;
      font-weight: bold;
      color: #FFFF00;
      text-align:center;
}
 #top_banner {
width:775px;
margin:auto;

        font-family: Arial, Helvetica, sans-serif;
     font-size: 20px;
     font-style: italic;
     font-weight: bold;
     color: #FFFF00;
     text-align:left;
}

HI Cryptic.

I made the necessary adjustments and it is looking okay.

http://rowby.com/wordpress/

Bruno, I saw your suggtion after I implimented Cryptics.  

I haven't dug into your code -- is there any advantage -- compatibility-wise to use your code instead of Cryptic?

Rowby

Cryptic:

I just saw your modification of the style sheet. I will make a backup of mine and try yours.

Rowby

Rowby,

When looking at your page in FF, the banner at the top is way to the left - my code will center it with the rest of your page.  Your banner is being positioned, so it's not moving as I resize my browser window, while the rest of the page is centered, and therefor adjusts as I resize my browser window.

bruno

Hi Cryptic,

I'm using your style sheet for 800 monitors and it looks good in both ie and firefox.

Let me check it a bit more.  

The next issue (and I can make it a separate question if you wish), is I have added a graphic to the yellow text area on the right.   I want the text to fit "inside" the area better.  I am thinking I need to make a separate division for the graphic to position it "behind" the existing yellow text and/or container area.

I will eithier have to make the graphic larger or make the text area smaller.

Any thoughts?

Hi bruno,

let me check out your comments etc now.

Hi bruno,

I see what you mean.

Cryptic / Bruno -- how can we incorporate Bruno's suggestion into the code at this point.

Into Cryptic's  new style sheet??

Rowby

rowby,

all i did was remove the position information, and added this:

margin-left: auto;
margin-right: auto;


not sure how it will affect what you have already implemented from Nick...


bruno

btw, i am using 1280 resolution so if neither of you are up that high, that's probably why i noticed the banner was too far to the left.  

I have same resolution, I noticed the banner too far left too. The div it was in is now centered and the image is aligned left in div so the yellow box can have space right of it.

ah ok, yes what is live on the site right now looks good

Yes, the top banner is now centered correctly as the page is adjusted min minimize mode.

Now the text that says;
Wholesome, yet Curiously Entertaining!  is the culprit, moving right and left when the page width is adjusted.

Maybe I can figure out that one, learning from what you have told me -- or you can do it :)

#wholesome {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      font-style: italic;
      font-weight: bold;
      color: #FFFF00;
      text-align:center;
}


that should do it...

if you want to slide it left or right a little just use padding-left or padding-right no need to absolute position this element.

Wholesome (and toptext which I also modified) are still behaving badly (moving right and left) as I narrow and widen the margins of the browser.  Here is the style:

Perhaps it's because the two elements are inside some other element in some way (maybe within a division)

Here's the current live style:

#wholesome {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 15px;
     font-style: italic;
     font-weight: bold;
     color: #FFFF00;
     text-align:center;

And here's the current live HTML  code:

<body>
<div id="top_text">Streaming Media Comedy Adventures Every Week!</div><br>

<div id="top_banner"><img src="wp-content/themes/Rowby/images/headerimg.jpg" width="625" height="170"/></div>
 
  <div id='wholesome'>Wholesome, yet Curiously Entertaining!</div>
  <div id="rap">
<div id="container">
<div id="masthead">
</div>

Odd I just tested in IE and Firefox and 'wholesome' is always centered when I resize window, only when I go below 800x600 res does layout gets scrunched and it moves, otherwise its not moving for me. Double check please and clear cache and refresh page. I dont know what could be causing it to move otherwise. I look at the html and that element is fine where it is nothing is encasing it so nothing should effect its position except its own CSS code which seem to be working for me.

You're right it only happens when minimizing it lower than 800.

I'll live with that for now.  But if you come up with a solution let me know.

I'll leave this question open 24 hours in case you think of something.

Then I'll award the points for you and brunobear.

Next I'm opening a new question on the issue of the graphic behind the yellow area.

No need to respond quickly on this -- in case you have another life. The new version  of the site is a week away from launch.

Rowby

I have a feeling that maybe this is happening because the sidebar is a separate php file that is being pulled in. And I think that's where the container is?

and the two text files are in the index.php page

I'll play around with that file later today.

Rowby

Yeah thanks for the time warning =oP, been hectic here trying to multi-task so many household things and coding my own projects and helping on EE all at one O.o =oP. Will get back to you as soon as I have another bit of time to sit down and examine and test code. But must get back to cleaning house, have to pick up my mom at airport in 5 huors and got a lot of cleaning to do O.O, Take care!

Nick