Jump to content

repeat-x problem


Melkor111
 Share

Recommended Posts

Hello everyone! Another newbie and a leecher here is trying to disturb you and get your attention!I'm having a headache concerning a repeat-x thing. Suppose I want to make a gradient panel (100% width, a 1px-wide sample grad image is repeated) on top of the page and then add images (buttons) over it. Everything works fine, there's 100% width and it changes perfectly when I'm trying to resize the IE's window, BUT!!! When I diminish the width of the browsers' window so that the buttons area is larger than the total width, there's a horizontal scrollbar appearing (of course) and WHEN I TRY TO SCROLL - there are horrible holes appearing where my gradient should be.The code I use is in external .css file and it looks like this:

#infinite1    {	position: relative;	float: top;	width: 100%;	height: 26px;	background: url(infinite1.jpg) repeat-x;	margin: 0;	z-index: -1;	}

I also tried position: absolute; but got the same thing...Please, please, please! Could ye give me a hint how to solve it.Thanx in advance

Link to comment
Share on other sites

I'm not sure I understand, but do you want a min-width that the browser window can go before it starts to Horz. scroll?That (could) help if it is causing your page to break up.I had an element that if the window size was too small, it would shift, by putting a min-width: 800px in there, it kept everything from shifting once the window size was below 800, and the horz. scroll bar came up.FF will know min-widthIE: http://www.cssplay.co.uk/boxes/width.htmlHope this helps. I am a rookie though, so I could be way off. :)

Link to comment
Share on other sites

:) I'll try to explain in a different way (sorry, English is not my native language, so...). Imagine that you have two horizontal sections on your page, the first is an image 800px wide, the second is 100% wide, filled with sample images (1px wide) using repeat-x method in CSS. Now if we try to reduce the width of the browser's window, let's say down to 700px, there will be a horizontal scrollbar appearing because the section with image is wider than that. AND NOW we try scrolling: MY GOSH - the 100% wide section is damaged! There is a hole appearing!!Perhaps, some of you have already faced this problem, is there any method?I'll try giving you a link to the page itself soon.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...