PDA

View Full Version : repeat-x not working in IE



j05hr
Jan 20th, 2010, 11:58 AM
I'm not sure what the exact problem is but looking through google I think it was saying something about widths in % but I couldn't find how to fix it. So how can I make my background repeat in IE?

http://www.bulletproofwebdesign.co.uk/

HTML


<!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" xml:lang="en-GB">
<head>
<title>Sherr Technology</title>
<link rel="stylesheet" type="text/css" href="styleNew.css" />

</head>
<body>

<div id="header">
<div id="banner">
<div id="navigation">
<ul>
<li class="home"><a href="index.html">Home</a></li>
<li class="employees"><a href="employees.html">Employees</a></li>
<li class="customers"><a href="customers.html">Customers</a></li>
<li class="wiki"><a href="wiki.html">Wiki</a></li>
<li class="gallery"><a href="gallery.html">Gallery</a></li>
<li class="calender"><a href="calender.html">Calender</a></li>
</ul>
</div>
<div id="ticker">
<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>
</div>
</div>
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<!-- Column 1 start -->
<h2>Example Intranet Design</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel pulvinar velit. Mauris lacinia facilisis mauris, fermentum scelerisque felis vestibulum vitae. Vivamus neque libero, tempor sit amet mollis a, vestibulum vitae diam. Maecenas posuere ligula vel diam dapibus vehicula. Aliquam elementum scelerisque pretium. Aliquam ut tortor turpis. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur a eros tellus. Suspendisse potenti. Donec sed nunc quis tellus rutrum congue sagittis id orci. Cras eleifend tempus rhoncus. Proin rhoncus nulla nec leo fringilla at venenatis erat fringilla. Curabitur suscipit ipsum a eros euismod id fringilla lacus dapibus. Ut tempor scelerisque augue ut accumsan. Nam nec ante ac felis mollis scelerisque. Sed vel eros augue, vitae laoreet orci. Mauris fringilla cursus ante, ac lacinia velit sodales sed. Quisque gravida felis sit amet metus ultricies adipiscing. Curabitur euismod posuere justo, vestibulum consectetur nunc sollicitudin eget. Morbi in mauris lacus, eget ultrices libero. In sit amet diam at urna consequat sagittis. Vestibulum massa leo, aliquet vitae convallis id, interdum sed sem. Duis suscipit scelerisque justo, at rhoncus justo facilisis eu. Ut lorem sapien, iaculis nec aliquam sit amet, volutpat at risus. Etiam ultricies lorem dui. Duis pharetra gravida sapien. Morbi id sem risus, in rutrum dolor. Aliquam nunc erat, scelerisque non accumsan non, auctor ut sapien. Integer scelerisque orci dictum dui sagittis dignissim. Vivamus eleifend, tortor sed fermentum consectetur, lorem tortor elementum neque, ut viverra felis enim ac ante. Mauris quam lacus, condimentum vitae bibendum eget, volutpat vel libero.
<h2>News on Sherr Technology</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel pulvinar velit. Mauris lacinia facilisis mauris, fermentum scelerisque felis vestibulum vitae. Vivamus neque libero, tempor sit amet mollis a, vestibulum vitae diam. Maecenas posuere ligula vel diam dapibus vehicula. Aliquam elementum scelerisque pretium. Aliquam ut tortor turpis. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur a eros tellus. Suspendisse potenti. Donec sed nunc quis tellus rutrum congue sagittis id orci. Cras eleifend tempus rhoncus. Proin rhoncus nulla nec leo fringilla at venenatis erat fringilla. Curabitur suscipit ipsum a eros euismod id fringilla lacus dapibus. Ut tempor scelerisque augue ut accumsan. Nam nec ante ac felis mollis scelerisque. Sed vel eros augue, vitae laoreet orci. Mauris fringilla cursus ante, ac lacinia velit sodales sed. Quisque gravida felis sit amet metus ultricies adipiscing. Curabitur euismod posuere justo, vestibulum consectetur nunc sollicitudin eget. Morbi in mauris lacus, eget ultrices libero. In sit amet diam at urna consequat sagittis. Vestibulum massa leo, aliquet vitae convallis id, interdum sed sem. Duis suscipit scelerisque justo, at rhoncus justo facilisis eu. Ut lorem sapien, iaculis nec aliquam sit amet, volutpat at risus. Etiam ultricies lorem dui. Duis pharetra gravida sapien. Morbi id sem risus, in rutrum dolor. Aliquam nunc erat, scelerisque non accumsan non, auctor ut sapien. Integer scelerisque orci dictum dui sagittis dignissim. Vivamus eleifend, tortor sed fermentum consectetur, lorem tortor elementum neque, ut viverra felis enim ac ante. Mauris quam lacus, condimentum vitae bibendum eget, volutpat vel libero.
</div>
<div class="col2">
<!-- Column 2 start -->
<div class="leftSideBarText">Lorem Ipsum</div>
<div class="leftSideBarSearch">Search Sherr Technology
<div class="search">Search:&nbsp;&nbsp;&nbsp;<input type="text" name="search" id="search" /><input type="submit" class="btnGo" value="Go"/></div>
</div>
</div>

<div class="col3">
<!-- Column 3 start -->
<h3>Quick Links</h3>
<p><a href="#">Client's Passwords</a></p>
<p><a href="#">Contact Information</a></p>
<p><a href="#">Corporate Images</a></p>
<p><a href="#">Employees</a></p>
<p><a href="#">Blog</a></p>
<img src="divider1.jpg" alt="divider" width="200" />

<h3>Login</h3>
<form action="test.html" method="post" class="logIn" />
<p>
<label for="login" class="fixedwidth">Login:</label>
<input type="text" class="textBox" name="login" id="login"/>
</p>
<p>
<label for="pWord" class="fixedwidth">Password:</label>
<input type="password" class="textBox" name="pWord" id="pWord"/>
</p>
<label for="rememberMe"class="fixedwidth">Remember Me:</label>
<div>
<input type="checkbox" name="rememberMe" id="rememberMe"/>
</div>
<p class="btnLogin"><input type="submit" value="Login"/>&nbsp;&nbsp;&nbsp;&nbsp;</p>
<a href="#">Forgot Password?</a>
<img src="divider2.jpg" alt="divider" width="200" />

<h3>Calender</h3>
<img src="calender.jpg" alt="calender" />
<img src="divider2.jpg" alt="divider" width="200" />
<h3>News</h3>
<p>Russell Sherr:
Claromentis is pleased to announce the release of Claromentis Community - a web 2.0 tool for design agencies to work in partnership with claromentis.</p>
</div>
</div>
</div>
</div>
<div id="footer">
Sherr Technologies Intranet

</div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1848067-8";
urchinTracker();
</script>

</body>
</html>


CSS


body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:small;
font-family: Myriad Pro;
}
a:link, a:visited {
color: #fff; text-decoration:underline;
}
a:hover, a:active {
color: #FFFFCC ; text-decoration:underline;
}
h1, h2 {
margin:.8em 0 .2em 0;
padding:0;
color: #3098bb;
}
h3{
color: #fff;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
background:url(repeat.jpg) repeat-x;
}
#banner {
background:url(header.jpg) no-repeat;
/*width:503px;*/ /*comment this out...*/
height:150px;
}
#navigation {
color: #fff;
padding-top: 50px;
/*padding-left: 320px;*/ /*comment this out...*/
float:right; /*add this...*/
font-size: 140%;
width: 657px; /*607 original figure */
word-spacing:50px;
}

#ticker {
padding-top: 25px;
float:right;
color: #fff;
width: 870px;
height: 20px;
}
#header {
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}

/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
background: url(content.png)repeat-x;
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%; /* width of page */
position:relative;
background-image:url('content.png');
background-repeat:repeat-x;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead
only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
/* right column background colour */
}
.threecol .colmid {
right:25%; /* width of the right column */
/* center column background colour */
}
.threecol .colleft {
right:50%; /* width of the middle column */
/* left column background colour */
}
.threecol .col1 {
width:46%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */
color: #919191;
}
.threecol .col2 {
width:21%; /* Width of left column content (column width minus padding on either side) */
left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:20%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
background: url(rightSideBar.png);
color: #fff;
padding-left: 1%;
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:98%;
background: url(footer.jpg) repeat-x;
color: #fff;
padding-left: 2%;
padding-top: 10px;
height: 29px;
}
#footer p {
padding:10px;
margin:0;
}









#navigation ul {
width:100%;
margin:0; padding:0;
height: 50px;
position: relative;
background: url(navigation.png) no-repeat 0 0;list-style: none;
}
#navigation li {
display: inline;
}
#navigation li a:link, #navigation li a:visited {
border: none;
width: 97px;
height: 50px;
display: block;
position: absolute;
text-indent: -7000px;
outline: none;
}
#navigation li.home a:link, #navigation li.home a:visited {
left: 0;
}
#navigation li.employees a:link, #navigation li.employees a:visited {
left: 105px
}
#navigation li.customers a:link, #navigation li.customers a:visited {
left: 204px
}
#navigation li.wiki a:link, #navigation li.wiki a:visited {
left: 307px
}
#navigation li.gallery a:link, #navigation li.gallery a:visited {
left: 411px
}
#navigation li.calender a:link, #navigation li.calender a:visited {
left: 502px
}
#navigation li.home a:hover {
background: url(navigation.png) no-repeat -0px -50px;
}
#navigation li.employees a:hover {
background: url(navigation.png) no-repeat -105px -50px;
}
#navigation li.customers a:hover {
background: url(navigation.png) no-repeat -204px -50px;
}
#navigation li.wiki a:hover {
background: url(navigation.png) no-repeat -307px -50px;
}
#navigation li.gallery a:hover {
background: url(navigation.png) no-repeat -411px -50px;
}
#navigation li.calender a:hover {
background: url(navigation.png) no-repeat -502px -50px;
}







form.logIn label.fixedwidth {
display: block;
width: 110px;
float: left;
}

.textBox {
background: url(usernameBox2.jpg);
color: #000;
border: none;
height:19px;
font-size: 120%;
padding-left: 3px;
}
.btnLogin input
{
background: url(login.png);
margin-left: 110px;
width: 69px;
height: 21px;
color: #fff;
padding-bottom: 10px;
border: none;
}

.btnGo input {
background: url(btnGo.png);
width: 25px;
height: 20px;
color: #fff;
border: none;
padding-bottom: 10px;
}










.leftSideBarText {
background: url(leftSideBar1.png) no-repeat;
height: 153px;
width: 215px;
color: #fff;
float: left;
text-align: center;
padding-top: 7px;
margin-left: 5%;
padding-bottom: 30px;
margin-top: 7%;
}

.leftSideBarSearch {
background: url(leftSideBar1.png) no-repeat;
height: 100px;
width: 215px;
color: #fff;
float: left;
text-align: center;
padding-top: 7px;
margin-left: 5%;
}
.search{
text-align:left;
padding-top: 35px;
padding-left: 10px;
}


It is the .colmask ID

Excavator
Jan 20th, 2010, 05:09 PM
Good morning j05hr,
I think IE may not like how you left the space out. It should be formatted like this - background : url(content.png) repeat-x;. See the space between the parenthesis and repeat-x?

Your styleNew.css is missing a closing } for the last selector.