CSS - Weird Text Cursor On Li A Items, Only In Webkit Browers

Hello there. I'm afraid I can't provide a live example because it's a complicated commission that hasn't yet been published, but I'll try to be as specific and detailed as possible.

My overall aim: To have a squarish div on the left hand side and a few short rectangular divs vertically stacked on the right hand side of a container. The container is a div whose width is known. The stacked rectangles must have a minimum width but there is some margin for error. All these divs are separated by margins.

Code:

OOOO  ===
OOOO 
OOOO  ===
OOOO
OOOO  ===

There are other, unrelated blocks above and below this arrangement, and there are blocks nested within these divs as well, all unrelated though.

So how did I implement this? I figured this was simple enough:

Code:

<div>
  ...
  <div class="left-square">...</div>
  <div class="right-short-rectangle">...</div>
  <div class="right-short-rectangle">...</div>
  <div class="right-short-rectangle">...</div>
  ...
</div>

And the CSS would then look something like this:

Code:

.left-square {
  width: 100px;
  height: ...px;
  float: left;
}

.right-short-rectangle {
  margin-left: 110px;
  margin-bottom: 5px;
  height: ...px;
}

So, this works just fine in Firefox and Internet Explorer. However, for some reason, Chrome doesn't like it. What Chrome does is, it completely ignores the margin on the right-short-rectangles, placing them underneath the floating left-square, but giving them the correct width (the width of the container minus the margin).

By fooling around with the DOM inspector, I discovered that if I remove the margin attribute from one of the rectangles, they show correctly (in Chrome). However, they obviously will break in Firefox and Internet Explorer if I do that. Also, if I remove the float attribute from the square, Chrome suddenly recognizes the margins of the rectangles properly (when it no longer matters).

So, does anyone have any idea about what's going on here?

EDIT: I just noticed this and it is certainly relevant: The right-short-rectangles contain a few *unstyled* divs and one div that is floated to the RIGHT (in other words, content I want to have on the right hand side of each of these rectangles). Without this inner, right-floated div, the margin issue no longer happens in Chrome. The inner div is, however, essential. What can I do? Use tables?

I have a Wordpress site. The layout has some complex elements, but strangely the one thing that doesn't work is the background-color that I am setting using the "body" selector. It works great on Firefox and IE (imagine that!) but not on Safari or Chrome, which are Webkit-based. It is supposed to have a gray background, but those two browsers just show the default white.

The following is the code I'm using in the body selector.. not much places where something could be going wrong.

css Code:
Original - css Code body { margin: 0px; padding: 0px; background-color: #333333; }

  

  


 body {


     margin: 0px;


     padding: 0px;


     background-color: #333333;


 } 

The link to the page is he http://montanlaw.com

I don't understand why things aren't working... it seems to me like background-color should be a very well-supported property that shouldn't have much variance between browsers. Anyone have any tips?

Note: I tried validating the code to see if there was an error there - however, it's all valid except two little (unrelated) things that I could easily fix if I needed to.

Thanks in advance for any help,
chip19

Hello,

I was wondering if anyone could shed some light on this problem I'm having with my navigation bar. I've Googled and tried every [seemingly] logical combination, but can't get it to work -- and it's driving me nuts!

Basically, I have a div containing an unordered list and an image. The image is a non-semantic hack I've had to put in for the design, without making it massively complicated... Anyway, the problem is with the ul, which contains lis that are just images (tabs). Like so:

Code:

<div id="tabs">
  <ul>
    <li><a href="..."><img src="..."></a></li>
    <li><a href="..."><img src="..."></a></li>
    [etc.]
  </ul>
  <img src="filler.png">
</div>

Each image is a different width; and the above is simplified for clarity... Anyway, this works perfectly in Firefox, Opera and even IE. However, in Safari and Chrome, the lis have a few extra, blank pixels of padding on the right edge of the image; whereas I want all the images to butt-up against each other.

My CSS is as follows:

Code:

#tabs {
  word-spacing: -4px; 
}

#tabs ul {
  display: inline; list-style: none;
  margin: 0px; padding: 0px;
}

#tabs li {
  display: inline;
}

The word-spacing for the div removes the spacing you automatically get in Firefox/Opera/IE -- I found -4px was enough to remove the gap entirely -- but in Safari/Chrome, a gap remains. If you make the value even smaller (e.g. -5px, -60px, etc.) it makes no difference in any browser; if you make it bigger, then the gaps widen in all browsers. However, WebKit browsers always have that extra padding on the right edge.

Any ideas on how to get rid of this?... I've tried "display: inline-block", "-webkit-border-horizontal-spacing" with various values, "white-space: nowrap"; even altering the HTML so that the images and lis have explicitly defined widths. Nothing works!

We have our magento store with lots of categories, but it looks silly with categories being added under the first row. We'd like to have these added on a row above this, but i am having a hrd time getting this done.

Is there an easy way to have category items being added on top in a new row, instead of a new row under the current one?

Simply put, instead of this way:
1 2 3 4 5
6 7 8 9

We want it this way:
6 7 8 9
1 2 3 4 5

As you understand this will look much better and not screw with our design;-)

Anybody?

Hi all,

I'm trying to change my cursor when I hover over a image on a onclick event as the example below but I can't get this to work.

<a onmouseover="this.style.cursor='hand'">

Regards

Stephen

Hi,

Is their any way to change the cursor color in css or javascript?

Thanks
Rishu

Hi people,

I could not find a grabbing hand cursor in css cursor property.
Instead I use this "cursor:move;" for a while. A grabbing hand like what GoogleMap do when dragging a certain map. Is that a server side creation?

hello,

i'm placing a custom cursor on a stylesheet like so:

body { cursor: url(normal.cur), default; }

and a weird effect appeared on internet explorer... when the cursor is over any layers or images (i guess, over any actual elements), the custom cursor appears. but when it's on an empty area, say the page background, the default cursor appears instead. how can i fix this (while trying to maintain the default cursors for every other browser)?

thanks for any help!

I'm trying to change the cursor when a user mouses over an image.

Code:

cursor:hand

Works perfect in IE, but the cursor tag doesn't respond at all in Firefox.

I've been able to "trick" Firefox when using onClick JS links by putting href="#".

When my cursor passes over the links on the top of my page (not clicking a link, just passing the cursor over the link), the title jumps from its position directly under the links to a position to the right of the links.

Since you are giving me help, I want to make this as easy for you as I can. I have posted a screen shot of exactly how my header looks before and after passing the cursor over the links.

www.middle-age-guy.com/forum-css-help_images.html


Here is the relevant css. I've separated and labeled the css so that you can see how it flows down the page.

___________________________________________

#header {
width: 998px;
margin: 0 auto;
}

#header .container {
background:url(images/head_pat.jpg) left top repeat-x;
height: 200px;
}

/* -- links along the top of the page (Home,

MAGman Lifestyles, etc. --*/

.topline {
}

ul.menu li.page_item {
float: left;
display: inline;
font-size:12px;
margin-top: 25px;
}


ul.menu li.page_item a {
color:#000!important;
text-decoration: none;
padding:25px 0 0px 0px;
margin-right: 15px;
list-style-type: none;
}

ul.menu li.page_item a:hover {
color: #fff!important;
text-decoration:none;
background:url(images/menu_hover.gif) left repeat-x;
}


ul.menu li.current_page_item a {
color: #fff!important;
text-decoration:none;
background:url(images/menu_hover.gif) left repeat-x;
}

/* -------------------- Image on right side of header ---------*/

#magmanheadshot {
padding:0;
margin:25px 50px 20px 0;
float:right;
width:160px;
color:#003e4f;
}

/*--------------- Title - Middle-Age-Guy.com --------------*/

#headline {
width:450px;
margin-top: 20px;
}


#headline h1 {
display: block;
clear:left;
font-size:30px;
margin-left: 20px ;
margin-bottom: 5px;
color:#FFFFFF;
font-weight:normal;
}


/* ------------- Tagline below the title --------------*/
.desc_l {
background:url(images/desc_l.gif);
width:10px;
height:27px;
float:left;
margin-left: 25px;

}


.desc {
background:url(images/desc_pat.gif);
height:27px;
float:left;
font-size:14px;
line-height:25px;
font-weight:normal;
color:#FFFFFF;
}



.desc_r {
background:url(images/desc_r.gif);
width:10px;
height:27px;
float:left;
}



.magmandatingsystem {
margin: 10px 0 0 0;
font-size: 12px;
padding: 0 0 0 23px;
float: left;
width: 400px;
}

/* --------------------- Membership login link -----*/

.login {
font-size: 18px;
color:#FFFFFF;
text-decoration: none;
float: right;
margin-top: -80px;
margin-right: 50px;
list-style-type: none;
}

.login a {
color:#FFFFFF!important;
text-decoration: none;
}

.login a:hover {
color:#FF0000!important;
text-decoration:none;

}

.join {
font-styleblique;
font-size: 9px;
font-weight: bold;
}

.join a {
text-decoration:underline !important;
color:#ff0000!important;
}

.join a:hover {
color:#0099FF!important;
}

/* ------------ End of Header -*/

_______________________________________

Here is the relevant html from header.php

<div id="header">

<div class="container">

<div class="topline">

<ul class="menu">
<li class="page_item"> <a href="(URL address blocked: See forum rules)">Home</a></li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="General information foundational to success in all other areas">MAGman Lifestyle</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="One of the three Pillars of any man's life - his relationships with others">Women & Relationships</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="The Pillar of a sound body is a middle age guy's call to reality">Health & Fitness</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="A man's third Pillar is his ability to do battle in the business world.">Business & Wealth</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/magman-blog"
title="MAGman's Blog">Blog</a>
</li>

<li class="page_item">
<a href="<?php if($db_feedburner_address) { echo $db_feedburner_address; } else { bloginfo('rss2_url'); }?>">Subscribe to RSS</a>
</li>


</ul>
</div> <!-- end #topline -->



<div id="magmanheadshot">
<img src="/wp-content/themes/blog-design-studio-newblue/images/mag_man4-Head-shot.gif" />
</div>


<div id="headline">


<h1><?php bloginfo(''); ?></h1>

<div>

<div class="desc_l"></div>
<div class="desc">The #1 Personal Development Website for Middle Age Guys</div>
<div class="desc_r"></div>


<div class="magmandatingsystem"><a href="(URL address blocked: See forum rules)/?page_id=176">Read more</a> about the <a href="(URL address blocked: See forum rules)/?page_id=176"><span style="color:#FF0000!important">MAGman Dating System</span></a> for Middle Age Guys</div>


<!-- end #headline -->

<div class="login"><a href="(URL address blocked: See forum rules)/?page_id=89">Members' Login</a>

<p class="join"><a href="(URL address blocked: See forum rules)">Click here</a> to become a member.</p>
</div>

</div> <!-- end .container -->

</div> <!-- end .header -->
______________________________________________

Finally, this is the source code

________________________________________________

<div id="header">

<div class="container">

<div class="topline">

<ul class="menu">
<li class="page_item"> <a href="(URL address blocked: See forum rules)">Home</a></li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="General information foundational to success in all other areas">MAGman Lifestyle</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="One of the three Pillars of any man's life - his relationships with others">Women & Relationships</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="The Pillar of a sound body is a middle age guy's call to reality">Health & Fitness</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="A man's third Pillar is his ability to do battle in the business world.">Business & Wealth</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/magman-blog"
title="MAGman's Blog">Blog</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/feed/">Subscribe to RSS</a>
</li>


</ul>
</div> <!-- end #topline -->



<div id="magmanheadshot">
<img src="/wp-content/themes/blog-design-studio-newblue/images/mag_man4-Head-shot.gif" />
</div>


<div id="headline">


<h1>Middle-Age-Guy.com</h1>

</div>

<div class="desc_l"></div>
<div class="desc">The #1 Personal Development Website for Middle Age Guys</div>
<div class="desc_r"></div>


<div class="magmandatingsystem"><a href="(URL address blocked: See forum rules)/?page_id=176">Read more</a> about the <a href="(URL address blocked: See forum rules)/?page_id=176"><span style="color:#FF0000!important">MAGman Dating System</span></a> for Middle Age Guys</div>


<!-- end #headline -->

<div class="login"><a href="(URL address blocked: See forum rules)/?page_id=89">Members' Login</a>

<p class="join"><a href="(URL address blocked: See forum rules)">Click here</a> to become a member.</p>
</div>

</div> <!-- end .container -->

</div> <!-- end .header -->


Thanks for any help you can bring.

Scott

When you go near a link the cursor flickers and then goes back to default, cant get it to show normally for any link. Works on my windows PC but not on my Mac

Even tried a{ cursor:pointer; } but the same thing happens...

http://pd-scammell.co.uk/site/

Any ideas?

Thanks.

I have a navigation list over which I want the cursor to change from vertical line to a hand. Has the hand cursor been deprecated? I tried
Code:

style.cursor='hand'

with both onmouseover and onmousehover. Neither works.

Code:

<style>
<!--
BODY{
	cursor:url("Hand.USA.cur");
	}

a, a:hover {
	cursor:url("Hand.USA.cur");
	}

-->
</style>

I'm using the above code to display an icon that is replacing the default arrow. This only seems to work in Internet Explorer 6+. Would anyone know another way to display an image or icon either through a url (http://www.blah.com/img.jpg) or .cur or .ani that will work in Mozilla, and Netscape ?

Thanks,

Shawn

I am trying to use CSS so that when a user hovers their mouse over a submit button, they get a "hand" or "pointer" instead of the default arrow. Below is an example page to demonstrate what I am doing. It works fine in the latest version of Internet Explorer and Mozilla Firefox, but not in Opera 7.54. In Opera 7.54, the cursor changes when I hover over the border of the button, but when I move to the center of the button it goes back to an arrow. Does Opera 7.54 support this style properly or am I doing something wrong?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="dr0n3" />
<style type="text/css">

/* I have read that I should use pointer, then hand so it is compatible across a range of browsers, but this still doesn't work properly in Opera 7.54 */

.button
    {
    cursor: pointer;
    cursor: hand;
    }

</style>
</head>

<body>
<form action="page.php" method="post">
<p><input type="submit" name="submit" value="Test" class="button" /></p>
</form>
</body>

</html>

Is it possible to change the mouse cursor to a "hand" when hovering over a <input type="submit" /> ?

Thank you