5 replies [Last post]
Datun Walnut
Offline
newbie
Lancashire, England
Last seen: 11 years 2 weeks ago
Lancashire, England
Timezone: GMT+1
Joined: 2012-05-14
Posts: 4
Points: 5

Hi Guys,

I've just tried adding a css file purely for IE7 and less using the hack:

in the index.php head of a site I'm working on.
I've not added many changes, just removed the background image and changed the background colour to see if it works. When it does, I'll do it properly.

There's the rub, it doesn't seem to work at all.

Any idea what I'm doing wrong?
Thanks in advance

DW

Datun Walnut
Offline
newbie
Lancashire, England
Last seen: 11 years 2 weeks ago
Lancashire, England
Timezone: GMT+1
Joined: 2012-05-14
Posts: 4
Points: 5

More

Sorry the code is:
<!--[if lte IE 7]> <link href="ie7.css" rel="stylesheet" type="text/css"> <![endif]-->

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

There is a reason

We always ask that you post all the code for at least a minimal test case, or post a link. The order in which style sheets are called matters. You didn't provide that info.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 20 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Looks fine, can't really tell

edit/ pipped to the post!
Looks fine, can't really tell you what you're doing wrong from the information you've supplied. Maybe it's a path issue to file, but that's easy enough to check.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Datun Walnut
Offline
newbie
Lancashire, England
Last seen: 11 years 2 weeks ago
Lancashire, England
Timezone: GMT+1
Joined: 2012-05-14
Posts: 4
Points: 5

Sorry guys. Here's the

Sorry guys.
Here's the css:

body {
      color:#000000;
	  background-color:#ffffff;
	  font-family: Verdana, Arial, Helvetica, sans-serif;
	  font-size: 90%;
 
	 background-repeat: repeat-y;
	  background-position: 49.5% 0px;
 
	}
 
.wrapper{position: relative;
         margin-top: 0px;
         width:860px;
         margin-left:auto;
         margin-right:auto;
		 padding-bottom: 30px;
 
	    }
 
#header {width: 788px;
	    height: 178px;
	    margin-left: auto;
	    margin-right: auto;
	    padding: 1px 1px 1px 0px;
 
 
}
 
#left-menu {
			position: absolute;
			font-size:12px;
			color: #ffffff;
			font-weight: normal;
			text-decoration: none;
			top: 200px;
			margin-left: 30px;
			width:175px;
			height: 380px;
			background-color: #c6c6c6;
			border-style: solid;
			border-color: #808080;
			border-width: 3px;
			border-radius: 10px;
			-moz-box-shadow: 8px 8px 8px #808080;
            -webkit-box-shadow: 8px 8px 8px #808080;
			box-shadow:8px 8px 8px #808080;}
 
#left-button {position: relative;
              margin-left: 30px;
              width:175px;
			  height: 175px;
			  top: 430px;
			  background-color:#4d68ad; 
			  border-style:solid;
			  border-color: #ffffff;
			  border-width: 3px;
			  border-radius: 10px;
 
			-moz-box-shadow: 8px 8px 8px #808080;
            -webkit-box-shadow: 8px 8px 8px #808080;
			box-shadow:8px 8px 8px #808080;}
 
#button-text {position: absolute;
             text-align:center;
				top: 33px;}
 
A.leftnav:link {font-size:12px; text-decoration: none; font-weight: normal; color: #ffffff;}
A.leftnav:visited {font-size:12px; text-decoration: none; font-weight: normal; color: #ffffff;}
A.leftnav:active {font-size:12px; text-decoration: none; font-weight: normal; color: #ffffff;}
A.leftnav:hover {font-size:12px; font-weight: normal; font-weight: normal; color: #000000;}
 
A.butnav:link {font-size:22px; text-decoration: none; font-weight: normal; color: #ffffff;}
A.butnav:visited {font-size:22px; text-decoration: none; font-weight: normal; color: #ffffff;}
A.butnav:active {font-size:22px; text-decoration: none; font-weight: normal; color: #ffffff;}
A.butnav:hover {font-size:22px; font-weight: normal; font-weight: normal; color: #000000;}
 
 .anylinkcss{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 0px solid black;
border-bottom-width: 0;
font: normal 12px tahoma;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: lightyellow;
width: 200px; /* default width for menu */
}
 
.anylinkcss ul{
margin: 0;
padding: 0;
list-style-type: none;
}
 
.anylinkcss ul li a{
width: 100%;
color: black;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: normal;
text-indent: 5px;
}
 
.anylinkcss a:hover{ /*hover background color*/
background: #3C830D;
color: white;
}
 
 
 
 
}
 
/* ######### class for shadow DIV ######### */
 
 
 
 
#padding { padding: 2em;}
 
#navtable {padding:5px;
}
 
.introtext{ 
			top: 35px;
            width: 550px;
			height: 140px;
			text-indent: 3px; 
			text-align: justify;
			} 
 
.center {text-align: center;
         }
 
.centerheading {text-align: center;
         font-size: 20px;}
 
.justify{text-align: justify;
         padding-right: 4px;
         } 
 
.noticeboard{ top: 30px;
			  position: relative;
              width: 543px;
			  background-color: #e6e6e6;
			  border-radius: 10px;
			 -moz-box-shadow: 8px 8px 8px #808080;
            -webkit-box-shadow: 8px 8px 8px #808080;
			box-shadow:8px 8px 8px #808080;}
 
#main {position:absolute;
		top: 180px;
		width: 550px;
		margin-left:250px;}
 
h1 {text-align: center;
font-size: 25px;}
 
h2 {text-align: center;
font-size: 20px;}
 
ul {text-align: left;}
 
A.nav:link {font-size:14px; text-decoration: none; font-weight: bold; color: #1FA404;}
A.nav:visited {font-size:14px; text-decoration: none; font-weight: bold; color: #800000;}
A.nav:active {font-size:14px; text-decoration: none; font-weight: bold; color: #800000;}
A.nav:hover {font-size:14px; font-weight: bold; color: #800000;}
 
.img3 {height: 189px;
       width: 250px;
       border: 0px;
       float: right;
	   padding-right: 35px;
	   }
 
.subtable1 {align: center; 
           width: 95%; 
          }
 
.subtable2 {margin-left: 10px; 
           width: 100%; 
          }
 
.subtable {align: center; 
           width: 95%; 
           background-color: #ffffcc;
           }
.month1 {width: 660px;
       background: #ffffcc;
       padding-left: 4px; 
       padding-right: 0;    
       }
.month2 {width: 660px;
       background: #ffff99;
	   border-color: black;
       padding-left: 4px; 
       padding-right: 0;    
       }
 
 
.subtable_col1_1 {width: 60px;
				background: #ffffcc;
                padding-left: 4px; 
				padding-right: 0;
				}
 
.subtable_col2_1 {background: #ffffcc;
                  padding-left: 2px; 
				  padding-right: 0;
				  }
 
 
.subtable_col1_2 {width: 60px;
				background: #ffff99;
				padding-left: 4px; 
				padding-right: 0;
				}
 
.subtable_col2_2 {background: #ffff99;
				 padding-left: 2px; 
				 padding-right: 0;
				 }
 
.imgright {float: right;
			padding: 5px 5px 5px 5px;
			width: 357px; 
			height: 268px;
           }
 
.imgleft {float: left;
			padding: 5px 5px 5px 5px;
			width: 357px;
			height: 268px;
           }

and here's the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="http://www.technohow.co.uk" />
<meta name="Robots" content="index,follow" />
<script type="text/javascript" src="anylinkcssmenu.js">
 
/***********************************************
* AnyLink CSS Menu script v2.0- © Dynamic Drive DHTML code library (<a href="http://www.dynamicdrive.com" rel="nofollow">www.dynamicdrive.com</a>)
* This notice MUST stay intact for legal use
* Visit Project Page at <a href="http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm" rel="nofollow">http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm</a> for full source code
***********************************************/
 
</script>
<title>Welcome to Mawdesley Website</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]> <link href="ie7.css" rel="stylesheet" type="text/css"> <![endif]-->
</head>
 
<body>
 
<div class="wrapper">
 <div id="header"><img src="images/homebanner.gif" /></div>
  <div id="main">
 
	 <div class="introtext">
	 <div class="cushycms"><h2>
	Welcome to the Mawdesley Village Web Site</h2>
<p class="justify">
	Whatever your reason for visiting our website, whether it be something to do with the Parish Council, to check up on your interests or past-times in the village, to see what&#39;s on or just out of general interest, we do make you welcome and hope that you find what you are looking for. If you don&#39;t or if you have any questions or suggestions to make, then contact the Parish Council via the menu on the left.</p>
</div>
	  <hr />
	 </div><div class="noticeboard">
	 <div class="cushycms">
	 <h2 style="text-align: center;"><font color="blue"><b>Be a part of:</b></font>&nbsp;</h2>
<h1 style="text-align: center;">
	<font color="red"><b>Mawdesley Celebrates!</b></font></h1>
 
	<h2 class="center" style="text-align: center;">
		<font color="blue"><b>Visit our Jubilee pages <a href="http://www.mawdesley-village.org.uk/mc.htm">here</a> for more details</b></font></h2>
 
</div></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
 
  <div id="left-menu"><?php include('menu.php'); ?></div>
 
	<div id="left-button"><div class="cushycms"><div id="button-text">
	<a href="mc.htm" class="butnav">Visit our Mawdesley Celebrates pages</a></div>
</div>
 
</div>
 
 
</div>
 
</body>
</html>

Cheers
DW

Datun Walnut
Offline
newbie
Lancashire, England
Last seen: 11 years 2 weeks ago
Lancashire, England
Timezone: GMT+1
Joined: 2012-05-14
Posts: 4
Points: 5

Additional stuff

After a lot of messing, I've found that all the above hack works with the code

<!--[if lt IE 8]> <link href="ie7.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !IE]>--> <link href="styles.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

in the head. Providing that the files is named *.htm.
As soon as I call it *.php ie7 reverts to rubbish layout again.

What could that be then?

The php works ok in ie7 just badly laid out.

Any help would be appreciated

DW