Solved

Background repeat-y issue with not repeating till end

Posted on 2009-04-15
16
495 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
  • 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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to count occurrences of each item in an array.

758 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now