CSS - Anyone Else Having Problems With New Safari Version 5.1 (6534.50) ?
Hi all,
After the latest update of Safari, my Web site has gone all Wonky in the layout. The problem occurs in table cells where there is both a field and some text. If I put a <b> bold tag on some text in the row or even a <span> with special style attributes like plain text, the text jumps up and becomes almost a superscript and the rest of the text remains at the baseline of the text input fields in the row. I uploaded a picture, not sure how to link it into the posting though. The forms on our site are old, 7+ years, so have been beautifully laid out until this latest Safari release. It used to only be IE that messed up formatting with each release. This is the first Safari release I have seen do this. Can anyone else confirm similar issues? Similar TutorialsMy 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! Thanks for taking time to read my question. I have IE6 and IE7 on 2 different PC's. My IE6 version is 6.0.2900.2180.xpsp_sp2_qfe.070227-2300 and my IE7 version is 7.0.5730.11 I have IE7 on a third PC and it's version is 7.0.5730.13 My friend has IE7 version 7.0.5730.11 and when he looks at my web page he gets a vert scrollbar on the white content area. When I use my IE7, either version, I don't! Another friend has IE6 version 6.0.2900.2180.xpsp_sp2_qfe.070227-2254 When she looks at my page, and mouses over the "What's New" button it goes to 2 lines of text, but when I mouse over it in my IE6 "What's New" stays on one line. Where do these differences come from? How can I make my site work regardless of version of IE? This is getting quite stupid, now IE6 doesn't act the same as other IE6's and same with 7's!!! Thanks again for your help. Brad Site: http://www.scopicdesigns.com/ZoneAll/index.htm 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 I have a new site at www.sdgolflessons.com. Looks fine in all browsers, including Safari, until I changed the doc type to strict (from the default loose in my Dreamweaver), and now Safari has odd gaps. I don't have much CSS for formatting, so I can't figure out what's going on. I've tried to force heights, make sure paddings are 0, etc., to no avail. I'd appreciate someone checking it out. I have Safari on a PC, though I'm not sure if that matters. 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 Can anyone give me a hint on why the css/javascript controlled dropdowns don't appear right on this page in Safari: http://spa.american.edu As you can see in the view source the script is very basic and not embedded in an external file. Safari cuts off a portion of the final link. Thanks, Jeremy 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 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. Could someone tell me what the last standard is for css? hi everyone, i designed my first site with dremaweaver 3 but had problems with browser compatability. people have been telling me i should use css now as it's better so which version of dreamweaver should i be using now? thank you Odd problem here...If I type my website address in the address bar and precede it with the "www" (ex: www . mydomain . com), the CSS is not being applied, however, if I omit the www, CSS works fine. This is only a problem in FireFox 3.5.2. Any ideas whatsoever? My web page use some CSS syntax to control the color of hyperlinks, they are listed as below: Code: .row1 { background: #e7f6fe; /*background: #e1f4ff;*/ } .row1 td{ padding: 4px; border-bottom: 1px solid #c3c3c3; font-size: 12px; font-family: "Arial", "Helvetica", "sans-serif"; } .row1 a:visited { color: blue; text-decoration: none; } -------------- My problem is, whatever the version of IE or other browsers, some users encountered the situation that when they clicked the hyperlink, the link becomes blue, but after closing the browser and restart IE again, some users will see the link color STILL IN BLUE, while some will see the link AS A NEW LINK WITH BLACK color again. My boss asks for the reason of this difference, in addition, he wants all users will see the link as new link again after they restart the IE. ------------- In my point of view, I think we can't set anything using program, javascript or css, it SHOULD BE DEPENDED on browser setting. Can anyone provide me some answers about this questions? Thx. Hello I am very new to css. Can someone tell me if css is the way to go when making a printer friendly page? or if there are any usefull tutorials on this out there that would be really helpfull. just so i know where to start from. Thanks I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body { width:800px; font:0.83em/1.4em Tahoma, Geneva, sans-serif; color:#CBD4E3; background:#000 url(images/body_bg.gif) repeat-y top center; letter-spacing:1px; margin:0 auto; } h1,h2,h3,h4,h5,h6 { font-family:"Times New Roman", Times, serif; font-style:italic; font-weight:bold; color:#e9df55; background-color:#000; } h2 { font-size:2em; } h3 { font-size:1.5em; } h4 { font-size:1.25em; } a:link { color:#8090AC; text-decoration:none; } a:visited { color:#B17F6C; text-decoration:none; } a:hover { color:#E9DF55; text-decoration:underline; } a:active { color:#E9DF55; text-decoration:none; } #container { width:760px; margin:0 auto; } #header { height:200px; width:760px; margin:0; padding:0; } #banner { height:100%; width:100%; color:#cbd4e3; background:#000 url(images/header_bg.jpg) no-repeat top left; margin:0 auto; padding:0; } #banner h1 { font-size:400%; color:#CBD4E3; background-color:transparent; float:left; display:inline; margin:0; padding:70px 0 70px 280px; } #banner h2 { font-size: 12pt; color: #e9df55; background-color:transparent; text-indent: 200pt; vertical-align: text-bottom; } navigate{ color : #105BAC; background-color : transparent; height : 20px; font-size: 100%; border-top : 1px solid #999999; } #navigate ul { list-style-type: none; margin-top: 0px; margin-bottom: 0px; margin-left: 150px; margin-right: 0px; padding: 2px 0 0 0; } #navigate ul li { display: inline; } td { font-family: Arial, Helvetica, sans-serif; } th { font-family: Arial, Helvetica, sans-serif; } p { font-size: 14px; color: #FFFFFF; left: 50px; right: 50px; } #main { width: 660px; padding-right: 50px; padding-left: 50px; } #footer { font-family: "Times New Roman", Times, serif; font-size: 9px; color: #666666; height: 100px; width: 760px; vertical-align: text-bottom; text-align: center; } #SplashImage { float: left; } .image-left { clear: none; margin-bottom: 10px; float: left; margin-right: 20px; margin-left: 10px; } .image-right { clear: none; margin-bottom: 10px; margin-left: 10px; float: right; } 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, 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 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. 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! |