?
Solved

Document.write and css issue

Posted on 2009-05-17
3
Medium Priority
?
791 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Several part series to implement Internet Explorer 11 Enterprise Mode
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…
Suggested Courses
Course of the Month14 days, 9 hours left to enroll

771 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