• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 518
  • Last Modified:

Background repeat-y issue with not repeating till end

So I'm trying a new look for a site. The layout has rounded corners and there are drop shadows. As you may suspect there are a number of pictures involved that need to be placed in the right spots to achive this affect. I can make the box with a fixed height for the line on the right hand side but when I add some content in the middle area things get all funky and the line on the right hand side disappears. If I leave the content out everything looks fine, although the fixed height has to be in place, which is not what I'm going for. I've tried doing height:100% and I've tried adding repeat-y 100% but no luck.

I added two pictures to give you an idea of what I'm talking about.

My goal is to have the right line span to the bottom picture and get bigger as content fills in the middle area.
<img alt="" src="/img/body/Form/form-top.gif" style="padding-left:15px;" />
                <div style="width:903px; padding-left:15px;">
                    <div style="width:7px; float:right; background: transparent url('/img/body/Form/form-right.gif') repeat-y 100%;"></div>
                    
                    <div style="text-align:center;">
                    <a href=""><img alt="Privacy Policy" src="/img/body/Form/privacy-policy.gif" style="float:right;" /></a>
                    <a href=""><img alt="Request a Quote" src="/img/body/Form/request-a-quote-button.gif" /></a>
                    </div>
                    
                    <img alt="" src="/img/body/Form/form-bottom.gif" />
                </div>

Open in new window

css-problem.JPG
css-problem-solution.JPG
0
no158
Asked:
no158
  • 9
  • 7
1 Solution
 
myderrickCommented:
Try it without the 100%

MD
0
 
no158Author Commented:
I tried it without aswell...same result
0
 
myderrickCommented:
How about a margin-left of say 5px?

MD
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
myderrickCommented:
Sorry: Margin-right

MD
0
 
no158Author Commented:
I tried adding he margin to see if the picture was overlapping the line. This is not the case, in addition I removed the picture and just left the button...same result.
css-problem2.JPG
0
 
myderrickCommented:
Wow...

OK Try adding overflow:auto to the parent div. I am finding it difficult figuring out what exactly the problem may be.

Try the code below.

MD
<img alt="" src="/img/body/Form/form-top.gif" style="padding-left:15px;" />
                <div style="width:903px; padding-left:15px;overflow:auto">
                    <div style="width:7px; float:right; background:url('/img/body/Form/form-right.gif') repeat-y;"></div>
                    
                    <div style="text-align:center;">
                    <a href=""><img alt="Privacy Policy" src="/img/body/Form/privacy-policy.gif" style="float:right;" /></a>
                    <a href=""><img alt="Request a Quote" src="/img/body/Form/request-a-quote-button.gif" /></a>
                    </div>
                    
                    <img alt="" src="/img/body/Form/form-bottom.gif" />
                </div>

Open in new window

0
 
no158Author Commented:
The overflow:auto had no affect.

css-problem3.JPG
0
 
myderrickCommented:
How about we try a technique to see what is causing the trouble.

1. We first comment out (or take out - backup the file) the request a quote div

Any change? - If it fixes it then that is the problem we may need to restrict the div. If note....

2. We take away the next div (privacy ...) Any change? If no change

3. Add position: relative to <div style="text-align:center;">

else;;;;

Then provide feedback as to what you observed. Thsi will help you figure out what is causing the trouble.

MD
0
 
no158Author Commented:
Well I isolated the problem. Leaving out the height did something but I'm not sure, it's loading a picture so unless I set the height it should auto size to the picture but thats not the case here. In this case the picture get pushed till it's not visible anymore. So if you look at the picture I can get what I want with a fixed height. What I would like to happen is have that line auto size so if content is added it will fill in the gaps.

Any suggestions?
                <img alt="" src="/img/body/Form/form-top.gif" style="padding-left:15px;" />
                <div style="width:903px; padding-left:15px;">
                    <div style="height:50px; width:7px; float:right; background: transparent url('/img/body/Form/form-right.gif') top right repeat-y;"></div>                  
                    <div style="text-align:center;">
                    <a href=""><img alt="Privacy Policy" src="/img/body/Form/privacy-policy.gif" style="float:right;" /></a>
                    <a href=""><img alt="Request a Quote" src="/img/body/Form/request-a-quote-button.gif" /></a>
                    </div>
                                        
                    <img alt="" src="/img/body/Form/form-bottom.gif" />

Open in new window

Fixed-height.JPG
0
 
no158Author Commented:
As you can see the div height is set to 50px

<div style="height:50px; width:7px; float:right; background: transparent url('/img/body/Form/form-right.gif') top right repeat-y;"></div>

If the content becomes larger then 50px the line will disappear again. So the problem now is not having the line appear but having the line span dynamically as content is added.
0
 
myderrickCommented:
Ok...let see:


First Option:
Add height:100% to the body css
Add height:100% to the div instead of a fixed height.
Also add overflow: hidden.
Use margins to push the contents appropriately.

Second Option:
So say after that try:
background:color image repeat attachment position;

sample:
background: #FFF url("foo.jpg") repeat-y center top;

Third Option:
make the parent div position: relative and add z-index: 1000;

Any luck

MD
0
 
no158Author Commented:
Tried them all. Once the height was removed the picture just does not show.

There was no change at all for any of the options. Everything looked the same.
0
 
no158Author Commented:
Also, I didn't clarify what I meant by removed height. I was referring to removing the height in the child DIV, I also tried setting it to 100%. I did the same for the parent DIV, I tried all combinations. Example parent 100% child nothing, parent 100% child 100%, etc...
0
 
myderrickCommented:
Wow....I am not sure what else to advice. I have these in mind and I am not sure if it will change anything:

height: 1% or Height: auto.

Maybe other experts can help.....Sorry we still have the problem pending.

Good Luck

MD
0
 
no158Author Commented:
You gave some good advice, to bad we didn't find an easy solution to this problem.

Maybe someone has some sample code of this type of design, that is working and we can compare.
0
 
no158Author Commented:
I guess no one else can think of anything.

Thanks for the help myderrick.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now