Document.write and css issue

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
cacique506Asked:
Who is Participating?
 
GarthSnyderConnect With a Mentor Commented:
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
 
thehagmanConnect With a Mentor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.