CSS - Imagemap Problem In Safari

Currently my site, http://www.kasiaozga.com , works correctly in Firefox on mac and Windows and in ie for mac and Windows. However, in Safari, the mid section of the navigation bar on the main page (index.html) appears incorrectly on the page. I would really appreciate it if any Safari users could take a look at the page and recommend a solution to enable the page to display correctly.

Thanks!
-Kasia

I have a table which has three rows of one cell each. I have specified the height of each cell by a class referring to an external stylesheet. There are two other classes which may be relevant, one in an internal stylesheet, and one referring to the same external stylesheet.

In Firefox and Internet Explorer 5.2 (the latest available for the Mac, as far as I know), these cells are displayed correctly, but in Safari, they cut off at the bottom of the text in the box, and are therefore not the correct height. Can anyone help me correct this, please?

This is the code:

Code:

<STYLE TYPE="text/css" MEDIA=screen>
<!-- .rbc { color: white; background-color: maroon; } -->
</STYLE>
<tr class="rb2">
	<td class="rbc">
		<div class="squash">some text<br /></div>
		<div class="squash">some more text<br /></div>
		<div class="squash">yet more text<br /></div>
		<div class="squash">guess what? some more text!<br /></div>
	</td>
</tr>

This is the CSS:

Code:

.rb2 { 
height: 133px; 
vertical-align: top; 
}

.squash { 
line-height: 85%; 
}

There are other differences, all with Internet Explorer not behaving properly, but I'll do one question at a time, or it'll get confusing!

Thanks in advance.

Hey everyone, I have a site I'm working on for a charity hosted he
apoctrack . com/craftsforacause

I'm using Dreamweaver and the included Spry framework to render the tabs, and everything seems to be working fine in Firefox, but the background won't render correctly in Safari.

Help!?

The stylesheet is he url above with /index.css

An older version of the site worked fine in both Safari and Firefox, and I've compared the code but found nothing...
The old site is he url above /index_classic.html and /index_classic.css

Any help would be appreciated! Thx in advance...

Well... sorry about the poorly formatted url but the anti-spam rules seem to mean I must post 5 useless posts in order to post anything of substance (with a url). So yeah.

I did a diff on the stylesheets but that's hard to post here, so I can try if it'd be useful. Prolly easier to run it urself it it'd be helpful. Nothing useful came up when I tried it. Same for the html pages themselves.

Hi guys..

I have a script that spits out a series of divs..
The first 'wrapper' Div is position:relative, and I have placed other divs inside it, positioning them using position: absolute; left: 20px, etc...
It renders perfectly on all my tested browsers, and yet when I make the script repeat, so that each div-set is loaded from the database, they just stack on top of each other on the page, rather than underneath each other..
All I am really doing is stacking divs, I thought that whatever went on in the 'child' divs didnt affect the parents ??
Like so:
Code:

<div style="position: relative;">
     <div style="position: absolute; left: 20px; top: 40px;">
      some content
     </div>
     <div style="position: absolute; left: 150px; top: 40px;">
      other content
     </div>
</div>

Ive tried setting things like display: block;, clear: both, etc, but the sets of divs just 'pile' on top of each other...

Any ideas :/

Many thanks,

Mike.

hi all,

having a problem with browser compatibility here... 3 lousy pixels makes the difference between one of my divs being knocked to another row in safari, vs. a perfect lineup in IE.

have a look: http://www.offsitedbs.com

the column at the bottom entitled "security" is a big div that gets knocked to another row in safari if i try to have it line up perfectly in IE (pc)... BUT, if i knock the width back a few pixels to line it up in safari, it's not flush in IE.

code for the divs:

<div class='bottomDiv'>
<div class='bottomTitle'><img src="IMAGES/arrow.gif">Remote Services</div>
<p class='bottomDesc'>Offsite Database Administration and Offsite Server Management.</p>
<p class='bottomText'>At Offsite DBA Services we focus ... any potential problem.</p>
</div>
<div class="bottomDiv">
<div class='bottomTitle'><img src="IMAGES/arrow.gif">Onsite Services</div>
<p class='bottomDesc'>OffSite offers a free comprehensive report on the state of your database at no extra cost to your company.</p>
<p class='bottomText'>We take ... its optimal level.<br></p>
</div>
<div class="bottomDiv">
<div class='bottomTitle'><img src="IMAGES/arrow.gif">Security</div>
<p class='bottomDesc'>Offsite DBA Services uses the latest SSL technologies to manage your database through secure connections and proven technologies.</p>
<p class='bottomText'>Network technologies ... from snoops.<br></p>
</div>

and the css for the 'bottomdiv's:

.bottomDiv {
background-color: #F0F0F0;
height: 262px;
width: 193px;
float: left;
border-left: solid 1px #FFF;
border-bottom: solid 1px #FFF;
background-image:url(../IMAGES/bottomBG.gif);
background-repeat:repeat-x;
background-position:bottom;
border-top: solid 1px #FFF;
padding: 0px;
vertical-align: top;
}

any & all help is very appreciated!

thanks,

nunzio

I am trying to get a 2 column layout to work across all browsers and I ran into a strange problem with center in Safari (or what Safari looks like according to the screenshot at http://www.snugtech.com/safaritest/)

The page aligns correctly in my version of IE and Firefox.

What I want to happen is for the table to center in the content div "image_block." In Safari the table is centering inside the container div "container" and sometimes behind the float right div "thumb_block."

you can see it live at link

here is the code
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>images</title>
<BASE href="http://jasonhalac.com/picture_gallery/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/imagerollover.css" rel="stylesheet" type="text/css">
<link href="images.css" rel="stylesheet" type="text/css">



</head>
<body">

<div id="top_image">
</div>

<div align="left" id="list_tabs">header content</div>

<div id="container">

<div id="thumb_block">
thumb block float right fixed width
thumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width</div>

<div id="image_block">
  <p>image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block</p>
  <table width="200" border="1" align="center">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>test</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <p>
  image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage block</p>
</div>
</div>
<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>
</body>
</html>

and css
Code:

#container{
	margin: 0px;
	border: 0px;
	height: 600px;
	width: 915px;
}
#thumb_block{
	width: 310px;
	margin: 0px;
	padding: 0px;
	float: right;
	
}
#image_block{
	margin: 0px;
	padding: 15px 0px 0px 0px;	
}

So, here's what I've got:

http://www.anthonycarboni.com

The header is supposed to appear 50 pixels high, flush with the top (no margins), with the header text middle aligned inside of it. This is working in IE 6 and 7, but is not working well in FF (mac/pc) or in Safari.

Here is all code that pertains to that section. It is sure to be woefully poor, as I'm just getting into CSS:

Code:

body {
    color: #FFFFFF;
	background-color: #000000;
    font-family: 'ArialMT', 'Arial', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 19px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
    min-width: 800px;
}

.main{
		background-color: #202020;
		width: 800px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
}

.header{
		height: 50px;
		background-image: url('images/header.jpg');
		background-repeat: repeat;
}

p.headline {
		font-size: 32px;
		font-weight: bold;
		text-transform: uppercase;
		text-align: center;
		letter-spacing: 0.8em;
		vertical-align: middle;
}

And there you have it. I'm tearing my hair out over what I'm sure is some small thing that anyone with experience would notice immediately. Any help would be greatly appreciated.

Thanks!

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

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

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 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,

I've made a nav menu using nested ULs, Javascript and CSS.

Ive made javascript to open and close submenus by changing the CSS display attribute of the submenu between the values 'block' and 'none'

Everything works fine until I tested the system in Safari. This is quite a vital part of the site so I could do with some help on getting what seems to be a fine, valid bit of code / functionality ro work in the Mac browser.

any ideas?

cheers,

NK

Apologies for posting this in 2 thread - im not sure if this is a javascript or a CSS problem...

my html is:
Code:

    <ul class="nav_list"><li><a id="Accessories" href="/store/page3.asp?sup_type=1&t=3&sub_type=3">Accessories</a></li>
        <li><a id="Books" href="/store/page3.asp?sup_type=1&t=2&sub_type=2">Books</a></li>
        <li><a id="CD/Vinyl" href="#" onclick="toggle('CD/Vinyl','m_cd/vinyl'); return false;">CD/Vinyl</a>
            <ul class="sub_nav_list" id="m_cd/vinyl"><li><a href="/store/page3.asp?sup_type=1&t=4&sub_type=15">CD Albums</a></li>
                <li><a href="/store/page3.asp?sup_type=1&t=4&sub_type=9">CD Singles</a></li>
                <li><a href="/store/page3.asp?sup_type=1&t=4&sub_type=10">Vinyl Albums</a></li>
                <li><a href="/store/page3.asp?sup_type=1&t=4&sub_type=16">Vinyl Singles</a></li></ul>
        </li>
        <li><a id="DVD/Video" href="#" onclick="toggle('DVD/Video','m_dvd/video'); return false;">DVD/Video</a>
            <ul class="sub_nav_list" id="m_dvd/video"><li><a href="/store/page3.asp?sup_type=1&t=5&sub_type=17">DVD</a></li>
            <li><a href="/store/page3.asp?sup_type=1&t=5&sub_type=18">VHS</a></li></ul>
        </li>
        <li><a id="Downloads" href="#" onclick="toggle('Downloads','m_downloads'); return false;">Downloads</a>
            <ul class="sub_nav_list" id="m_downloads"><li><a href="/store/page3.asp?sup_type=1&t=6&sub_type=6">Digital Albums</a></li>
                <li><a href="/store/page3.asp?sup_type=1&t=6&sub_type=12">Digital Tracks</a></li>
                <li><a href="/store/page3.asp?sup_type=1&t=6&sub_type=24">Digital Videos</a></li></ul>
        </li>
        <li><a id="Memorabilia" href="/store/page3.asp?sup_type=1&t=7&sub_type=7">Memorabilia</a></li>
        <li><a id="Wearables" href="#" onclick="toggle('Wearables','m_wearables'); return false;">Wearables</a>
            <ul class="sub_nav_list" id="m_wearables">
                
                <li><a href="/store/page3.asp?sup_type=1&t=8&sub_type=20">Tour Favourites</a></li>
                <li><a href="/store/page3.asp?sup_type=1&t=8&sub_type=13">Greatest Hits</a></li></ul>
        </li></ul>

my CSS is:
Code:

/*

NAVIGATION MENU CODE

*/


#nav_wrapper
{
	padding:0;
	margin:0;
	/*line-height:0.5em;*/
	border-top:solid 1px #333;
}

#nav_wrapper a
{
	color:#fff;
	font-weight:normal;
	display:block;
	margin:0;
	padding:3px 6px;
	background:url(/images/list_arrow.gif) no-repeat right top  transparent;
}

.a_alt
{
	color:#fff;
	font-weight:normal;
	display:block;
	margin:0;
	padding:3px 6px;
	background:url(/images/list_arrow_down.gif) no-repeat right top  transparent;
}

#nav_wrapper a:hover
{
	text-decoration:underline;
	background-color:#BF8F21;
}

.nav_list, .nav_list_alt, .sub_nav_list
{
	list-style-type:none;
	padding:0;
	margin:0;
	
	border-bottom:solid 1px #333;
	border-right:solid 1px #333;
}

#nav_wrapper li
{
	width:100%;
	margin:0;
	padding:0;
	display:block;
}

.nav_list
{
	background-color:#818181;
}

.nav_list_alt
{
	background-color:#A0A0A0;	
}

.sub_nav_list
{
	display:none;
	background-color:#C49B1F;
	border:none;
	
}

my javascript is:
Code:

    function toggle(menuLink, menu){
        //alert(menu + '\n' + menuLink); 
        thisMenu = document.getElementById(menu);
        thisMenuLink = document.getElementById(menuLink);

        if (menuLink!=null && menuLink!=''){            
            
            if(menuLink!=activeMenuLink){
            // replace active submenu, make this one visible
            
                
                // sort out header colour
                thisMenuLink.style.backgroundColor ='#BF8F21';
                
                //sort out the menu   
                if(menu!=''){
                    thisMenu.style.display='block';
                    thisMenuLink.style.backgroundImage = 'url(/images/list_arrow_down.gif)';
                    
                    if(activeMenu!=''){
                        document.getElementById(activeMenu).style.display='none';
                    }
                    activeMenu = menu;
                }
                            
                //hide and replace active
                if(activeMenuLink!=''){
                    document.getElementById(activeMenuLink).style.backgroundColor ='#818181';
                    document.getElementById(activeMenuLink).style.backgroundImage='url(/images/list_arrow.gif)';
                }
                activeMenuLink = menuLink;
                
                        
            } else {
            // hide this submenu, make active vars = ''
            
                // sort out header colour
                thisMenuLink.style.backgroundColor ='#818181';           
            
                //sort out the menu
                if(menu!=''){
                    thisMenu.style.display='none';
                    thisMenuLink.style.backgroundImage = 'url(/images/list_arrow.gif)';
                    
                    //document.getElementById(activeMenu).style.display='none';
                    activeMenu = '';
                }
            
                activeMenuLink = '';
            
            }

        }
    }

My site displays correctly in Firefox and IE (which was hassle enough) but when I view it in Safari on my Macbook, the last nav menu item is pushed down below the rest of the menu instead of in line with the rest of the menu. I just got my macbook, and I'm not very in touch with al of Safari's quirks yet, but I was under the impression that it was more reliable than FF or IE. Does anyone have any idea what's causing this, and how I can fix it?

http://www.wwu.edu/~swing

Hey--

Working on a new site, I've got 99.9% of it finished and working, but a menu is displaying one pixel higher in Safari (Mac and PC) than any other browser.

www.inkyfever.com/customer/animotion/

The menu is in the orange bar at the top. It's created with an unordered list. You can view source to check the code.

HELP!

EDIT: Okay, I've got it to mostly work by changing some padding, but hovering over any other orange links, the hover color doesn't quite fill the space vertially. ONE pixel short at the bottom. Ideas?

:grimey

I'm using the "first-letter" feature with CSS which shows up fine in IE, but is totally off in Mac's Safari. Any suggestions on a workaround? The following is what I have currently:

In main.css file:
p.initial:first-letter { font-size: 300%; float: left}

In actual page:
<p class="initial">Welcome!