|
CSS - Li Hover Issues In Safari
Hey...this may possibly be a dumb question; I'm still pretty much a complete n00b at HTML/CSS and this is only the second site I've really tried to code.
I haven't tried to deal with cross-browser compatibility in IE yet so I'm sure it looks completely whack there, but I've been surprised by issues I've been having between FF, Safari, and Opera -- it was my understanding that those three browsers read things pretty much the same. Basically, the site has a bunch of horizontal dropdown menus (uls with li:hover functions). Here's the relevant code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>Star Trek: Andromeda</title> <link rel="stylesheet" type="text/css" href="http://www.trekandromeda.com/home.css" /> </head> <body> <!-- Menu --> <div id="bg"> <div id="home"><ul id="menu"><li><a href="http://www.trekandromeda.com/home.html"><i><img src="http://www.trekandromeda.com/images/menubutton.png"></i></a> <ul class="marginone"> <li><a href="http://www.trekandromeda.com/home.html">Site Home</a></li> <li><a href="http://forums.sb254.com/index.php?f=686">STA Forums</a></li> <li><a href="http://www.sb254.com/">FSF Home</a></li> </ul></li></ul></div> <div id="news"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/images/menubutton.png"></i></a> <ul class="marginone"> <li><a href="http://www.trekandromeda.com/news.html">Recent News</a></li> <li><a href="http://www.trekandromeda.com/awards.html">Game Awards</a></li> </ul></li></ul></div> <div id="info"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/images/menubutton2.png"></i></a> <ul class="margintwo"> <li><a href="http://www.trekandromeda.com/chat.html">Chat Room</a></li> <li><a href="http://www.trekandromeda.com/odysseyplot.html">STA Plot</a></li> <li><a href="http://www.trekandromeda.com/odysseycrew.html">STA Crew</a></li> <li><a href="http://www.trekandromeda.com/staff.html">STA Staff</a></li> <li><a href="http://www.trekandromeda.com/join.html">Join</a></li> </ul></li></ul></div> <div id="tech"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/images/menubutton.png"></i></a> <ul class="marginone"> <li><a href="http://www.trekandromeda.com/ships.html">Ships</a></li> <li><a href="http://www.trekandromeda.com/equipment.html">Fleet Tech</a></li> <li><a href="http://www.trekandromeda.com/science.html">Science Docs</a></li> </ul></li></ul></div> <div id="andromeda"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/Temp/menubutton2.png"></i></a> <ul class="marginthree"> <li><a href="http://www.trekandromeda.com/races.html">Xenobiology</a></li> <li><a href="http://www.trekandromeda.com/maps.html">Stellar Cartography</a></li> </ul></li></ul></div> </div> </body></html> And the CSS: Code:
body
{background: #000000;
width: 1228px;
font-family: Arial;}
/* MENU */
#bg
{background: #000000;
background-image: url("http://www.trekandromeda.com/Temp/blue3.png");
background-repeat: no-repeat;
height: 700px;
}
#home
{position: absolute;
left: -7px;}
#news
{position: absolute;
left: 207px;}
#info
{position: absolute;
left: 420px;}
#tech
{position: absolute;
left: 725px;}
#andromeda
{position: absolute;
left: 925px;}
ul#menu{
position: relative;
top: 240px;
text-decoration: none;
opacity: 100;
list-style: none;}
ul#menu li {
float: left;
position: relative;
width: 108px;
list-style: none;
top: auto;
left: auto;}
ul#menu li a img {
position: relative;
opacity: 0;}
ul#menu li ul {
position: relative;
display: none;}
ul#menu li ul.marginone li {
float: left;
position: relative;
font-variant: small-caps;
margin-left: -43px;}
ul#menu li ul.margintwo li {
float: left;
position: relative;
font-variant: small-caps;
margin-left: 25px;}
ul#menu li ul.marginthree li {
float: left;
position: relative;
font-variant: small-caps;
margin-left: -50px;
width: 240px;}
ul#menu li:hover ul {
position: relative;
display: block;
margin-top: -5px;
}
ul#menu li:hover ul li {
float: left;
position: relative;
padding: 5px;
text-align: center;
text-decoration: none;
color: #ffffff;
background: #000000;
height: 20px;
border: 1px solid #54A2E2;
z-index: 1000;
}
ul#menu li ul li:hover {
float: left;
position: relative;
display: block;
color: #000000;
background: #54A2E2;
border: 1px solid #54A2E2;}
/* Links */
a:link {text-decoration: none; color: inherit;}
a:visited {text-decoration: none; color: inherit;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
In Firefox (and in Opera, although the placement is a little funky) the dropdown menus have an li:hover effect which changes the color of the one which is being hovered over. However, this is not working in Safari and I'm not entirely sure why. Does anyone have any ideas on what I can do to fix this? Thanks! Similar TutorialsI have an image gallery, that when the thumbnail is hovered over a larger image appears. This works fine in Firefox and IE but not in Safari. I have validated my code and css. The gallery is at http://www.briandobson.com.au/sthaust.html Code:
<tr>
<td valign="top">Boat Harbour, Goolwa<br />
75 x 35cm <br />
$720</td>
<td valign="top"> </td>
<td>
<a class="thumbnail" href="#"><img src="SthAust/thumbs/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="200" height="46" />
<span>
<img src="SthAust/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="775" height="248" />
</span>
</a>
</td>
</tr>
CSS is in the head and separate styles.css Code: .thumbnail img {
border: 1px solid white;
}
.thumbnail:hover {
background-color: transparent;
float: left;
}
.thumbnail:hover img {
border: 1px solid white;
}
.thumbnail span {
position: absolute;
background-color: white;
padding: 1px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
display: block;
}
.thumbnail span img {
border-width: 1px;
}
.thumbnail:hover span {
visibility: visible;
background: top;
left: 0px;
z-index: 50;
}
With thanks Angela Hi. I just discovered that my site has issues in Safari. Everything is fine in FF. Take a look in safari: bestplaceon.net. 1. Gallery thumbnails are all over the layout. 2.Right upper corner Google Plus is gone. 3.Text size is to big for Safari I have tried different ways to fix this problem but without success. Every help would be nice. Thank you! It seems like I must be getting close to what I want. This page displays almost perfectly in Firefox and IE8, as well as most browsers, but not in older IE and Safari. hangemhightaxidermy.com/construction_slides2.htm I would like to eliminate the brown space above the sliding photos, but can't figure out how to do it. After trying all sorts of padding and margin changes, I've decided we can live with it if necessary. The space entered the picture when I used a table to align two unordered lists in a row (one for the text bullets, one for the sliding photos). Before that I just had the sliding photo unordered list and there was no extra brown space. If you view the landscape tab you will see what it looks like with both lists and no table. yikes! My bigger problem is that this whole middle section is shifting far to the right in IE7, IE6, and Safari. I have looked into haslayout stuff, but honestly I'm an old self-taught web dev mom just getting back into design for a family member after being out for 10 years. There's a lot of new stuff!! Fun, but frustrating. Don't laugh too hard looking at my css. I have been using the W3 validators to help, but maybe an experienced person can see my issue. My brain/eyes are kind of glazed over at this point. Hello All, Just thought I'd pass along the following tip. I wanted to make the links on a web page stand out by changing the underlining and changing the text and the background color. However, by using the standard CSS coding of "a:hover {...}" it also changed the text and background color for any other <a> tags on the web page (i.e., <a name>, <a coord>, etc.). Using the attribute selector of a[href]:hover such as the following code works in Firefox and Safari; but it does not work in IE. Code: a[href]:hover {
color: #004040;
text-decoration: underline;
background: #C0FFFF;
}
However, the coding below works in IE, Safari and FF. Code: a:hover
{
color: #004040;
text-decoration: underline;
background: #C0FFFF;
}
a[name]:hover
{
text-decoration: inherit;
color: inherit;
background: inherit;
}
This coding works as the second style reverts the hovered <a name> tags to their default state. Thanks. Tom Cosmas I'm working on a site and am getting some margin errors in the header. It all is aligned in Chrome, FF, IE8, Safari on Windows, etc... but IE7 or earlier and Safari on mac is not aligning the margins properly. the part that is messed up is what is labeled as desc2 in the header section. It won't left (or even right) align. In the problem browsers, it sends the text off to the center of the header. it would make much more sense if I could show you, but apparently I'm not allowed to post links. anyone have any suggestions? Here is the code section i'm working with: <code>/***** Header ********************/ #header { margin: 0 auto 0; padding: 0; height: 42px; } #desc2 { color: #000000; font-size: 18px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; float: right; margin: 0 290px 10px 0; } #header .wrap { width: 840px; height: 10px; margin: 0 auto 0; } </code> I've having an issue with Firefox and my navbar. It's image based I can't find a way to exclude it from the hover state of a:hover { border-bottom:1px dashed #666;} When you hover over the links on the navbar, it shifts the page a bit and then back to normal when you leave the hover state. http://www.graphics-tech.com/concept There is the link for example. Thanks Hi all, I'm having some trouble with my code for a CSS nav bar. I'm all new to this so am not sure where to start. At present my nav bar is working fine. The only problem I am having is when one hovers over a new drop down item the parent doesn't change back to the non hovered state, it remains showing background image for the hover. Here is my test page... http://www.seattleunderground.co.uk/testmenu.html and here is the CSS code... Code: .menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 100% "Marker Felt", "Comic Sans", sans-serif;
font-size:15px;
font-weight:bold;
}
.menu ul{
background:#000000;
height:150px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
width:150px;
padding:0px;
}
.menu li a{
background:url("images/BkgButtonUp.png");
color:#ffffff;
display:block;
font-weight:normal;
line-height:48px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background:url("images/BkgButtonHov.png");
color:#000000;
text-decoration:none;
}
.menu li ul{
background:url("images/BkgButtonUp.png");
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:150;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url("images/BkgButtonUp.png");
display:block;
float:none;
margin:0px;
padding:0px;
width:150px;
}
.menu li:hover li a{
background:url("images/BkgButtonUp.png");
color:#ffffff;
}
.menu li ul a{
display:block;
height:48px;
font-size:15px;
font-style:"Marker Felt", "Comic Sans", sans-serif;
margin:0px;
padding:0px 10px 0px 15px;
text-align:center;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:url("images/BkgButtonHov.png");
border:0px;
color:#000000;
text-decoration:none;
}
.menu p{
clear:left;
}
Please can some kind soul check this out and tell me where I need to add what lines to have the parents change back to BKGButtonUp.png. I want each item to turn white as I go through them. Thanks v.much. P.s. Is it possible to use Marker Felt Wide as the font? At the mo the writing is quite small, and changing font size shifts everything. I used Marker Felt Wide on the main site, but created my nav menu using Flash at first. Flash is causing some issues however so I must change to CSS to fix things. www.seattleunderground.co.uk Best regards, Ash I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code:
<ul>
<li>About Us</li>
<ul>
<li><a href="#">Locations</a></li>
etc..etc..etc.. Here is the css: Code:
/*Begin Content of drop down menu*/
a {
outline:none;
}
* html div#dropdownmenu ul {
float: left;
}
* {
margin: 0;
padding: 0;
}
div#dropdownmenu {
float: left;
background-color: #C8C6C6;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#dropdownmenu ul li {
list-style-type: none;
float: left;
background-color: #000000;
position: relative;
}
div#dropdownmenu ul li:hover {
list-style-type: none;
background-color: #000000;
}
/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
display: none;
}
body div#dropdownmenu ul li:hover ul {
display: block;
}
div#dropdownmenu ul li ul {
margin: 0;
width: 13em;
position: absolute;
left: -1px;
}
div#dropdownmenu ul li ul li {
width: 100%;
background-color:#bdb35e;
color: #660000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px;
}
div#dropdownmenu ul li ul li:first-child {
border-top: 1px solid #000;
}
div#dropdownmenu ul li ul li:hover {
color: #FFFFFF;
background-color: #000000;
}
div#dropdownmenu ul li ul li a {
color: #660000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li ul li a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
display: block;
}
Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Hey, I came across this forum and hopefully somebody can help me. Here is my website: http://www.jmuelectricmotorcycle.tk When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container. Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page. Thanks. Here is my css: Code:
html {
font: normal 12px verdana, arial;
background-color: #000
}
body {
text-align: center
}
#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}
.hasSidebar #fw-container {
width: 1000px;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* --- Header --- */
#fw-head {
position: relative;
height: 196px;
background: #242424;
}
#fw-title {
font: bold 26px verdana;
letter-spacing: -1px;
position: absolute;
top: 20px;
left: 20px;
padding: 0;
margin: 0;
z-index: 10;
}
#fw-title a,
#fw-title a:visited,
#fw-title a:hover {
color: #fff;
}
.fw-logo {
width: 760px;
height: 196px;
position: absolute;
}
.hasSidebar .fw-logo {
width: 1000px;
}
/* --- Navigation --- */
#fw-mainnavwrap {
background: #242424;
padding: 10px 20px;
font-family: arial;
font-weight: normal;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#fw-mainnavwrap ul {
margin: 0;
padding: 0;
background: transparent;
list-style-type: none;
}
#fw-mainnavwrap li {
margin: 0px 15px 0px 0px;
display: inline;
}
/* --- Content --- */
#fw-bigcontain {
width: 760px;
float: left;
}
.fw-paragraph {
background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
border-bottom: 1px solid #000;
padding: 15px 20px 10px;
overflow: hidden;
}
.fw-title {
margin: 0px 0px 10px;
font: 18px verdana;
color: #fff;
}
.fw-text {
margin-bottom: 10px;
}
/* --- Sidebar stuff --- */
.hasSidebar #fw-sidebar {
width: 239px;
float: right;
font-size: 12px;
clear: right;
border-left: 1px solid #000;
}
#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
color: #fff;
text-decoration: none;
}
#fw-sidebar .fw-title {
font-size: 1.3em;
font-weight: normal;
}
/* --- Footer --- */
#fw-footer {
font: normal 10px verdana, sans-serif;
background: #242424;
margin: 0px;
padding: 11px 0px 1px;
color: #999;
clear: both;
width: 760px;
}
.fw-footertext {
background: #161616;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
margin: 0px;
padding: 6px 0px 6px 20px;
}
I have my webpage coded in HTML 4 and CSS, and everything is valid. It displays perfectly in all browsers, with one exception. In Safari 1.2, the menu background positioning is screwed up. It is supposed to display the b&w image first, then rollover to the color image. Instead, it is displaying the color image, and not repositioning the image so it displays correctly. It works fine in other browsers. any suggestions?? (PS) i'm judging the Safari support by BrowserCam.com, I don't actually have a Mac to test with. And yes, I do need it to work in Safari since this is a class website and we are provided with apple laptops to use. Hi, so far I have my website look the same on IE7, (maybe IE6), FireFox, and Opera. Now there is another browser called Safari for Mac! How can I test my website on Safari if I only have a PC? also should I worry on this!? or if my website works on FireFox then it means it will work on Safari as well? regards, Sim085 Hi there, I used to use tables to format my websites. I want to use css now for formatting my site but I have a small problem... When I am on my Windows XP computer with IE6 My Site looks just fine. But when I turn on my Mac and I open the page in Safari it ****s up a little bit. And of course I want my site viewable to al users with al browsers on any platform. This is some of the code I used: Code:
body {
background-color: #fff;
margin: 100px 0px 0px 0px;
}
.leftside {
width: 500px;
float: left;
border-right: 1px dashed #999;
padding: 0px 0px 0px 100px;
}
.rightside {
width: 150;
padding: 10px
}
this is the url of my testpage: www.headradio.net/template/index.php Just take a look how it looks in safari (or firefox) and how it looks in IE6 Thanks Daan I am using the <pre> tag in my application and it works for IE, Firefox, etc... except for Safari. This is what I am using in my css Code:
<STYLE TYPE="text/css">
#Pre tags with word wrapping for Mozilla, etc...
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
_white-space: pre;
font-family:verdana,arial,sans-serif; font-size:11px; color:#000000;
}
</style>
<!--[if gte IE 5]>
<style type="text/css">
pre {
word-wrap: break-word; /* IE 5.5+ */
white-space: normal; font-family:verdana,arial,sans-serif; font-size:11px; color:#000000;
}
</style>
<![endif]-->
This is how I am using the pre tag in my perl cgi application Code:
my $id = $FORM{'id'};
my $query = "Select title, news_story, begin_date, author from su_archives where news_id = '$id'";
$sth = $dbh->prepare($query);
$sth->execute();
my ($title, $news_story, $begin_date, $author) = $sth->fetchrow_array;
@begin = split(' ',$begin_date);
@date = split('-',$begin[0]);
$startDate = $date[1].'/'.$date[2].'/'.$date[0];
print "<br><b>$title</b><br><br>";
print "<p><i>$startDate</i><br></p>";
print "<PRE WIDTH=55px style=\"font-family: verdana, arial, helvetica, geneva, swiss, sans-serif;\">$news_story</pre>";
Any Suggestions on how this should be revised for Safari? Thanks in Advance I've got a body of text within a DIV tag. For some reason, if I roll my mouse over the text, the entire body of text changes color as if it were a link. I've double checked to see if there are any open HREF tags but there are none. Any ideas? Safari 1.3 on Mac OSX 10.3.9 if it matters. I've also tested on Netscape, Opera, Firefox and IE and all of these work fine. here be the code: Code: .mainBody {
color: #000;
font-family: helvetica, arial, "sans serif";
font-size: 12px;
text-align: justify;
padding-left: 35px;
padding-right: 35px;
}
.mainBody:link, .mainBody:visited {
color: #600;
text-decoration: underline;
}
.mainBody:active, .mainBody:hover {
color: #996600;
text-decoration: none;
}
.pageLinks {
color: black;
font-family: helvetica, arial;
font-size: 14px;
text-align: center;
}
.pageLinks:link, .pageLinks:visited {
color: #960;
text-decoration: underline;
font-size: 14px;
}
.pageLinks:active, .pageLinks:hover {
color: #960;
text-decoration: none;
font-size: 14px;
}
Hi there, currently, my site uses CSS and it works perfectly in FF and IE. But when it comes to Safari, it doesnt seem to pull the CSS up properly, if at all. (www.nsma.com/store) Just wondering if anyone can help/shed light on this. the css file is at store/stylesheet.css. Im offerin payment if u can help. paypal is best for me, let me know Many thanks in advance Hi all, Is there some trick to achieving a nice gradient background in Safari? I have a nice 150x400 red to dark red gradient JPG, and I'm using this code in the body tag of my CSS file: background: url(../images/page_back.jpg) repeat-x #670000; There's some really strange bug that only happens in Safari If you visit this, and click on any of the links in the left column or even the link to the page itself then the main content of the page get's shifted down. It doesn't make any sense, the document is exactly the same. Could someone enlighten me? Thank you! http://www.alexwait.com/Nortonville...ester/main.html When I load the page in Safari, Opportunities has a border around it that is messing up the whole bar. It stinks. What should I use with CSS to get that to go away? EDIT: Fixed title. Hello, Is there a hack for Safari 3. I found this hack : @media screen and (-webkit-min-device-pixel-ratio:0) { #safari { display: block; } } The problem with this hack is that he is valid for all verison of Safari. My need is a hack only for Safari 3. Thank you in advance for your help. |
|||||||