MozillaZine


I have problems to use CSS styles in a correct way

Talk about add-ons and extension development.
helplessdev

User avatar
 
Posts: 4
Joined: March 23rd, 2021, 1:20 pm

Post Posted March 23rd, 2021, 3:13 pm

Hello,
I was writing an addon to modify the layout of google search results ( and many other features).
One feature is to add favicons und numbering to search results.
Number and favicon should be at the beginning of the visible header3 link. But for now they are at height of the hosttext, above the link (also too much at right)
Here is an image to emphasize what I mean.
Image

Here is my relevant code, which adds number and favicon:
Code: Select all
...

        var g = link.parentNode;    //link = an "a" node in google search results
        //create container
        if( !link.hasAttribute('goenContainer') )
        {
            link.setAttribute('goenContainer', "");
            var newicon = new Image();
            var iconcontainer = link.previousSibling || link;
            iconcontainer = doc.createElement('div');
            iconcontainer.style.setProperty("minWidth", "16px", "important");
            iconcontainer.style.setProperty("visibility", "visible", "important");
            var favIcon = iconcontainer.appendChild(goen.createFavIcon());
            iconcontainer = g.insertBefore(iconcontainer, link);

            //add numbers
            if(goenutils.getPref("extensions.googleenhancer.number")){
                if(!link.hasAttribute('goenNum')){
                    link.setAttribute('goenNum', "");
                    var citeNode = document.createElement("cite");
                    citeNode = favIcon.parentNode.insertBefore(citeNode, favIcon);
                    citeNode.textContent = String(s + i) + '. ';
                }
                count[1] += 1;
            }
...


Please read my answer to see screenshots of relevant CSS styles....
Last edited by helplessdev on March 25th, 2021, 7:24 am, edited 2 times in total.

helplessdev

User avatar
 
Posts: 4
Joined: March 23rd, 2021, 1:20 pm

Post Posted March 23rd, 2021, 4:35 pm

The image feature did not work for me, thus I post the image url's:

Here is an image to emphasize what I mean.
https://ibb.co/86vxdHr


Following some images showing the modified google results code including the computed styles for some possibly important nodes:
Googles result link [a href] with my 'div'-container as previous sibeling which itself has two childnodes: 'cite' with number text, and 'img' for the favicon.
https://ibb.co/Zc9H6L4

the link parentNode
https://ibb.co/1RWrtQL

the link parentNode.parentNode
https://ibb.co/1XVjmYT


the link parentNode.parentNode.parentNode
https://ibb.co/9qKr5W0

helplessdev

User avatar
 
Posts: 4
Joined: March 23rd, 2021, 1:20 pm

Post Posted March 24th, 2021, 12:29 pm

Possibly my question was not formulated clearly.
I just need help with CSS styles, especially positioning, not with javascript.
Meanwhile I tried many styles, beginning with just float left, but nothing worked to achieve my goal.

helplessdev

User avatar
 
Posts: 4
Joined: March 23rd, 2021, 1:20 pm

Post Posted March 24th, 2021, 7:03 pm

141 users read my my question up to date, thanks! At least I feel not so stupid now.
However, if nobody here knows a solution, I would appreciate suggestions too. I would try them thankfully.

Return to Extension Development


Who is online

Users browsing this forum: No registered users and 1 guest