The website for people who want to see it live:
Click here
Bug picture is here: Bug Picture (JPG)
Basically, I made a table. The first 3 rows in top contains a background image and set a height to 90. Other rows are set to 50 height and contains no background image.
However, although I applied background image to TR, Chrome keeps applying background image on each TD. See the picture, you'll understand.
I've tried several things like moving image to different class or give it additional attributes like no-repeat.
What may be causing and how can I solve it?
Are you sure you haven't written the same background-image style for all class in the CSS?
Try creating an individual class for the first of the every file and it should work alright.
In addition, as an alternative you can try setting the image as and putting it background with the position:absolute and then changing z-index although I wouldn't recommend that one.
PD: I wasn't able to check that background-color code on the Website because it wasn't there. (table was different from the one in the picture I mean).
Related
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 want to render a div backward, and then render the table cells inside it forward. I prepared a demo here: http://jsfiddle.net/djsvL/3/ which works in my browser (chrome).
However, it doesn't work in IE 8. From what I've seen so far, I can flip the text or image within a div or cell, but I can't seem to flip the entire layout (for instance, notice how the table cells are reversed).
Is a trick like this possible using IE8's filter:fliph ? If so, what am I doing wrong or how can I do this?
Edit: Here is a screenshot of what I see in IE8: http://tinypic.com/r/2e4yw3p/6
The answer was to set a background color.
IE does not handle transparency well, it uses black instead of transparent, and the box technically has a transparent background.
I've looked everywhere and can't find an answer for this, I think possibly because nobody has had the same problem, or possibly because it's a very specific problem.
The problem I'm having is, that linked images on the site I'm working on, have a small border underneath when hovered over, this is in all browsers (apart from IE 7, which the site was designed originally in). This is due to setting a:hover as having a background. Despite setting no borders, margins and padding to images, it's still not happy for some reason.
I only have 2 ways to solve it, set a class with no background on certain a tags, or display the linked image as a block. Unfortunately both these solutions aren't suitable, because the site has hundreds of pages, and possibly thousands of linked images, using a class means finding them all! Using display block will break some of the displays of images, such as the when they're centered nicely in a p tag.
If you want an example of it not working for me, the homepage of the site in question is http://www.tameside.gov.uk, look at the social media icons in the top right, they're all getting the background hover treatment.
If anyone could help I'd be really grateful.
Thanks,
The image icons are PNG and have a transparent background. That is why you can see the background.
You can change the icons to have white background (same them as JPEG) and you will no longer see the background.
A faster fix would be to add a new CSS rule that apply only to the a tags inside the social media div:
.banner_container .social a {
background: none !important;
}
I am seeking help with trying to fix my background image fill issue. I wanted to have a sticky footer, which I finally figured out, but now if I view my site in a smaller window and then scroll down, my background image disappears. I understand that this is due to my height settings being 100% which makes my image be based off of the initial viewport size, but I can't quite seem to implement any kind of fix.
Here is the site I am working on (still very much under development): http://student.plattsburgh.edu/stipl001/index.html.
The problem is best viewed when looking at this page in a small window: http://student.plattsburgh.edu/stipl001/resume.html.
I have read many, many posts on various sites trying to figure it out (including this one: CSS: background image does not fill when scrolling), but I am not having any luck. I tried setting all the different properties for background in css that I could think of, including some of the newer ones. Then I experimented with the overflow property, but it just hides all of my text or creates a weird scroll-bar that makes my text scroll up over the header. I also tried moving my page background from body to html and my container background from container to body, but it didn't change anything, so I must be doing something wrong (perhaps the fact that I have the two background images to deal with?).
I'm just a coding newbie and have been teaching myself as I go along, so I would really appreciate specific suggestions on what method of fixing this would be best for my site, and how I can go about implementing it. After spending about 10 hours straight on this one problem, I am at my wits' end.
Thank you so much!
just change min-height:100% to min-height:1092px (the height of the image) and you'll be fine...
EDIT:
previous answer was a bit too quick, after having a second look on the code i noticed the error is caused by the floated columns: if you float an element, the container element will not inherit the height of the floated element - that's why the height was set to 100% of the initial window, and was not expanded if the content column got longer.
This can be fixed by adding an extra element in #container, after #rightcolumn, with clear:both on it - this will force the parent element to take over the height of its contents.
See http://jsfiddle.net/uS7Ba/1/ for a simplified example, including improved fixed footer.
Hope it helps...
my question is a bit tricky and I'm not really sure if it is possible, but I think I have a memory of doing it before or seeing it somewhere.
So, I am making a horisontal menu. I have a div block of size 980x36px. It has a background image:
Inside I have links text) which I made block elements (display: block;) and floated left. So now it would look more like this:
Now I want all active links and all links that are mouse-overed to have a different background, like this:
The problem here is that my background image (on hover) is again 980x36 px and is different in the different horisontal positions just like the first background, blue on the left and red on the right:
So, now when I hover on a link I must set the background position some negative horisontal value, for example for the third link I should set something like background-position: -233px 0px; so the colors of the two backgrounds would fit.
My question is how can this be acomplished automaticaly? Here is the tricky part: I don't know the width of all links since they are text and should support multi-language (so they obviously cannot be pre-made images). I don't want to use PNG (I could easily make a semi-transparent 'glass' which would overlay with the first background and create the same effect) - because of.. guess who, yes IE6. And finally I want this to be done with a nice, clean and widely supported technique, so JavaScript is out of the question (I know it's easy, I can make it, I just don't want to use it).
The thing that is familiar in this situation is the background-attachment: fixed; method. In this case it would be great if I could fix the position of the background of each link to the position of the container div. That would be perfect! Just what I need! Each link will be on it's place, but the background would render as if it was on the container div! Well, that's the problem, if anyone knows a good solution.. If not I should consider the less pain, which in my opinion, currently is to try the PNG way with some IE fixer maybe?
You should just use a .png as you described in your question.
To fix IE6, you should use one of the many available JavaScript-based .png fixes, such as:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
It's just not worth crippling yourself by pandering to the minuscule percentage of users that are using IE6 and have JavaScript disabled.
(yes, I realise the question is old, and you've probably already created your menu)
The quickest solution that comes to my mind is using jQuery to position the background accordingly (you can check each element's position and just change its CSS background position).