Archive for the ‘xhtml/css’ Category

Microsoft Office Guide Cheat Sheets

Friday, March 26th, 2010

These got e-mailed to me recently and I thought they were worth sharing. Just some pdf’s with a cheat sheet of how to use a lot of MSOffice tools… even IE (boo!)

Microsoft Office Guide Cheat Sheets

Enjoy!

Tags: , ,
Posted in xhtml/css | No Comments »

IE Bottom Border Gap Issue

Thursday, January 14th, 2010
Background shows through because this picture doesn't render at the bottom in IE

Background shows through because this picture doesn't render at the bottom in IE

Yet another thing IE does that we wish it didn’t do. This is simply an image that is SUPPOSED to show up at the bottom of my div, and would therefore hide my background. Does it? Not in IE. What’s the problem, you say? After a little googling, I tried changing my code from this attractive and easy to read version:

   <img src="images/banner_bottom.jpg" />
</div>

To this ugly version that will give me headaches later…

<img src="images/banner_bottom.jpg" /></div>

yes. IE decided that empty space was a page break. Good work IE.

Posted in xhtml/css | No Comments »

Zero Body Margin in Firefox and IE

Thursday, January 14th, 2010

I was working on a project recently where I needed to have my div’s align to the VERY top of the page, not 10-30px off as is the default preset. Easy? I thought it would be. You can achieve this by using css positioning, but as I had a div within a div, and (as is commonly seen) I wanted the inner div to align to the center, I had a problem. Again, it sounds easy, but it was more of a pain than it should have been. Here is a simplified version of what I came up with:

the page…

<!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=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="teststyle.css"/>
</head>
 
<body>
 
<div id="outer_body">
	<div id="inner_body">
               <div id="header_text">
			<h1>Here's a Title!</h1>
			a tag line here...
		</div>
	</div>
</div>
 
</body>
</html>

stylesheet…

@charset "utf-8";
/* CSS Document */
 
body{background-color:#e2d6a9;
	font:Arial, Helvetica, sans-serif;
	margin:0px;
	padding:0px;
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0;
}
 
#outer_body{background:url(images/outer_bg.jpg) repeat-x #0c2110;
top:0px; position:relative;
	width:100%;
	height:200px;
	margin:0px;
	padding:0px;
 
}
 
#inner_body {
	margin:0px auto;
	position:relative;
	top:0px;
	padding:0px;
	width:200px;
	height:225px;
	background:#0F0
}
 
#header_text{
	margin-top:40px;
	width:190px;
}
Firefox has failed, it's not easy to align divs at the very top...

Firefox has failed, it's not easy to align divs at the very top...

This does NOT work by itself, though. Here’s the trick. You have to put something in every div you want to align at the very top of the page that has a margin and a padding of 0px, or you’re out of luck. I settled on an image named “spacer.gif”, which I then made have a width and height of 0px. Let’s see the difference…

<!--the index page-->
<!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=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="teststyle.css"/>
</head>
 
<body>
 
<div id="outer_body">
	<div id="inner_body">
		<img src="images/logo_bnr.jpg" width="0" height="0" id="spacer" />
                <div id="header_text">
			<h1>Here's a Title!</h1>
			a tag line here...
		</div>
	</div>
</div>
 
</body>
</html>

stylesheet…

@charset "utf-8";
/* CSS Document */
 
body{background-color:#e2d6a9;
	font:Arial, Helvetica, sans-serif;
	margin:0px;
	padding:0px;
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0;
}
 
spacer {
margin: 0; padding: 0; width:0px; height:0px; float:left;
}
 
#outer_body{background:url(images/outer_bg.jpg) repeat-x #0c2110;
top:0px; position:relative;
	width:100%;
	height:200px;
	margin:0px;
	padding:0px;
 
}
 
#inner_body {
	margin:0px auto;
	position:relative;
	top:0px;
	padding:0px;
	width:200px;
	height:225px;
	background:#0F0
}
 
#header_text{
	margin-top:40px;
	width:190px;
}

With the invisible spacer, added, now everything aligns to the top!

With the invisible spacer, added, now everything aligns to the top!


Now, a not about IE… IE + float = issues. you might have to play around to get what you want in IE. this solution did work in IE for me, but if you have other elements that are also floating, it could mess those up.

Tags: , ,
Posted in xhtml/css | No Comments »