CSS - Help! Css Issue - Ie7 Vs. Chrome/firefox/safari

heres my currently working on site it look great on IE, Firefox and opera but i just see a blank page in Chrome and Safari!!

web site:
macmillanpc.host56.com/Dreamy_Elegance_template/


please help me! :/
check source, the css is in there (not linked)
these is really f... me off.

Sorry if its too vague, let me know if you need more details.

Hi,

I have an image slider made by another coder. The arrows on the image slider work fine in every browser except chrome and safari where the button isnt clickable (even though you can see it).

Here is a link:
http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=13

This is the CSS for the buttons:
Code:

span#prevBtn{
float:left;
margin-top:-100px;
margin-left:10px;
*margin-left:0px;
background: url(images/previousarrow.gif) no-repeat;
z-index:10000;
}
span#nextBtn{
float:right;
margin-right:-15px;
*margin-right:0px;
margin-top:-100px;
background: url(images/nextarrow.gif) no-repeat;

Could anyone help shed some light on why this may be happening?

Hi All

I have been contacted by a visitor to one of my sites to let me know that the fonts on a menu are too large but only on Chrome and Safari.

I'm struggling to figure out why the web-kit browsers are enlarging the fonts so much any help that I can get from you guys would be gratefully received.

Font size is fine FF3.5 and IE8

Site is http://www.pwfs.co.uk and its the horizontal navigation menu that the issue occurs.

Hoping someone can help

John

Hello all, I am having trouble getting my site menu to display properly in chrome and safari. In chrome and safari the menu link are raised higher up in comparison to firefox and IE.

Here is my site: Well I guess I can not link my site, but hopefully someone can still help me.


Here is my code: Quote:
/* Tabs ==================== */

#homepagetabs {
border-bottom: none;
margin-bottom: 10px;
padding-left:170px;
height:51px;
background:transparent url
}

#homepagetabs li {
display: inline;
list-style-type: none;
margin-top: 14px;
border: none;
border-bottom: none;
float: center;
line-height: 14px;
margin-right: 8px;
text-decoration: none;
cursor: pointer;
color:#fff;
background: none;
font-weight:bold;
font-size:12px;
}

#homepagetabs li.currenttab {
margin-top: 14px;
background: none;
border: none;
border-bottom: none;
font-weight:bold;
color:#fff;
font-size:12px;
text-decoration:underline;
}

#options_69 th {
font-size: 100%;
}

Hi,

If you check this site out with Google Chrome or Safari, you'll see (just below the header) the mid-section is offset to the right.

http://www.ergopro.com/

I noticed if I remove the "Icons" div everything is okay, but I need it there. I tried adjusting it, but no dice. Any ideers?

Much thanks in advance.

I have an issue with an image that just doesn't show up in IE6-8 no matter what I do. I even tried just putting in the url for the image and it still wouldn't show it. I took it into Photoshop to make sure it was properly saved as a jpeg and it is.

The file validates (with some minor color warnings).

I tried to post the url by putting url tags but that didnt work so here it is obscured mandp dot lamster dot org/contacts dot shtml

and the photo alone is at mandp dot lamster dot org / images / MP65APhoto dot jpg

Another issue with the url for the page is that I can't seem to get the width of the right pane smaller.

Any help would be appreciated.

Thanks/Hal

I am working on a development site (http://dev.asbco.com/products/commercialindustrial/ ) and I am getting different looks in Safari and Chrome.

IE8/FireFox 3/Opera all render the page correctly, Safari and Chrome are off.

Any ideas how to fix this issue?

Thanks!

[EDIT]
I meant Safari and Chrome not Safari and FireFox 3.

This could have been posted in the DHTML forum, but I'm guessing the problem is with my CSS bits rather than the DHTML as such so I'm posting here.

I've created a 'working' overlay for a page which has quite a bit of AJAX interaction. The connection the page will be used on is quite slow so I pop up a full screen table with 50% transparency to dim the main page, and the table has a box in the middle informing the user that the page is doing some work in the background.

This works great in IE and FF, but in Chrome and Safari the overlay seems to be preventing any interaction with the pages WHEN IT IS HIDDEN.

This is the correct/desired behaviour when the overlay is displayed - ie when the comms with the backed are happening I don't want the user to be able to push any other buttons or edit any other form elements - but when the layer is hidden (CSS = visibilty: hidden; display: none the layer still seems to prevent the user from clicking any of the controls (buttons, text fields, links etc).

The reason I think it is the overlay layer doing this is that if I double click anywhere on the page, the area that 'working...' overlay displays in when it IS displayed becomes selected/highlighted.

Is this a webkit oddity or am I doing something wrong?

(To display the overlay I just switch the CSS of that particular DIV to "visibility: visible; display; block", but I have also tried "display: inherit;" and "display: inline;").

Thanks,

FM

I have a website (www.fullforcecreative.com) that displays properly on I.E. and Firefox. I just recently pulled it up in Google Chrome, and it appears no style sheets are being imported. I then thought "that is strange, but Safari is based on the same thing (kinda), so I'll load it in Safari." Same issue. No style sheets.

Has anyone seen anything like this before?

I link to one style sheet in the header.

Code:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css; charset=utf-8" media="screen" />

This style sheet linked to from that line:

Code:

@charset "UTF-8";
@import url(yaml/core/base.css);
@import url(css/navigation/nav_shinybuttons.css);
@import url(css/screen/basemod.css);
@import url(css/screen/content.css); 
@import url(yaml/print/print_003.css); 

All the other stylesheets open with the
Code:

@charset "UTF-8"; 
@media all {
insert css here
}

The site is using YAML (http://www.yaml.de/en/) as a framework for the CSS. The only issue I could find relativly close to it was this: http://www.davidroessli.com/logs/2007/03/safari_utf8_rendering_glitch_f/

I made the change listed there (because the CSS stylesheets are in UTF-8), but it made no difference.

Does anyone have any ideas? This is driving me up the wall. It does display properly in I.E. and firefox.

Thanks,
seth

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!

If you go to the example site: devbum.com/coded/audven/

The top navigation seems to be pushed upwards in Windows Safari and Google Chrome and not centered like in FF, IE6, IE7, and Opera. I'm not sure why it's doing this though... does it also render differently on Mac Safari?

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.

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...????