User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the Site Layout and Usability section within the Web Development category of DaniWeb, a massive community of 373,466 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,959 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our Site Layout and Usability advertiser:
Views: 673 | Replies: 3
Reply
•
•
Join Date: Jan 2008
Posts: 3
Reputation: wenley is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
wenley wenley is offline Offline
Newbie Poster

Troubleshooting Newbie in IE hell

  #1  
Jan 23rd, 2008
Hi,

I'm designing two sites, both with the same problem.

The first is here: http://www.nycamprepairs.com

The site looks great in Safari and Firefox on the Mac but in IE my content is somehow sent down to the bottom of the page. Both my CSS and HTML validates on the W3C Validator. Please help! Thanks to all!

Alex

Here's my HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" /><!-- Link to style sheet for this Web site -->
<meta name="keywords" content="John Charette, New York City, Amplifier Repair, Gutiar, Electric Guitar, Marshall, Fender, Peavey, Vox, Danelectro, Gibson, Les Paul, Excello Recording, Hugh Pool, New York, NYC, Amp Repair" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>Charette Electronics</title>
<style type="text/css">
/*<![CDATA[*/
div.rel {position: relative}
/*]]>*/
</style>

</head>
<body>
<div id="header"><!-- Start of page header -->
<a href="index.html"><img src="images/charelec.png" alt="Charette Electronics Logo" /></a></div>
<!-- End of page header -->
<div id="sidebar"><!-- Start of sidebar content -->
<table border="0px">
<tr>
<td><a href="index.html">Home</a></td>
</tr>
<tr>
<td><a href="repairs.html">Repairs</a></td>
</tr>
<tr>
<td><a href="fab.html">Fabrication</a></td>
</tr>
<tr>
<td><a href="install.html">Studio Installation</a></td>
</tr>
<tr>
<td><a href="dirty.html">Dirty ****er</a></td>
</tr>
<tr>
<td><a href="sale.html">For Sale</a></td>
</tr>
<tr>
<td><a href="links.html">Links</a></td>
</tr>
<tr>
<td><a href="direct.html">Directions</a></td>
</tr>
</table>
</div>
<!-- End of sidebar content -->
<div id="main"><!-- Start of main content -->
<p>John Charette has been a professional audio technician for two decades.</p>
<div class="rel"><p>With experience as a technician at studios including Platinum Island,<br />
<a href="http://www.electricladystudios.com">Electric Lady,</a> Media Sound, and currently <a href="http://www.excellorecording.com">Excello Recording,</a> Charette<br />
(as he is known to his friends) is a wizard with amplifiers, tape machines,<br />
recording consoles, and outboard gear of all makes and models.</p>
<p>John is also the designer of the <a href="dirty.html">Dirty ****er,</a> an all hand-wired fuzz pedal.</p></div>
<div class="rel"><img class="floatLeft" src="images/diagampeg.png" alt="Ampeg" /></div></div>
<!-- End of main content -->
</body>
</html>

Here's the CSS:

/* stylesheet.css */

/* Page header style */
#header{
height: 72px;
width: 504em;
text-align: left;
margin-left: 11em;
}

/* Page footer style */
#footer{
margin-top: 0em;
margin-left: 2em;
height: 30px;
width: 42em;
text-align: center;
}


/* Style for images */
img{
border: 0px;
}

/* Add some margin space to main content */
#main{
margin-right: 10em;
/* margin-left must equal */
/* total width of left sidebar */
margin-left: 11em;
padding: 15px;
width: 46em;
margin-top: 0px;
text-align: left;
position: relative;

}

/* Style for sidebar column */
#sidebar{
border: 1px;
float: left;
display: inline;
padding-top: 15px;
margin: 1em;
width:8em;
height: 60em;
text-align: right;
font-weight: bold;
/* Total width is 10em */
}

/* Body text and page background */
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: black;
text-align: left;
width: 46em;
background-image: url("images/ac151959.jpg");
background-repeat: repeat;
}


/* Unvisited links (black) */
a:link{
color: #000000; /* black */
text-decoration: none;
}


/* Visited links (black) */
a:visited{
color: #000000; /* black */
text-decoration: none;
}

/* Hover links (white) */
a:hover{
color: #999999; /* white */
text-decoration: none;
}

/* Active links (black) */
a:active{
color: #000000; /* black */
text-decoration: none;
}

/* Level 1 headings */
h1 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-align: center;
}

/* Level 2 headings */
h2 {
margin: 1px;
margin-top: 2em;
font-family: Arial, Helvetica, sans-serif;
color: #0066CC;
text-align: left;
text-decoration: none;
font-style: italic;
}

/* Level 3 headings */
h3 {
font-family: Arial, Helvetica, sans-serif;
color: #0066CC;
text-align: right;
margin-left: 8em;
margin-top: 3em;
font-style: italic;
}

/* Level 3 headings */
.topmargin h3 {
font-family: Arial, Helvetica, sans-serif;
color: #0066CC;
font-style: italic;
margin-top: 5em;
margin-left: 0em;
}

/* Float image to left of paragraph */
img.floatLeft{
float: left;
margin-right: 5px;
margin-bottom: 14em;
padding: 0px;
position: relative;
}

/* Float image to right of paragraph */
img.floatRight{
float: right;
margin-left: 10px;
padding: 0px;

}
/* Center image between margins */
div.center{
width: 100%;
text-align: center
}
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation: FC Jamison is on a distinguished road 
Rep Power: 5
Solved Threads: 17
Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Solution Re: Newbie in IE hell

  #2  
Jan 23rd, 2008
I modified your code as follows:

For the css, I changed the main id to:

Help with Code Tags 
#main{
margin-top: 15px;
float: left;
}

I then removed the class from your last image on the html page

Help with Code Tags 
<div class="rel"><img src="http://www.nycamprepairs.com/images/diagampeg.png" alt="Ampeg" /></div>
Reply With Quote  
•
•
Join Date: Jan 2008
Posts: 3
Reputation: wenley is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
wenley wenley is offline Offline
Newbie Poster

Re: Newbie in IE hell

  #3  
Jan 23rd, 2008
Thanks so much. You saved me!

I wonder if you wouldn't mind answering why my code not working. Any help is appreciated.
Reply With Quote  
•
•
Join Date: Jan 2008
Posts: 3
Reputation: wenley is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
wenley wenley is offline Offline
Newbie Poster

Question Re: Newbie in IE hell

  #4  
Jan 23rd, 2008
Thanks for the help. I got nycamprepairs.com working in IE and Firefox, but one page still looks pretty lousy in Safari. But that one is OK for now.

My other site is having similar problems. It validates and looks fine in Firefox and Safari, but crazy in IE. If anyone feels like tackling it, here's the HTML:

<!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">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" /><!-- Link to style sheet for this Web site -->
<meta name="keywords" content="Alex Sniderman, Scott Anthony, Wayne Kramer, MC5, Billy Ficca, Kevin Salem, Melissa Houston, Tyson Rogers, Jason Loewenstein, Guitar Rock, Guitar, Bass, Drums, Brooklyn, Rock and Roll, Excello Recording, Hugh Pool, New York, New York City, NYC, Nashville, Murfreesboro, Tennessee, Ann Arbor, Michigan" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>Nu-Sonics</title>

<style type="text/css">
/*<![CDATA[*/
table.c4 {width: 100%; color: black; font-weight: bold; padding: 0px; }
h2.c3 {margin-left: 0px;}
img.c2 {width: 100%; float: left; border-style: ridge; border-color: black; border-width: 1px;}
img.c1 {width:65%;}

/*]]>*/
</style>
</head>
<body>
<div id="header"><!-- Start of page header -->
<a href="index.html"><img src="images/logo.gif" class="c1" alt="Nu-Sonics Logo" /></a></div>
<!-- End of page header -->
<div id="sidebar"><!-- Start of sidebar content -->
<a href="buy.html"><img src="images/cover_digipak.gif" class="c2" alt="CD Cover" /></a></div>
<!-- End of sidebar content -->
<div id="main"><!-- Start of main content -->
<p><img class="floatLeft" src="images/eurekaep.gif" width="200px" height="39px" alt="Eureka E.P." /></p>
<h1>is now available. Buy it <a href="buy.html">here!</a></h1>
<p>A shotgun wedding of the ringing hooks of Big Star and the rootsy, noisy grit of Neil Young &amp; Crazy Horse come together to create the sound of The Nu-Sonics The "Eureka" E.P.</p>
<img class="floatRight" src="images/cover_digipak1.png" width="360" height="246" alt="Cover Photo" />
<p>The "Eureka" E.P. showcases a versatile rock and roll band capable of thoughtful acoustic ballads ("Words No Good"), witty, punky rock ("Nice Guys"), and pure pop confection ("Say Hello, No Goodbyes").</p>
<p>Alex Sniderman's songs wouldn't pack the same punch without the tightly wound band. Houston's versatile drumming and Anthony's surefooted bass glue everything together seamlessly. The lean arrangements are filled out by Tyson Rogers (The Blueprint Project, Yo La Tengo, Chris Stamey) on keyboards, Rebecca Turner's soaring harmonies, Brooklyn troubadour John Pinamonti on guitar and mandolin, and topped with Sniderman's supple, confident vocals.</p>
<p class="last">The Nu-Sonics is a band of music lovers and lifers who want to share the fun of making good noise with good friends.</p>
<h3>"You guys have that Big Star vs. Crazy horse thing."<br />
-Jason Loewenstein (Sebadoh, The Fiery Furnaces)</h3>
</div>
<!-- End of main content -->
<div id="indexfooter"><!-- Start of page footer -->
<table border="0px" class="c4">
<tr>
<td><a href="index.html">home</a></td>
<td><a href="bio.html">bio</a></td>
<td><a href="buy.html">buy cds</a></td>
</tr>
</table>
</div>
<!-- End of page footer --><script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script><script type="text/javascript">
//<![CDATA[
_uacct = "UA-3430999-1";
urchinTracker();
//]]>
</script>
</body>
</html>

And here's the CSS:

/* stylesheet.css */

/* Page header style */
#header{
height: 60px;
width: 46em;
text-align: center;
padding: 15px;
margin-left: 11em;
margin-top: 0px;

}

/* Page footer style */
#footer{
margin-top: 0em;
margin-left: 2em;
height: 30px;
width: 42em;
text-align: center;

}

/* Index Page footer style */
#indexfooter{
margin-top: 1em;
margin-left: 15em;
height: 40px;
width: 42em;
text-align: left;
}


/* Style for images */
img{
border: 0px;
margin-bottom: 5px;
}

/* Add some margin space to main content */
#main{
margin: 0em;
/* margin-left must equal */
/* total width of left sidebar */
margin-left: 11em;
padding: 15px;
width: 46em;
margin-top: 0px;
text-align: left;
height: 30em;
/* I added the height value to push down the footer and cover photo */

}

/* Add some margin space to main content */
#last{
margin: 1em;
/* margin-left must equal */
/* total width of left sidebar */
margin-left: 11em;
}

/* Style for sidebar column */
#sidebar{
border: 1px;
float: left;
display: inline;
padding-top: 15px;
margin: 1em;
width:8em;
height: 60em;
/* Total width is 10em */
}

/* Body text and page background */
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: black;
text-align: left;
width: 46em;
background-image: url("images/wood_bkgrnd.jpg");
background-repeat: repeat;
}

/* Downloads (documents) */
.downdoc {
font-size: 11px;
color: #000000; /* black */
font-weight: bold;
text-decoration: none;
text-align: center;
}

/* Index Page Cover Photo */
div.mainphoto {
width: 100%;
text-align: right;
}


/* Unvisited links (black) */
a:link{
color: #000000; /* black */
text-decoration: none;
}

/* Unvisited links (blue) */
.bluelink a:link{
color: #0066CC;
text-decoration: none;
}

/* Hover links (white-bluelinks) */
.bluelink a:hover{
color: #ffffff; /* white */
text-decoration: none;
}


/* Visited links (black) */
a:visited{
color: #000000; /* black */
text-decoration: none;
}

/* Hover links (white) */
a:hover{
color: #ffffff; /* white */
text-decoration: none;
}

/* Active links (black) */
a:active{
color: #000000; /* black */
text-decoration: none;
}

/* Level 1 headings */
h1 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-align: center;
}
/* Level 2 headings */
h2 {
margin: 1px;
margin-top: 2em;
font-family: Arial, Helvetica, sans-serif;
color: #0066CC;
text-align: left;
text-decoration: none;
font-style: italic;

}
/* Level 3 headings */
h3 {
font-family: Arial, Helvetica, sans-serif;
color: #0066CC;
text-align: right;
margin-left: 8em;
margin-top: 3em;
font-style: italic;

}

/* Level 3 headings */
.topmargin h3 {
font-family: Arial, Helvetica, sans-serif;
color: #0066CC;
font-style: italic;
margin-top: 5em;
margin-left: 0em;


}


/* Float image to left of paragraph */
img.floatLeft{
float: left;
margin-right: -35px;
padding: 0px;
}

/* Float image to right of paragraph */
img.floatRight{
float: right;
margin-left: 10px;
padding: 0px;

}
/* Center image between margins */
div.center{
width: 100%;
text-align: center
}

If anyone has any suggestions, please let me know. Thanks!
Reply With Quote  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
•
•
•
•
DaniWeb Site Layout and Usability Marketplace
•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode

•
•
•
•
ajax foundation home internet newbie presentation site web windows wpf
Similar Threads
Other Threads in the Site Layout and Usability Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 5:13 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC