Background image only being displayed once - css

I have a strange problem that I can't get my head around:
I have a header div and I would like to display a background image to be repeated horizontally:
The HTML:
<div id="headerwrapper">
<div id="header">
<p>This is an extremely interesting test. This is an extremely interesting test. This is an extremely interesting test.</p>
</div>
</div>
Here is the CSS:
* {
margin:0;
padding:0;
}
#headerwrapper {
margin:0 auto;
width:630px;
}
#header {
width:630px;
background-image:url(../images/headermiddleback.jpg);
background-repeat:repeat-x;
}
When I look at it in the browser, I can see only 1 instance of the background-image being displayed above the text. But it is not repeating.
Any idea what I am doing wrong here?

You might want to use repeat-y instead of repeat-x
#header {
width:630px;
background-image:url(http://dl.dropbox.com/u/4457768/css/headermiddleback.jpg);
background-repeat:repeat-y;
}

Here is your example on jsFiddle, seems to be working.
http://jsfiddle.net/MgvLT/1/
Perhaps you have some other CSS that's getting into the way or maybe your background image has lots of empty space. Please post your example on jsFiddle.

Perhaps you need to clear your browsers cache?
For example, here's a SO Post showing how to do it for Chrome.

Related

Why does Firefox display my page differently?

I'm totally clueless to describe my problem clearly enough so I tried to make a jsfiddle as simple as possible here: http://jsfiddle.net/Emf2f/. On Chrome+IE, my image is under #div3, while on Firefox, is next to #div3. Why does this happen? which result is more "standard"?
<div id="div1">
<div id="div2">
<div id="div3"> Text </div>
</div>
<img src="http://img805.imageshack.us/img805/758/txgo.jpg" />
</div>
#div1{
width:500px;
overflow:auto;
border:1px solid red;
}
#div2{
margin-bottom:-1px;
}
#div3{
background:cyan;
float:left;
width:200px;
height:100px;
}
I would use "clear" around the object that you do not want the image to appear inline with. You can read more about positioning here: http://w3schools.com/css/css_float.asp
The site has the exact example you are trying to accomplish.
I added your image into a div tag (div4) then placed the clear:both in the css file for that div and it works properly in Chrome, IE and FF.
div4{Clear:both;}
Let me know if this helps. Thanks.
From a content perspective they are all doing the same thing showing the img inline (as per the HTML spec), what differs is the default overflow behavior. In Chrome and IE they are wrapping as per text (this is actually what I would imagine the correct behavior is) whereas Firefox is not. If you want the image to always display below, mark it as display:block;

CSS Height Issue With Floating Bar 100%

So, quickly typing this, so sorry if it's kinda vague/confusing.
So, I have a bar I am using css on the bottom of the screen, and I have a divider above it. I try to use height 100% on the divider to get the height to go all the way to the bottom, but it goes under the bar, and I want it not under the bar. How would you guys suggest I do this? I would prefer a css method, but javascript would be fine too.
If you have any padding on that divide, it will be added to the 100%. Thats probably your question.
Something like this maybe:
<style>
.one {
height:100%;
display:block;
}
.two {
padding: 20px;
}
</style>
<div class="one">
<div class="two">
</div>
</div>

Centering in <div> Using AlloyUI

I'm having some trouble getting a few buttons and images to center in a div. Please see the below image:
Now as you can see, the buttons and images etc are not getting centered (might be worth mentioning that these things are inside a form tag). Then ofcourse I have some test text that does get centered..
My HTML has the following structure:
<div class="navigationButtons">
<form>
</form>
<p>Some tect that gets centered...</p>
</div>
And my CSS:
.navigationButtons{
text-align: center;
}
Any idea why this would happen?
I am not able to test it on your code but this should work.
.navigationButtons {
width:auto;
margin:0 auto;
text-align:center;
}
or you could just align the form
.navigationButtons form {
width:auto;
margin:0 auto;
}
It works for me. See this example.
Make sure no other CSS rules override the ones you have. Also, please post here all of the HTML code as it might be significant.

Alternative to overflow-y in CSS?

I'm creating a calendar and need to replicate the behaviour I would get with
overflow-x:visible;
overflow-y:hidden;
for browsers that don't support these css attributes. Is there some kind of workaround I can do? I don't just want to compromise and add in overflow:hidden for those browsers, since the client really wants this feature. Does anyone have any good ideas?
Many thanks.
Here is someone who asks roughly the same question (overflow-x visible and -y hidden).
http://forums.devnetwork.net/viewtopic.php?f=68&t=116457
Someone named Weirdan says I'd say there's isn't any expected behavior because such style is unavoidably internally inconsistent, and shows an example where it is not clear (says Weirdan) whether the area to the southeast should be hidden or shown.
S/he also says that the effect you want is easily achieved by wrapping the outer div with another div and setting overflow-y on that div to hidden, and shows this example (I hope it's OK that I copy it to here?).
<style type="text/css">
#outer-wrapper {
overflow-y:hidden;
}
#outer {
width:100px;
height:100px;
background:red;
border:solid red 1px;
overflow:visible;
}
#inner {
width:200px;
height:200px;
background:green;
}​
</style>
<div id="outer-wrapper">
<div id="outer">
<div id="inner"></div>
</div>
</div>

boxes adding up to 100% of the browser

I want to have 2 boxes right next to each other, one with a fixed width, and another with a width that will change based on the size of the browser. The box has overflow:auto, and I'm trying to get the first box to act as a side bar that will follow you down the page. But of course I can't seem to achieve this, and have come here hoping someone could give me some examples, or point me in the right direction.
Thanks!
To achieve the layout you asked try something along these lines:
HTML:
<div>
<div id="col1">Left Navigation Menu</div>
<div id="col2">Right Content</div>
</div>
CSS:
#col1
{
position:fixed;
width:400px;
}
#col2
{
position:absolute;
left:400px;
}
Will I was trying to think of a good way to do this in CSS, I was channeling my google-fu and found...
http://plugins.jquery.com/project/jStickyScroll
"This plug-in allows you to keep a div element at the top of the browser window when scrolling down a page. The most common use is to keep a sidebar navigation menu from disappearing when scrolling to the bottom of a web page."
You could maybe try...
#element{
position:fixed;
}
Although this doesn't work without hacks in IE6, see
http://www.howtocreate.co.uk/fixedPosition.html
Give this a go (I hope this is what you are after?):
See a live demo here: http://jsfiddle.net/VcecU/
HTML
<div class="main_container">
<div class="content_a">1</div>
<div class="content_lotsoftext">Start. Lots of text goes here! Finish. </div>
</div>
CSS
.main_container{
background-color:#ccc;
overflow:auto;
zoom:1;
}
.content_a{
width:60px;
float:left;
background-color:#3FF;
}
.content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 0 0 60px; /* -- Need conditional for IE6 and 7 to remove the margin to get it to work in those browsers --*/
/*-- The following classes help it to sit better in IE6 and 7 --*/
clear:left;
display:inline;
}
Please note, you will need a IE6&7 conditional to remove the margin, clear and display classes from .content_lotsoftext

Resources