I am developing a system builder for the company that I work for.

I have got the entire layout working in both firefox and IE, but the left column is messing up.

the draft that I am working on can be found here...

http://ingramswaterandair.com/waterp...ification.html

You can see what I am talking about when you view the page in IE and in Firefox. The left column looks how it is suppose to in IE but when it is opened in firefox it completely messes up.

The 2 problems that are occurring in firefox are:

1) the background image of div testimonials is not showing in firefox, where it is in IE (colbg.gif)

2) the positioning of the logos are off in firefox...

Can someone please tell me what I'm doing wrong? I don't have much CSS experience and I'm starting to think that this would be easier to just do it all in a table

Here is the styling for the 2 divs that I used in the testimonials box

div.testimonials {
    margin: 0px;
    background-image: url(images/colbg.gif);
    background-repeat: repeat-y;
    width: 203px;
    height: 41px;
}

div.testimonials-text {
    margin-left:10px;
    position:relative;
    margin-right:10px;
    text-align:left;
    background-repeat: repeat-y;
    margin-top: 10px;
}

Brandon

FF will be doing exactly what your code tells it to do, it is IE that will have it wrong.


and absolute positioning is your problem. get rid of it completely.

I don't understand why ie would be showing the backdround image colbg.gif and firefox isn't.

The logos are inside of a layer. I'm not sure if a layer and div are the same thing. I will make another div for the logos but oi need to get the bg img fixed

UPDATE: I have fixed the absolute positioning error that I was making, however I cannot figure out how to make the background image of the div work on both ff and ie

CSS backgrounds

Chris's point was that you really don't want to use all that absolute positioning, there's simply no REASON for it. Learn to use the normal document flow and floats and you'll avoid a lot of headaches.

Unfortunately, using positioning all over the place is a common newbie mistake - and also that of people using Dreamweaver to create their code - or in your case ImageReady :shock:

You also MUST have a proper DOCTYPE on your pages, otherwise your results could be dodgy.

I'm starting to understand a little more about the positioning, although it will probably take me a while to understand. I get confused because I "think" I have read that an absolute positioned div acts relative to it's parent border, which makes me think that absolute and relative are the same thing...

I also figured out what was wrong with the background...

This was my original code.

div.testimonials {
    margin: 0px;
    background-image: url(images/colbg.gif);
    background-repeat: repeat;
    width: 203px;
    height: 41px;
}

When I was posting this reply I realized "wait why is the height set as 41, so i removed the height property and it works now.

positioning and the understanding of it (not just knowing it) is possibly the most difficult (and crucial) concept of CSS to grasp.

absolute does seem odd at first because it is also relative to it's first parent that is positioned other than static (static being the default in no position:setting is specified.)

read the W3Schools explanation and try it out on some test pages to get the feel of how it works.

You might want to try this tutorial on positioning:
http://www.barelyfitz.com/screencast...s/positioning/