?
Solved

Document.write and css issue

Posted on 2009-05-17
3
Medium Priority
?
817 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
2 Comments
 
LVL 3

Accepted Solution

by:
GarthSnyder earned 1000 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 1000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

When I'm searching for answers on Experts Exchange, I often use Google because it's built into my browser.  To search only on Experts Exchange, I use the "site:" search operator, which can be cumbersome to type out each time I want to run a search.…
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 a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Suggested Courses
Course of the Month9 days, 12 hours left to enroll

612 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