CODEWITHSUNDEEP
cssgoogle-chromewebgoogle-chrome-extension
John Magnolia
John Magnolia

Reputation: 16803

Google Chrome Toolbar breaking website layout

I have an issue with Google Chrome: 19.0.1084.52 m when I have the Ask Toolbar installed it breaks the website layout.

See print screen: enter image description here

Is it usual behaviour that toolbars in Chrome would effect the website?

EDIT: I guess I should wrap everything inside a <div> and move the background-image from the <body> although is there a better option without adding this extra markup?

Website link

Upvotes: 5

Views: 2796

Answers (3)

Toby
Toby

Reputation: 108

A Javascript snippet can disable ask toolbar in chrome. I hope this function spreads quickly!!

function removeAsk(){
    if(document.getElementById("apn-null-toolbar") != null){
        // mainMenu had a style change for its top positioning, returning it to normal
        // perhaps a function can be made which iterates over every element ask has changed
        document.getElementById("mainMenu").style.top = "-16px";
        // Just remove the iframe and style elements
        (elem=document.getElementById("apn-null-toolbar")).parentNode.removeChild(elem);
        (elem=document.getElementById("apn-body-style")).parentNode.removeChild(elem);
    }
}

Call this method after body onload

<body onload="removeAsk()">

Upvotes: 7

Detphx
Detphx

Reputation: 11

I ran into this exact same issue with the Ask Toolbar. I basically took out my positioning attributes and top/left/right/bottom 's and replaced with margins. Margin uses less space and it comes out cleaner.

Although i do agree, it's kind of ridiculous to accommodate for a toolbar because the end-user could have anything installed that breaks and gives your layout bugs. Even Skype extensions will break a layout just changing the phone number.

So there's not much you can do, but use margins and keep CSS to a minimum. Just my 2 cents. and if you have to use CSS then stick with margins.

Upvotes: 1

Konrad Dzwinel
Konrad Dzwinel

Reputation: 37913

There is no Chrome extensions API for creating a toolbar so mentioned extension must have created it via content script. What it means is that for each page you open, CSS and JavaScript files are injected by this extension to create a DOM element within the page acting as a toolbar. Problem with this solution is that using the content script it is possible to mess up website look or even the way it works.

Upvotes: 1

Related Questions