...

View Full Version : Help with an IE problem!



spkinosh
05-13-2010, 01:55 AM
I'm rebuilding a site and it looks great in both FF and Safari but when you view it in IE the branding bar is messed up. I've validated both my CSS and XHTML code. I can't figure this out - please help. (the form and links to other pages don't work since I've only uploaded the index and pics for this purpose. Here's the test site:

http://suzietestsite.webs.com/

Here's the code:

<?php require("hostbaby"); ?>

<!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>
<title>Jeff Anderson</title>

<meta name="description" content="The official website of Jeff Anderson. Find Jeff's latest news, music, videos, albums, and events." />
<meta name="keywords" content="Jeff Anderson,official website,home page,Music,Videos" />
<meta http-equiv="content-type" content="text/html; charset=us-ascii" />
<link href="ja_styles.css" rel="stylesheet" type="text/css" />

</head>

<body>

<!--Begin Wrapper-->
<div id="wrapper">



<!--Begin Branding-->
<div id="branding">

<h2 class="selected"><a href="http://www.jeffandersonmuse.com">jeffandersonmuse.com</a></h2>

<h2>
<a class="bio" href="bio.html">Bio</a>
<a class="calendar" href="calendar.html">Calendar</a>
<a class="photos" href="photos.html">Photos</a>
<a class="music" href="music.html">Music</a>
<a class="store" href="store.html">Store</a>
</h2>

</div>
<!-- End branding -->



<!--Begin Main Content Header-->
<div id="mcolheader">

<h2>News</h2>

</div>
<!--End Main Content Header-->




<!--Begin Main Content-->
<div id="main">

<table class="main" summary="news">
<tr>
<td><?php show_news() ?></td>
</tr>
</table>

</div>
<!--End Main Content-->




<!--Begin Right Column Header-->
<div id="rcolheader">

<h2>Contacts</h2>

</div>
<!--End Right Column Header-->




<!--Begin Right Column-->
<div id="rightcolumn">

<p>Join the mailing list!</p>

<!-- This page just collects the info and names it. The next page "emailit.html" will actually do the emailing -->

<form action="emailit.html" method="post">

<table>

<tr><td>Your@Email:</td></tr>

<tr><td><input type="text" size="40" maxlength="127" name="email" /></td></tr>

</table>

<p class="submit"><input type="submit" value="JOIN" /></p>

</form>

<!-- FORM IS OVER. BACK TO YOUR REGULAR HTML CODE. -->


<p><a href="http://www.digstation.com/AlbumDetails.aspx?albumID=ALB000019998">
<img height="75" width="165" alt="www.digstation.com" src="links/digstation.gif" /></a></p>

<p><a href="http://www.facebook.com/pages/Jeff-Anderson/35222011104">
<img height="38" width="160" alt="Facebook" src="links/facebook_badge.jpg" /></a></p>

<p><a href="http://www.myspace.com/jandersonmuse">
<img height="49" width="157" alt="myspace.com" src="links/myspace_badge.png" /></a></p>

<p><a href="http://cdbaby.com/cd/jeffanderson">
<img height="74" width="234" alt="www.cdbaby.com" src="links/cdbabylogo.gif" /></a></p>

<p><a href= "http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=284354016&amp;id=284353843&amp;s=143441">
<img height="71" width="56" alt="iTunes" src="links/itunes_logo.jpg" /></a></p>

<h2><a href="mailto:webmaster@musicinmyheadrecords.com">Contact Us</a></h2>

</div>
<!--End Right Column-->




<!--Begin Footer-->
<div id="footer">

<p>&copy; 2010 JeffAndersonMuse.com. All Rights Reserved.&nbsp;|&nbsp;<em>Site design by &nbsp;<a href="mailto:spkinosh@comcast.net">Suzie K. Designs</a></em></p>

</div>
<!--End Footer-->

</div>
<!--/ End Wrapper-->

</body>

</html>




And the CSS:

/* ja_styles.css */



/* Universal style rule */
* {
margin: 0;
padding: 0;
}



body {
background-image: url("pics/jabkgd.png");
background-color: #E6E6E6;
text-align: center;
font-family: "Palatino Linotype", Palatino, "MgOpen Canonica", "DejaVu Serif", serif;
font-size: 1em;
color: #CCCCCC;
}



#wrapper {
width: 60em;
background-color: #272b2e;
position: relative;
margin-left: auto;
margin-right: auto;
border-left: thin solid #CCCCCC;
border-right: thin solid #CCCCCC;
}



/********** Branding division styles **********/



#branding {
height: 2em;
text-transform: uppercase;
background-color: #000000;
text-align: left;
border-bottom: thin solid #CCCCCC;
padding: 1em;
}


#branding h2 {
margin-right: 0.5em;
}
#branding h2.selected a:link, #branding h2.selected a:visited {
color: #028482;
}
#branding h2.selected a:hover {
color: #FFFFFF;
}


a.bio {
right: 20em;
}
a.calendar {
right:13.5em;
}
a.photos {
right: 8.5em;
}
a.music {
right: 4.5em;
}
a.store {
right: .5em;
}



/********** Right Header division styles **********/



#rcolheader {
width: 17em;
float: right;
text-align: left;
position: absolute;
top: 4.05em;
right: 0;
background-color: #555555;
padding: 1em;
color: #000000;
height: 1.5em;
border-top: thin solid #CCCCCC;
}

#rcolheader h2 {
color: #FFFFFF;
font-weight: bold;
text-transform: uppercase;
text-align: left;
}



/********** Right Column division styles **********/



#rightcolumn {
width: 17em;
float: right;
text-align: left;
position: absolute;
top: 8em;
right: 0;
background-color: #272b2e;
padding: 1em;
}

#rightcolumn p {
margin: 1em;
text-align: center;
}

#rightcolumn h2 {
margin: 1em;
text-align: center;
}



/********** Main Header division styles **********/



#mcolheader {
margin: 0 19em 0 0;
background-color: #333333;
padding: 1em;
height: 1.5em;
border-top: thin solid #CCCCCC;
text-align: left;
}

#mcolheader h2 {
color: #FFFFFF;
font-weight: bold;
text-transform: uppercase;
text-align: left;
}



/********** Main Content division styles **********/



#main {
margin: 0 19em 0 0;
background-color: #1A1A1A;
background-image: url("pics/kiss.jpg");
padding: 1em;
text-align: left;
color: #000000;
height:50em;
}

#main p {
text-align: left;
line-height: 1.5em;
padding: 0.5em;
text-align: left;
}

table.main {
text-align: left;
padding: 10px;
width: 100%;
border-collapse: separate;
margin-left: auto;
margin-right: auto;
}



/********** Footer division styles **********/



#footer {
height: 2em;
background-color: #4D4D4D;
text-align: left;
border-top: thin solid #CCCCCC;
padding: 1em;
clear: both;
}

#footer p {
margin: 0.5em;
color: #000000;
}




/********** Link styles **********/

#branding a {
position: absolute;
text-decoration: none;
font-size: 1em;
}

a {
text-decoration: none;
font-size: 1em;
text-align : center;
}

a:link {color:#CCCCCC;} /* unvisited link */
a:visited {color:#CCCCCC;} /* visited link */
a:hover {color:#028482;} /* mouse over link */
a:active {color:#FFFFFF;} /* selected link */



/********** Print styles **********/



@media print{
/* Start printer-friendly styles */

/* Make wrapper the full page width */
#wrapper{
width:100%;
}

/* Hide rightcolumn, navbar,and footer */
#rightcolumn,
#branding,
#footer{
display:none;
}

/* Get rid of content div margins and
padding. Use a different font for print */
#main{
margin:0;
padding:0;
font-family:'Century Schoolbook', Times, Serif;
font-size:1em;
}
}

abduraooft
05-13-2010, 08:38 AM
Start with fixing the errors in your markup, see http://validator.w3.org/check?uri=http://suzietestsite.webs.com/

<?php require("hostbaby"); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and you've an unparsed php code at the top of your doctype, which will turn IE into quirks mode.

spkinosh
05-13-2010, 01:57 PM
Thank you, abduraooft! Removing the php code fixed the issue. I'll leave it out until I'm ready to put that piece in place. (Funny that when I validate by file upload I get no errors, but when I validate by url I did).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum