Safari and CSS

I have a website with a fixed background and general font
styles being applied. Tested for IE6 IE7, Firefox. On my mac, i did
a "preview browser > safari" All looked the same across the
board.
I went to upload to my server:
Click
here to see the Safari issue
It wasn't taking some of the font styles, the background
image is no longer available. there's a small gap at the top. Why
did Safari render this when it did fine offline? all paths are
relative. Some styles work, some don't, can someone help?
Edit:
WARNING PREVIEW IN BROWSER DECEPTION: did a preview in
browser > safari, viewed source of the temp file created. it
stripped my styles from the linked css and embedded them.

domerdel wrote:
> It wasn't taking some of the font styles, the background
image is no longer
> available. there's a small gap at the top. Why did
Safari render this when it
> did fine offline? all paths are relative. Some styles
work, some don't, can
> someone help?
If you want help, you'll need to be more specific about the
problems.
I've looked at your site in Firefox 3, IE8, and Safari
(Windows). It
looks identical in all of them, with the exception of the
text of the
inner-menu div. In Safari, it's much bigger than in other
browsers. You
might need to add a font-size and/or font-family definition
for
#inner-menu li.
David Powers
Adobe Community Expert, Dreamweaver
http://foundationphp.com

Similar Messages

Safari and CSS 3

Hi,
Sorry if this is the wrong place to ask this question, but when will SAfari support the box-sizing tag? The reason I ask is best shown with the following HTML example;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
</head>
<body style="margin:0px;">
test3d
</body>
</html>
With a DIV of 100% height and a border, Safari displays scrollbars. If Safari supported box-sizing we can switch. Alternatively, Safari could support the syntax height:100% - 2px; although that would be less standard behaviour.
Any thoughts?
Thanks
Supes

Welcome to Apple Discussions
Can't help you with the html coding - not my forte.
Never know when Apple will update the webkit, however, it's highly probably the Leopard version of Safari will include the most recent version. In the meantime, you may find this Safari WebKit site as a helpful resource.
Good Luck with your work.
iMac G5 Rev C 20" 2.5gb RAM 250 gb HD/iBook G4 1.33 ghz 1.5gb RAM 40 gb HD LaCie 160gb d2 HD Canon i960 printer 10.4.8

How can I disable the blue highlight on textfields in Safari and Firefox, using CSS?

Hi, I'm trying to disable the default blue highlight on textfields in Safari and Firefox. I can get it to work in Safari by using the following CSS code:
input {outline-style: none;}
This doesn't work for Firefox, though.
Can anyone help me to get it to work in Firefox?
Thanks in advance!

Are you referring the the border color or the actual field color?
For field colour see the section on the input tag.
However if it is the border color, this is set by the browser o/s, and cannot be changed with any 'cross-browser' technique, it can be changed in IE and other browsers using custom behaviors (IE), or by using custom skins (others).
But the skins are only enabled by the user, and changing the chrome of the browser for form fields using JavaScript would probably affect the entire browser anyway.
PZ

What version of XHTML and CSS are in Safari 3.2.1

hello
do you know what up to date versions of XHTML and CSS are in Safari 3.2.1
Before i decided to post here i did look at other options, the developers seem to have their own club.
and there was not much other choice on the front page of the forums.
I did try looking through the reference library, http://developer.apple.com/referencelibrary/
where else could i look to find what versions of XHTML and CSS are in Safari 3.2.1
and any other interesting specs.
thank you for your time in this matter.
James

Hi,
When you say you looked through the reference library, did you see [this page|http://developer.apple.com/referencelibrary/InternetWeb/idxWebContent-date .html]?
It doesn't mention explicit version numbers but claims to tell you what functionality is supported.
Safari handles CSS2.1 and a growing number of CSS3 declarations. Work is also ongoing on [adding HTML5 support|http://webkit.org/blog/140/html5-media-support>, but I don't know if any of it has made the release version of Safari yet.

My webpage is massive in Safari and Firefox but fine in Chrome...

Hi,
I've been working in Dreamweaver CS5, my pages are all working fine across all browsers it's just the size which is different and I can't figure out why.
The sites not live yet but here's the code:
<html>
<head>
<title>Homepage2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

</style>

</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

<div id="wrapper">
<div id="Table_01">
<div id="Homepage2-03"> <a href="Source/Gallery_Street.html"><img src="images/Homepage2_03.png" width="497" height="251" alt=""></a>
</div>
<div id="Homepage2-06">
<img src="images/Homepage2_06.png" width="308" height="439" alt="">
</div>
<div id="Homepage2-09"> <a href="Source/Lions.html"><img src="images/Homepage2_09.png" width="389" height="507" alt=""></a>
</div>
<div id="Homepage2-12">
<img src="images/Homepage2_12.png" width="33" height="18" alt="">
</div>
<div id="Homepage2-15"> <a href="Source/Gallery_Street.html"><img src="images/Homepage2_15.png" width="299" height="82" alt=""></a>
</div>
<div id="Homepage2-16"> <a href="Source/Gallery_Flash.html"><img src="images/Homepage2_16.png" width="273" height="186" alt=""></a>
</div>
<div id="Homepage2-18">
<img src="images/Homepage2_18.png" width="47" height="46" alt="">
</div>
<div id="Homepage2-22"> <a href="Source/Gallery_Street.html"><img src="images/Homepage2_22.png" width="215" height="99" alt=""></a>
</div>
<div id="Homepage2-25">
<img src="images/Homepage2_25.png" width="53" height="43" alt="">
</div>
<div id="Homepage2-31"> <a href="Source/Gallery_Flash.html"><img src="images/Homepage2_31.png" width="77" height="74" alt=""></a>
</div>
<div id="Homepage2-32"> <a href="Source/Gallery_Flash.html"><img src="images/Homepage2_32.png" width="269" height="205" alt=""></a>
</div>
<div id="Homepage2-35"> <a href="Homepage2.html"><img src="images/Homepage2_35.png" width="69" height="342" alt=""></a>
</div>
<div id="Homepage2-38">
<img src="images/Homepage2_38.png" width="57" height="21" alt="">
</div>
<div id="Homepage2-41"> <a href="Source/Contact.html"><img src="images/Homepage2_41.png" width="56" height="22" alt=""></a>
</div>
<div id="Homepage2-43">
<img src="images/Homepage2_43.png" width="4" height="131" alt="">
</div>
<div id="Homepage2-47">
<img src="images/Homepage2_47.png" width="264" height="419" alt="">
</div>
<div id="Homepage2-50">
<img src="images/Homepage2_50.png" width="620" height="378" alt="">
</div>
<div id="Homepage2-54">
<img src="images/Homepage2_54.png" width="266" height="321" alt="">
</div>
</div></div>

</body>
</html>
I've found that if I make it smaller either by changing the wrapper or exporting a smaller size from photoshop, the size is fine on Safari and Firefox but really small on Chrome. Prefer bigger rather than smaller but would be so great if there was something I could do to get them all the same...
Help. Thanks

Since we can't see your images without a link to your work in progress, my guess would be your zoom settings in those browsers are set to something other than 100%.
You are also shooting yourself in the foot in a major way with all that absolute positioning. APDivs have been removed from DW in newer versions because Adobe finally came to their senses and stopped allowing the marketing department to dictate how design should be done.

Rendering issue in Safari and Firefox OSX

Hello everyone,
http://qa.ocean-florida.co.uk/villas/BlankVillaPageNew.htm
I have a small issue with this page not rendering properly in Safari and Firefox on my Mac.
The top-right image of the group of four is missing and i cant quite figure out why.
Any tips/advice gratefully recieved.
Thank you!
Damien

The rogue bracket may only be part of the problem. What's this below - 0px; top: 2px; ???? Seems as though you declared the position further up the css cascade top: 8px; left: 0px; ?????
#box-link2 {
    position: absolute;
    top: 8px;
    left: 0px;
    width: 83px;
    height: 83px;
    background-color: transparent;
    0px; top: 2px; width: 282px; height: 243px;
and on box 3 -2px; top: 38px; ??????
#box-link3 {
    position: absolute;
    top: 8px;
    left: 0px;
    width: 83px;
    height: 83px;
    background-color: transparent;
    -2px; top: 38px; width: 280px; height: 240px;

Site displays well in Safari and IE, but no good in Firefox

I built a site using iWeb '08 (2.0.4) and published it to space on iDisk. The site displays as designed on Safari (3.2.1); is marginally acceptable on IE 7 (in a virtual Windows emulator); and is unusable on Firefox (3.0.5).
I notice that iWeb generated three css files for each page of the site: a pagename.css, a pagenameMOZ.css, and a pagenameIE.css. The pagename.css is lovely; the pagenameIE.css is very basic; the pagenameMOZ.css is just a skeleton.
I'm new to this. How do I resolve the issue? Would using different fonts be of some help? Limiting the design to avoid the use of lists and shapes? Must I generate three versions of the website to support these three browsers? And if so, how does iWeb know which standard to use for each build?

I have the same issue - I use Firefox 3.1 Beta 2 (cause i'm one of those early adopters !!!)...the screen is OK, but any graphics I've imported into it, especially those that are GIF/transparent, now have a funny shadow under it, ie:
http://web.me.com/bigmouthmedia/bmm/Voice_Demos.html
But yet I look at it in Safari, and it's perfect. Haven't yet tested it on Windows XP/7
Message was edited by: Paul Julian

IWeb-generated site OK in Safari and Firefox, but no NavBar in IE

I created a site in iWeb and it displays fine in Safari and Firefox. However, the entire NavBar section is not displaying in Internet Explorer, despite loose permissions for running code in IE.
The script section from one of the pages appears below, and any help or suggestions are much appreciated. I need to get this site up, and really need it to be accessible for IE users.
Thanks.
<script type="text/javascript"><![CDATA[//><!]]></script>

Are you using the navigation menu that comes with the page template? If so, it will not display on a PC with Internet Explorer unless javascript is turned on in the preferences. The template nav bars in iWeb use java and if this is not enabled on some computers, then it cannot be seen.
What you can do so that it will show up in IE, is to create your own text based navigation bar instead - to do this, just open the Inspector and then go to Page - second choice in and click on the boxes which say hide navigation menu and then just create your own by using a text box, shape or whatever. Don't forget to hyperlink to your pages though.

IE7 and CSS

I looked the forum for a topic like this but I didn't find
it. I've heard that IE7 does not support correctly the CSS. Is it
true? Can I tell my customers to install it? Some of them doesn't
want to use Firefox…

> I don't have to feed Safari, Firefox or Netscape for
that matter
> explicit conditions to make css work in those browsers,
why should it
> be that IE is the one that gives the most problems. Even
their newest
> release is lame compared to the older version of the
browsers I
> mentioned.
>
> All I'm saying is IF others CAN get it correct why on
earth can't
> they. They have access and the money to employ the best
in the
> business and yet still fail.....you think thats ok? I
don't.
I agree... but in a different way :-)
Microsoft's IE team is top-rate and, if you get to konow
them, very
stadards-oriented and up on CSS. The problems occur when
non-IE team
members get involved. A case in point being the "zoom"
feature which we
all are learning to hate. Adobe is not all that dissimilar.
Dreamweaver
is a great application - when its team can stick to what they
do best.
When outside (the dev team) influences start making demands
for certain
"features", that's when problems happen. Murray can explain
all about
how the Fireworks/Dreamweaver menu came to be and even link
to an
entertaining blog entry by a former employee.
That said, while Safari and Firefox do not require much in
the way of
CSS hacks for ordinary web pages, they do require some
workarounds and
all modern browsers do have some quirks. Safari and Firefox
do, however,
require significant hacking when doing advanced manipulations
through
the DOM, to fix bugs and to counter the shortcuts both of
those browsers
take to appear faster than they really are :-)
It's just not apparent to most typical web designers.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

Missing images in Safari and Mail

Ever since upgrading to Lion earlier this year I have noticed a problem with images in Mail and Safari. I'm now on ML (10.8.2) and the problem persists. Hopefully someone can suggest a solution as it's slowly driving me a bit crazy.
In Mail, when I view an HTML email with images for the first time there is usually one image showing as missing/unloaded (little blue square with a question mark). Just one, and usually one near the top i.e. one of the first images on the page. If I refresh, e.g. view another email then instantly return to the first email, all the images are there. 'Display remote images in HTML messages' is ticked and always has been.
There is a similar problem in Safari. I load a webpage and there is usually at least one image missing/unloaded. Refreshing the page will fix the missing image. Sometimes it's the CSS file that doesn't load leaving an unformatted page, but it's more common with images. I looked in the 'Error Console' today and the error I get for the missing items is "Failed to load resource: The operation couldn’t be completed. Invalid argument".
After the problem started I switched to Chrome and never had the problem once, but I prefer Safari and would like to switch back. I presume the almost identical issue with Mail means that they are somehow linked.
Anyone have the same issue, or any ideas as to what might be causing it?

I think I've narrowed this down to the AVG Linkscanner. Turned it off and all images are present and correct.

Rendering erratic, script and css source visible

Hi,
Safari is rendering quite badly for a few days. Javascript code and css statements are visible and div positionnning is completely lost.
I have the same problem in mail with html messages.
Can someone help ?
Thanks
PS: Firefox is working well.

the problem is not the CSS but really the design.
If you configure the CSS to act transparently, the server will try to respon to the client directly.
If the CSS can't intercept the response, the client will receive a SYN/ACK from the server while expecting a SYN/ACK from the VIP.
So, the only way to have the CSS works transparently is to guarantee that the response from the server will go through the CSS.
3 solutions
- client nat and therefore you break transparency
- move the CSS in front of the servers
- use policy routing to intercept the server traffic and redirect it to the CSS.
You have option#1.
Option #3 is not possible with firewall, so you are left with option #2.
Gilles.

Safari not CSS compliant?

I'm working on a website, and upon uploading my nicely-developed pages, my client called to tell me it looked awful on her mac. I downloaded the beta version of safari for windows, and she downloaded firefox, and we determined that the layout was not functioning in Safari. Safari claims to be compliant with the CSS tags "position" and "left"; is there something I need to change to make Safari read the site correctly?
An example of the code it refuses to render properly: http://pastebin.com/m4fb3604f (it won't let me post HTML on this forum)
the images appear squished together though I have them spaced out. You can see the effect by going to picturethispacifica.com and clicking "Galleries" - try in Safari and then either firefox, internet explorer, or Opera, whatever your preference happens to be.
Message was edited by: yamikuronue

I coded that page by hand, but I did code it within Dreamweaver (I like the instant preview and the ability to preview in my browser without saving it first)

HTML 5 and CSS 3 Support In Dreamweaver CS5

I cannot find any information on this web site about whether and how Dreamweaver CS5 supports HTML 5 and CSS 3. There are lots of other fancy high-end whiz-bang technologies highlighted in CS5, but without support for HTML 5 and CSS 3, Adobe has left a great big hole in the middle of the new Dreamweaver. If I'm going to have to code these by hand, then there's little incentive for me to upgrade from CS4. Adobe may, by this oversight, intend to extend the useful life of Flash, but if this is so it's penny wise and pound foolish. There is much to like about Flash - and much to dislike about how it works on the user side. Leaving these problems unresolved hurts Flash, and leaving HTML 5 and CSS 3 support out of Dreamweaver hurts Dreamweaver. In other words, this is a lose-lose strategy.

Hi Scott
Sorry for the delay in replying, but I turn my internet connection off when working, otherwise I have found I tend to do more research than work.
Media-Queries:
I had viewed the video on the possible implementation of media-queries when it was first released, and in most respects the implementation is as I would expect, but it would be helpful if it was, (in a future development of the use) possible to show a list of 'common' smartphone/handheld devices, (makes/models) within the dreamweaver interface that would be usable with the screen size being used, (possibly as an import from the 'device central' device list as a drop-down list). My reason for asking for this feature is primarily as a time saving feature for the css layouts via media-queries as it would then show the targeted/usable devices in a list, and possibly alleviate the requirement of developing layouts that are not really required.
Video:
At the moment I am using the video feature as you have indicated where possible, and am doing so with the use of IECC's for IE as a fall-back for that browser. I have tried targeting versions if Firefox and Safari that support the video element by testing for it with JavaScript, but I have found this unreliable, possibly when the standard is finalized this may be the better method.
SVG:
I personally have decided to go with svg in preference to canvas. I have seen a few 'wow' factor demo's produced using canvas but as they use cross-compiled java to javascript code they are in reality showing nothing that has not been done before, (If we had 4Ghz processors with multi-core in 1999 similar trial graphics in vml would have worked just as good then, showing my age here!).
My current work-flow with svg is - Inkscape - Modify the code by hand/preview in a browser - copy/past the code into dreamweaver.
The current in-line implementation of svg's in the IE9 preview is where I see the main future of the svg implementations, as this makes using svg's for graphic elements and basic animations much more viable/easier for the average designer/developer, and lets not forget that as it is a vector it is ideal for resizeable background images in fluid/liquid layouts.
I should say here, that I will for the foreseeable future use flash/swf's for more complex animations, as these are still much better quality than anything that can be achieved with svg or canvas.
I would like to see the possibility of using Fireworks for the creation of svg's, and a work flow similar to that available between fireworks and dreamweaver at the moment.
Cache manifest and database:
As you have rightly grouped these two together, (and I cannot really envision a situation that they would not be used so) the situation with these is for me, (when trying to create the code for use) the necessity of 'remembering' what I must include in the cache and the transfer of the data for the database.
Both are probably better explained with a typical scenario -
A new research/development firm has developed the technology and parts to upgrade an autos internal combustion engine to an hydrogen powered engine. However the products list is specific to the motor manufacturers engine type, and to make matters worse the sales department also wishes an off-line version of the demos and parts list to be available to its sales team and customers, (o/k, maybe this is not a typical scenario, but it does demonstrate the usage).
When developing the 'custom' html 5' enabled page I would require the cache manifest to include all necessary javascript/images/videos that would be required for the particular auto manufacturer to be available off-line, and compiling the list must be done at present by hand making it subject to possible errors.
As for the database, (manufacturer specific) this must also be available off-line and updateable by the sales person and customer, as they are not always on-line and no hard-copys of material will be produced, (except when printed by the mechanic).
My solution for me regarding the cache manifest would possibly be a dialogue in dreamweaver that would show all resources associated with the auto manufacturers model type used in the html site. I have used namespaces, (or some form of identifier) for general and model specific javascript, and a model identifying code for images and videos. The dialogue would then allow me to filter the resources required using the namespaces and identifier and include them in the list as required, possibly in much the same way that items are moved from a general list to a more specific list when creating the 'favourites' toolbar in dreamweaver.
The database is on first appearance much simpler, as I would simply download the database using the motor_id as a filter, (yes Scott, you can see where I am going with this ) for those who cannot this would be wrong. You have correctly seen the problem with doing this, but I will explain for those who have not. The sales person and the customer would not see any of the images or videos that have references stored in the database, as these are just references and not the actual images/videos, yes one could use 'BLOB' for storing the items but this is not in my experience a reliable method. What is required is some form of method that would also download these items and place them into the required file position for off-line viewing, (which is what the cache manifest would do).
So I would also require the possibility to add dynamically to the cache manifest from an sql database at the same time as the 'save for off-line' option is generated, (I have experimented with doing this in a similar manner that xml is created from an sql database).
That's it for the html 5.
Accessibility:
For checking I use the firefox accessibility extension and total validator extension first, then the WAVE evaluation tool.
But for Dreamweaver I would like to see the inclusion of the ARIA options as standard, especially when developing 'rich-internet-applications' particularly the aria-live and role options. I often find it interesting in discussions about html 5 where it is seen by many as a 'new' mark-up' language for the web, but rarely seen in the context of helping in accessibility when used correctly. Even the html 5 spec contains a section on using the new mark-up as part of accessibility and how the ARIA roles should be applied, (see - http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#annotation s-for-assistive-technology-products-%28aria%29).
The inclusion of an extra live-view option in dreamweaver that render the page in 'screen reader' mode would also be a possible accessibility checking help. This could be done by simply turning off the background-images 'on-mass' and rendering any items as they would be seen by a screen reader. As most screen readers do now parse JavaScript and css, it would illustrate the problems of using such techniques as light-boxes without using the aria-live role to tell users that the light-box in now the focus of the page.
For anyone who has stayed with this post, my sincere thanks, and any comments on the content would be welcome.
Paula Z

Convert .fla files for Safari and Chrome

hi boys,
i need to convert .fla file for Safari and Chrome.
i pay for that, after new file is tested, and is ok.
the fee is 40$/file

I'm afraid you have quite a few html errors on the page I tested (about us page) that really need to be fixed - and some of them are likely the cause of the browser rendering the pages differently.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.newpathstherapy.com%2Fabout.h tml
For example, you can only use an ID once per page.
Also a few CSS errors: - in particular the first one - where you have the missing # hash tag before the color declaration. The others relate to the styleing of the scrollbar - which isn't worth the effort really because is a PC IE only thing anyway:
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. newpathstherapy.com%2Fabout.html
I think you have 'overwritten the code for the menu.. particularly the way you have used the IDS - which is causing an issue anyway. The menu can be made more simply and minimally styled with css - see this list of styling list menus:
HORIZONTAL / VERTICAL MENUS:
http://css.maxdesign.com.au/listamatic/
You need to fix those errors and then see how the page stands. If you have further problems after the 'fix', then post back.

Safari and Firefox Behaviour on website

Hello,
I have been struggling to discover by myself why Safari and Firefox both perform the following bizarre activity when trying to click on a link in a div. The site is my own and I have run the pages through w3.org's validation services both for XHTML and CSS. The following occurs:
When I click anywhere on any of the div's in the website the font turns green and becomes larger. When there are links and one tries to click the link the previous effect occurs and the link is moved along with the text from under the mouse making it impossible to select the link. It has been making me crazy for quite some time and now I have exhausted all other resources to solve this problem.
The site is my own work and to assist in solving the problem the sites address is:
site
This bizare behaviour also occurs on some other sites that use div in their web pages. The page header for my index page is the following:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

For the past 12 years I have used the free BBEdit Light for mass edits across hundreds of web pages at once. It comes with separate historic and OS X versions packaged together. It is no longer supported and Bare Bones no longer list it on their site but it continues to work exceptionally well on my G4 with Leopard. It may be the fastest text editor you will ever use. It can also open large files - I have used it on 100 MB log files. It comes with excellent documentation which I still refer to for grep search and replace.
At the time of writing it can still be downloaded from at least one site at:
http://www.google.co.uk/search?q=%22BBEditLite6.1.2.smi%22
With a little thought and care it is surprising how many server-wide edits can be done in seconds with BBEdit. Don't forget to do a full backup of server pages before you start and perhaps at regular intervals.

Safari and CSS

Similar Messages

Maybe you are looking for