Solved

Document.write and css issue

Posted on 2009-05-17
3
773 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
chrome and edge version of getElementById("p").attributes("title").value 2 36
CSS SASS 4 34
Responsive Font Size 6 29
GET error with Font Awesome 3 16
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
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 position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

838 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