Background graphics misplaced in Firefox, OK in Safari and Chrome.

[akirson]

I am working on a relatively simple site, which was created a few years ago by someone else. The background graphics are split into sections (must have been the tool that was used to create it back then). The site renders fine in Chrome and Safari, but not on Firefox (v26), and I can't for the life of me figure out why. To further confound the issue, some of the pages of the site render properly on Firefox, but others don't.

 

Any help will be greatly appreciated. I have attached the css file and two of the page's html. To see the site itself, please go to: www.orlidiamonds.com and view the following pages:

 

www.orlidiamonds.com/fluorescence.htm - broken in Firefox

www.orlidiamonds.com/about.htm - OK in Firefox

www.orlidiamonds.com/mysterious.htm - broken in Firefox

 

If any additional pages are needed, I'll be happy to add them.

 

Thanks!

 

 

about.htm

fluorescence.htm

Stylesheet.css

[davej]

Well, it's a horrible old table-based design anyway. Why don't you convert it to a div-based design?

 

I can't even get it to save properly.

Edited December 13, 2013 by davej

[newseed]

You going to be in for a real nightmare because you are using tables for one. Some of your cells/tables have valign of middle which is not going to work well and you set your background image to be aligned to the bottom. For long pages and short pages it will work not unless you set a fixed height. Even if you have a fixed height, tables will not stay that way unless ALL your pages are of the same amount of content. BAD practice.

 

Second, you should be using divs for you layout and let it flow naturally. I would break up that background image into two separate images. One for the header area and the other for the body area. For pages that have different backgrounds (different diamonds on the left) you will just need to replace that but it must be contained within that table area below the header area.

 

I really don't see a quick fixed other than what I mentioned. CSS can do so much more than what you have so far and I would rebuild it so that you can get the most out of using CSS.

Edited December 13, 2013 by newseed

[akirson]

Thanks - I realize that this is a bad design, but I'm not sure I can completely redesign it. I am not a css maven. If I was to redo the site, which web design tool would you folks recommend? Since this is not my main business, I wouldn't want to spend too much on a tool.

[newseed]

There a number of good free web editor tools but you want one that meets today's standard. Some people use Notepad...others Dreamweaver (costly). It's a matter of preference. If found using Expression Web 4 (EW4) does just about everything I need and it's free.

 

Expression Web 4

 

Regardless what tool you use, WYSIWYG do not always give you optimal results which is why it's very important to learn and understand HTML and CSS. I use EW4 because of the user interface. I never use the WYSIWYG editor to design a site/page and I always use IE, Firefox, Chrome and Safari for test each page.

 

If you find that building websites uses up too much of your time then you might want to hire a web developer to build it for you. But if time is what you have then learn HTML/CSS.

 

I hope this helps.

Edited December 14, 2013 by newseed

[akirson]

Thanks newseed. I use a Mac, but I have a PC as well. I'll check out Expression Web, since this is one-off project.

[akirson]

Well, I downloaded and installed Expression Web, and it won't launch - it comes up with this:

https://www.dropbox.com/s/9l95zr7d4bjyba8/Screenshot%202013-12-14%2011.16.52.pdf

 

I uninstalled and downloaded again and got the same result. Back to the drawing board....

[newseed]

It doesn't tell me too much about why it doesn't launch. What OS? Did you install this with anti-virus turned off? Normally it should install with it turned on but it's possible that the anti-virus is preventing it from launching. Check your anti-virus software to see if can configure so that it allows EW4 to launch.

 

I think the first thing you should do is to see if your Windows is up to date with all security, patches and updates via Windows Update. There is a fix for this very issue.

 

If you are up to date and it still doesn't launch I would then check the anti-virus software.

 

Also, have you tried rebooting? Sometimes the installer file is still running causing it to not open EW4. You can check via Task Manager to see if you can find any instance of the installer running.

 

Also, did you totally uninstall EW4 via using Uninstall from the Control Panel before you tried to install it a second time?

 

If that fails then you can try this:

EW Crashes

[akirson]

Windows 7 with all updates applied, including .NET 4.5.1

Uninstalled via Control Panel

Avast Free Antivirus - turned off for the installation

Rebooted after install

Followed the recommendations in the EW Crashes link. Installed EW to c: instead of Program Filles. Renamed Common folder.

Same result - crashes on open.

[akirson]

OK, found the fix. Needed to re-register the jscript.dll

 

regsvr32 c:windowssystem32jscript.dll

 

It now opens properly. Thanks for your patience in explaining stuff, and the link to the Expression Web support team. I found this solution under

Causes for Expression Web Crashing

[davej]

Expression Web looks very cute, but I don't know what it does that you really need. All I ever use is the included video encoder. This webpage is so simple that you should be able to get it redesigned very cheaply, for essentially beer money.

[akirson]

Dave, how much beer do you drink? :-) Want to take it on?

[davej]

Oh, I don't know. There might be other thirsty people here. Dsonesuk is our css maven.

 

---EDIT---

 

I have been looking at this in my spare time but it is slow going. The existing styles are not easy to reuse without caution because some of them are bogus. This is a first cut...

<!DOCTYPE html><html lang="en"><head><meta charset="ISO-8859-1">  <title>Fluorescence</title><style>*{border:0;margin:0;}body {width:100%;height:100%;margin:auto;font-family:Verdana,Arial;}#wrap{width:950px;margin:3px auto;border:1px solid #555;}ul{list-style-type:none;}#menu li{display:block;float:left;text-align:center;height:27px;line-height:28px;color:#1D1D1D;font-family:Verdana,Arial;font-size:8pt;}#orli{float:left;}img{display:block;margin:0;padding:0;float:left;}.bg{margin-top:92px;background-color:#cccccc;background-image:url('images/bg_inner.jpg');background-repeat:no-repeat;}.contact{width: 189px;}.home{width:132px;}.about{width:108px;}.specials{width:134px;}.fluorescence{width:138px;}.inventory{width:128px;}.contact{width:149px;padding-right:4px;}.menu{background-image:url('images/menu.gif');background-repeat:repeat-x;}.selected{background-image:url('images/menu_selected.gif');background-repeat:repeat-x;}.selected a{color:#1D1D1D;text-decoration:none;}.not_selected{background-image:url('images/menu.gif');background-repeat:repeat-x;}.not_selected a{color:#1D1D1D;text-decoration:none;}#right1{ padding:130px 0 0 359px; height:635px; /*needed because icons at bottom are floated and not in the flow*/width:590px;}#right1 h1{font-size:12pt;color:#cc0033;color:#cc0033;font-style:italic;margin-bottom:0;}#right1 p{margin:11px 0 11px 0;font-size:8pt;color:#020100;line-height:11pt;color:#000000;width:95%;}#right1 .p1{margin:3px 0 10px 0;}#right1 .p2{margin:0;padding:0;}.bottom_icons{ float:right;padding-bottom:1px;}</style></head> <body><div id="wrap">    <img src="./images/top_left_inner.gif" alt="img1"><img src="./images/home_not_selected1.gif" alt="img2"><ul id="menu">    <li class="home not_selected"><a href="http://www.orlidiamonds.com/index.htm">HOME</a></li>    <li class="about not_selected"><a href="http://www.orlidiamonds.com/about.htm">ABOUT US</a></li><li class="specials not_selected"><a href="http://www.orlidiamonds.com/announcements.htm">ANNOUNCEMENTS</a></li><li class="fluorescence selected"><a href="./Fluorescence.htm">FLUORESCENCE</a></li>    <li class="inventory not_selected"><a href="http://www.orlidiamonds.com/harmony" target="_blank">INVENTORY</a></li>    <li class="contact not_selected"><a href="http://www.orlidiamonds.com/contact.htm">CONTACT US</a></li>   </ul> <div id="orli"><a href="http://www.orlidiamonds.com/fluorescence.htm#"><img src="./images/logo_inner.gif" alt="orli"></a></div>    <img src="./images/bg1_inner.jpg" alt="bg1_inner">       <div class="bg"><div id="right1" class="right1"><h1>The Impact of Fluorescence in Diamonds: A Different Research Perspective</h1><p class="p1">William E. Boyajian<br><br>President, Gemological Institute of America</p><p class="p1">The effect of ultraviolet fluorescence on diamond appearance has been hotly debated for at least the past decade. Opinions of even the most experienced tradespeople vary widely. With great conviction, some say that blue fluorescence of different strengths typically enhances a diamond's overall appearance. Others, as convincingly, say that it has a negative effect. To address this controversy, researchers at the GIA Gem Trade Laboratory conducted an experiment on the effects of long-wave ultraviolet radiation on the color appearance and transparency of gem diamonds. Their results are reported in this issue. </p><p>This study challenges the perception held by many in the trade that UV fluorescence generally has a negative effect on the overall appearance of a diamond. In fact, the results support the age-old belief that strong or even very strong blue fluorescence can improve appearance rather than detract from it, especially in diamonds with faint yellow body color. This result is consistent with the slightly higher 'asking' prices reported for these stones. While the apparent benefits of blue fluorescence are less obvious in colorless to very near-colorless diamonds, they still were evident in the study. This should bring into question the trade's lower 'bid' prices for moderate to highly fluorescent diamonds in the better colors. It also makes us question the source of the present controversy surrounding fluorescent diamonds. It may be the result of trademembers' misunderstanding of the complexity of the issue, or the extreme price sensitivity in the highest color grades (where there are fewer stones and distinctions are more subtle). Or it may be the fact that it is simply easier to move goods without the encumbrance of a reported fluorescence.</p><p>To some extent, this type of research project is unusual in gemology, in that human observation rather than instrumental analysis is the key tool. Yet evaluation of this human element is just the kind of important research that is needed to help resolve misunderstandings and false perceptions among members of the trade and even the consuming public. Gemological research involves not only the physical, optical, and chemical nature of gems, but also the visual assessment of stones in buying and selling situations. GIA will never alter its course of promoting the scientific examination of gem materials to seek knowledge and understanding, but we also want to encourage more research studies that address important trade concerns. </p>    <p class="p2">Thus, we believe that the diamond fluorescence article is as significant a contribution to gemology as the synthetic moissanite and synthetic emerald articles also featured in this issue. After all, the science of gemology is not just about R.I.'s and S.G.'s, or even sophisticated chemical and spectral analysis. It is also about dispelling (or, in some cases, confirming) beliefs that have been perpetuated over the years, and about separating bias and tradition from reality in the gem industry.</p>  <div class="bottom_icons">  <a href="http://www.orlidiamonds.com/fluorescence.htm#"><img src="./images/jbt.gif" alt="jbt"></a><a href="http://www.orlidiamonds.com/fluorescence.htm#"><img src="./images/polygon.gif" alt="poly"></a><a href="http://www.orlidiamonds.com/fluorescence.htm#"><img src="./images/ags.gif" alt="ags"></a>  </div></div><div style="clear:both"></div></div></div> </body></html>

Edited December 19, 2013 by davej