Safari Browser CSS Issues and Solutions
Topics
ListInventory.com It looks all "squished" on the iPad. Been tasked with finding out why. Worked fine until adding the featured product block on the right yesterday. What did I screw up? It doesn't do this in Safari for Windows. I have a site that I have created in WordPress using a pre-designed theme that I heavily customized. http://www.newlivingwaygreenville.org/blog/ The site looks great in Firefox 3.6, IE 7 and IE8 but one image on the home page will not align to the right in Safari 4.x. The image of the pastors floats to the left and directly over the Flash slideshow in Safari 4 while in the proper place in the others. The image is using inline styles to overcome the limitations of this particular WordPress theme. Code: style="position:absolute; border:0;margin-top: -4px;*margin-top:-10px;" Any ideas why this doesn't work right in Safari and what I can do to fix it? Thanks! ks Hi, I am trying to use rounded corners for the top left and right of a div in safari, but i cannot work it out. This is my code: PHP Code: -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; -khtml-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; the corners are fine in other browsers, but they appear square in safari. If I change this line to: -webkit-border-radius: 5px; then the corners are rounded. But how can I get just the top left and top right corners to be rounded? Any ideas would be great. Thanks I'm building a "Coming Soon" page in Dreamweaver. It looks the way I want it to when previewed in Firefox (version 3.6.13), but not in Safari (version 4.1.2). Specifically, my line breaks and the margins on my image are ignored. Here's my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Quest Sports Medicine</title> <link href="file://Macintosh HD/Volumes/My GS Drive/global.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .center-wrap p { font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #000; font-size: 30px; line-height: 35px; padding: 0px; float: left; margin-top: 15px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .center-wrap h2 { font-family: Arial, Helvetica, sans-serif; font-size: 66px; font-weight: bold; color: #942610; text-align: center; line-height: 64px; margin-top: 83px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .center-wrap img { margin-top: 47px; margin-right: 0px; margin-bottom: 0px; margin-left: 248px; } } --> </style> </head> <body> <div class="all-wrap"> <div class="center-wrap"> <h2>NEW WEBSITE<br /> COMING SOON</br></h2> <p>For information on the products we sell, how to place an order or any questions regarding recent orders, please call us at (717)-687-7178<br /> or toll-free at 1-800-387-1067. You can also reach us at our new e-mail address, questsports@comcast.net</br></p> <img src="images/qsm-logo.gif" width="436" height="260" alt="Quest Sports Medicine logo" /> </img></div> </div> </body> </html> Any thoughts on what I need to change? Thank you. Hi All, When viewed in Firefox on a Mac, the drop down menu works perfectly. I am having a problem with my navigation when viewed in Safari on a Mac. I am not sure about how things function on a PC. When viewed in Safari, the drop down menu appears unaligned with the buttons it corresponds too. For example, on the following page http://www.oharenoise.org/new/mission.htm when you mouseover "About Us" the corresponding menu shows up under "Home." The other problem (only in Safari, as far as I know) I am having occurs on the homepage, viewed here . When you mouseover "About Us", "Newsroom", "Residential", "School" or "Technical" the drop-down menu appears in front of the Flash slideshow perfectly, until the slide changes pictures and then the menu falls behind the slide. Any idea why these issues are occurring? Thanks. I am having trouble trying to work out why on an iphone my css file never gets used. when a user arrives at my site with a screen size <= 1024 i apply a different style sheet using this function - http://www.kelvinluck.com/2006/05/s...ts-with-jquery/. i know this isnt a way of doing it for an iphone as you use user.agent but i am doing it for smaller screens at the same time. Code: <link href="index.css" rel="stylesheet" title="screen" type="text/css" media="screen" /> <link href="css/mobile.css" title="mobile" rel="alternate stylesheet" type="text/css" /> that is how i order my stylesheets in my html. on opera on the iphone the css works fine but its just safari. on android the site works fine. any help would be really grateful thanks in advance Hi All, I was wondering if someone could help and take a look at this. I have a site that is not displaying correctly in chrome and also Safari (at least on the iPhone). The rest of the page is fine, but these images appear stretched vertically (the horizontal width appears OK). The CSS for the element is: CSS Code: Original - CSS Code .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;} .keybox img{float:left;width:35%;padding:0px;margin:0px;} .keybox div{float:right;width:60%;padding:1%;} .keybox div ul{text-align:left;margin:0px;padding:0px;} .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;} The html for the element is: html Code: Original - html Code <div class='keybox'> <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> <div> <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares </a></h2> <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> <ul> <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li> <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li> <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li> </ul> </div> </div> <div class='keybox'> <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> <div> <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares </a></h2> <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> <ul> <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li> <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li> <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li> </ul> </div> </div> The image stretches - it works fine on firefox and IE8. The web address is www.wellandpower.net There are 3 of these html elements on the left hand side of the page. TIA Regards Charlie Hi All, When viewed in Firefox on a Mac, the drop down menu works perfectly. I am having a problem with my navigation when viewed in Safari on a Mac. I am not sure about how things function on a PC. When viewed in Safari, the drop down menu appears unaligned with the buttons it corresponds to. For example, on the following page http://www.oharenoise.org/new/mission.htm when you mouseover "About Us" the corresponding menu shows up under "Home." The other problem (only in Safari, as far as I know) I am having occurs on the homepage, viewed here. When you mouseover "About Us", "Newsroom", "Residential", "School" or "Technical" the drop-down menu appears in front of the Flash slideshow perfectly, until the slide changes pictures and then the menu falls behind the slide. Any idea why either of these issues are occurring? Thanks. When you go near a link the cursor flickers and then goes back to default, cant get it to show normally for any link. Works on my windows PC but not on my Mac Even tried a{ cursor:pointer; } but the same thing happens... http://pd-scammell.co.uk/site/ Any ideas? Thanks. My website is http://www.orchard-homes.co.uk/developments/ and ive noticed in some versions of safari (on a mac) a big white block covers the whole of the navigation, it only affects the 4 pages under the "Developments => Current =>" section and hovering over the word "developments" makes it disappear again. Its driving me crazy how it works in every other browser fine, anyone have any ideas? Thanks! Hi Guys I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website. I am using the latest mac OS and latest versions of all browsers. The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this. Here is the code for the form... <form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" > <ul> <li> <label for="name">Name:</label> <input name="name" id="name" type="text" class="required" /> </li> <li> <label for="email">E-mail:</label> <input name="email" id="email" type="text" class="required email" /> </il> <li> <label for="subject">Subject:</label> <input name="subject" id="subject" type="text" class="required" /> </li> <li> <label for="detail">Message:</label> <textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea> </li> <li> <input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" /> </li></ul> </form> Here is the css for that page... #content_about { color: #666666; } /*************************************************** CONTACT ***************************************************/ #form { margin: 0px; position: relative; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 15px; float: left; } #form div { width: 510px; position: relative; float: left; padding-bottom: 9px; } #form div label { width: 400px; } #form div label.error { color: #a80000; position: absolute; top: 0px; right: 0px; text-align: right; font-size: 11px; } #form div.message_sent { background-color: #31B8DA; width: 890px; float: left; padding: 10px; margin-bottom: 15px; color: #FFFFFF; } #form input { width: 499px; padding: 8px; font-size: 13px; color: #999999; background-color: #FFFFFF; float: right; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #C3C3C3; border-right-color: #E8E8E8; border-bottom-color: #E8E8E8; border-left-color: #C3C3C3; } #form input:focus, #form textarea:focus { background-color: #F4F4F4; } #form textarea { width: 500px; padding: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-color: #FFFFFF; color: #aaaaaa; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #C3C3C3; border-right-color: #E8E8E8; border-bottom-color: #E8E8E8; border-left-color: #C3C3C3; float: right; margin: 0px; } #form .submitBtn { background-color: #31b8da; width: 95px; color: #FFFFFF; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding: 0px; font-size: 16px; height: 35px; display: block; margin-top: 20px; } #form .submitBtn:hover { background-color: #1F93B4; color: #FFFFFF; } #form .submitBtn:focus { background-color: #4FC1E1; } #form strong { font-size: 24px; color: #FFFFFF; font-weight: normal; padding-top: 0px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #6a6a6a; display: block; } #form .font-11 { font-size: 11px; color: #CCCCCC; display: inline; } #content_about #form li label { margin-top: 0px; margin-right: 35px; margin-bottom: 0px; margin-left: 0px; line-height: 30px; } #content_about #form li { padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 0px; } Any help would be greatly appreciated. Regards Jay Hello, I am trying to have make a 'facebook' style toolbar fixed to the bottom of the screen. This works on desktop browsers except Mobile Safari on the iPhone (due to the 'viewport' way of rendering the page). Is their a workaround for this? I have seen doctyper's method but can't get it to work. Thanks 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%; } hello. i'm using a CSS tutorial and DREAMWEAVER to build a website. i find that the site is interpreted the way i would like it in either Firefox or Safari...but not in IE. When links are hovered over while using IE, the page distorts. has anyone experienced this type of problem before? thank you in advance for your time and assistance! i did post several explanatory screenshots to illustrate the problem. replace each "@" with a period. mea culpa. www@wwpea@net/screenshots@htm 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. 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> Hello. I am building a site (perelachaisecemetery dot com)for a friend of my bosses. And I'm having problems with Safari on Mac Zoom Feature. When I zoom out my Nav Menu at the top (as well as my copyright at the bottom) get broken up into two lines. A windows safari user said this is not happening in his browser. It does not happen in Firefox. But it is happening in Chrome. Can anyone recommend anything? Is it something I can code not to happen or is it a individual browser preference thing. Please help. Thanks, Colin You'll have to bear with me on the CSS, the file is a mess. I couldn't get it to do what I want, so I had to copy the file from someplace else, so there's alot of code commented out. The HTML is much cleaner though! The issue is in the image above is that the 'Contact' and 'Back to Projects' images are too high in Safari. In IE and Firefox they're placed correctly. All the other images on the rest of the site line up fine, as you can see with the JW logo, Resume link, and even the bar across the screen All the images are in their own < li > (I think it's weird myself, but it works). And the placement is done in the CSS. Code: <li id="ResumeHigh"><a href="resume.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','images/resume_rollover.gif',1)"><img src="images/resume.gif" name="resume" border="0" id="about" /></a></li> <li id="ContactHigh"><a href="contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_rollover.gif',1)"><img src="images/contact.gif" name="contact2" border="0" id="contact2" /></a></li> <li id="BackHigh"><a href="index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Back','','images/back_to_proj_rollover.gif',1)"><img src="images/back_to_proj.gif" name="Back" width="141" height="9" border="0" id="Back" /></a></li> And the CSS Alignment: Code: #ResumeHigh {left:550px; top: 62px; width: 141px; height: 11px;} #ContactHigh {left:550px; top: 78px; width: 141px; height: 11px;} #BackHigh {left: 550px; top: 101px; width:141px; height:9px;} Full Pages: http://www.jerrywatersarchitect.com/sample/contact.asp http://www.jerrywatersarchitect.com/sample/jw2.css Any ideas whats causing the 'Contact' and 'Back to Projects' to be a few pixels too high? I appreciate any help you can provide. 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 Hello. I just created my first web layout using DWCS4 with CSS. On desktop browsers, it view great. However, when I view it on my iphone, the divs are not connected and a line is shown. The line goes away when I pinch in to view but reappears when I zoom back out. How can I fix this? My header div and content div contains an image and are set to no borders. I'm very aware of all sorts of IE bugs, but I've never heard of a safari bug with the display:block property within an inline anchor. Does anyone have a solution for this bug? view this page with the latest Safari: animalcrossingbay.net/cmps_index.php hello all, i'am at complete loss for now. my site promodivin uses mootools to enrich it by adding slides and accordeon effects. Works great with IE and FF but using Safari it displays huge blank sections. My text's gone. It's even clearer on the 'Services' tab where I can see some narrow sections. To make the effects work, you may click on the headers and it should collapse the appropriate section. I believe the issue stems from the ids used only for the purpose of mootools. Here's an html exerpt from the frontpage: Code: <div id="h_toggle1"><a href="#"> <h1>Communication</h1> </a></div> <div id="horizontal_slide1"> <ul class="bullet_point"> ... and the titre_toggle.css describing the elements used. Code: h3.section { margin-top: 1em; } #vertical_slide1, #horizontal_slide1, #vertical_slide2, #horizontal_slide2, #vertical_slide3, #horizontal_slide3 { background: #E6EAEF; margin-top: 0; padding: 10px 10px 0 10px; border: 1px solid #D5D8DD; } #h_toggle1, #h_toggle3, #h_toggle2 { } div.marginbottom { /* Since the Fx.Slide element resets margins, we set a margin on the above element */ margin-bottom: 10px; } I'll appreciate any insight. safari 4.0.3 --> KO IE 6+ --> OK FF 3.5 --> OK mootools 1.2.4 joomla 1.5.15 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. Was hoping someone could help me with a problem I'm having with margins on this site robertehowarddirectory.com/viewcat.php?category=Art In safari, the margins between each of the "featured" listings is 30px when it should be 8 (4 on the top of each listing, and 4 on the bottom). This jacks up the layout of the site, pushing the featured listings too low, as you can see. IN IE 7, 8 and Firefox, I have no problems, and the site displays fine. Would appreciate any help on this issue, as I've been trying to solve the problem but have not found a solution. Thank you. 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? Hello to all, I have a problem of compatibility when using Safari (V3). I have a strange interface and i can't identify the problem. When I refresh my page,I don't have the same css !!!! The same interface is testing wit hFirefox and IE and it's ok. Can you help me please. Thank you in advance for your time. Here's the CSS excerpt: div#uhgWrapper { width: 320px; height: 268px; } div#uhgWrapper[footerIncluded="false"] { height: 310px; } body[orient="landscape"] div#uhgWrapper { width: 50px; height: 50px; } body[orient="landscape"] div#uhgWrapper[footerIncluded="false"] { height: 50px; } this works great for Safari on the desktop but, the last two elements aren't recognized on Safari on the iPhone. Any suggestions? TIA Hi all, I was wondering if someone could help me out. I have two divs on top of each other: 1 is a menu, 1 is a grid. In IE, the grid is displayed directly below the menu. However, when I view the page in Safari or Firefox, the grid is displayed below and to the right of the menu. See screenshots I have also included my HTML and CSS below. Thanks for your help! Code: /* Submenu */ .submenu{height:32px;background:url(../images/submenu_bg.jpg);border-top:1px solid #ccc; width:105%; } .submenu a:active,.submenu a:focus{text-decoration:underline;} .submenu ul{float:left;z-index:19; } .submenu ul li ul{position:absolute;margin-top:29px;z-index:98;left:-999em;background-color:#f5f5f5;display:block;width:150px;} .submenu li{float:left;list-style:none;background:url(../images/submenu_divider.gif) no-repeat right top;z-index:20;} .submenu li a{color:#000000;text-decoration:none;font-size:10px;padding:7px 15px 7px 15px;display:block;font-weight:bold;font-family:Geneva, Arial, Helvetica, sans-serif;} .submenu li a:hover{background:#f8f8f8 url(../images/submenu_divider.gif) no-repeat right top;} .submenu li li a{color:#000000;text-decoration:underline;background:#F8F8F8;border-bottom:1px solid #CCC;border-right:0;display:block;width:120px;text-decoration:none;font-weight:normal;background-image:none;} .submenu li li a:hover{color:#333;background-color:#f3f3f3;display:block;width:120px;border-bottom:1px solid #CCC;border-right:0;background-image:none;} .submenu .active-menu ul{border-left:1px solid #CCC;border-right:1px solid #CCC;} .submenu .active-menu{color:#FFF;text-decoration:none;background:#f5f5f5 url(../images/submenu_divider.gif) no-repeat top right;} .submenu .active-menu ul li a:hover{text-decoration:underline;border-right:0;background:#fff url(../images/submenu-li-li-hover.gif) repeat-x top;color:#535353;} .grid_maindiv { position: relative; border: 1px solid #cbc7b8; overflow: hidden; width: 105%; font-family: verdana,arial; } .grid_table { background-color: white; width: 100%; font-size: 10pt; } .grid_table_header { background-image: url('../media/header.png'); height: 27px; color: white; font-weight: bold; font-size: 14pt; } .grid_table_resize_row { background-image: url('../media/resize.gif'); width: 2px; margin: 0px; } .grid_table_header_row { background-color: #EBEADB; font-weight: bold; cursor:pointer; padding-left: 5px; padding-bottom: 0px; position: relative; height: 18px; overflow: hidden; font-size: 10px; cursor:pointer; border-bottom:2px solid #cbc7b8; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white; margin-bottom: 0px; background-image: url('../media/column.png'); } .grid_table_header_row_hover { font-weight: bold; cursor:pointer; padding-left: 5px; padding-bottom: 0px; position: relative; height: 18px; overflow: hidden; font-size: 10px; cursor:pointer; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white; margin-bottom: 0px; border-bottom:2px solid #f9b119; background-color: #FAF9F4; background-image: url('../media/column_on.png'); } .grid_column_resize { cursor: e-resize; width: 2px; background-color: #cbc7b8; border-bottom:2px solid #cbc7b8; padding-bottom: 0px; margin-bottom: 0px; } .grid_table_row_uneven { background-color: #EBEADB; } .grid_footer { background-color: #f9f9f9; height: 20px; color: #616161; } .grid_table_cell { padding-left: 2px; position: relative; border-bottom: 1px solid lightgray; height: 28px; overflow: hidden; margin: 0px; font-size: 10px; } Code: <body onmouseup="SetMouseDown(false);" topmargin="2"> <TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR> <TD WIDTH="50%"> <FONT SIZE="-1" FACE="Arial"><A HREF="http://www.itsect.com/" CLASS="topnav">Home</A> <B> <A CLASS="topnav">text</A></B> <A HREF="https://secure.itsect.com/members/?_page=account:account" CLASS="topnav">Account</A> <A HREF="http://www.itsect.com/support/" CLASS="topnav">Help</A></FONT></TD> <TD WIDTH="50%"> <P ALIGN=RIGHT><B><FONT SIZE="-1" FACE="Arial"><a CLASS="topnav">john</a></FONT></B><FONT SIZE="-1" FACE="Arial"> | <A HREF="https://secure.itsect.com/members/?_page=account:account" CLASS="topnav">My Account</A> | <A HREF="http://www.itsect.com/members/?_page=account:account&_logout=Y" CLASS="topnav">Logout</A></FONT></TD> </TR> </TABLE> <HR SIZE=1 COLOR="#000000" WIDTH="100%"> <a href="view.php"><img src="images/ss_logo.gif" border="0" height="39" width="243"></a> <br> <div class="submenu"> <ul> <li><a href="view.php">Show All</a> </li> <li><a href="view.php?trash=1">View Trash</a> </li> <li><a href="http://www.itsect.com/engine/filterpop.php" title="SiteSnipe - Create and View Filters" onclick="return GB_show('SiteSnipe - Create and View Filters', this.href,500,600)">Create/View Filters</a> </li> <li><a href="http://www.itsect.com/engine/reportspop.php" title="SiteSnipe - Schedule Reports" onclick="return GB_show('SiteSnipe - Schedule Reports', this.href,500,600)">Schedule Reports</a> </li> <li><a style="color: #000080; text-decoration: none;">Viewing: All Listings</a></li> <form action="view.php" method="post"> <li><a>Quick Search: <input type="text" name="srch" value="" CLASS="frm2"> <input type="image" src="images/go.gif" name="go" border="0" ALIGN="MIDDLE"></a> </li> </form> </ul> </div> <div class='grid_maindiv' id="grid" width=100%> GRID </div> I have some hidden divs that on click they slide down under the link that was clicked. It works fine in firefox and ie, but in safari if you click it the first time it looks good, but when you click and close it and open it again the hidden div is off to the right i cant figure out why this is happening only in safari. this is the good one http://brendanperkinsDOTcom/ryangood.jpg this is the bad one http://brendanperkins.DOT/pic3.jpg this is the css im using Code: /* Individual page divs (also in left column) */ .hidden-divs { position: relative; display: none; width: 387px; height: auto; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; font-size: 11px; line-height: 1.5em; padding-top: 10px; padding-bottom: 10px; } .hidden-divs a:link, .hidden-divs a:visited { color: #4d4d4d; font-size: 14px; } and this is my html for the nav and hidden divs Code: <div id="main-nav"> <ul id="nav-higher" class="nav nav-higher"> <!-- HOME --> <li><a class="trigger" rel="#header-6" onclick="return toggle_div('home-video', 'ryan_1');" href="#">Home</a></li> <li><div id="home-video" class="hidden-divs"> <a href="readmore_home.htm" class="ceebox" rel="800 100 ajax">Why you are here</a> </div> </li> <!-- MEET RYAN --> <li><a class="trigger" rel="#header-5" onclick="return toggle_div('meet-ryan', 'ryan_2'); " href="#">Meet Ryan</a></li> <li><div id="meet-ryan" class="hidden-divs"> <a href="readmore_meetryan.htm" class="ceebox" rel="800 220 ajax">BIO</a> </div> </li><!-- END OF MEET RYAN --> <!-- PROGRAMS --> <li><a class="trigger" rel="#header-4" onclick="return toggle_div('programs', 'ryan_3'); " href="#">Programs</a></li> <li><div id="programs" class="hidden-divs"> <a href="readmore_programs.htm" class="ceebox" rel="800 400 ajax">Make Your Own Lunch™</a> </div> </li><!-- END OF PROGRAMS --> <!-- BLOG --> <li><a rel="external" href="http://makeyourownlunch.com/">Blog</a><br /></li><!-- END OF BLOG --> <!-- REVIEWS --> <li><a class="trigger" rel="#header-3" onclick="return toggle_div('reviews', 'ryan_4');" href="#">Reviews</a></li> <li><div id="reviews" class="hidden-divs"> <div class="blurbwrap" id="review1"> <p class="blurb">“UH-MA-ZING!!! I laughed so hard that I think I sprouted a six-pack!”</p> </div><!-- blurbwrap --> <img class="review1-pic" src="images/Molly.jpg" alt="Review" /> <p class="img_id"><strong>Molly Somerville</strong><br />Idaho Business Professionals of America</p> <div class="blurbwrap" id="review2"> <p class="blurb">“...In a nutshell Ryan blew those kids away”</p> </div><!-- blurbwrap --> <img class="review1-pic" src="images/mell.jpg" alt="Review" /> <p class="img_id"><strong>Misty Elliott</strong><br />Michigan Association of Student Councils and Honor Societies</p> <p><a onclick="return toggle_div2('review_section2');" href="#">more..</a></p> <div id="review_section2" style="display: none;"> <div class="blurbwrap" id="review3"> <p class="blurb">“I cannot begin to tell you how much the students, the parents and the staff volunteers all LOVED Ryan and his message. It has been the most astounding feedback we have ever had about a speaker!”</p> </div><!-- blurbwrap --> <img class="review1-pic" src="images/my.jpg" alt="Review" /> <p class="img_id"><strong>Sara Gutowski</strong><br />Director of Programming, Michigan Youth Leadership</p> <div class="blurbwrap" id="review4"> <p class="blurb">“I have never had anyone make that much of an impression of me in only an hour!”</p> </div><!-- blurbwrap --> <img class="review1-pic" src="images/loyalist.jpg" alt="Review" /> <p class="img_id"><strong>T.G.</strong><br />Loyalist College</p> <div class="blurbwrap" id="review5"> <p class="blurb">“Ryan gives inspiration on how you can chase your dreams and make them real!”</p> </div><!-- blurbwrap --> <img class="review1-pic" src="images/ffa.jpg" alt="Review" /> <p class="img_id"><strong>M.W.</strong><br />Wisconsin FFA</p> </div><!-- review section 2 --> </div><!-- reviews --> </li><!-- END OF REVIEWS --> <!-- MEDIA --> <li><a class="trigger" rel="#header-2" onclick="return toggle_div('media', 'ryan_5');" href="#">Media</a></li> <li><div id="media" class="hidden-divs"> <h3>Client Resources<br /><br /></h3> <p>Click <a href="html/av-checklist.htm" class="ceebox" rel="800 500 ajax">here</a> for Ryan's A/V requirements and event checklist<br /><br /></p> <p>Click <a href="html/speaker-intro.htm" class="ceebox" rel="800 380 ajax">here</a> for Ryan's speaker introduction<br /><br /></p> <p>Click <a href="html/bio.htm" class="ceebox" rel="800 500 ajax">here</a> for Ryan's bio (to be used in your program, website, blog, newspaper, magazines etc.)<br /><br /><br /></p> <h3>Media Appearances<br /><br /></h3> <p>Ryan on the radio If the player does not work, click <a href="pdf/Radio_Interview.mp3">here</a><br /><br /></p> <p id="radio"><embed flashvars="valid_sample_rate=true&external_url=http://www.ryanspeaks.com/Radio_Interview.mp3" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" quality="high" src="http://www.odeo.com/flash/audio_player_standard_gray.swf"/><br /><br /></p> <h3>Photo Gallery <br /></h3> <p>Click images to enlarge..<br /><br /></p> <p id="zip"><a href="images/images-download.zip">Click here to download images..</a></p> <span><a href="images/ryan1_media.jpg" class="ceebox"><img src="images/ryan1_media_thumb.jpg" alt="Video Tag" /></a> </span> <span><a href="images/ryan2_media.jpg" class="ceebox"><img src="images/ryan2_media_thumb.jpg" alt="Video Tag" /></a><br /><br /></span> <span><a href="images/ryan3_media.jpg" class="ceebox"><img src="images/ryan3_media_thumb.jpg" alt="Video Tag" /></a> </span> <span><a href="images/ryan4_media.jpg" class="ceebox"><img src="images/ryan4_media_thumb.jpg" alt="Video Tag" /></a></span> </div> </li><!-- END OF MEDIA --> <!-- CONTACT --> <li><a href="html/contact-form.php" class="trigger ceebox" rel="800 500 ajax" onclick="return toggle_div2('ryan_5');">Contact</a></li> <li><a href="http://vimeo.com/1239140" rel="550 360" class="ceebox">Video</a></li><!-- END OF CONTACT --> <!-- LOGO, FOOTER --> <li> <img id="main_logo" src="images/logo.png" alt="Ryan Speaks Logo" /> <div id="footer_content"> <form id="mailing_list" method="post" action="http://www.emailmeform.com/fid.php?formid=177854" enctype="multipart/form-data" accept-charset="UTF-8"> <p id="click_to_join">Click JOIN to receive Ryan's inspiring monthly newsletter</p> <p><input type="text" name="FieldData0" value="" maxlength="100" size="30" /></p> <p><input id="mailinglist_submit" type="submit" class="btn" value="Join" name="Submit" /></p> </form> <p>or email us at <a href="mailto:info@ryanspeaks.com"><strong>info@ryanspeaks.com</strong></a></p> <p><a rel="external" href="http://www.facebook.com/ryanspeaks"><em>Facebook</em><!--<img src="images/facebook.gif" alt="Facebook" />--></a><em> .+ </em><a rel="external" href="http://twitter.com/lunch_buddy"><em>Twitter</em><!--<img src="images/twitter.png" alt="Twitter" />--></a></p> <p>RyanSpeaks.com. All Rights Reserved.<a rel="external" href="http://designpilotonline.com"><strong>Website - Design Pilot</strong></a></p> </div><!-- Footer Content --> </li><!-- END OF LOGO FOOTER --> </ul> Hi, While testing our webpage, we found that in all browsers the CSS menu works fine except in Safari, on browsing the child nodes of the menu. The menu just closes on the second or third select. I would greatly appreciate any help to fix this bug. The CSS code is below. Regards, Sharon. Code : <style type="text/css" media="screen"> /**************** menu coding *****************/ #menu { width: 100%; background: #eee; float: left; } #menu ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; } #menu a, #menu h2 { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; } #menu h2 { color: #fff; background: #000; text-transform: uppercase; } #menu a { color: #000; background: #efefef; text-decoration: none; } #menu a:hover { color: #a00; background: #fff; } #menu li {position: relative;} #menu ul ul { position: absolute; z-index: 500; } #menu ul ul ul { position: absolute; top: 0; left: 100%; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} </style> <!--[if IE]> <style type="text/css" media="screen"> #menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> 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 Hi All, I am new to this forum and to CSS and Web Development as a whole. I am a notch up from "total n00b". I can't post links so the website is www (dot) authenticimpressions (dot) com I built this site for my wife using Wordpress, some plugins, and some themes I bought. The Galleries all look great in Chrome and Firefox on PC, and in Firefox and Safari on Mac. But in IE7 on PC, I get a 4 or 5px white border on the bottom and the left in each of the galleries. I've played and played with the stylesheets and cannot figure this one out. What other information should I post or provide to get some help? Thanks in advance, I really appreciate it. Hey guys, I'm in need of some help here. Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two. If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself. Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template. http://thecheckoutplace.com/compute...eOneNetbook.php If anyone can offer a hand, it means a lot. Cheers guys. My page is displaying correctly in IE 6,7,8(CV), but when I view it in Firefox or Safari, it does not display correctly. The problem I'm having is the div #main is not stretching to allow room for the content in it. In IE it stretches fine, but in FF and Safari it doesn't stretch at all. I've been all over the internet searching but I can't find any similar problems/solutions. I've tried whatever I can think of or find. Can somebody please help me or point me in the right direction? Page: <div id="main"> //problem div <div id="sideBar"> <div id="header"> </div> </div> <div id="mainContent"> //contains content that I need to be stretched to the height </div> </div> CSS Code: html { margin: 0; padding: 0; border: 0; } body { background-image: url(img/bg.png); background-repeat: repeat-x; background-color: #008A32; margin: 0; padding: 10px; border: 0; height: 100%; min-height: 100%; } #main { font-family: Arial, Helvetica, sans-serif; padding: 20px; position: relative; border: solid 1px #0C0; width: 760px; margin: 1px auto; background-color: #FFF; } #sideBar { width: 194px; float: left; clear: left; height: auto; min-height: 100%; } #header { width: 194px; height: 344px; clear: both; float: none; background-image: url(img/Logo01.png); } #mainContent { width: 546px; float: right; clear: right; height: auto; min-height: 100%; } Thanks in advance -Mike 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 can't seem to get my site to view properly in safari and ie, firefox seems to do a fine job (of course). the left and right sides should show a red shadowed bar but they are not in the browsers listed above. would someone check the css in firebug and tell me what's happening?? thank you in advance for any help! the site is greatfoodcoop.com 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 all, new to the forum. Can't figure out why my absolute positioned images are moving with the window in safari? perfect in FF and IE. please help! yogadebra dot com 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. Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Site Test</title> <link rel="stylesheet" type="text/css" href="redo.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <![endif]--> </head> <body> <div id="top_filler"> </div> <div id="left_filler"> </div> <div id="right_filler"> </div> <div id="top_left"> </div> <div id="header"> </div> <div id="top_right"> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Etc, etc, etc....</p> </div> <div id="bottom_filler"> </div> <div id="bottom_left"> </div> <div id="bottom_right"> </div> </body> </html> The CSS Code: * { margin: 0; padding: 0; } body { background: #fdd9e9; } div#top_filler { background: url(images/bg_slice_sm.png) repeat-x; width: 100%; height: 164px; position: fixed; top: 0px; z-index: 5; } div#left_filler { background: url(images/left_slice_sm.png) repeat-y; width: 174px; height: 100%; position:fixed; left:0px; z-index: 5; } div#right_filler { background: url(images/right_slice_sm.png) repeat-y; width: 161px; height: 100%; position:fixed; right: 0px; z-index:5; } div#bottom_filler { background: url(images/bottom_slice_sm.png) repeat-x; width: 100%; height: 76px; position: fixed; bottom: 0px; z-index: 5; } div#header { position: fixed; top: 0px; left: 37%; height: 125px; width: 316px; margin: 0 auto; background: url(pink_logo2.png) no-repeat; z-index: 25; } ul.NoBulletNoIndent { list-style-type: none; margin-left: 0px; padding-left: 0px } div#top_left { height: 314px; width: 221px; background: url(images/left_top_corner_sm.png) no-repeat; position: fixed; top: 0px; left: 0px; z-index: 5; } div#bottom_left { height: 175px; width: 176px; background: url(images/left_bottom_corner_sm.png) bottom no-repeat; position: fixed; bottom: 0px; left: 0px; z-index: 5; } div#top_right{ height:174px; width:174px; background: url(images/right_top_corner_sm.png) top no-repeat; position: fixed; top:0px; right: 0px; z-index:5 } div#bottom_right{ height: 602px; width:198px; background: url(images/right_bottom_corner2_sm.png) bottom no-repeat; position: fixed; bottom: 0px; right: 0px; z-index: 5 } div#content { margin: 40px 164px 0px 180px; position: relative; z-index: 1; } I would like to prevent safari from highlighting the field that has focus. Is this possible? I'm doing a similar effect on my site and it looks bad when they are combined. Thanks Hi all, My first post, a request for help please! I have been designing a site and checking in Safari, just come to check in IE7 and its all over the place. I get the feeling that there is a simple bug fix I need to add, but with deadline approaching fast (tomorrow am client reviews the site) my mind is all over the place! If anyone would be kind enough to view: cavendish-cs.co.uk/beta/ You will see in IE7 the top image will not sit next to the navigation. Check in Safari or Firefox and you can see how it should look Any help greatly appreciated Thanks Craig I was told earlier that absolute positioning was a bad practice, at least to do it excessively in code, so I learned about margins and floats and fixed my page to where I want it. I test my page in Firefox 3 and Safari 4 (beta) and they both look exactly how I want the page to look. However, IE doesn't like a few things: 1. The top header positioning doesn't match up where it should (leaving yellow showing, which I placed behind the images to make sure I was aligning the images correctly rather than using the same background color). 2. The navigation by letter (A-Z and View All) is positioned right under the light blue bar when it should be in the middle of the light blue bar. Safari 3 has the same problem mentioned in #2 but is positioned level with the bottom of the light blue bar. Any suggestions and solutions would be most appreciated as I have tried looking for some explanation/solution to this problem for a few days now. Thanks ahead of time. P.S. the link is advance.byu.edu/sgtest Hi everyone, I am new to the forum. I am new to CSS and just trying to learn as much as i can as i go. I am currently working on a website and having a small problem with my drop down menus. It works great in Firefox, but in Safari when i hover over the drop down, it shifts to the left by a few pixels. I haven't added the IE workaround yet because i wanted to get this sorted before doing that so it won't work in IE yet. I would post a link but can't because i'm too new. I'm new to this, so be kind on my coding The code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Center test - "text-align: center" set for body, "text-align: left" for containing div</title> <style type="text/css" media="screen"> body { margin: 0; padding: 0; text-align: center; } div#container { width: 100%; background-color: #EAFBFF; width:760px; height:220px; text-align: left; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: none; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-top-color: #0066FF; border-right-color: #0066FF; border-bottom-color: #0066FF; border-left-color: #0066FF; } div#container2 { width: 760px; background-color: #ddd; width:760px; text-align: left; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: none; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #0033FF; border-right-color: #0033FF; border-bottom-color: #0033FF; border-left-color: #0033FF; padding-top: 15px; padding-bottom: 15px; } div#container3 { width: 760px; background-color: #666666; width:760px; text-align: left; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: none; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-top-color: #0033FF; border-right-color: #0033FF; border-bottom-color: #0033FF; border-left-color: #0033FF; padding-top: 13px; padding-bottom: 10px; } #container { } #Layer1 { position:absolute; width:760px; height:115px; z-index:1; left: 405px; top: 102px; background-color: #0000FF; overflow: scroll; } #container2 { } #Layer2 { position:relative; width:760px; height:600px; z-index:1; left: 405px; top: 102px; background-color: #0000FF; overflow: scroll; } #container4 { font-family: Arial, Helvetica, sans-serif; width: 500px; font-size: 14px; font-style: normal; color: #DDDDDD; text-decoration: none; text-align: left; margin-right: 110px; margin-left: 125px; background-color: #999999; border: thin solid #999999; padding-left: 15px; } #Layer3 { position:relative; width:200px; height:600px; z-index:1; left: 405px; top: 102px; background-color: #0000FF; overflow: scroll; } .style1 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; } .style2 { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; } #navbar { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; text-decoration: none; background-color: #666666; margin: 0px; padding: 0px; height: 20px; } #navbar ul { padding: 0; margin: 0; list-style: none; } #navbar li { float: left; text-align: center; background-color: #666666; position: relative; width: 130px; } #navbar li ul{ position: absolute; display: none; text-align: center; line-height: 25px; padding-top: 7px; } #navbar li > ul { top: auto; left: auto; } #navbar li:hover ul { display:block; text-align: center; text-indent: 0; } #content { clear: left; } #mainphoto { padding: 0px; float: right; border: 1px solid #0066FF; margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 30px; } #container6 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; padding-right: 30px; padding-left: 30px; } .style3 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #000000; } .style4 {color: #000000} .style5 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; } a { font-size: 12px; color: #FFFFFF; } a:link { text-decoration: none; } a:visited { text-decoration: none; color: #FFFFFF; } a:hover { text-decoration: none; color: #CC6600; } a:active { text-decoration: none; color: #CCCCCC; } </style> </head> <body> <div id="container"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="(URL address blocked: See forum rules)=7,0,19,0" width="760" height="220"> <param name="movie" value="(URL address blocked: See forum rules)"> <param name="quality" value="high"> <embed src="(URL address blocked: See forum rules)" quality="high" pluginspage="(URL address blocked: See forum rules)" type="application/x-shockwave-flash" width="760" height="220"></embed> </object> </div> <div class="style2" id="container3"> <div id="navbar"> <ul> <li><a href="(URL address blocked: See forum rules)">Home</a></li> <li>About the Office <ul> <li><a href="">Meet Dr. Toolson </a></li> <li><a href="">Meet the Team</a></li> <li><a href="">Office Tour</a></li> <li><a href="">Location</a></li> </ul> </li> <li>About Orthodontics <ul> <li><a href="">Adults</a></li> <li><a href="">Children</a></li> </ul> </li> <li>Life with Braces</li> <li>Contact Us <ul> <li><a href="">Contact Information</a></li> <li><a href="">Request Appointment</a></li> <li><a href="">Location</a></li> </ul> </li> </ul> </div> </div> <div id="container2"> <div id="container4"> <p class="style3">Contact Information Form</p> <form action="(URL address blocked: See forum rules)" method="post" class="style4"> <span class="style1"> <label>Name <br> <input type="text" name="Name"> </label> </span> <span class="style1"> <br> <br> <label>Email <br> <input type="text" name="Email Address"> </label> </span> <span class="style1"> <br> <br> <label>Phone Number <br> <input type="text" name="Phone Number"> </label> </span> <span class="style5"> <br> <br> <label><span class="style4">Description (if neccessary)</span> </label> </span> <span class="style4"> </span> <label><br> <textarea name="Description" rows="5"></textarea> </label> <label> <br><br> <input name="Submit" type="submit" class="style1" value="Submit"> </label> <label> <input name="Reset" type="reset" class="style1" id="Reset" value="Reset"> </label> <input name="recipient" type="hidden" id="recipient" value="jeff@dinorestoration.com"> <input name="redirect" type="hidden" id="redirect" value="(URL address blocked: See forum rules)"> </form> </div> </div> <div class="style1"> Copyright Toolson Orthodontics 2009 </div> <p> </p> </body> </html> I 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 I have this problem on and off in different web sites I have designed. Somehow I get around it, however, I really do not understand why I have the problem, and how I solve it. here is the link: http://mizuedesign.com/0000.html in IE7, my #mainContainer extends as I put in some other divs etc. (there is a border around it.) However in FF, Safari, and Opera the same DIV does not extend. I am trying to achive the results I see in IE7. Any help would be greatly appriciated. S. Boztepe Hi! I am making an online store for a very important client of mine. I build a shopping sub-list which floats to the left of the main page... and it looks BEAUTIFUL in Safari. But the images are not displaying correctly in Firefox. I was hoping somebody could help me. Also, could somebody tell me how it looks on IE? I have a mac, and my client is probably using IE... so I can't see how it looks Anyway, the site is.... blocked and the CSS #shoppinglist1 li { float:right; list-style: none; display:block; } #shoppinglist1 a{ width:100px; height:20px; text-decoration:none; background-image:url(images/shoppingmenu-bgsmall.gif); background-repeat: repeat; background-position: center center; } #shoppinglist1 a:hover { width:100px; height:20px; text-decoration:none; background-image: url(images/shoppingmenu-hover.gif); background-position: center center; } #shoppinglist1 a:active { width:100px; height:20px; text-decoration:none; background-image: url(images/shoppingmenu-active.gif); background-position: center center; } and the HTML <div id="shoppinglist"> <img src="images/shoppingmenu_top.gif" style="margin: -15px auto;"/> <ul id="shoppinglist1"> <li><a href="#"><img src="images/shoppingmenu_03.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_04.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_05.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_06.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_07.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_08.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_09.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_10.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_11.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_12.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_13.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_14.gif" align="center" border="0"/></a></li> </ul> <img src="images/shoppingmenu_bottom.gif" /> </div> Thank you so much for your help! 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. |