Er det knappen i hjørnet du mener?
Jeg har lige tilladt mig at rette i dine filer:
index.html:
<?xml version="1.0" encoding="utf-8"?>
<!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" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
<title>The Holy Grail 3 column Liquid Layout. Pixel widths. Cross-Browser. Equal Height Columns.</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" href="ultimate.css" type="text/css" media="screen" />
<!--[if lt IE 7]>
<style media="screen" type="text/css">
.col1 {
width:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="main">
<div id="header">
<div id="search">
<input id="searchtext" type="text" name="searching"/> <input id="searchbtn" type="image" src="search_btn.gif" align="absmiddle">
</div>
<div id="banner">
<img src="logo.jpg" width="195" height="102" alt="CSS side" />
<!-- </div> -->
<!-- <div id="flashtop"> -->
<!-- <img src="728x90.jpg" width="728" height="90" alt="Flash" /> -->
<object id="flashtop" type="application/x-shockwave-flash" data="728x90.swf" width="728" height="90">
<param name="movie" value="728x90.swf" />
<img src="noflash.gif" width="728" height="90" alt="" />
</object>
<!-- <embed src="728x90.swf" width="728" height="90" quality=high pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" "></embed> -->
</div>
<div id="menu">
bla bla
</div>
</div>
<div class="colmask holygrail">
<div class="colmid">
<div class="colleft">
<div class="col1wrap">
<div class="col1">
<!-- Column 1 start -->
<img src="flash.jpg" width="570" height="312" alt="Flash" />
<!-- Column 1 end -->
</div>
</div>
<div class="col2">
<!-- Column 2 start -->
<img src="mag.jpg" width="140" height="183" alt="Mag" />
<!-- Column 2 end -->
</div>
<div class="col3">
<!-- Column 3 start -->
<!-- Column 3 end -->
</div>
</div>
</div>
</div>
<div id="footer">
<p>This page uses the <a href="http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm">Ultimate 'Holy Grail' 3 column Liquid Layout</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a>. View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>
</div>
</div>
</body>
</html>
ultimate.css:
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#D1CEBB;
min-width:930px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
/* font-size:90%; */
text-align: center;
}
a {
color:#369;
}
a:hover {
color:#fff;
background:#369;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin: 0;
border: 0;
padding: 0;
/*display: block;*/
}
div#main {
width: 930px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
padding:15px 0 0;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
/* 'widths' sub menu */
#banner {
/*clear:both; */
background-image: url(top_bg.gif);
padding:0px !important;
margin:0;
width: 100%;
/*height: 102px;*/
}
#flashtop{
padding: 0px !important;
margin: 0px 0px 7px -3px;
background-image: url(top_bg.gif);
}
#search {
clear:both;
height: 25px;
background-image: url(search.gif);
margin:0;
padding:0px 15px 0 0 !important;
text-align:right;
}
#searchtext {
height: 14px;
font-family: Arial;
font-size: 9px;
margin: 0px;
padding: 0;
color: #000000;
background: #CCCCCC;
border-color:#FF0000;
border-style:solid;
border-width:0px;
}
#searchbtn {
margin: 0px 0px -5px 0px;
padding: 0px;
}
#seadrch {
clear:both;
height: 25px;
background-image: url(search.gif);
margin:0;
padding:0px 15px 0 0 !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* holy grail 3 column settings */
.holygrail {
background:#ff9; /* Right column background colour */
}
.holygrail .colmid {
float:left;
width:200%;
margin-left:-180px; /* Width of right column */
position:relative;
right:100%;
background:#fff; /* Centre column background colour */
}
.holygrail .colleft {
float:left;
width:100%;
margin-left:-50%;
position:relative;
left:360px; /* Left column width + right column width */
background:#FFD8B7; /* Left column background colour */
}
.holygrail .col1wrap {
float:left;
width:50%;
position:relative;
right:180px; /* Width of left column */
/*padding-bottom:1em; Centre column bottom padding. Leave it out if it's zero */
}
.holygrail .col1 {
margin:0 180px; /* Centre column side padding:
Left padding = left column width + centre column left padding width
Right padding = right column width + centre column right padding width */
position:relative;
left:200%;
overflow:hidden;
}
.holygrail .col2 {
float:left;
float:right; /* This overrides the float:left above */
width:150px; /* Width of left column content (left column width minus left and right padding) */
position:relative;
right:15px; /* Width of the left-had side padding on the left column */
}
.holygrail .col3 {
float:left;
float:right; /* This overrides the float:left above */
width:150px; /* Width of right column content (right column width minus left and right padding) */
margin-right:45px; /* Width of right column right-hand padding + left column left and right padding */
position:relative;
left:50%;
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}Ændringerne er: i index.html er der ved "
<div id="search">
" indsat "
align="absmiddle""
og i css er der ved "
#searchbtn" indsat "
margin: 0px 0px -5px 0px;"
Med disse koder står det rigtigt i min browser(IE7).
Indlæg senest redigeret d. 09.04.2008 16:36 af Bruger #13488