IE7 CSS Hack's? (for a CSS noob)

**Thaylok** · #1 (**permalink**) 09-24-2007, 06:56 PM

Howdy again,

I knew I'd be back with my 2nd question for the wise group. But first, an update. I have my personal website up and running, on IIS 5.1 (XP Pro), with Active Pearl, My PHP and MySQL. These run my family website, b2evolution blog software and mybb forums, as well as a 3rd web based help desk software. (I'm working on buffing my resume as stated).

Well, I found a new page template in the open source community, and really love it. There is one problem, however. That's right, it wont display properly in IE7. The pages CSS was set up in 2006 to display right for fully compliant browsers (which MS does not provide). It had hacks to adjust the display in IE6 which worked wonderfully. However, M$ in their Infinite (ROFL) wisdom released yet another browser which flaunts W3C compliance.

My dilemma, I have 1 element, an image, which is placed relatively to other objects, which drops 60% out of view in IE7. Do any of the guru's who frequent this forum have any IE7 HACK info that I could slip into the CSS?

NOTE: Because I can read a CSS does not mean I can create one from scratch. thus, some specific information relating with where in the CSS to place the hack would be GREATLY appreciated.

Additionally, I have found on the 'net various sites which help with CSS hacks for IE, however, they did not list the problem in their vast lists. If they did, I did not recognize them based on my previous NOTE: above.

The template/page in question may be found at: The K. Chambers Family

Needless to say, I was unaware of this problem until it was pointed out by someone I know who uses internet exploiter.
I can post the CSS text later, when I finish with work for the day if requested.

**Ash** · #2 (**permalink**) 09-25-2007, 04:51 PM

Hmm... this is a tricky issue. Once I've got IE running under Linux [I've done it before, I can do it again], I'll take a look at this. I'm just posting this to let you know I've read the thread

**blueparukia** · #3 (**permalink**) 09-27-2007, 02:25 AM

Well, I suppose I could give it a shot. I don't really use the te term "hacks" when it comes to CSS, but I can try and fix it for you. Could I please have a copy of your index file and your CSS file.

Thanks,

BP

**Thaylok** · #4 (**permalink**) 09-27-2007, 03:28 AM

Oops, I meant to do this the other night. Sorry, I let taking my daughter to Cheerleading get in the way.

I appreciate each one who can help, even by looking at the request,

The complete Styles.css is quoted below, The section which corrects for IE6 is the title background image.

Code:

/*IE hack*/* html #title{top: -80px;}

I apologize for the poor formatting, I don't have a nice reader, and I don't know enough about CSS to manually break the lines (without breaking something).

Code:

/*Global Defaults*//*Resets padding, margin, and borders to 0 for cross-browser consistency*/*{padding: 0;margin: 0;border: 0;}/*Sets 1em=10px. Remember formula Childpx/Parentpx=Childem*/body{font-size: 62.5%;}/*Removes underline from link/visited for readability*/:link, :visited{text-decoration: none;}/*Removes bullets from lists*/ul, ol{list-style: none;}/*Removes border images*/a img, :link img, :visited img{border: none;}/*Sets horizontal margins based on browser window and vertical margins based on font-size*/h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address{margin:1em 5%;}li, dd{margin-left:5%;}fieldset{padding: .5em;}/*Fixes mozilla problem with forms caused by universal reset*/option{min-width: 1.5em;}/*Page-specific Defaults*/body{font-size: 1.2em;background-color: #7a0000;margin: 0 auto;}#page{width: 950px;margin-right: auto;margin-left: auto;}#content{background-image: url(images/bg.jpg);background-repeat: repeat-y;top: 292px;width: 950px;}#mainwrap{width: 680px;float: right;}.clearfix{}ul{}li{}a{}a:link{}a:visited{}a:hover{}a:active{}/* Header Section */#header{background-repeat: no-repeat;position: relative;top: 25px;width: 950px;height: 267px;overflow: hidden;background-image: url(images/header.jpg);}#navbar{float: left;width: 100%;font-size: .7em;margin-top: 55px;margin-left: 36px;display: inline;}#navbar ul{margin: 0;padding: 0;text-align: center;}#navbar li{float: left;text-align: center;margin: 0;/*margin-right: 35px;*/
     display: inline;padding-top: 4px;}#navbar a{/*display: block;*/
     color: #ffffff;font-family: Verdana, Helvetica, Arial, sans-serif;padding: 4px 25px;}#navbar a:hover{color: #ddbb00;}#navbar li.navactive{background-image: url(images/tabr.jpg);background-repeat: no-repeat;background-position: right top;height: 60px;}#navbar li.navactive a{background-image: url(images/tabl.jpg);background-repeat: no-repeat;background-position: left top;padding: 4px 25px;color: #527aa3;height: 60px;}/*IE hack*/* html #navbar li.navactive a:hover{color: #527aa3;}#title{background-image: url(images/logo.jpg);background-repeat: no-repeat;position: relative;width: 600px;height: 160px;top: 35px;color: #ffffff;font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 3em;font-weight: bold;text-align: center;padding-top: 45px;left: -3px;}/*IE hack*/* html #title{top: -80px;}.callout{width: 200px;height: 125px;color: #ffffff;font-family: Verdana, Helvetica, Arial, sans-serif;font-size: .6em;text-align: justify;position: absolute;left: +623px;top: +90px;}/*Main-Content Section*/#main{width: 378px;left: 0px;position: relative;float: left;}#main p{font-family: Verdana, Helvetica, Arial, sans-serif;font-size: .8em;text-align: justify;line-height: 1.5em;text-indent: 1.5em;margin-top: 25px;}/*Right Sidebar Section*/#rightbar{width: 225px;right: 68px;float: right;position: relative;}/*IE Hack*/* html #rightbar{right: 56px;}.rbar{text-align: justify;font-size: .7em;font-family: Verdana, Helvetica, Arial, sans-serif;color: #ffffff;}.boxtop{background-image: url(images/boxtop.jpg);width: 225px;height: 30px;margin-top: 10px;}.box{background-image: url(images/box.jpg);background-repeat: repeat-y;margin-top: -25px;}.boxbottom{background-image: url(images/boxbottom.jpg);width: 225px;height: 30px;margin-top: -25px;}.box2top{background-image: url(images/box2top.jpg);width: 235px;height: 25px;margin-top: 10px;background-repeat: no-repeat;}.box2{margin-top: -20px;background-image: url(images/box2bg.jpg);background-repeat: repeat-y;width: 235px;}/*IE Hack*/* html .box2{margin-top: 0px;}#rightbar li{text-align: right;}.meta{color: #7a7a52;font-family: Verdana, Helvetica, Arial, sans-serif;font-size: .7em;text-align: right;}.box2bottom{background-image: url(images/box2bottom.jpg);margin-top: -15px;width: 235px;height: 25px;background-repeat: no-repeat;margin-left: -4px;}/*Left Sidebar Section*/#leftbar{float: left;width: 225px;padding-top: 40px;}h3.menutitle{display: block;background-color: #7a0000;width: 236px;position: relative;left: 4px;border-top: 1px #000000 solid;border-bottom: 1px #000000 solid;color: #ddbb00;font-weight: bold;letter-spacing: .2em;font-family: Verdana, Helvetica, Arial, sans-serif;text-align: center;font-size: 1em;}#leftbar li{list-style-type: none;}#leftbar ul li a{width: 200px;position: relative;left: 10px;background-color: #5884b0;font-family: Verdana, Helvetica, Arial, sans-serif;color: #ffffff;font-size: .83em;text-align: center;margin: 5px;top: -10px;display: block;}#leftbar ul li a:hover{display: block;position: relative;left: 10px;background-color: #6598ca;margin: 5px;}.menuactive{}/*Footer Section */#footer{background-repeat: no-repeat;width: 950px;clear: both;height: 136px;background-image: url(images/footer.jpg);margin-top: -25px;}.copyright{text-align: center;font-family: Verdana, Helvetica, Arial, sans-serif;color: #ffffff;font-size: .6em;padding-top: 30px;}/*  Float containers fix: */.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix{display: inline-table;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac *//*printer styles*/@media print{ }

I read some references to having a conditional style sheet for IE, however, I don't know if that is called in the main html, or in the style sheet. Of course the approach of a different style sheet for each noncompliant browser seems nice, oh wait, having one for IE will take care of that

(shame on me)

**Thaylok** · #5 (**permalink**) 09-27-2007, 03:38 AM

Here is the Index file, as it was too long for the previous post.

Code:

<!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" lang="en" >
<head>
<meta name="keywords" content="Kirk R. Chambers Jr., Kistin Chambers, Harmony Chambers, Avery Chambers, Family web site,">
<title>The K. Chambers Family</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css"  />	  </head>
<body>
<div id="page" >
	<div id="header"> 
		<div id="navbar">
			<ul>

				<li class="navactive"><a href="http://thaylok.is-a-geek.net/" >Home</a></li>
				<li><a href="http://thaylok.is-a-geek.net/KRC-Files/kirk.html">Kirk</a></li>
				<li><a href="http://thaylok.is-a-geek.net/Kristin-Main.html">Kristin</a></li>
				<li><a href="http://thaylok.is-a-geek.net/harmony-main.html">Harmony</a></li>
				<li><a href="http://thaylok.is-a-geek.net/avery-main.html">Avery</a></li>
				</ul>

			</div><!-- end of navbar -->
		<h1 id="title"><font color="#ffffff">The K. Chambers</font>  </h1>
			<p class="callout"><img style="WIDTH: 171px; 
HEIGHT: 135px" height="275" hspace="0" src="mapper.gif" width="271" border="0" >   </p>
	</div><!-- end of header -->
		<div id="content" class="clearfix" > 
			<div id="mainwrap" class="clearfix"> 
				<div id="main" >
					<p>This site is best viewed with a mozilla browser (Firefox, Netscape), I understand IE7 has yet to implement CSS fully, and some elements wont display properly, for this I apologize.</p>

					<p></p>
					<p>Welcome to the world wide web presence for the K. Chambers 
Family. Please feel free to poke around.</p>
					<p><strong>NO NOT THERE, NOT THE CLOSET!</strong> Those are 
<em>my</em>         skeletons.</p>
					<p>Just kidding. But, please look around, make suggestions, 
I'm sure there's an email link (somewhere), or even go to the forums and let me know what 
you think, I'm open to suggestions. Don't forget to get more recent information 
from the blogs I've created.</p>
				</div><!-- end of main -->

				<div id="rightbar" > 
					<div class="boxtop"></div>
					<div class="box">
					<p class="rbar"><img style="WIDTH: 200px; HEIGHT: 160px" 
height=134 hspace=0 src="HAC-Files/thumb/P9080105.JPG" width=172 border=0></p>
					<p class="rbar"><br><br>&nbsp;</p>
					</div><!-- end of box -->
					<div class="boxbottom"></div>
					
					<div class="boxtop"></div>
					<div class="box">

					<p class ="rbar"><img style="WIDTH: 205px; HEIGHT: 311px" 
height=172 hspace=0 src="AMC-Files/thumb/Avery 001.jpg" width=125 border=0 ></p>
					<p class ="rbar"><br>&nbsp;</p>
					</div><!-- end of box -->
					<div class="boxbottom" style="WIDTH: 225px; HEIGHT: 24px"></div>
										
					<div class="box2top"></div>
					<div class="box2">
					
					<p class ="meta">Edited by Kirk Chambers</p>
					</div><!-- end of box2 -->

					<div class="box2bottom"></div>	
				</div><!-- end of rightbar -->
			</div><!-- end of mainwrap -->
			<div id="leftbar" >
				<h3 class="menutitle">Kirk</h3><ul>
					<li><a href="http://thaylok.is-a-geek.net/KRC-Files/Kirk.html" >Home</a>
					<li><a href="http://thaylok.is-a-geek.net/KRC-Files/KirksRolePlayingPage.html">Roleplaying Games</a>
					<li><a href="http://thaylok.is-a-geek.net/KRC-Files/RenFests.html">Renaissance Festivals</a>

					<li><a href="http://thaylok.is-a-geek.net/blog/index.php?blog=3">Thaylok's Thoughts (Blog)</a></li>
					</ul>
				<h3 class="menutitle">Kristin</h3><ul>
					<li><a class="menuactive" href="http://thaylok.is-a-geek.net/kristin-main.html">Home</a>
					<li><a href="http://thaylok.is-a-geek.net/blog/index.php?blog=2">Kristin's&nbsp;Diary (Blog)</a>
					<li><a href="#"></a>

					<li><a href="#"></a></li>
					</ul>
				<h3 class="menutitle">Harmony</h3><ul>
					<li><a class="menuactive" href="http://thaylok.is-a-geek.net/harmony-main.html">Home</a>
					<li><a href="http://thaylok.is-a-geek.net/HAC-Files/">Pictures</a>
					<li><a href="http://thaylok.is-a-geek.net/blog/index.php?blog=4">Harmony's Haversack (Blog)</a>
					<li><a href="#"></a></li>

					</ul>
				<h3 class="menutitle">Avery</h3><ul>
					<li><a class="menuactive" href="http://thaylok.is-a-geek.net/avery-main.html">Home</a>
					<li><a href="http://thaylok.is-a-geek.net/AMC-Files/">Pictures</a>
					<li><a href="#"></a>
					<li><a href="#"></a></li>
					</ul>

				<h3 class="menutitle">Forums</h3><ul>
					<li><a class="menuactive" href="http://thaylok.is-a-geek.net/forums/">Home</a>
					<li><a href="http://thaylok.is-a-geek.net/forums/forumdisplay.php?fid=3">Kirk</a>
					<li><a href="http://thaylok.is-a-geek.net/forums/forumdisplay.php?fid=4">Kristin</a>
					<li><a href="http://thaylok.is-a-geek.net/forums/forumdisplay.php?fid=5">Harmony</a></li>
					</ul>

				<h3 class="menutitle">Blogs</h3><ul>
					<li><a class="menuactive" href="http://thaylok.is-a-geek.net/blog/">Chambers Collection</a>
					<li><a href="http://thaylok.is-a-geek.net/blog/index.php?blog=3">Thaylok's Thoughts</a>
					<li><a href="http://thaylok.is-a-geek.net/blog/index.php?blog=2">Kristin's Diary</a>
					<li><a href="http://thaylok.is-a-geek.net/blog/index.php?blog=4">Harmony's Haversack</a></li>
					</ul>

			</div><!-- end of leftbar -->
		</div><!-- end of content -->
	<div id="footer" > <p class="copyright"> Copyright  2006 Scott Benedict </p>
	</div><!-- end of footer -->
</div><!-- end of page -->
</body>
</html>

**blueparukia** · #6 (**permalink**) 09-27-2007, 04:07 AM

OK< I'll get cracking. I'll PM you when its done. Now for some starters - do you have a download link to the template, as that would make my job a hell of a lot easier. If not, could you give me the name of the image that your having the errors with?

Thanks,

BP

**Thaylok** · #7 (**permalink**) 09-27-2007, 02:12 PM

Link to the original archived (zip).

http://thaylok.is-a-geek.net/KRC-Files/synergy.zip

**blueparukia** · #8 (**permalink**) 09-28-2007, 04:22 AM

Being able to test it on my own machine helped

It was a very easy problem.

Open up styles.css in Notepad or whatever and find:

Code:

#title{background-image: url(images/logo.jpg);background-repeat: no-repeat;position: relative

Replace that with:

Code:

#title{background-image: url(images/logo.jpg);background-repeat: no-repeat;position: absolute

All I did was change position:relative to position:absolute, here is some information on the position property CSS Position Property

I have tested this on the latest versions of IE, Opera, Firefox and Safari,

BP

**Thaylok** · #9 (**permalink**) 09-28-2007, 04:56 PM

Thanks for looking into my ignorance!! I'll try this this evening when I get home, and respond. I believe tonight is a rearrange the living room night as well, so may be late for me (or tomorrow (sat) late morning for you). Thanks again!

**blueparukia** · #10 (**permalink**) 09-29-2007, 02:42 AM

I'm here to help, if you don;t know CSS, I'll help you with it, but it is very easy to learn.

Have a look at this HTML

Code:

<p class="test">Text Here</p>

If you don't know HTML, this is a paragraph.

And CSS goes like this:

Code:

selctor{property:value}

The Selector - The part of the HTML we want styled (e.g the <p> tag)
The Property - What we want to change about the selector (e.g background or color)
The Value - The value of the selector (e.g red)

So to make <p class="test"> have red text, we use the following CSS:

Code:

p.test
{
color:#FF0000;
}

Each line of CSS must be separated by a semicolon, and is much easier to read when set out on about 300 lines then just one and a half, so it is best to use:

Code:

selector
{
property:value;
}

If you choose to do it like this:

Code:

selector{property:value}

make sure to add a new line after every"}".

And that is CSS.....

Tutorials.

CSS Tutorial

HTML Tutorial

Oh, and when you are coding HTML, make sure you use lowercase letters.

Cheers,

BP

**Thaylok** · #11 (**permalink**) 09-29-2007, 04:28 AM

The Fix works Wonderfully, Thanks!!! And Thanks for the quick primer. I work best when i can get my hands in the middle of the work with good references at my fingertips (i.e. in paper while i'm playing with the "code"). And I appreciate the help in more ways than I can express.

**blueparukia** · #12 (**permalink**) 09-29-2007, 05:23 AM

As I said, I am here to help,. and if you need anymore help with your website, just ask

BP

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Register Now for FREE!
Username: Password: Confirm Password: E-Mail: Confirm E-Mail: Agree to forum rules