Overcoming browser differences

Is there a general tutorial on how to overcome browser
differences?
Hi All,
Can anyone point me at a tutorial (or book) which
systematically deals
with techniques for coping with different browsers
interpreting the same
css and html code differently.
I find myself increasingly frustrated and helpless when
fixing something
for one browser (e.g. Mozilla, Seamonkey etc) and finding it
looks a
mess in IE, and when I fix it in IE, it does not work in
Mozilla etc.
Acute example, where I need help (but I do not want to keep
coming back):
www.brookfield-park-pri.lancs.sch.uk/shell/contents/prospectus/prospectus/prospectus.html
To see the current disgrace look at the above, then search
for
'Galileo'. Perfect fit in Seamonkey, a mess in IE.
In IE the absolute positioning is different from Seamonkey,
also
padding-top in the 'Mathematics' quote differs.
This was handled by an in-line style:
<div id="Mathematics" class="bright_area"
style="position:absolute;
width:300px; height:80px; padding: 0em 0em 2em 1.5em;
z-index:3;
left: 404px; top: 9608px;">
<p class="normal_red">Mathematics is the language
<br>
in which God wrote the universe</p>
<p class="normal_red">Galileo (1564 –
1642)</p>
</div>
The stylesheet is at the following address:
www.brookfield-park-pri.lancs.sch.uk/shell/stylesheets/brookfield.css
Thanks for your help.
Adrian

Hi Joe, thank you, that explanation was really useful and I
hope I have
properly implemented it.
I could not change the margins of class img_left because that
would have
affected lots of other images on the site, but I took care of
that with
an in-line style.
I did get rid of the divs with position absolute, and that
solved most
of the problems.
However, something remains.
Could please look again at:
www.brookfield-park-pri.lancs.sch.uk/shell/contents/prospectus/prospectus/prospectus.html
The stylesheet is at the following address:
www.brookfield-park-pri.lancs.sch.uk/shell/stylesheets/brookfield.css
FIND 'galileo'. The image of the two touching hands is
positioned OK in
Seamonkey (with margin: 13.5 em), but in IE it is a couple of
ems too
far to the right. Whatever I do, I cannot get it right in
both browsers.
If I reduce margin-left from 13.5 ems to 13.0 em, the image
in IE is
hardly affected, whereas in Seamonkey it moves too far to the
left.
Does this have something to do with browser interpretation?
If you go down to the next image (Science, Professor
Greenfield),
<p><div class="bright_area"
style="margin: -30px 0px 0px 220px;
width: 300px; height: 170px;
padding: 5px 0px 0px 15px; ">
I have the text in the grey area (div) more or less where I
want it in
Seamonkey, having given the div padding-top: 5px,
but in IE there is not enough padding on top of the text.
As I gradually move padding-top up from 5px to 8px, Seamonkey
responds,
but IE does not seem to respond at all.
What is the solution?
Thanks for your help.
Adrian
Joe Makowiec wrote:
> On 22 Sep 2007 in macromedia.dreamweaver, Adrian Stock
wrote:
>
>> Is there a general tutorial on how to overcome
browser differences?
>>
>> Hi All,
>>
>> Can anyone point me at a tutorial (or book) which
systematically
>> deals with techniques for coping with different
browsers
>> interpreting the same css and html code differently.
>>
>> I find myself increasingly frustrated and helpless
when fixing
>> something for one browser (e.g. Mozilla, Seamonkey
etc) and finding
>> it looks a mess in IE, and when I fix it in IE, it
does not work in
>> Mozilla etc.
>>
>> Acute example, where I need help (but I do not want
to keep coming
>> back):
>>
>>
www.brookfield-park-pri.lancs.sch.uk/shell/contents/prospectus/prospe
>> ctus/prospectus.html
>>
>> To see the current disgrace look at the above, then
search for
>> 'Galileo'. Perfect fit in Seamonkey, a mess in IE.
>>
>> In IE the absolute positioning is different from
Seamonkey, also
>> padding-top in the 'Mathematics' quote differs.
>
> Actually, try resizing the text in a Mozilla-based
browser (like
> Seamonkey) - it's broken there, too.
>
> The problem in this case isn't browser differences, it's
a fundamental
> misunderstanding of how web development works. You're
trying to
> position that information absolutely in the middle of a
whole bunch of
> relatively-positioned stuff. When the
relatively-positioned stuff
> moves, as it will due to changes in font size, the
absolutely
> positioned stuff stays put and winds up out of place.
(Different
> browsers have slightly different concepts of what font
size is, which
> is why you're seeing the difference between IE and
Moz-based browsers.
> I suspect that if you checked in Safari or Camino, you'd
have the
> same problem.)
>
> Try this and see if it doesn't suit your purpose better:
>
> <h2>Mathematics</h2>
> <div id="Michelangelo" style="width:550px;margin:0
auto;padding:10px;border:1px solid #333;background-color:#fff;">
<img
src="images_prospectus/galileo_01_justus_sustermans_sm_200x245.jpg"
alt="Galileo, painted by Justus Sustermans" width="200"
height="245" class="img_left">
> <div style="margin-left:250px;">
> <p class="normal_red">Mathematics is the language
<br>
> in which God wrote the universe</p>
> <p class="normal_red">Galileo (1564 –
1642)</p>
> <img
src="images_prospectus/michelangelo_creation_of_adam_01.jpg"
alt="Detail from 'The Creation of Adam'" width="150"
height="55">
> </div>
> <br style="clear:both;line-height:0;">
> </div>
>
> What you don't see in the code snippet is that I've also
changed the
> margins in the .img_left class to 0.
>
> The div's position is now relative (the default if you
don't specify),
> which means that it will always come after the
'Mathematics' headline
> in the flow of the document. It has a fixed width and
margins are set
> to 0 auto (top/bottom - left/right), which means that it
will center.
> The stuff which goes to the right of the picture has its
own div, with
> a left margin sufficient to clear the image. (Because
the image is
> floated, the margin has to be from the contining div,
not the image.)
> Finally, the last <br> tag clears the float, so
that the containing
> div goes all the way past the picture of Galileo.
>

Similar Messages

N8 Anna browser differences / issues?

A couple of things I've noticed since the Anna upgrade, WRT the browser.
1. When entering text in text windows for some forum posts (it actually works correctly on this forum, but on others I read / post to) the newline button doesn't add a line break. It did using the browser in PR1.2, can't remember the behaviour in PR1.1.
2. When using the PR1.2 browser, I used to double tap on the screen to zoom, which worked very well. This seems to work quite differently in Anna.
Both are notable issues / irritations for me. I suspect 1 is a big / issue - whether 2 is expected or planned behaviour, or not, though I'm unsure.
Truth be told, I've not found anything hugely positive about the upgrade to Anna - all it's brought me is irritations in the differences or things that work differently. Performance and stability seem the same to me - which is to say that it's been good before and after Anna. The difference in look and feel just makes me feel meh. I don't mean to be overly critical, I kind of expected more from it, really.
My N8 (admittedly this is my 2nd - first encountered the bug where it won't charge, nor turn on) has been well behaved, performs well and is stable. Main irritations have been with things like WiFi access being, well, unreliable and flakey - and seemed to be best served with scanning turned off, and WiFi power saving on. Post Anna, that hasn't improved, WiFi is still flakey, and not fully reliable (and there is context, there, I've got plenty of other WiFi devices that are stable, including other mobile phones).
Photo viewer no longer picks up on all my photos any more since Anna (I'd have to move other folders, that worked just fine before Anna). Browser I've not found any benefits, and merely negatives. Portrait qwerty means nothing to me, as I find the landscape one tricky enough to get key presses accepted accurately. Video player seems no better (still no bookmark facility).
3.06 of maps seems the golden release - every beta since has been awful, one way or another - too much removed or configuration options removed, and the app dumbed down (3.08 betas). I've tried 3.07 and both 3.08 releases and in all 3 cases have reverted to 3.06 once I became sufficiently irritated that functionality that I wanted or wanted to configure better had either been removed, or was no longer configurable.
Not sure what's going on with N8 software, but I'm considering imposing a software freeze on myself, because it seems that newer releases are doing nothing more than irritating me in not addressing things that need addressing, and merely tweaking look and feel, and dumbing everything down to make it less of a well usable device.

laffcarl wrote:
Well put
Another Browser issue entering text into forums, that has stopped me using one of the only sites I used to frequent before 'AnnaUpdate!', has the strange effect of sending a line of 'Question marks and maybe the odd square box? (Have tried all font settings)
Also the ?'s and square boxes don't add up to the characters in the message i.e.. a 50 character message will be sent as may be 10 ?'s or sometimes just a few. The annoying thing about it is, it looks fine before and as you send it, but when you look at the message you have sent it's as described and rather sinister looking for the recipient lol.
One step Forward-Three steps Back!...dont even start going on about the flash player lmho...What I need is to be able to butcher the N8's camera into my old N95 then there would be no problems
£400 odd quid for a 12 meg nokia camera, you can get an SLR for that money....But hey wait..."You can't browse the web with an SLR!!"...Oh it's OK, you can't browse it with Nokias Flagship either lmao
*Shakes head in disbelief*
Here's the thing - I'm not a hater - I'm not just looking to bash Nokia. Personally, I'm drawn to their handsets because for me, OVI / Nokia maps is a killer app for me.
All the same, though, and it does really irritate - key things people have been complaining about, still not fixed. Basic functions that people have been wanting from various normal apps not implemented. Yet Anna looks a bit more funky.
Same with the mapping betas - well actually worse - 3.06 for me seems to work very well - practically all the key things working quite well. Not perfect, and certainly could be enhanced.
But the recent betas have been awful - ripped out functionality, removed configuration options, dumbed down functions - but again, it looks more funky. But it all just leaves me with a big "So what?". The newer versions simply don't work as well, are not as capable, and all with some dogmatic opinions expressed as the rationale behind why some things have been removed, some options removed, and some bugs not addressed.
If they'd just focus on getting the stuff that doesn't work well, to work, in the process not remove good features or configuration options that many will want to use, THEN - if they have the time - update the visuals, then fine. But I'm sick and tired with the focus on form over function - it's making me question my entire reason for sticking with Nokia handsets - their mapping app - and I don't want to be told that mapping on phones is due a paradigm shift - I just want it to work well, with the maps updatable and relevant.

Shrink-to-fit browser differences

The following code illustrates a shrink-to-fit (shrink-wrap) difference between browsers. All my Mac browsers shrink the yellow area as intended if the browser window is wide enough to allow the red, green and blue boxes to be on one line. However, if I reduce the window width to force one or two of these boxes onto other lines Camino 1.6.9 and IE 5.2.3 continue to shrink-to-fit but Firefox 3.5.2, Safari 4.0.3 and iCab 4.5 fill the brown box with yellow. Can anybody tell me what to do to get Firefox, Safari and iCab to shrink-to-fit as intended? Please see my demonstration page at: http://links.open.ac.uk/www/shrink-wrap/
<div style='overflow: auto; background: brown'>
<div style='float: left; margin: 10px; background: yellow'>
<div style='float: left; margin: 10px; width: 300px; height: 100px; background: red'></div>
<div style='float: left; margin: 10px; width: 300px; height: 100px; background: green'></div>
<div style='float: left; margin: 10px; width: 300px; height: 100px; background: blue'></div>
</div>
</div>
<div style='float: left; margin: 20px; width: 300px; height: 100px; background: purple'></div>

I have rewritten my page at http://links.open.ac.uk/www/shrink-wrap/ and would appreciate any constructive comments.

Help with Frameset and Browser differences

I hope someone can help me with my Frameset. It works great in Safari but Firefox doesn't recognize the frames. I'm using Dreamweaver CS5.5, Mac OS10.8. Here's the link: http://tonyhertz.com/2012/Frameset_black_white_landscape_photo.html
Thank you.

I often work with Photographers. Sample gallery page:
http://alt-web.com/GALLERY/Gallery.php
Not sure what you mean by 2 targets open with one click.
What would be best to use instead of Frames?
Dreamweaver Templates (.dwt files) to composite your site layout and create editable regions for content that will change from page to page.
http://www.smartwebby.com/web_site_design/dreamweaver_template.asp#1
Server-Side Includes for common headers, footers & navigation elements.
http://www.smartwebby.com/web_site_design/server_side_includes.asp
If you want your header, sidebar and footer to be stationary (always visible), apply CSS position:fixed property to those divisions. For a quick example, see link below. View source in browser to see the code.
http://alt-web.com/TEMPLATES/FixedLayout.shtml
There are many ways to design a user friendly site without those pesky frames.
Nancy O.

How to overcome browser malware on iMac

Has anyone examined the question of browser malware, i.e. the browser pages being changed to request more, apparently legitimate, information such as bank account numbers and pin numbers on appently legitimate bank screen pages? Does this require keystroke capture malware or can undisplayed or drop down selections be captured?

Then you will have to run Windows.

Cross browser differences

The jsp pages in our project work fine in IE browser. But in Netscape browsers, the alignment is all messed up. We are at the end of the project and we dont have time to change all the jsp pages. I was told that there is some kind of javascript to handle situations like this. Including that javascript in the jsp pages essentially solves this problem. I was wondering if this is true? Please share your knowledge on this topic. I really appreciate your help.
Thanks,
Ravi.

Hi,
it depends on how you have structured your code. If you have done a css for the layout, you can know what browser is in use and switch to a specific external css. Something like:
if (document.layers)
document.write("<LINK HREF='netscape.css' REL='stylesheet' TYPE='text/css'>")
else if (document.all)
document.write("<LINK HREF='stile.css' REL='stylesheet' TYPE='text/css'>")
else if (!document.all && document.getElementById)
document.write("<LINK HREF='mz.css' REL='stylesheet' TYPE='text/css'>")
else
document.write("<LINK HREF='xx.css' REL='stylesheet' TYPE='text/css'>")
and so on...
Sometimes the problem is in using special costruc that works fine only in IE (for example): this is quite more complicated to solve, becouse you have to find a different solution.
There isn't any "general" solution to cross browser compatibility; usually it is a good idea to start developing in order to achieve it and not to demand it in a late stage.

IE11 browser difference between "Default" and "Internet Explorer 11" user agent string

I installed IE11 in my machine .And also we migrating all our developed application (ASP .Net/ VS 2010) to work in IE11 .
But when i open (Developer tool (F12) -> Emulation) In that ,
While selecting "User agent string" i two different option
Default
Internet Explorer 11
Actually what difference between this two user agent string and too i am working in .Net
And i select "IE11" as a user agent option , most of my application working flawless (design) but if i select "Default" throwing lot of design oriented bugs.
Is there setting to be made in .Net framework or anything else
Because it should work in both "Default" and "IE11" user agent string

Hello kumaran_Arun,
Please try to reset Internet Explorer and check if the issue still exists.
http://windows.microsoft.com/en-hk/internet-explorer/reset-ie-settings#ie=ie-11
If this issue is related to Internet Explorer web development, to receive better support, it is recommended to post in the MSDN forum.
The professionals there will be glad to help you.
https://social.msdn.microsoft.com/Forums/ie/en-US/home?category=iedevelopment
Thanks for your understanding.
Best regards,
Fangzhou CHEN
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact [email protected]

Browser Differences / Slideshow

I have finally perfected using the Slideshow Command to
display photo albums on my website. The same photo in FireFox
displays perfect. In IE it has areas that look like somewhat
scratched off the color. I have put the original back on the
server, but still IE displays the image as though it is scratched,
and Firefox displays it perfect.
Any suggestions would be greatly appreciated.

Thanks for your reply.
Go to www.mcgregorlink.com, point to PHOTO GALLERY select
the album VARIOUS PHOTOS then the 5th photo of a girl playing a
horn. Created using the Fw slideshow Black(SPRY/HTML).
When viewed in IE, the photo appears scratched, in other
browsers it does not.
As a comparison, go back to homepage, point to SPECIAL PHOTOS
page down to same photo, again no. 5, and you will see the photo is
not scratched. This time the photo was inserted directly, not using
Fw slideshow. It appears ok regardless of browser.
Again, thanks.

Browsing difference from IE to Mozilla.

I made a website but I noticed a problem on Firefox.
On Internet Explorer, the webpages are displayed perfectly. Exactly I see in my Dreamweaver but when I open the same page on Mozilla Firefox, my background images are significantly smaller. Its like, I used a specific background image in one of my table cell and I have another table inside that cell. When its on Internet Explorer, everything are well positioned and with the right sizes. However, when I open the same page, those background images are significantly smaller. I tried with several computers and the problem only emerges in Firefox. How can I fix that?

The universe of potential errors that you could have made is just too large to guess what you might have done. Can you show us the page by posting a link to it?
In general pages that display properly in IE and badly in FF are pages that have invalid code on them. Does the page validate when you go here?
http://validator.w3.org

Browser Differences

Hi,
I have developed a very simple website in DW CS3 (
http://homepage.mac.com/m3stu/Eden/index.html).
It looks great in Safari but for some reason in the other browsers
(Firefox, Camino, IE) I have tested one of the div's containing a
slideshow is not displayed properly.
As the screen renders it is displayed in the correct place
but once the window has completed loading the image is moved to the
top left of the screen. I have checed the css over and over again
but I cannot see the problem. Can somebody point me in the right
direction please.
Thanks

Anybody got any ideas?

MovieClipLoader browser differences

trying to load
http://www.sandsmuseum.com/cars/elise/thecar/side.jpg
with MovieClipLoader i get the following (see code) responses first
from firefox then IE when tracing params from MovieClipLoader's
onLoadComplete and onLoadProgress methods
any ideas why kids? :)

yes i do sadly, both FP9
ive been trying security issues but no cigar. if i try these
two images:
http://www.sandsmuseum.com/global/titleimage/b7.jpg
http://www.sandsmuseum.com/cars/elise/thecar/side.jpg
the first loads fine into both ie and ff, but the second only
loads into ff
who knows

Transfer Price differences in COPA

Hi Experts,
A Sales Order is created in Plant A (of cocodeA) to an outside customer.   However, the product is procured from Plant B (cocodeB) of the same group.   Hence this triggers intercompany transaction.
In COPA, the transfer price values are showing some differences. say about 110.15 EUR on a quantity of say 15000 + units sold. eg. In CoCode-A, it is showing 65000 EUR and in CoCode-B the transfer price is 65110.15 EUR.
when I observed, it is found that the currencies in CoCode-A and CoCode-B are different (EUR & USD).   The transfer price per unit is 4.31 EUR. However, In Cocode-B, it is showing as 4.311230 EUR after converting from USD. (since CoCode-B the Cur USD).
Now, the question is how to overcome these difference in COPA.   same transfer price values are showing different in different company codes. as the volumes increase, the bigger the difference.
thanks in advance for ur reply.
priyanka.

No, that is not the case; the invoice amount corresponds to the total of the line items plus tax. I'll try to clarify the situation with an example:
Price of material MAT001 from PO: 1000,00 CUR
Price of material MAT001 as updated upon entry of incoming invoice: 1200,00 CUR
Tax percentage: 20%
Tax amount: 240,00 CUR
Invoice amount: 1440,00 CUR
Balance: 0,00
In such a case I get the error "Balance is not equal to zero: 200,00 CUR" because of the 200,00 CUR that doesn't get posted anywhere.

Need to know how to do a face lift on my site, can anyone help?

I'm brand new to Flash/Adobe/Dreamweaver so I'm reaching out for some help from you guys. I'm an IT admin for an insurance company and they have also made me the webmaster and have been given the task of doing a little face lift on our site. The site is www.altuonline.com if you want to view it first. First, I've downloaded trial versions of Dreamweaver SC4 and have purchased WB 2005 for ASP.net applications. Our site contains some flash and asp.net applications. I have .aspx, .fla/swf files and all will be getting edited. First I thought about making the page load alot faster and expending the borders of the site all the way out almost to the frames of IE, this would be a good first step. If you have time please post some ideas of where I would start off so I can complete this within timely fashion...maybe under 3 months....

cajun900RR wrote:
First I thought about making the page load alot faster and expending the borders of the site all the way out almost to the frames of IE, this would be a good first step.
Content-wise, loading faster will likely be easier to accomplish if you use Flash only sparingly rather than depending on it to deliver all of your site's content. And avoid use of large images. This will also make it easier to maintain in the future (and it addresses the issues brought up earlier in a simpler manner).
But what do you mean by "expending the borders of the site all the way out almost to the frames of IE"? I do hope you are thinking in terms of the browser's viewport. If so, look into flexible or liquid layouts. Just don't make the common beginner's mistake of thinking about monitor sizes and resolutions. Those are not relevant to Web pages. Also, design your pages with W3C compliance in mind before worrying about how various browser differences - you are going to test in various browsers, right?
If you have time please post some ideas of where I would start off so I can complete this within timely fashion...maybe under 3 months
For quick layout solutions, you might want to consider some of Project VII's solutions. Quick, customizable, compliant, and great support. Don't let that be an excuse not to learn HTML/CSS, though
And lurk in here for lots of good advice and helpful links even when you don't have a specific question in mind.
Mark A. Boyd
Keep-On-Learnin' :-)

IE 6 preview problem

Hi - Happy Easter, by the way (to those that celebrate)... Anyone up for a challenge getting a page to view properly? - It looks great in IE7, but IE6 the top shadow graphic jumps offset, and the content area stretches a little to reveal a repeat in the background image. I also have a slight problem with Firefox in that the main image doesn't center (though I can live with that one if needed...)
Here is the link: http://www.thespiralconnection.com/gallery/index.html
here is the stylesheet that's associated with this aspect - the section named ".twoColFixLtHdr #mainTopShad " is what I tried to make work - basically I'm looking to add a shadow graphic to the content area - and this piece became a problem (It worked find without that being added...
@charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 11px;
line-height: 11px;
cursor: default;
width: 200px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
height: 22px;
    width: 200px;
margin: 0px ;
padding: 0px ;
list-style-type: none;
font-size: 11px;
line-height: 11px;
position: relative;
text-align: left;
cursor: pointer;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 200px;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 200px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
/*border: 1px solid #CCC;*/
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
height: 18px;
    width: 200px;
display: block;
cursor: pointer;
background-image:url("../images/nav_metal.jpg");
/*background-color: #000;*/
margin: 0px 0px 0px 0px;
padding: 4px 0px 0px 0px;
color: #fff;
text-decoration: none;
text-indent: 20px
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-position: -200px 0px;
color: #ffcc00;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #000;
color: #ffcc00;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
PAGE CONTENT
a.nav:link {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #ffffff; text-decoration: none;}
a.nav:active {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #ffcc33; text-decoration: none;}
a.nav:visited {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #ffcc33; text-decoration: none;}
a.nav:hover {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #ff9933; text-decoration: underline;}
a:link {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: ##660066; text-decoration: none;}
a:active {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: ##660066; text-decoration: none;}
a:visited {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: ##660066; text-decoration: none;}
a:hover {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: ##6633ff; text-decoration: underline;}
.bodytext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 21px;
color: #000;
.headers {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-style: normal;
line-height: 15px;
font-weight: bold;
color: #660066;
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 21px;
color: #000;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(../images/swirl-repeat_med.jpg);
background-repeat: repeat;
.twoColFixLtHdr #container {
float: left;
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
/*background: #FFFFFF;
border: 1px solid #000000;*/
text-align: left; /* this overrides the text-align: center on the body element. */
.twoColFixLtHdr #header {
background: #DDDDDD;
padding: 0 0px 0 0px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0px 0px 0px 0px;
.twoColFixLtHdr #mainContent {
background-image:url("../images/content-shadowsBK.gif");
margin: 0px 0px 0px 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 20px 20px 5px 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
.twoColFixLtHdr #mainTopShad {
background-image:url("../images/content-shadowstop.gif");
margin: 0px 0px 0px 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0px 0px 0px 00px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
.twoColFixLtHdr #footer {
margin: 0px 0px 0px 200px;
padding: 0 0px 0 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background-image:url("../images/footer_metal.jpg");
height: 22px;
color: #fff;
text-decoration: none;
font-size: 11px;
line-height: 11px;
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 5px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
text-align: center;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
Thanks for any insight!!
Jesse

whattevva wrote:
Thanks for checking - the code is still a bit still a bit sloppy (the price I paid grabbing the demo page and trying to refine it)... I made the recommended fixes (except for the unfound links - I'll tackle that one once I get this going...)
I don't see any evidence that you made those changes at all.
I got pretty close with some quick edits, but there is still something odd in IE6. Although, I'm using IETester and don't have a stand-alone IE6 available today, so it might be different.
[index.html]
Again, delete lines 15-31:
Starting with <style type="text/css">
and ending with <![endif]-->
inclusive.
Change:
</div>
<div><img src="../images/content-shadowtop.gif" width="580" height="13" /></div>

<div id="mainContent">
To:
</div>

<div id="mainTopShad"> </div>
<div id="mainContent">
[SpryMenuBarVertical.css]
You created a #mainTopShad selector, but weren't using it.
Change:
.twoColFixLtHdr #mainTopShad {
background-image:url("../images/content-shadowstop.gif");
margin: 0px 0px 0px 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0px 0px 0px 00px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
To:
.twoColFixLtHdr #mainTopShad {
background-image:url("../images/content-shadowtop.gif");
margin: 0px 0px 0px 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0px 0px 0px 00px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
line-height: 13px;
(corrected typo on filename and added line-height)
See if that helps.
And, do fix the syntax errors I mentioned last time. It doesn't make much sense tweaking on browser differences with invalid code.

Opening Document in Work from the Sent To Email a Link instead on downloading it

Documents send via the Sent To > Email a Link SharePoint 2010 Document Library Menu is downloading rather than opening in Word. This is happening for some users and while it is open in Word just fine for other users.
New to SharePoint

Hi Marlon,
Please compare the client Office and IE browser differences of settings between them, check the following things.
Please use the IE browser 32-bit version, also check if it is competability mode issue.
Please add SharePoint URLs in IE browser trusted sites zone.
Please reset the IE browser to default settings.
Please check and make sure the "SharePoint OpenDocuments class" add-on is enabled from IE browser
Please repair Office application with installing Office Tools->Microsoft SharePoint Foundation Support component.
http://blogs.technet.com/b/emeaoffice/archive/2013/04/29/you-get-an-error-message-when-you-open-an-office-file-from-sharepoint-on-a-computer-on-which-you-installed-more-than-one-version-of-office.aspx
Thanks,
Daniel Yang
Forum Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help. If you have feedback for TechNet Subscriber Support, contact
[email protected]
Daniel Yang
TechNet Community Support

Overcoming browser differences

Similar Messages

Maybe you are looking for