Solved

Background repeat-y issue with not repeating till end

Posted on 2009-04-15
16
499 Views
Last Modified: 2013-11-19
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
Comment
Question by:no158
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 7
16 Comments
 
LVL 13

Expert Comment

by:myderrick
ID: 24150122
Try it without the 100%

MD
0
 

Author Comment

by:no158
ID: 24150143
I tried it without aswell...same result
0
 
LVL 13

Expert Comment

by:myderrick
ID: 24150216
How about a margin-left of say 5px?

MD
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 13

Expert Comment

by:myderrick
ID: 24150238
Sorry: Margin-right

MD
0
 

Author Comment

by:no158
ID: 24150309
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
 
LVL 13

Expert Comment

by:myderrick
ID: 24150407
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
 

Author Comment

by:no158
ID: 24150610
The overflow:auto had no affect.

css-problem3.JPG
0
 
LVL 13

Expert Comment

by:myderrick
ID: 24150759
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
 

Author Comment

by:no158
ID: 24150883
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
 

Author Comment

by:no158
ID: 24150930
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
 
LVL 13

Accepted Solution

by:
myderrick earned 500 total points
ID: 24151212
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
 

Author Comment

by:no158
ID: 24151426
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
 

Author Comment

by:no158
ID: 24151465
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
 
LVL 13

Expert Comment

by:myderrick
ID: 24151660
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
 

Author Comment

by:no158
ID: 24151741
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
 

Author Comment

by:no158
ID: 24185432
I guess no one else can think of anything.

Thanks for the help myderrick.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question