My link is here:
Example Page
I'm using list-style-image: to give my horizontal lists ( very top and bottom ) seperators. I have a class of .first to remove the image from the first li in each list.
Lo and behold in IE6, it doesn't work. What happens is that the bullet images are not being displayed, and also the bottom few pixels of the text appears to be cropped.
Screenshot
I've fixed a few 'haslayout' bugs with this page, but I have a feeling its something to do with my rule hierarchy, although no amount of hacking about seems to work for me.
Can someone shed some light on this perhaps? Thanks.
Also, my colour change works on hover, but not the underline, in the same selector?
EDIT OK, I have used the background image technique that yoavf suggests, which seems to do the trick, but the cropping issue still remains. Looks like a separate issue then...
heres my revised CSS
#site-navigation li {
background-image:url(../img/site-nav-seperator.gif);
background-position:0 4px;
background-repeat:no-repeat;
float:left;
padding-left:15px;
}
#site-navigation li.first {
background-image:none;
}
further edit:
Managed to fix the cropping too, by giving the a tag some line-height.
#site-navigation a {
color:#666666;
display: block;
text-decoration:none;
margin-right: 1em;
line-height: 1.1em;
}
this bit feels like a bodge though :)
I know this isn't really a solution, but I would recommend using background-image instead of list-style image.
You'll achive the same effect, and it will work in all browsers.
Looks like a problem with margins and paddings of your objects inside site-navigation.
If you showed your CSS for those elements, we could check it faster :)
Related
My Site - Product Grid
When you hover over either of the product images on this page, there is a 2px horizontal line that appears to the left. I tried setting my padding, margin, no-wrap, I just can't figure it out. Thanks for looking and any advice.
I know I can cheat it by adding:
.mz-productlisting-image img {
margin-left: -4px;
}
But I don't want to if I don't have to!
This is the text-decoration:underline; of the anchor tag.
Simply add to
.mz-productlist-tiled a:focus,
.mz-productlist-tiled a:hover{
text-decoration:none;
}
Hope it helps :)
I am using a combination of ul and li tags for a menu and I use display box and a background color to display it as buttons the problems is as soon as I enclose the a tags using li the buttons seem to be shifting to the right a bit like a indentation or something .
I tried
list-style: none;
but that doesnt work could anyone suggest a workaround this problem..
Thanks any help would be appreciated
Thanks everyone for the effort +1 to all answers
Set padding-left and margin-left on the ul to 0.
Have you reset the default margin and padding styles?
ul,li {
margin:0;
padding:0;
}
You should check the margin and padding of the UL and LI elements, and set them to a specific value. Such as:
margin: 0;
padding: 5px;
A UL is typically styled to display with an indentation from the left, although it might also be the LI in some browsers (I believe).
In Firefox (w/Firebug), Chrome and IE9, you can inspect the applied styles using the developer tools available. This really helps to understand where issues are cropping up like this in your displayed elements.
http://getfirebug.com/html
Also, just in case you haven't seen it before, look at the box model:
http://www.w3.org/TR/CSS2/box.html
A ul and/or li element will be given a default margin and/or padding by the browser. Try adding margin: 0; padding: 0 to your ul, li {}.
Better still, use a CSS Reset to save you the hassle with this, and many other, elements. I recommend this one: http://meyerweb.com/eric/tools/css/reset/
There's a ton of blank space at the bottom of my page - http://shop.promaholics.com/? (It loads slow on the dev server, sorry).
I've been through the CSS lots looking for min-height type attributes but can't find any that would be causing this. Perhaps I've gone blind.
Any ideas what I can do to reduce that blank space at the bottom?
Thanks!
its the UL with class level0
right... you have a dropdown menu in "favours" in the menu that is causing the problem... its got too many elements (see if you mouseover "favours" it will be the length of your page).
Its because the script isn't hiding the element - its just moving it 10000 px to the right... :/ can you change this by using display:none;?
Change to this...
/* 2nd Level */
#nav ul { position:absolute; width:15em; display:none; border:1px solid #452915; }
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { display:block; top:39px; z-index:999; }
I tried it with disabling javascript and it removes the blank space at the bottom. I'm not sure in which script it's affecting it yet.
If you remove the class from the main-container col1-layout div then the blank space is greatly reduced - try looking for stray CSS in that class.
Edit: Wait, that's just because the images are no longer displaying inline. Whoops.
Our designer created a navigation that visually looks like this:
Navigation Bar
The HTML structure of which is:
<ul>
<li class="first">Home</li>
<li>Schools</li>
<li>Scores</li>
<li>Sports</li>
<li>Blogs</li>
<li>Podcasts</li>
<li class="last">Forums</li>
</ul>
I can't figure out if there's a way to make this so that when I mouse-over, let's say 'Sports', that both the left and right arrow image would change colors to the darker red. Is there a way to do this?
This is my CSS so far, but it only changes the arrow right of the link:
#mainNav ul li{
float: left;
background-color: #ed1c24;
padding: 7px;
padding-right: 21px;
background-image: url('/images/red_arrow.png');
background-repeat: no-repeat;
background-position: right;
}
#mainNav ul li.first{
padding-left: 14px;
}
#mainNav ul li a{
text-decoration: none;
color: #FFF;
}
#mainNav ul li:hover{
background-color: #d5171f;
background-image: url('/images/red_arrow2.gif');
}
You'll want something like this: http://jsfiddle.net/2xXQC/
Notice specifically the negative margin-left on each list item that causes them to overlap. The image you will need is something like this:
_____
\ \
/____/
Note to self: Seriously brush up on ASCII art skillz
Except the first. Do note however which anchor gets selected when the cursor hovers. HTML elements are always rectangular, so there's no way you can get the hit area to form the shape of the arrow.
Just make the hover image have both arrows in one image, then position it so it covers both arrows.
I'd be willing to bet that the background image for each list item only has a right arrow.
Using Css, you're only affecting the background image that you're actually hovering over.
If you use javascript (or jquery) for this (onHover), you'll have access to an onHover "event", within which you'll be able to affect anything else on the page, not just the image you're hovering over. In that case, you'll be wanting to swap the image you're hovering over, as well as the one to the left of it.
If your red_arrow.png and red_arrow2.gif have both arrows you may be able to mess around with z-index, but it's going to require a lot tweaking to get everything lined up properly.
You are probably better of using a css sprite and fine tuning the hover position in css.
Check link text for some good tutorials and ideas.
You don't have to use javascript. CSS Sprites get the job done for mouseovers. Here is a good article:
http://www.dave-woods.co.uk/index.php/mouseover-images-using-css-sprites/
Here is that technique in action:
http://www.rackspace.com/apps
EDIT: I see the problem. You need to do BOTH arrows. But you can still do this with CSS, just increase the z-index for the hover states (You'll need to have your sprite include both the left and right arrows):
a:hover {
background-position: 0 40px;
z-index: 10;
}
This is really strange. I've got this site where I have a list menu with a simple :hover effect on each item in the menu.
http://w3box.com/mat/
In Firefox it works just fine. But i IE7 atleast there's a lag. I haven't tested it in IE8 but my guess is that it's there as well.
Now, I've been trying out veriations to the code to see what might cause the issue. And I've seen alot of posts about similar scenarios. But none of them seemed to apply to my case.
So just now I noticed that in my css stylesheet, I've got this:
li:hover {
background-image: url(img/TopLine.png);
Height:29px;
}
Strange enough, if I remove the height specifications, there is no lag! What could be causing this? Could it be layers of padding and margins to the parent li class? Or the parent class above that one?
This is the code of these items. The rest of the css you can under /main.css of the site
#header {
padding-right:7%;
height: 57px;
background-image:url(img/TopLine.png); }
.header a {
font-family:georgia;
font-size:22px;
color:#ebebeb;
text-decoration:none; }
.header li {
float:right;
list-style: none;
margin-top:10px;
padding-top:18px;
padding-left: 23px;
padding-right: 23px;
height:23px; }
li:hover {
background-image: url(img/TopLine.png);
Height:29px; }
Any ideas on how I can improve this?
I'm not really getting any lag. The first time there is a slight delay though - this is most likely because the background image is loading.
You'd be better off setting a background on the list item proper then changing the background position on hover. (There are plenty of questions on SO about this.)