2 replies [Last post]
iamjmiller
Offline
newbie
columbus, ohio
Last seen: 9 years 30 weeks ago
columbus, ohio
Timezone: GMT-4
Joined: 2012-06-25
Posts: 2
Points: 3

hello,

this is my first post, but what i've seen on this site so far it looks like it's full of information so i'm glad i found it.

i'm having a problem with my website. i did the entire site with as much text content as possible. the dividers of images are even very small paragraphs of text. my problem though is internet explorer. firefox, safari, and chrome display the site perfectly. but i showed my site to someone yesterday and she pulled it up on explorer to only completely embarrass me. i'm not sure if it was the certain version she was using or what, but wow. i've gotta fix it as soon as possible. none of the text is sized, colored, or set right in explorer. i'm testing it on explorer 9 and it's just insane how bad it looks.

here is the site: www.iamjmiller.com

here is the css for the home page:

@charset "utf-8";
/* CSS Document */
 
/*reset*/
/* <a href="http://meyerweb.com/eric/tools/css/reset/" rel="nofollow">http://meyerweb.com/eric/tools/css/reset/</a> 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: arial;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	background-color: #fbfaf6;
	line-height: 1.10;
	font-family: Arial, Helvetica, sans-serif;
}
 
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*end reset*/
 
 
 
p{
 font-size:22px;	
 padding: 0px 0px 0 0px;
 color: #979392;
}
 
p a{
 font-weight:normal;
 color: #332b2e;	
 font-size: 22px;
 text-decoration: none;
}
 
p a:hover{
 font-weight:normal;
 color: #332b2e;	
 font-size: 22px;
 text-decoration: underline;
}
 
p bold{
font-weight:bold;
 
}
 
p bold a{
font-weight:bold;
 
}
 
p bold a:hover{
font-weight:bold;
text-decoration:none;
color:#979392;
}
 
p dark{
color:#332b2e; 
}
 
p name{
font-size: 40px;
text-decoration:none;
font-weight: bold;
color:#979392;
}
 
p name a{
font-size: 40px;
text-decoration:none;
font-weight: bold;
color:#979392;
}
 
p name a:hover{
font-size: 40px;
text-decoration:none;
font-weight: bold;
color: #332b2e;
 
}
 
p links{
font-size: 81px;
color: #332b2e;
}
 
p links a{
font-size: 81px;
color: #332b2e;
}
 
p links a:hover{
font-size: 81px;
color: #979392;
text-decoration: none;
}
 
 
p ndivide{
	font-size: 7px;
	color: #979392;
}
 
p divide{
	font-size: 5.8px;
	color: #979392;
}
 
 
p objective{
	font-size: 42px;
	color: #979392;
}
 
p sect{
	font-size: 37px;
	color: #332b2e;
	font-weight:bold;
}
 
p inf{
	font-size: 29px;
	color: #979392;
}
 
p inf a{
	font-size: 29px;
	color: #979392;
}
 
p inf a:hover{
	font-size: 29px;
	color: #332b2e;
	text-decoration: none;
}
 
p det{
	font-size: 24px;
	color: #979392;
}
 
p des{
	font-size: 14px;
	color: #979392;
}
 
p des a{
	font-size: 14px;
	color: #332b2e;
}
 
p des a:hover{
	font-size: 14px;
	color: #979392;
	text-decoration:none;
}
 
p elevator{
	font-size: 28px;
	color: #332b2e;
	font-weight: bold;
}
 
p elevator a{
	font-size: 28px;
	color: #332b2e;
	font-weight: bold;
}
 
p elevator a:hover{
	font-size: 28px;
	text-decoration:none;
	color: #979392;
	font-weight: bold;
}
 
 
/** navbar **/
 
 
 
 
#navigation{
	display: block;
	width: 975px;
	height: 385px;
    margin-left: auto;
    margin-right: auto;
	top: 0px;
	position: relative;
	background-color: transparent;
	border: none;
 
}
 
#navdivider{
	display:block;
	position:relative;
	margin-top:100px;
	width:1090px;
	height:auto;
}
 
 
 
/** end navbar **/
 
 
 
/** main **/
 
#wrap{
	width: 1090px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	background-color: transparent;
}
 
 
 
 
#content{
 position: relative;
 width: 1024px;
 height: autopx;
 padding: 0px 0px 0px 0px;
 margin-top: 100px;
 margin-left:auto;
 margin-right:auto;
}
 
#projects{
	position:relative;
	width: auto;
	height:auto;
	margin-top: 0px;
	margin-left:auto;
	margin-right:auto;
}
 
#image{
	position:relative;
	width:auto;
	height:auto;
	margin-top:100px;
	margin-left:0px;
	float:left;
}
 
#imgdetails{
	position:relative;
	width:200px;
	height:auto;
	margin-top:100px;
	float:right;
}
 
#imgdividers{
	position:relative;
	width:auto;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	top:50px;
	float:right;
}
 
img.floatLeft { 
    float: left; 
    margin: 4px; 
}
 
#gapdiv{
	position:relative;
	width:1024px;
	height:100px;
	float:left;
}
 
#elevator{
	position: fixed;
	width: 195px;
	height: auto;
	bottom: 0px;
	padding: 5px 5px;
	right:0;
	background-color:transparent;
}
 
/** end main **/

here is the html for the home/index page:

<head>
	<title>Columbus Ohio Based Music / Commercial Photographer, Designer, &amp; Director. JMiller | Everyday Zombies</title>
<meta name="description" content="Columbus, Ohio based photographer, designer, & director JMiller.">
<meta name="keywords" content="iamjmiller, jmiller, ohio, central ohio, cd cover, album cover, photography, commercial, design, web design, logo design, ofhuman, guitar center, rock photographer, music video, director, hip-hop music video, hard rock music video">
<meta name='robots' content='index,follow,archive' />
<meta name="spiders" content="index, follow">
<meta name="googlebot" content="index, follow">
<meta name="revisit-after" content="15 days">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="image_src" href="http://www.iamjmiller.com/img/socialthumb.jpg" />
	<link rel="stylesheet" type="text/css" href="css/everydayzombies.css" />
	<link rel="shortcut icon" href="http://www.iamjmiller.com/favicon.ico" type="image/x-icon"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
	function scrollToTop() {
		$('html, body').animate({scrollTop:0}, 'slow');
	}
</script>
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-25263886-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
</head>
 
<body>
 
<div id="wrap">
 
<div id="navigation">
<p><name><a href="index.html" title="iamjmiller homepage">my name is josh miller</name></a></br>
<links><a href="photographer.html" title="photography portfolio">i am a photographer</a></br>
<a href="designer.html" title="design portfolio"><bold>i am a designer</bold></a></br>
<a href="director.html" title="video portfolio">i am a director</a></br>
<a href="individual.html" title="about me and how i can be contacted"><bold>i am a creative individual</bold></a></links></p>
</div><!-- end navigation -->
 
<div id="navdivider">
<p><ndivide>Zombies have been capturing my attention since I was a kid. I've always wanted to photograph them. One day I came up with the concept to place your typical zombies into your everyday typical settings and situations. Zombies Are People Too is the bumper sticker that started it all. Zombies are just like you and me, except a little more dead and slow moving. Check out the series as it slowly starts to take shape and if you really enjoy the bumper stickers email, text, or hit me up on facebook to get your hands on one. Just make sure you keep checking back is I will be updating this page as soon as the images are taken.</ndivide></p>
</div><!-- end navdivider -->
 
<div id="content">
 
<div id="projects">
<p align="center"><inf><a href="everydayzombies.html" title="Everyday Zombies Photo Series"><dark><bold>everyday</bold>zombies.</dark></a> <a href="ofhumanrelease.html" title="ofHuman's Ever Present EP Release at The Bluestone"><bold>ofhuman</bold>release.</a></inf></p>
</div><!-- end projects-->
 
<div id="image">
<img src="img/zombies/zombiebumperstickers.jpg">
</div><!-- end image-->
 
<div id="imgdetails">
<p><des><bold>client:</bold> the zombie race</br></br>
<bold>project:</bold> everyday zombies</br></br>
<bold>idea:</bold> They might not have an awesome personality, but even though they eat human brains and body parts doesn't mean they don't have a heart of gold. Zombies are just like you and me. They're just trying to get by in a world where people discriminate against the living dead. The bumper stickers are what started it all. Make sure you keep checking back to see the Everyday Zombies photo series come to life.
</des></p>
</div><!-- end imgdetails-->
 
<div id="imgdividers">
<p><divide>The Everyday Zombies photo series is among us. If you love zombies and great photography as much as I do, you better make sure to get your butt back here on a regular basis to check out the latest from the zombie series. Don't think it's just a Zombies Are People Too bumper sticker. That's just the beginning. Keep coming back to stay on top of this undead photo project of mine.</divide></p>
</div><!-- end imgdividers -->
 
<div id="image">
<img src="img/zombies/zombies-are-people-too-camping-trip-jmiller.jpg">
</div><!-- end image-->
 
<div id="imgdetails">
<p><des><bold>client:</bold> the zombie family</br></br>
<bold>project:</bold> everyday zombies</br></br>
<bold>idea:</bold> Zombies like to get away sometimes. Even on weekend getaways to the woods for a camping adventure with the family. Here's a family about to embark on an awesome trip to mother nature. Car is complete with clothes, fishing poles, sleeping bags, and even some snacks in the cooler (notice the hand sticking out). Not to mention that every walking dead-owned automobile has to have the "zombies are people too" bumper sticker.
<br/>
<br/>
Make-up effects by <a href="http://www.facebook.com/profile.php?id=1013335545" target="_blank">Scott Sliger</a> and the zombie was a good friend of mine by the name of <a href="http://www.facebook.com/WoodenFoot" target="_blank">Rob Sparkman</a>.
</des></p>
</div><!-- end imgdetails-->
 
<div id="imgdividers">
<p><divide>Zombies Are People Too! Check out the bumper sticker, zombie food in the cooler, sleeping bag on top, and zombie behind the wheel. I woke up at 6:30 for this shoot. After about 2 hours of set-up/make-up effects, we were ready to shoot. We set-up Rob's car outside of his west jefferson home and the images came out great. Check out my facebook to see more from the Everyday Zombies.</divide></p>
</div><!-- end imgdividers -->
 
 
 
 
<div id="image">
<img src="img/zombies/zombies-are-people-too-zombie-tattoo-jmiller.jpg">
</div><!-- end image-->
 
<div id="imgdetails">
<p><des><bold>client:</bold> troubled zombie youth</br></br>
<bold>project:</bold> everyday zombies</br></br>
<bold>idea:</bold> Being a zombie is no easy task. Your picked on constantly by others just for being a little different. So what if they have a different type of appetite? We've all got a heart, some just beat more than others that happen to not beat at all. Of course living through all the criticism would cause some of the younger zombie generation to get tattooed. And what better tattoo for a zombie than a partly eaten brain? 
<br/>
<br/>
Make-up effects by <a href="http://www.facebook.com/profile.php?id=1013335545" target="_blank">Scott Sliger</a>.<br/><br/> The tattoo artist is of course an actual tattooer and good friend of mine by the name of <a href="http://www.facebook.com/BrandonBlevinsTattooing" target="_blank">Brandon Blevins</a> who did a great job tattooing another friend and excellent "troubled zombie youth" actor <a href="http://www.facebook.com/KevinTolliver" target="_blank">Kevin Tolliver</a>.<br/><br/> The images were taken at <a href="http://www.facebook.com/pages/Thrill-Vulture-Tattooing/106368163544" target="_blank">Thrill Vulture Tattoing</a> in Westerville, Ohio. Also check out Kevin's band <a href="http://www.facebook.com/pages/Colors/212408072115661" target="_blank">Colors</a>.
</des></p>
</div><!-- end imgdetails-->
 
<div id="imgdividers">
<p><divide>Zombies Are People Too! So quit hatin' on 'em. The same partly eaten brain on the bumper sticker was the inspiration for the tattooed zombie. Scott did another great job on the make-up and having Brandon at his own chair inside Thrill Vulture Tattooing just brought everything authentic to the images. Make sure you check everybody out on facebook by clicking on their names.</divide></p>
</div><!-- end imgdividers -->
 
<div id="image">
<img src="img/zombies/zombies-are-people-too-family-breakfast-1-jmiller.jpg">
</div><!-- end image-->
 
<div id="imgdetails">
<p><des><bold>client:</bold> the zombie family</br></br>
<bold>project:</bold> everyday zombies</br></br>
<bold>idea:</bold> Zombie's eating together as a family before dad goes off to work and the kids get on the bus for school? Of course! Just because they eat hearts for breakfast doesn't mean they don't have one of their own. I've had this idea in my head since the start of the series. A famly of zombies coming together for the first meal of the day. Mom's pouring dad a glass of nice cold blood just before she digs into what's on her plate. The kids are eating some brain mush with a few fresh eyeballs to add some flavor and dad chomps on a few fried ears and some raw meat right off the bone.  
<br/>
<br/>
Make-up effects by <a href="http://www.facebook.com/profile.php?id=1013335545" target="_blank">Scott Sliger</a>. The zombie family was our "Camper"  <a href="http://www.facebook.com/WoodenFoot" target="_blank">Rob Sparkman</a> along with his wife Jenn and their boys Brad and Pirate. 
</des></p>
</div><!-- end imgdetails-->
 
 
 
<div id="imgdividers">
<p><divide>Zombies Are People...and Families Too. We all love to sit down at the table for a nice warm rotting flesh breakfast before the day starts. Well those of us who are zombies I suppose do. Check the details in this one. Love the food and the partly eaten brain drawn on the notebook with a sharpie also adds a lot to the image.</divide></p>
</div><!-- end imgdividers -->
 
 
 
 
 
 
 
<div id="gapdiv">
</div><!-- end gapdiv -->
</div><!-- end content -->
 
<div id="elevator">
<p align="center"><elevator><a href="javascript:scrollToTop()">^ elevator ^</a></elevator></p>
</div><!-- end elevator -->
 
</div><!-- end wrap -->
</body>
 
 
 
</html>

i really want this site to be exactly like it is in firefox and the other browsers. but you can't count on everyone using the others when there's a big chance they will see it in IE and ruin any chance i have of them contacting me for work.

any direction/help at all is greatly appreciated. thanks in advance.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi iamjmiller, Welcome to the

Hi iamjmiller,
Welcome to the CSS forums.
Looks like you are doing a lot of learning at the moment so I will give you some links to help.
Read Debugging CSS problems which will help you understand the need for a doctype and validation.
You are using some made up elements like links and ndivide which IE wouldn't know how to display. Have a look at the HTML5 element index.
If you are going to use HTML5 you will need to use a shiv so that IE will render the new elements well.

Hope that helps.

iamjmiller
Offline
newbie
columbus, ohio
Last seen: 9 years 30 weeks ago
columbus, ohio
Timezone: GMT-4
Joined: 2012-06-25
Posts: 2
Points: 3

hey

thanks a alot Tony for pointing me in a good direction. yeah. when i took web design classes with dreamweaver in high school we did everything with tables and barely skimmed css. so for the past 5 years i've been slowly learning it through trial and error. so i appreciate you checking out the post and pointing me to a good start of figuring out my problem and flaws in coding.