up vote 1 down vote favorite

I was creating a chrome extension in which some icons are shown in a blank tab. I am using javascript to add the icons in the page. Below are the code snippets:

HTML:

<div id="icons" class="icons"></div>

Javascript:

function addIcons() {
  for (var i = 0; i < iconArray.length; i++) {
    var link = document.createElement('a');
    link.href = linkArray[i];

    var icon = document.createElement('img');
    icon.src = "images/" + iconArray[i];
    icon.title = titleArray[i];

    link.appendChild(icon);
    document.getElementById('icons').appendChild(link);
  }
  document.getElementById('icons').style.borderBottom="2px solid blue";
}

The problem is that the border is appearing above the icons(The border should appear below!). Can anybody tell me what should be done to get the desired result?

share|improve this question
Soumen, can you try using padding or margin to push the border below the icons? (I'm not sure which is best as I'm speculating.) Hope that might help. Also, @deadrunk makes a good point. Make sure your HTML is validated. – jmort253 May 10 '12 at 6:13

2 Answers

up vote 0 down vote accepted

Just tried your code and it works correctly.

Screenshot: https://skitch.com/runk/83fes, latest Chrome.

Are you sure you have a valid html markup on the rest of the page? May be problem with it.

And I'd suggest not to set a css style via js.

<div id="icons" class="icons" style="border-bottom: 2px solid blue"></div>

Or using css style tag (file)

<style>
.icons { border-bottom: 2px solid blue }
</style>
share|improve this answer
up vote -2 down vote

Check http://reference.sitepoint.com/css/border-bottom for setting bottom border for any DOM element.

share|improve this answer
1  
Can you provide an example here rather than just referencing a link? – Jonathan Sampson♦ May 10 '12 at 6:07
e.g. document.getElementById('icons').style.border-bottom="2px solid blue"; --OR-- document.getElementById('icons').style.border-bottom-color="blue"; document.getElementById('icons').style.border-bottom-width="2px";document.getEle‌​mentById('icons').style.border-bottom-style="solid"; – rt2800 May 10 '12 at 6:08
You can edit your answer and add the example(s) there. – Jonathan Sampson♦ May 10 '12 at 6:09
Not in the comments. Use the edit link and put it in the answer. Also, you might explain how your example is different or better than what the op is using in his code. In other words, how does your proposed solution solve the problem? – jmort253 May 10 '12 at 6:09
1  
document.getElementById('icons').style.border-bottom="2px solid blue" isn't a valid js code – deadrunk May 10 '12 at 6:10

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.