css hack for safari on mac - css

just wondering if some one could help me with css hack for safari on mac, what I'm trying to do looks good on safari for windows but looks different on mac,
on my top navigation I'm trying to center everything,it looks centered on firefox,ie,safari but on safari on mac it's not centered, so I wanted to give it left margin that could only be visible on safari for mac.
<div id="main_nav">
<ul>
<li>about us</li>
<li>women</li>
<li>men</li>
<li>beauty</li>
<li>the lust</li>
<li>press</li>
</ul>
</div>
#main_nav {
width:74.7em;
height:2.3em;
position:absolute;
top:13.9em;
left:0;
background:#000;
margin:0 0 0 6.9em;
text-align:center;
}
#main_nav ul {
width:49em;
height:1.7em;
color:#FFF;
font-size:1.3em;
letter-spacing:.2em;
text-alight:left;
margin:0 auto 0 auto;
}
#main_nav ul li {
display:inline;
list-style-type:none;
}
#main_nav ul li a {
display:block;
height:1.6em;
float:left;
color:#FFF;
text-decoration:none;
margin:0em 0 0 4em;
padding-top:.2em;
}
#main_nav ul li:first-child a {
margin-left:0.5em;
}
#main_nav ul li a:hover {
background-color:#90F;
}
thanks

I do not have a Mac to test on, but this CSS seems to do the trick in Safari, Chrome, Firefox, Opera, and Internet Explorer on Windows. (I only posted the changed part)
#main_nav {
width:74.7em;
height:2.3em;
margin:13.9em auto 0;
background:#000;
text-align:center;
}
#main_nav ul {
width:49em;
height:1.7em;
color:#FFF;
font-size:1.3em;
letter-spacing:.2em;
text-alight:left;
margin:0 auto;
}
Small thing... This line in #main_nav ul is redundant as the short form allows you to specify the first two and have the same values applied to the opposite sides:
margin:0 auto 0 auto;
So, the equivalent version is:
margin:0 auto;

Related

I can't figure out why my page is rendering differently in different browsers

I'm using the Yahoo CSS reset, and all of my CSS uses pixel values rather than relative measures like ems. You'll notice that the bottom right corner of the div containing the form is shifted in Chrome from where it is in FireFox.
Check it out:
http://jsfiddle.net/rhewitt/anMmX/
Chrome:
FireFox
/*header style*/
html{
background:url(../Images/textureslice.png) repeat;
}
body {
font-family:Georgia;
color:#93b9bb;
}
/* Links */
li a{
color:#93b9bb;
text-decoration:none;
}
li a:hover {
text-decoration:underline;
color:#6b8f91;
}
/* Navigation Structure */
#nav {
width:920px;
margin:auto;
text-align:center;
padding-top:120px;
list-style-type:none;
}
#outterBox li{
display:inline-block;
padding:0 50px;
position:relative;
}
#linksLeft{
float:left;
border-top:3px solid #93b9bb;
border-bottom:3px solid #93b9bb;
margin:60px 0 0 25px;
padding:5px 0;
}
#linksLeft li ul {
background-color:#93b9bb;
margin-top:10px;
border-radius:6px;
}
#amy {
clear:both;
font-weight:bold;
letter-spacing:6px;
font-size:120%;
}
#talent{
font-size:70%;
}
#logo {
float:left;
background:url(../Images/logocropped.png) no-repeat;
height:134px;
width:160px;
}
#linksRight{
float:left;
border-top:3px solid #93b9bb;
border-bottom:3px solid #93b9bb;
margin-top:60px;
padding:5px 0;
}
/* Subnavigation menu */
#linksLeft li ul li {
display:block;
padding:10px 15px;
text-align:left;
}
#subNav a{
color:#FFF;
}
#subNav {
position:absolute;
left:10px;
top:15px;
z-index:999;
}
#subnavborder {
margin:10px 10px;
border: 6px solid white;
border-radius:6px;
}
#nav ul ul {
display:none;
}
#nav ul li:hover > ul {
display:block;
}
The text size for the browser was set > 100% (not page zoom). This caused the rendering to be wonky on my machine and also explains why it couldn't be replicated by others.
I cant replicate the difference either.
Did you clear cache in chrome? Try reloading by shift+f5.
I assume it should look like the second screenshot.
http://jsfiddle.net/xLTE4/
Adjust the buttons css right propperty and it should be fine in both browsers, at least it works on my end.
Also consider maybe doing this layout without everything being positioned absolutely.
#submitBtn{
position:absolute;
right:45px;
top:430px;
width:80px;
}

CSS horizontal menus don't work on touch devices

I have a pure CSS implementation of horizontal menus that works fine on browsers on a computer. The website is www.intercessionsp.org. However, on touch devices (specifically, I have tried Safari on iPad and iPhone), the menus do not work. Touching them causes no response at all, if there is a submenu (the Home menu item works fine). I have tried to implement two solutions:
1. using onclick="return true", based on terraling's solution in "iPad/iPhone Touch Event on Hover CSS" question here on stackoverflow.
2. adding #ios ul { display: none; } and #ios li:hover ul { display: block; } based on a post by Philip Renich on elfboy.com called "Making CSS Drop Down Menus Work on the iPhone".
Neither worked.
Here is the relevant part of my css file:
/* horizontal menus */
#nav, .nav, #nav .nav li {
margin:0px;
padding:0px;
}
#nav li {
float:left;
display:inline;
cursor:pointer;
list-style:none;
padding:10px 30px 10px 30px;
border:1px #000 solid;
position:relative;
background: #990000;
}
#nav li ul.first {
left:-1px;
top:100%;
}
li, li a {
color:#fff;
text-decoration:none;
}
#nav .nav li {
width:100%;
text-indent:10px;
line-height:30px;
margin-right:10px;
border-top:1px #000 solid;
border-bottom:1px #000 solid;
border-left:none;
border-right:none;
background:#990000;
onclick="return true"
}
#nav li a {
display:block;
width:inherit;
height:inherit;
}
ul.nav {
display:none;
}
#nav li:hover > a, #nav li:hover {
color:#990000;
background:#fff;
}
li:hover > .nav {
display:block;
position:absolute;
width:200px;
top:-2px;
left:30%;
z-index:1000;
border:1px #000 solid;
}
li:hover {
position:relative;
z-index:2000;
}
#basic li {
color:#000;
}
Since I already have display:block in my li:hover > .nav, I tried adding it to #nav li:hover > a, #nav li:hover (without expecting this one to work) and to li:hover, but neither worked. I should add that I looked at Renich's comment about setting a width value, but since I already had width values set, this didn't appear to be useful.
I would like to stay with a pure CSS implementation.
Your menu relies on the css selector :hover in order to show the list items. In order for those to show on a mobile device like an iphone the user must be able to click. You can try wrapping the text on the first level on your menu with <a> tags. For example: About Us
View this on a mobile device:
http://jsfiddle.net/tlaverdure/L42AE/

alignment of pictures with CSS causes issue with Firefox/Windows but not with Firefox/linux

I have an oddly specific error concerning CSS, Firefox and Windows.
Let me explain: I use
vertical-align:sub;
... and it displays correctly with Firefox on Linux and IE on Windows but not with Firefox and Windows. I use the same version of Firefox on both Linux and Windows.
Some pictures of the problem (sorry for the inconvenience but, I can't post pictures or more than 2 links yet, so I have to do it like that):
http://www.mercuryproductions.de/kram/Errors.html
link to the page: http://www.sontag-consult.com/
If I fiddle around with the vertical-align I can get it to work with FF on Win, but it messes up the other combinations.
This is how I would do it:
CSS
Add this to your CSS file:
ul
{
margin:0;
padding:0;
}
ul li
{
margin:0 0 0 3px;
padding:0;
display:inline-block;
list-style-type:none;
}
ul li:first-child
{
margin-left:0;
}
ul li a
{
padding:3px 8px;
display:block;
font-weight:bold;
text-decoration:none;
color:#fff;
background-color:#000;
}
ul li a i
{
margin:2px 5px 0 0;
display:block;
float:left;
width:20px;/* width of your img */
height:15px;/* height of your img */
background:url(/sprites.png) no-repeat;/*your img file here*/
}​
HTML
And this is what your HTML code should look like:
<ul>
<li>
<i></i>Lang 1
</li><li>
<i></i>Lang 1
</li><li>
<i></i>Lang 1
</li>
</ul>
DEMO
BTW, it's probably recommended that you use image sprites.
Updated:
Solution 1 (IMG tags):
CSS
ul li a img
{
margin:2px 5px 0 0;
border:0;
display:block;
float:left;
width:20px;/* width of your img */
height:15px;/* height of your img */
}​
HTML
<ul>
<li>
<img src="/deutsch.png">Deutsch
</li>
</ul>
Demo
Solution 2 (w/ image sprites):
CSS
ul li a i
{
background:url(/sprites.png) no-repeat;
margin:2px 5px 0 0;
display:block;
float:left;
width:20px;/* width of your img */
height:15px;/* height of your img */
}
ul li a i.deutsch
{
background-position:0 0;
}
Solution 3 (w/o image sprites):
CSS
ul li a i
{
margin:2px 5px 0 0;
display:block;
float:left;
width:20px;/* width of your img */
height:15px;/* height of your img */
}
ul li a i.deutsch
{
background:url(/deutsch.png) no-repeat center center;
}
HTML
<ul>
<li>
<i class="deutsch"></i>Deutsch
</li>
</ul>

CSS: Center Align

I have the following CSS Menu with float:left; how could I make this center. Where do I add margin:0 auto?
CSS:
/* === 7. Navigation === */
#nav{
width:100%;
margin:30px auto;
}
.ie7 #nav{
padding:10px 0 0 30px;
}
#nav ul li{
margin:0 auto;
}
#nav li{
float:left;
text-align:center;
list-style:none;
font-weight:bold;
}
#nav li a{
margin-right:30px;
text-decoration:none;
color:#5d5e5d;
}
#nav li a:hover{
text-decoration:underline;
}
#nav li a:active{
font-family:inherit;
font-size:inherit;
color:#fff;
}
HTML:
<ul id="nav"><!--Navigation-->
<li id="homenav">Home</li>
<li id="portfolionav">Portfolio</li>
<li id="contactnav">Contact</li>
</ul>
If you don't have an specified width to center your menu you can just declare your list items as display:inline-block instead of float:left and jut set the text-align property to center, like so:
CSS
#nav > li {
display:inline-block;
*display:inline; /* ie7 fix */
zoom:1; /* hasLayout ie7 trigger */
list-style:none;
font-weight:bold;
}
#nav {
text-align:center;
}
This way your menu will center regardless of a width.
Add display property of your #nav as table and margin for both left and right auto.
#nav{
display:table;
margin-left:auto;
margin-right:auto;
}
First your #nav element needs to have a width less than 100%. Then add "margin:0 auto" and it should center.
Take a look at this article. It works for me when ever I am having centering issues. Its also cross-browser compatible.
Inside #nav {...};. Be aware that your nav needs a fixed-width in order for this to work.

CSS Image hover Problem in Google Chrome

I have a very strange image hover problem in Google Chrome.
When I hover the mouse over the menu, I get my background image in Mozilla and IE, but not in Chrome.
I used the following CSS script for the menu item.
.content_resize { padding-right:0; padding-top:16px; width:930px;background-color:#fff; }
.content .mainbar { float:left; width:630px;}
.content .newstick { float:center; width:650px;}
.content .mainbar img { margin-bottom:24px; padding:4px; border:1px solid #b7b7b7; background-color:#fff;}
.content .mainbar img.fl { float:left; margin-right:12px;}
.content .mainbar .article, .content .sidebar .gadget { margin:0; padding:0 0 16px 0;}
.content .sidebar { float:right; width:276px;}
ul.sb_menu, ul.ex_menu { margin:0; padding:0; list-style:none; color:#959595;}
ul.sb_menu li, ul.ex_menu li { margin:0; }
ul.sb_menu li { padding:4px 0; border-bottom:1px solid #e3e3e3; width:220px;}
ul.ex_menu li { padding:4px 0 8px;}
ul.sb_menu li a, ul.ex_menu li a { color:#5f5f5f; text-decoration:none; margin-left:-16px; padding-left:5px;}
ul.sb_menu li a:hover, ul.ex_menu li a:hover { color:#FFFFFF; font-weight:bold; display:block; width:200px ; height:25px; background:url(images/menu_bg.gif) no-repeat left top;}
ul.sb_menu li a:hover { text-decoration:underline;}
ul.ex_menu li a:hover { text-decoration:none;}
.content .scroll { float:left; background:url(images/scroll_bg.gif) no-repeat left top; display:block; margin-left:35px; height:200px; width:180px; OVERFLOW: hidden;background-color:transparent;}
It's working fine with Internet Explorer and Mozilla. While Its not showing up the background image for the menu on hovering in chrome. Can anyone Help me please?
Not too late for me to answer, I hope?
This is happening because display:block; is being triggered on hover, which WebKit doesn't seem to like. It should work if you move the display:block; property from ul.sb_menu li a:hover, ul.ex_menu li a:hover to ul.sb_menu li a, ul.ex_menu li a
While you're at it, it would probably make sense to move width:200px; and height:25px; to the same place as well. This shouldn't affect how it appears in IE, Firefox or Opera, by the way.
You are simply having the same issue as on this thread: chrome does not render gif background image
GIF images are not render correctly by chrome if they are applied on hover (ie. img:hover).
So you have a couple of options:
If your images are not animated: change the format of your images
If your images are animated: use a work around, see answers of question chrome does not render gif background image

Resources