Was doing some testing with a design I coded and it works well in FF 13, Chrome 21, IE 7/8 & Opera 11.62 for Windows and Safari 5.1 for OS X.
I only have WinXP so I had to use Adbobe Browserlab to test for OS X and IE 9.
Problem is in IE9 and FF 11 for OS X the nav seems to drop down like it's too wide; but it's not, I have checked it.
The URL is: http://www.condorstudios.com/stuff/temp/
Just tried the below changes but still no change in those browsers..
#header .nav ul {
width: 992px; // New
margin: 0px auto; // Changed to 0px margin, but is now centered to get the same effect
}
#header .nav li ul.sub {
position: absolute;
display: none;
width: auto; // Needed to add so it didn't inherit width from above
/*left: -1px;*/ // Removed
top: 45px;
z-index: 1000;
}
Fixed it. Seems those browsers didn't seem to like the text-indent I had on the contact button, so by removing..
#header .nav li.contact {
text-indent: 1px;
}
It now works!
Related
Here is a link to my website.
In Chrome, Opera, Firefox and even the dreaded IE it displays fine, the way I want it to. In Safari, however, the menu appears 11px lower than where it should. I have honestly no idea what I have done wrong, how would I fix this?
Remove display:inline-block; (Safari: line 707)
Try This:
.main-navigation li a {
text-align: left;
color: #C9C9C9;
}
Instead of:
.main-navigation li a {
text-align: left;
display:inline-block;
color: #C9C9C9;
}
CSS for my button is:
.custom-input-button {
text-align: center;
position: absolute;
left: 64.4%;
top: 12.3%;
}
and rate box:
.rating-input {
font-size: 25px;
float: right;
position: relative;
left: 35%;
}
But bot button and Rate me option appears at varying position in Firefox and chrome.
More as Firefox version change position get affected. On my Firefox 23.0 it looks ok,
but in my friend PC FF version is different and position of button and Rate me option changes.
inHm, try using
.rating-input {
font-size: 25px;
position:relative;
left:35%;
}
Without float left, because then you using such combinations some browsers can set it incorrectly.
The problem is that you use % to set a distance. Different browsers use percentages differently. Try to do it using px.
I have a weird problem whit my css and I cannot find a solution on the net…
I have this css for my “submenu” of the navigation bar on this site: http://ahornung.tk when I look at the submenu in every browser except Safari it needs a margin-top: -43px; for it to look ok but in Safari it does not…
Does a css detect web browser and ignore css if Safari rule exist?
.submenu {
position: absolute;
z-index: 1000;
display: none;
left: 100%;
margin-top: -43px;
border: 0.5px solid black;
}
Update:
In Safari it looks good whit out margin-top: -43px;...
Difficult to tell exactly what is going on but rather than using margin-top try using top:0 and adjust as required.
I have a minor CSS problem, but I'm having trouble fixing it because I don't have any computer handy with IE7 installed...
In IE8, Chrome, FF, etc. I see this (correctly):
but IE7 gives me this:
the HTML code follows:
<div id="hub">
<div class="title highlight">Faster, Cheaper, Better</div>
<p>PNMS...
the relevant CSS code follows:
#hub {} /* literally nothing */
#hub div.title {
font-size: 4em;
font-style: italic;
font-variant: small-caps;
float: left;
margin: 5px 0px 20px 0px;
width: 940px; /* same as parent container */
}
.highlight { color: #ff6633;}
p {
text-indent: 30px;
font-size: 1.3em;
line-height: 1.1em;
letter-spacing: 1px;
margin: 5px;
}
Based on visitor traffic, I need my site to be compatible with IE7 (thankfully NOT IE6). But again, guessing blindly and then running browsershots.org is not a very efficient manner.
Can someone help? Thank you.
Found this somewhere, it may help:
CSS Double padding IE7 Fix
"Nothing is more annoying than finishing a web design, having it dispay just the way you like it in your standards compliant browser (cough download Firefox) only to remember to check it in IE and find it a garbled mess. Today I came across a rather annoying CSS bug in IE7. IE7 doubles the top padding on my navigation menu."
CSS Code
#nav {
clear: left;
padding: 16px 0 0 30px;
}
"And the fix…
Just add display: inline-block to the div with double padding. That’s it… I know, it’s ridiculous."
#nav {
clear: left;
display: inline-block;
padding: 16px 0 0 30px;
}
Another alternative is the parent of the Div which is not displaying correct add the margin: 0 in CSS for it.
Found it. The CSS body tag had a line-height: 18px;
For some reason known only to Microsoft, out of IE7, IE8, IE9, Firefox 3.5~6, and Chrome, only IE7 honored that instruction for a deeply nested div 400 lines further down the CSS sheet.
I'm finding a very strange problem with my jQuery mouseover caption function when viewed in Chrome - but only on Macs! My friend uses Windows 7 and all of his browsers display the js correctly and smoothly. However I've tested on numerous Macs and Chrome for Mac just can't seem to handle it!
FF and Safari work perfectly in both OS (slightly smoother in Safari).
Firstly, here's the site I'm building at the moment here. The function is the mouseover for each item in the portfolio section.
The JS:
$(document).ready(function() {
$('.item .caption').hide();
//On mouse over
$('.item').hover(function() {
//Display the caption
$(this).find('div.caption').stop(true, true).fadeIn(300);
},
//When mouse leave
function() {
//Hide the caption
$(this).find('div.caption').stop(true, true).delay(700).fadeOut(300);
});});
The CSS:
.item {
float:left;
height: 215px;
margin: 7px;
width: 225px;
position: relative;
background: #cacbce;
}
.item .caption {
background: url(images/hoverbg.png) repeat;
box-shadow:inset 0px 0px 250px #000;
-moz-box-shadow:inset 0px 0px 250px #000;
cursor: pointer;
height: 100%;
width: 100%;
padding: 0;
position: absolute;
top: 0;
}
Pretty standard function, I'm sure you'll agree. Has anyone got any ideas what is going wrong?
I'm using Chrome 10.0.648.133 (up to date as of 15th March 2011). I'm starting to think it's a problem with the browser!
This has been resolved.
Chrome has difficulty with box-shadow css inside elements you're applying the JS to. Once I removed that, it worked perfectly. I'll bring this issue up on the Chrome dev forums.