CSS - Weird Issue With Latest Chrome

We've set up a CSS / Javascript dropdown menu which works fine in all browsers (even Opera, amazingly) EXCEPT Chrome- does anyone have an idea why? Is Chrome particularly bad with this sort of code?

The CSS for the menu is as follows:

.jqueryslidemenu{
font: bold 12px "Arial Unicode MS", Arial, sans-serif;
background: #6666cc;
width: 97%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #6666cc; /*background of tabs (default state)*/
color: white;
padding: 9px 25px;
border-right: 1px solid #fff;
color: #2d2b2b;
text-decoration: none;
border-left:0px;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: #33cc66; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 12px "Arial Unicode MS", Arial, sans-serif;
width: 120px; /*width of sub menus*/
float:left;
padding: 10px 20px 10px;
margin: 0;
border-top-width: 0;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
border-bottom: 1px solid white;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}


And it uses the following Javascript file:

var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimens ions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqu eryslidemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration. out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)


And lastly, the menu is placed in pages as follows (example):

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li class="mainmenu"><a href="index.htm">Home</a></li>
<li class="mainmenu"><a href="news.htm">News & Events</a></li>
<li class="mainmenu"><a href="products.htm">Products & Services</a>
<ul>
<li class="menu"><a href="#nogo">New Products</a>
<ul>
<li class="menu"><a href="clinaxysdetails.htm">Details</a></li>
<li class="menu"><a href="clinaxystrials.htm">Trials</a></li>
<li class="menu"><a href="clinaxyssafety.htm">Safety</a></li>
<li class="menu"><a href="instruments.htm">Instruments</a></li>
</ul>
</li>
<li class="menu"><a href="installation.htm">Installation</a></li>
<li class="menu"><a href="training.htm">Training</a></li>
<li class="menu"><a href="maintenance.htm">Maintenance</a></li>
<li class="menu"><a href="usergroup.htm">User Group</a></li>
</ul>
</li>
<li class="mainmenu"><a href="#nogo">Quality</a>
<ul>
<li class="menu"><a href="qualitypolicy.htm">Policy</a></li>
<li class="menu"><a href="qualitycert.htm">Certificate</a></li>
</ul>
</li>
<li class="mainmenu"><a href="customers.php">Customer Area</a></li>
<li class="mainmenu"><a href="contacts.htm">Contacts</a></li>
<li class="mainmenu"><a href="login.php">Log In</a></li>
</ul>
<br style="clear: left" />
</div>


Works fine in everything we've tried, apart from Chrome...????

Hi,

Thanks for your time...

If you visit this site with IE7, http://demo.wp4re.com, you should see a big gap just beneath the main menu and the house photo and blue back gradient background. This looks fine in FF3 and Chrome, so you can see how it's meant to look with either browser.

Any idea what's causing this?

PS - The xhtml doesn't validate (2 errors), but it's it's not the issue as I already tried removing the culprits yet it didn't affect the gap. I've since put the code back in.

Thanks in advance.

Hi,
well i am using quicksand and in it i wanted to use tootips but no one on internet helped me by telling how to do so. So, i am now using css technique, the method is very simple css trick, when you hover over the game icons its details appear, and when you hover over the details then the details disappear. The details disappear in IE and firefox but it is not the case with google chrome.
here is the test page
http :// letseedrop.blogspot.com/2011/01/testing-8. html
i don't know what i am doing wrong, i also tried to use !important in css but it didn't helped.
well i am pasting css here too if you don't want to go into the source code
Code:

.demosa {
position:relative;
top:0px;
left:0px;
margin:0px;
padding:0px;
}

.gamedetailpara {
text-decoration:underline;
color:#000000;
}

ul.gamecolumns {
min-height:300px;
list-style: none;
margin: 0px;
padding: 0px;
}
ul.gamecolumns li {
background:url('(URL )) no-repeat;
position:relative;
display: inline;
width: 114px;
height:118px;
float: left;
margin: 8px;
padding: 0px;
}
ul.gamecolumns li:hover {
z-index: 99;
}


ul.gamecolumns li img {
position:relative;
top:12px;
left:12px;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE8 Specific--*/
}
ul.gamecolumns li:hover img{
position:relative;
top: 12px;
left:12px;
z-index: 999;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=100)";
}

ul.gamecolumns li .gamedetails {
position: relative;
left: 0px; top: 0px;
padding: 20px 4px 10px 10px;
display:none;
background:#ffffff;
font:bold 13px "Times New Roman", Times,sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 99999;
}

ul.gamecolumns li .gamedetails:hover {
display:none;
}

ul.gamecolumns li:hover .gamedetails {display: block;}

ul.gamecolumns li:hover .gamedetails:hover {display: none;}

thank you in advance.

Hi All,

I am new to this forum and to CSS and Web Development as a whole. I am a notch up from "total n00b".

I can't post links so the website is www (dot) authenticimpressions (dot) com

I built this site for my wife using Wordpress, some plugins, and some themes I bought. The Galleries all look great in Chrome and Firefox on PC, and in Firefox and Safari on Mac. But in IE7 on PC, I get a 4 or 5px white border on the bottom and the left in each of the galleries. I've played and played with the stylesheets and cannot figure this one out.

What other information should I post or provide to get some help?

Thanks in advance, I really appreciate it.

Hi All,

I was wondering if someone could help and take a look at this. I have a site that is not displaying correctly in chrome and also Safari (at least on the iPhone).

The rest of the page is fine, but these images appear stretched vertically (the horizontal width appears OK).

The CSS for the element is:

CSS Code:
Original - CSS Code .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;} .keybox img{float:left;width:35%;padding:0px;margin:0px;} .keybox div{float:right;width:60%;padding:1%;} .keybox div ul{text-align:left;margin:0px;padding:0px;}

  

 .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;}


 .keybox img{float:left;width:35%;padding:0px;margin:0px;}


 .keybox div{float:right;width:60%;padding:1%;}


 .keybox div ul{text-align:left;margin:0px;padding:0px;} 

The html for the element is:

html Code:
Original - html Code <div class='keybox'> <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> <div> <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares </a></h2> <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> <ul> <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li> <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li> <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li> </ul> </div> </div>

  

<div class='keybox'>
<img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> 
<div>
<h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares
</a></h2>
<p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> 
<ul> 
<li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> 
<li><a href='/parts/volvo/'>Volvo Spare Parts</a></li>
<li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li>
<li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li>
</ul> 
</div>
</div>

The image stretches - it works fine on firefox and IE8.

The web address is www.wellandpower.net

There are 3 of these html elements on the left hand side of the page.

TIA

Regards

Charlie

Hi Guys

I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website.

I am using the latest mac OS and latest versions of all browsers.

The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this.

Here is the code for the form...

<form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" >


<ul>
<li>
<label for="name">Name:</label>
<input name="name" id="name" type="text" class="required" />
</li>




<li>
<label for="email">E-mail:</label>
<input name="email" id="email" type="text" class="required email" />
</il>


<li>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" class="required" />
</li>

<li>
<label for="detail">Message:</label>
<textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea>
</li>


<li>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" />
</li></ul>

</form>

Here is the css for that page...

#content_about {
color: #666666;
}



/***************************************************
CONTACT
***************************************************/
#form {
margin: 0px;
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 15px;
float: left;
}
#form div {
width: 510px;
position: relative;
float: left;
padding-bottom: 9px;
}
#form div label {
width: 400px;
}
#form div label.error {
color: #a80000;
position: absolute;
top: 0px;
right: 0px;
text-align: right;
font-size: 11px;
}
#form div.message_sent {
background-color: #31B8DA;
width: 890px;
float: left;
padding: 10px;
margin-bottom: 15px;
color: #FFFFFF;
}
#form input {
width: 499px;
padding: 8px;
font-size: 13px;
color: #999999;
background-color: #FFFFFF;
float: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
}
#form input:focus, #form textarea:focus {
background-color: #F4F4F4;
}
#form textarea {
width: 500px;
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #FFFFFF;
color: #aaaaaa;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
float: right;
margin: 0px;
}
#form .submitBtn {
background-color: #31b8da;
width: 95px;
color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
font-size: 16px;
height: 35px;
display: block;
margin-top: 20px;
}
#form .submitBtn:hover {
background-color: #1F93B4;
color: #FFFFFF;
}
#form .submitBtn:focus {
background-color: #4FC1E1;
}

#form strong {
font-size: 24px;
color: #FFFFFF;
font-weight: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6a6a6a;
display: block;
}
#form .font-11 {
font-size: 11px;
color: #CCCCCC;
display: inline;
}
#content_about #form li label {
margin-top: 0px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 30px;
}
#content_about #form li {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 0px;
}


Any help would be greatly appreciated.

Regards

Jay

My website is http://www.orchard-homes.co.uk/developments/ and ive noticed in some versions of safari (on a mac) a big white block covers the whole of the navigation, it only affects the 4 pages under the "Developments => Current =>" section and hovering over the word "developments" makes it disappear again.

Its driving me crazy how it works in every other browser fine, anyone have any ideas?

Thanks!

omg I am going to fall from the window with this stupid language lol...

Until yesterday, I was designing properly my site, using css and linking it in my php properly andddddddd..........

today I noticed a weird result. When I change something in css, I can see no result in the site. Even if I delete code from css, the site seems to be cached! I use Mozilla, I tried to clean cache, the css is properly linked... whats going on now

Have anyone else faced a similar problem?...

Hey everyone,

I have an odd problem.

CSS Code:
Original - CSS Code ul#admin_menu li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }

  

 ul#admin_menu li.am_item{


     float:left;


     clear:none;


     display:inline;


     border:0;


     padding:0;


     margin:0;


     width:24%;


 } 

This works...

CSS Code:
Original - CSS Code li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }

  

 li.am_item{


     float:left;


     clear:none;


     display:inline;


     border:0;


     padding:0;


     margin:0;


     width:24%;


 } 

This doesn't work... I don't understand why.

What gave it away was the display:inline; The first one displays them inline, the second displays them block and they don't get their width.

Hello,
I have a free text search with auto suggestion that opens below the input box.
I finally managed to make it look good in all browsers, but I have one problem left in IE - when the auto suggestion div opens with the options and I press the down arrow to move down the list, there is a little jump.
You can see it by going to : bateries.websitebuildingsolutions.com in IE and enter "b1" in the search box, wait a second for the div to open and than press the down arrow to move down the list.

What can I do to fix this?

Thanks

I have a basic 2 column layout with a header and the columns reprezented by two floated divs but on IE I'm experiencing some weird behaviour with the menu. To be precise the menu's background and content is not showing up at pageload and I have to hover some of it's elements or resize the window, or bring another window above IE's window and then the hidden elements magically appear. Is this some common bug? And more important: is there a fix?

You can see my example at the following link -> http://www.link7.ro/misc/css-stuff/bug1/test.html

Thanks in advance.

if you check out this website you'll immediately understand what the problem is about.

The script I wrote, pulls pictures out of a database and displays them. I have a print feature (click the link that says: Ik wil de klassenlijst van **** afprinten).

With Css I check wether or not a picture can be displayed on this page or if it has to be forced onto another page, when printed.

Code:

<style type="text/css" media="print"> 

	table {
		page-break-befo  auto;
	}
</style>

When you check the webpage, you'll notice this row gives problems in IE.
When I print the page from Internet Explorer: this row shows on the page, but not the picture that goes along with it.
When I print the page from Mozilla: this row does not show on the page, neither the picture that goes along with it. as it should be

Can someone help me? It is very important that the pagebreak is automagically forced when printed, because I can't guess the format on which people will print.

So I have the following website: http://www.itmustbecollege.com/

and it has a problem SOMEWHERE that I can't seem to figure out. The problem is that all of my pages now have a big "space" on the far right, forcing a huge horizontal size.

I have tried to debug but can't seem to find out the exact problem. It is weird, because certain parts of the website have a "width: 100%" yet ENDS at the correct look, yet there is still that huge space!