Solved

Document.write and css issue

Posted on 2009-05-17
3
770 Views
Last Modified: 2013-12-08
For the record I am not very experienced in this area but I'm trying to get my way through this to fix a problem we have.

We are using the enclosed code replace header images for the view cart and check out pages on our websites based on a unique number in the landing page url (i.e. sc 33).  The use case is the consumer lands on a page (http://shopping.netsuite.com/s.nl/c.667537/n.2/sc.33/category.777/.f), clicks on the view cart link and the attached code in conjunction with other java on the page writes the header image as a background and lays  the navigation over top of the black section of the background image.

This is working in the safari but not IE or Firefox and I have been modifying everything I can think of without luck.

I have attached two screen shots to show how it is suppose to look (Picture 2) and how it looks in IE and Firefox (Picture 4).  In picture 4 it is a little hard to see but if you look at the red tag on the top middle you can see the links  (  | Apple | Ompay | SmartCard | ) layed over top of the red tag when we need them lower over the black.

The above link is also live so you could click on it and see the actual site, view source if needed.

Sorry this is so much but I'm really at a loss and the folks in the java section helped me as much as I could but recommended I post here.


document.write code
 
<script type="text/javascript">
if ( Header_Image != "" )
  document.write( '<div style="background:url(' + Header_Image + ');height: 150px;width: 960px; background-repeat: no-repeat; background-position: center top;">');
  document.write( "<br>" + Header_Link + "<br></div>" );
 </script>
 
 
---- Header_Link -----  Tag
 
<div style='height: 115 px;'></div><div id='etm-header-menu'><ul><li><a class='left' href='http://apple.com'>Apple</a></li><li><a class='' href='ompay.com'>OmPay</a></li><li><a class='' href='ppasmartcard.com'>SmarCard</a></li></ul></div>

Open in new window

Picture-2.png
Picture-4.png
0
Comment
Question by:cacique506
3 Comments
 
LVL 3

Accepted Solution

by:
GarthSnyder earned 250 total points
ID: 24407251
This is an interesting case!

I believe the fundamental issue is that there's a space between the value and the unit designator in the style of the spacing div you're inserting as part of Header_Link. That is, it's currently "<div style='height: 115 px;'>" and should really be "<div style='height: 115px;'>".

Spaces between a value and its unit designator are not allowed by the CSS specification. See this section on CSS values in general for specifics. However, I would imagine that as with HTML, browsers make some effort to "do what you mean" with slightly noncompliant CSS code.

The interesting thing to me here is that Firefox and IE seem to care whether the style attribute is enclosed in single or double quotes. In theory, attribute values in HTML tags can be either single or double quoted. But if you change the "var sc = ..." line in your JavaScript code to make the exterior quotes single and the interior quotes double (the opposite of its state now), that will also "fix" the problem. I don't suggest this as a fix - it's just an odd thing I discovered while looking at this.

You'll see that even with the extra space removed, there are still some vertical positioning issues in Firefox and IE because of the difference in interpretation of the height of a <br>. In general, it's best not to use elements as spacers (either <br> or <div>). Just apply some CSS margin or padding to the top of the mini-link area to position it in one step. (Be careful if you use margin, since vertical margins between adjacent elements can be coalesced under certain circumstances. See this intro to the CSS box model for more details.

I recommend Eric Meyer's book CSS: The Definitive Guide, 3rd Edition as a CSS reference. It's concise and accurate.
0
 
LVL 20

Assisted Solution

by:thehagman
thehagman earned 250 total points
ID: 24413159
As long as this
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fshopping.netsuite.com%2Fs.nl%2Fc.667537%2Fn.2%2Fsc.33%2Fcategory.777%2F.f
shows a substantial number of html errors (132!), I won't bet on any browser's behavior ...
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now