get background repeat, plus Firefox issues...

[colorado2rein]

Hey there,

If someone gets a chance, can you look at my first CMS site both in Firefox and IE: http://reinwiththeprogram.com/

You'll see the major display differences!!  Please help with the Firefox issues - no image on the left, center image has somehow wrapped itself, etc.

--------------

Also... how do I get my background image to repeat horizontally and have it be on top of a solid colour background?  this issue seems to be the same across browsers, but works fine in GoLive where I wrote the site - ?

Here is the initial css:

body{
font-family:Verdana, Arial, sans-serif;
line-height: 120%;
background: url(http://reinwiththeprogram.com/uploads/i ... ckgrad.jpg) repeat-y top left;
font-size:0.8em;
color:#fff;
font-weight:normal;
margin:0;
padding:0;
}

/*left column*/

#pageHeader{
position:absolute;
top:0;
left:0;
background:url(http://reinwiththeprogram.com/uploads/i ... thorse.jpg) no-repeat fixed top;
height:670px;
width:220px;
z-index:6;
}

#pageHeader2{
position:absolute;
top:0;
left:220px;
background:url(http://reinwiththeprogram.com/uploads/i ... ntitle.jpg) fixed top;
height:120px;
width:504px;
z-index:5;
}

#menuhor{
font-size:0.85em;
line-height: 120%;
overflow:hidden;
position:absolute;
top:122px;
left:224px;
height:140px;
text-align:left;
width:480px;
z-index:3;
}

#menuhor a{ text-transform:uppercase; }

#maintext{
position:absolute;
top:130px;
left:224px;
text-align:justify;
width:480px;
z-index:4;
}


I am new to doing entire layouts in CSS - couldn't seem to get this fixed with the w3schools.com help either - what did I miss?

Thanks SO much!

[sam0]

Hello!
Nice way to resolve these kind of situations is to install Web Developer add-on to your Firefox, so you can edit the CSS file on the fly.

#pageHeader{
  position:absolute;
  top:0;
  left:0;
  background:url(http://reinwiththeprogram.com/uploads/i ... thorse.jpg) fixed top left; /* Added left*/
  height:670px;
  width:220px;
  z-index:6;
  }
So I added the left to the background position and it shows ok in Firefox atleast. Cannot verify the situation in IE.
Hope this helps

[colorado2rein]

Brilliant! It definitely fixed the left image in FF and didn't screw it up in IE6.... I haven't even tested it in IE7, I'm scared!

Now, what about the other image on top, in pageheader2? It currently says "fixed top", but i want it to stay at the top AND match up with the edge of the left image no matter what size my browser window is.  Any ideas there?

Thanks so much for responding!

I will definitely install the toolbar, thanks.

[vandal]

I would have not used absolute positioning for this design, plus the code is not semantic (your #pageHeader2 should not be a div but an h1 tag using image replacement etc...).

Anyway for a quick fix,

#pageHeader2{
  position:absolute;
  top:0;
  left:220px;
  background:url(http://reinwiththeprogram.com/uploads/i ... ntitle.jpg) left no-repeat;
  height:120px;
  width:504px;
  z-index:5;
  } 

[colorado2rein]

I'm sure we can all agree I'm a total CSS novice.    But thanks for your help and the quick fix.

I am very open to learning what you mean in the first part of your comments.  It was almost Greek to me.  I have a CSS Visual Quickstart coming which I'm hoping will give me a more basic understanding, but feel free to expound.  Your earlier help regarding strict/quirks, etc. was educational.

Thanks for taking the time.  Did you want to comment on how I should fix the differences between where the maintext positions itself in IE and FF? 

[vandal]

Glad you are eager to learn. Here are some great resources to start you off:

Online Help/Document Sites

http://friendlybit.com/css/beginners-gu ... standards/ ).

[colorado2rein]

You ROCK!!!