kig lige på validering af din side
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mozaique.dk%2Fhjem.php&charset=%28detect+automatically%29&doctype=Inline&group=0du har html, head, body start / slut, flere steder, hvilke får dit desigt til at vælte
google api'en loader et default css. (defaultda.css)
ref
https://developers.google.com/web-search/docs/
Don't load CSS - if you don't want to load the default CSS then set "nocss" to true.
google.load("search", "1", {"nocss" : true});
denne linje
google.load('search', '1');
laves om til
google.load("search", "1", {"nocss" : true});
hvilke forhindre loading af default css
du skal så selv defeinere dine css'er
html: der er kun tilføjet et kald af extern css (defaultda.css) og i js lavet om så den ikke loader default css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Hello World - Google Web Search API Sample</title>
<link rel="stylesheet" href="defaultda.css" />
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
//<!
google.load("search", "1", {"nocss" : true});
// google.load('search', '1');
function OnLoad() {
// Create a search control
var searchControl = new google.search.SearchControl();
// Add in a full set of searchers
var localSearch = new google.search.LocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.VideoSearch());
searchControl.addSearcher(new google.search.BlogSearch());
searchControl.addSearcher(new google.search.NewsSearch());
searchControl.addSearcher(new google.search.ImageSearch());
searchControl.addSearcher(new google.search.BookSearch());
searchControl.addSearcher(new google.search.PatentSearch());
// Set the Local Search center point
localSearch.setCenterPoint("New York, NY");
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));
// execute an inital search
searchControl.execute("VW GTI");
}
google.setOnLoadCallback(OnLoad);
//]]>
</script>
</head>
<body>
<div id="searchcontrol">Loading</div>
</body>
</html>
her er starten af en rettet css
defaultda.css
.gsc-control {
width: 1000px;
}
.gsc-control div {
position: static;
}
form.gsc-search-box {
width: 100%;
}
input.gsc-input {
width: 99%;
}
td.gsc-search-button {
width : 1%;
}
.gsc-control-cse,
.gsc-control-cse .gsc-table-result {
width: 100%;
}
1) download deres eks og kig i deres defaultda.css.
2) kig på source code af eksemplet via FireBug (addon til FireFox), der kan du se hvilke class'er der kaldes hvor.