Sprite wrecked my css Options

[JimiB]

used spriteme to speed up loading time.
performed recommended changes to css.

Suddenly no bg images were showing.
Just trying to revert the css back to where it was (no backup copy) but not working for me.

Menu arrow is no longer a single arrow and it now covers menu button in this code

CODE

#menu ul li a:hover {
    height: 42px;
    width: auto;
    text-decoration: none;
    color: #fff;
    padding: 0 0 0 25px;
    background-image: url(images/menu_arrow.gif );
    background-position: -10px 0
}
#menu ul li a.current {
    height: 42px;
    width: auto;
    float: left;
    text-decoration: none;
    color: #fff;
    padding: 0 0 0 25px;
    background-image: url(images/menu_arrow.gif);
    background-position: -10px 0
}

[pandy]

It would be easier if we could see the actual page with HTML and images. But if you mean the background repeats and you don't want that, use no-repeat.

http://htmlhelp.com/reference/css/color-ba...und-repeat.html

[JimiB]

It would be easier if we could see the actual page with HTML and images. But if you mean the background repeats and you don't want that, use no-repeat.

http://htmlhelp.com/reference/css/color-ba...und-repeat.html

when i use

CODE

#menu ul li a:hover {
    height: 42px;
    width: auto;
    text-decoration: none;
    color: #fff;
    padding: 0 0 0 25px;
    background-image: url(images/menu_arrow.gif )no-repeat;
    background-position: -10px 0
}

The menu arrow no longer appears

Without the no repeat it appears as not a single arrow but the att.

[Frederiek]

As Pandy said, can you post the url of your page, so we can see all we need to help you?

Or, if you can't, post the related HTML and the sprite image you use.

This post has been edited by Frederiek: Feb 22 2015, 09:15 AM

[Christian J]

CODE

background-image: url(images/menu_arrow.gif ) no-repeat;

The above is incorrect, you must either use the "background" shorthand property:

CODE

background: url(images/menu_arrow.gif ) no-repeat;

or use separate properties for "background-image" and "background-repeat":

CODE

background-image: url(images/menu_arrow.gif);
background-repeat: no-repeat;

See also http://www.w3.org/TR/CSS21/colors.html#background

[Frederiek]

Oops, hadn't seen that before.

[JimiB]

ok i have restored the vast majority of my css file

Just 1 or 2 bits missing.

My footer logo is at the top of a sprite image named result.png but not appearing on page
CSS

CODE

}
.footer_logo {
   width:145px;
   height:25px;
   background-image:url(result.png);
   background-position: 0px 0px;
}

HTML

CODE

<div id="footer">
<div class="footer_logo"></div>
<div class="footer_links"><span itemprop="name">

[Frederiek]

See http://wellstyled.com/css-nopreload-rollovers.html, although it's for rollovers. The same syntax applies.

But, if the image doesn't load, maybe the path to it is incorrect.

Post the url and we can have a look ourselves.
Even just a test page with the footer, that has the related CSS and image.

[JimiB]

Ok i have found the culprit but dont know how this is happening.

(Have already been asked for url, but been reluctant in case of illegal advertising!)
The url is http://www.jimbreslin.ie

i have afaik entered my code correctly into css and html files (open to correction on that!)

Reloaded everything in cpanel, cleared my cookies and cache.

BUT, my site is reading a minitized css from some time back instead of my updated one, which is the only one visible in my file manager when opened with hidden files enabled

[Darin McGrew]

I'm not sure which version of the CSS I'm seeing, but you've floated the content of div#text_content which takes it out of the normal flow of div#green_box

If the content extends beyond the height you've specified (265px) for div#green_box then you end up with grey-on-white text, which is hard to read.

[JimiB]

I'm not sure which version of the CSS I'm seeing, but you've floated the content of div#text_content which takes it out of the normal flow of div#green_box

If the content extends beyond the height you've specified (265px) for div#green_box then you end up with grey-on-white text, which is hard to read.

I have managed to replace the cached version of CSS with a version i am restoring, but i believe you are talking about the footer rather than the green box.

[Darin McGrew]

I'm not sure which version of the CSS I'm seeing, but you've floated the content of div#text_content which takes it out of the normal flow of div#green_box

If the content extends beyond the height you've specified (265px) for div#green_box then you end up with grey-on-white text, which is hard to read.

I have managed to replace the cached version of CSS with a version i am restoring, but i believe you are talking about the footer rather than the green box.

No, I'm referring to the green box:

[JimiB]

what browser are you using?
In firefox it looks like this

[Frederiek]

I see the yellow circle with white arrow twice on the right of the green box, before and after the texts. But I don't believe you used the sprite image for that.

I see nothing wrong with the use of the sprite image.
I only see it is used on the read more links (Our Laser Page) but the image is on top of the link, as there is no space for it. Set a margin-left: 35px; (adapt the value to your liking) to .read_more_link a (line 160 of the CSS).

[JimiB]

I see the yellow circle with white arrow twice on the right of the green box, before and after the texts. But I don't believe you used the sprite image for that.

I see nothing wrong with the use of the sprite image.
I only see it is used on the read more links (Our Laser Page) but the image is on top of the link, as there is no space for it. Set a margin-left: 35px; (adapt the value to your liking) to .read_more_link a (line 160 of the CSS).

Yes, the "orange bullet" does appear both sides of the text on the "right nav" image and its only meant to be on left of the text.
I had none there at all until i disabled the sprite for right nav, when using the sprite the right nav gif was not appearing unless i hovered over them.

Thanks for the help correcting the orange bullet. I have disabled all sprites except that one until i get the css and html files back working properly.
Altogether i intend using only 7 sprites when i have them operating as they should...
footer_logo, left_content_bg, left_nav_arrow, menu_arrow, orange_bullet, phone_icon & right_nav.

[Darin McGrew]

what browser are you using?

Firefox.

[Frederiek]

The orange bullet now does only show on the left of the text in #right_nav, but upon hover, the links get larger and bullets show on both sides.

That's caused by
- the width you set on #right_nav ul li a and #right_nav ul li a:hover
- the lack of a background-repeat: no-repeat; on #right_nav ul li a:hover

In fact, all you need on #right_nav ul li a:hover is the background, background-repeat and background-position.

When using a sprite image, you don't need 7 of those. One is enough, and that saves http requests.
See https://css-tricks.com/css-sprites/ or search for "css sprites".

[JimiB]

what browser are you using?

Firefox.

Apologies Darin, it wasn't a browser issue it was a text size one.

The orange bullet now does only show on the left of the text in #right_nav, but upon hover, the links get larger and bullets show on both sides.

When using a sprite image, you don't need 7 of those. One is enough, and that saves http requests.
See https://css-tricks.com/css-sprites/ or search for "css sprites".

Thank you Frederiek! dont know how i missed that one.

Very interesting piece there on sprites, but i think i am better off attempting using them offline instead of ruining the online website again.
I believe i have the online version almost 100% again, i know there is an issue with the "right_content" where the text is now appearing below the image instead of beside it. It does not appear to bad looking on home page but appears like a battleground on services page

[Frederiek]

I didn't have internet for more than a day, due to a faulty adapter. But I don't understand what you mean by the text of the right-content showing below the image. What image?

And I don't see anything wrong on the services page. Only, that the news icon is hardly visible on that background.

For the rest, you have 5 HTML errors and 2 CSS errors. In fact, the CSS errors are about the lack of semi-colons, but other lines miss that too. It's good practice to always close each property: value by a semi-colon.

[JimiB]

I didn't have internet for more than a day, due to a faulty adapter. But I don't understand what you mean by the text of the right-content showing below the image. What image?

And I don't see anything wrong on the services page. Only, that the news icon is hardly visible on that background.

For the rest, you have 5 HTML errors and 2 CSS errors. In fact, the CSS errors are about the lack of semi-colons, but other lines miss that too. It's good practice to always close each property: value by a semi-colon.

I sorted out the problem with the text under the package icon by studying the post 2 text columns beside img.
The services page now looks as it was meant to, and yes i probably do need to find a more suitable news icon!

The second missing semicolon (footer logo) was a mistake alright, but the first missing one (line 266 wasn't!)
It is something i am struggling with because when it is inserted my page goes like in the attached image.


This post has been edited by JimiB: Mar 2 2015, 10:54 AM