I'm having an issue with a background image with repeat-x property :S
On Windows OS, it seems working fine but not on Mac.
When I open the web, I see bunch of white space chopped off on the right side
and it corrects itself when resizing the size of the window :O
I think my method to set its width has a problem but cannot figure out exactly why.
http://www.sangminkim.com/sample/index.html
This is the url for the page.
Thanks in advance.
Issue: Background image doesn't display when starting from a small view and scrolling to the right.
This issue cannot be solved. If you inspect the HTML and BODY elements, the background stops where the elements stop. The HTML and BODY elements cannot be larger than the view port. This is a common issue and cannot be corrected (it even happens on the footer of StackOverflow).
Related
This is my first attempt to make a webpage but something seems to go wrong with the mobile version of my page. On desktop everything is ok but on mobile, the right part of my header's background img is covered by the main background image.It is a little difficult to describe it so I 'm sending you the link for your better understanding http://rockittest.blogspot.gr/.
I tried to resize the images, to change position, I've read all relevant threads but I couldn't fix it. Do you have any ideas about what can be wrong?
Thank you in advance!
I'm going nuts on this, I can't figure out what causes the margins of the right sidebar gallery images to be rendered differently on opera browser. More specifically the bottom margin of the images seems to be doubled in every other common browser, its set to 2px and only opera displays it as 2 px.
This is the url - http://www.roxopolis.de/media See screenshots here.
Please help me out with this, I don't care too much about the fact that its displayed differently but it exposes a bit of the following gallery images which are supposed to remain hidden so thats what bothers me. If there is another way to hide the following images (which are placed by widget) that'd be fine too. Maybe setting the margin conditionally for opera?
I've had a quick look at the page in Dragonfly as well as Chrome's inspector for comparison and no particular style, including inherited ones, strikes me as "causing" this issue. Maybe someone else can find something, but at a glance, I'd say Opera seems to be "doing the right thing".
You might have more control over the spacing if you put each anchor tag along with its respective image inside its own container and tried to style those (e.g. a div containing the anchor containing the image for each item, and float them left within the parent container div).
Is there a particular reason you have more images than you want to display? I don't see any controls to scroll the images on that page, so I'm not sure why you need to have more than the six images you're showing already. Surely if you have code somewhere that randomises the order, you can change it so that it only displays the first six images.
Also, have you tried breaking the problem down to a smaller use case that can be tested/tweaked in a jsfiddle? That may help to get to the bottom of your issue if you can't solve it using the above suggestion.
I'm having a hard time trying to figure this out. For example, if you re-size this website's (http://www.noxinnovations.com/) window size until you see the horizontal scroll-bar and then scroll to the right, you'll see that the header's dotted line disappears as well as the color. But sites like facebook or twitter don't have this problem. I was wondering how they do it?
If you take a look their Html and Body elements do not fill the whole page. (The Firebug extension for Firefox makes this evident.) That isn't normal. What happens though is the element which contains the bar's background ends up being constrained by the body element's size. It is probably just the product of bad design on their part. You shouldn't have that issue if you create a site yourself.
It seems like repeat-x for background property is not working on iphone safari browser.
Is there an alternative solution to this issue?
Don't use repeat-x or repeat-y but just repeat.
Works, tested.
I'm thinking this might be the problem with your page...
Incorrect width on iPad Note that even though the guy never accepted.. My way of doing it at least solved that problem..
On ipad like half of his page bg and header and footer went missing. This is really quick fix ( if you have the same problem ), basically you just set the same background ( the one that gets cut off ) again in inner elements that have a static width. Static width is the key word here, because window width doesn't cut those off.
Also as stated in that answer, in desktop browsers if window width is smaller than page width and you scroll to the right it will cut the bg. That is very common thing to see actually.. your page does the same.
Im fairly certain this will solve your ipad issue.
I'm having some trouble with the CSS in my site, both with image sprites and IE compatibility.
Here is a jsfiddle: http://jsfiddle.net/lipestyle/EjQTP/7/
The two main problems are:
In IE, the contact links at the bottom are not appearing in the blue bar, but way down and to the right of the rest of the site.
The image sprites for MMA Cage Door and FightNight Nutrition are not working. It appears that the hover image is on constant display, as the non-hovered image is supposed to be much lighter than what we are looking at.
On a side note - For some reason the background image repeating isn't working in the jsfiddle, but I haven't noticed a problem with it outside of that.
Any advice that you all can offer would be greatly appreciated.
Thank you.
EDIT
One other thing I am noticing with the sprites. It appears when I hover over an image the first image doesn't disappear, it still remains while the hover image appears on top of it. Is that how it is supposed to work? Because my images are semi-transparent, this is something I would like to avoid if possible.
Here is a link to the site in action: http://bit.ly/h1OXQA
Could be a width, margin-left, or even position relative/absolute giving problems here. I have not checked in depth through all css code to see the cause. A fast/dirty fix, obviously loading alternative css or html for IE7, is that setting (in IE7) the UL #social with top:190px and left:100px , it seems to fit ok (or fine tune to the preferred position) .I'd go from here to guess what is causing to act differently.
Seems you already fixed, images seen light when not hovered, darker when hovered. All in IE7.