any ideas why IE7 wouldnt display the content in the left div box
<div id="left" class="column">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"phpBB2/index.php" title="Forums">FORUMS</a>
</div><!-- Closes Column2 -->
here is link to actual page:
webpage (<!-- m --><a class="postlink" href="http://www.recordingjunkie.com/">http://www.recordingjunkie.com/</a><!-- m -->)
here is the CSS
css (<!-- m --><a class="postlink" href="http://www.recordingjunkie.com/SSMain.css">http://www.recordingjunkie.com/SSMain.css</a><!-- m -->)
this isnt displaying for some reason. it worked in IE6 and it works in firefox. The code is all pretty basic and I tried to keep it so it would basically just work in all browsers. It isnt fancy because I tried to keep all the extra stuff out to make it first work in everything.
now that IE7 isnt displaying that for some reason, I lost compatibility with the main browser
any suggestions as to what is happening?
thanks all
p.s. any quick good tips on adding a margin around the text inside the div boxes? when I apply a margin to the div boxes themselves it adds the padding to the outside and changes the layout, when I want to actually move the text a few pixels from the edges of their div containers
thx again
S!You need padding in the divs to give you the spacing you're talking about.Actually, the left column didn't work in FF either...
I had a play - got rid of floats (which cause IE problems), removed a few extra divs and spans, and put in a semantic heading. Seems to work in everything.
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>RecordingJunkie.com</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"SSMain.css" />
</head>
<body>
<!-- div container to hold header and images -->
<div id="header"><h1>RecordingJunkie</h1>
</div>
<!-- closes Header -->
<div id="header2"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/RecordingJunkiePost2.gif" alt="News Header"/>
<span id="guit3"></span>
<span id="guit2"></span>
</div><!-- Closes Header2 -->
<div id="container1">
<div id="left">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"phpBB2/index.php" title="Forums">FORUMS</a></div>
<!-- Closes Column2 -->
<div id="center">
<div id="newsformat">
<p><strong>20 NOV 2006</strong></p>
<p><strong>T</strong>he graphics are coming along as you can see. I am still struggling with the layout of the site, but I am determined to do it right from the beginning and using notepad as my webpage and css editor is a longer process than you think
. Especially while doing my best to keep the code to a minimum. Hopefully the pages will load quickly for even our slow dial up friends .</p>
<p><strong>N</strong>ext I will try and spend a bit of time on adding some more content so there is actually some useful content here while I plan the next enhancements. Until the next update, keep your heads degaussed.</p>
<p><strong>S!<br/>
Theremin</strong></p>
</div>
<div id="newsformatcenter">
<p><strong>1 NOV 2006</strong></p>
<p><strong>R</strong>ecording Junkie is now tracking. RJ is dedicated to becoming the premier online contribution site. RJ members will be responsible for much of the content and will ultimately determine what features are available for one another.</p>
<p><strong>R</strong>J members will be able to submit materials, how-to articles, links, and anything useful and related to the recording industry. RJ admins will simply keep everything organized and available for reference to users.</p>
</div>
<div id="newsformatright">
<p><strong>S</strong>o submit your tech specs, post reviews, share your experiences. The knowledge you provide can make the difference to someone's next big project, or perhaps something you find here will help determine your decision on the next mic to buy for tracking drums.</p>
<p><strong>W</strong>elcome to <strong>recordingjunkie.com</strong></p>
<p><strong>S!<br />
Theremin</strong></p>
</div>
</div><!-- Closes Column1 -->
<div id="right">
<p></p><h3>21 Nov 2006<br/>
ADDED in Forum Tech Specs</h3><br/>
D12<br/>
D12 service manual<br/>
D12e service manual <br/>
D112<br/>
O5<br/>
FusionPack<br/>
D6 Kick<p></p>
</div><!-- Closes Column3 -->
</div>
<!-- Closes Container1 -->
<div id="footer">Click to <SCRIPT LANGUAGE=JavaScript>
a='admin'; b='recordingjunkie.com';
document.write('<A href=http://www.webdeveloper.com/forum/archive/index.php/"mai');
document.write('lto:'+a+'@');document.write(b+'">');
document.write('send us email</A>');</SCRIPT>
<NoScript>admin(at)recordingjunkie.com</NoScript>.
contact us</div>
<!-- Closes Container2 -->
</body>
</html>
css:
/*** The Essential Code ***/
body {
min-width: 550px; /* 2 x LC width + RC width */
margin: 0;
padding: 0;
position: relative;
background-color: #000000;
}
#container1 {
position: relative;
}
#center {
padding: 5px;
margin-left: 125px;
margin-right: 151px;
background-color: #FFFFFF;
}
#left {
width: 115px;
position: absolute;
left: 0px;
padding: 5px;
background-color: #000000;
color: #FFFFFF;
}
#right {
width: 140px;
color: #FFFFFF;
text-align: center;
position: absolute;
right: 0px;
top: 0px;
padding: 5px;
background-color: #000000;
}
#header {
width: 100%;
height: 80px;
margin: 0;
background-color: #000000;
color: #FFFFFF;
}
#footer {
font-size: large;
text-align: center;
clear: both;
background-color: #000000;
color: #FFFFFF;
}
/*** IE6 Fix ***/
* html #left {
left: -125px;
}
a {
color:#fff;
font-weight: bold;
text-decoration:none;
}
a:hover {
font-weight: bold;
color:#CC9900;
}
#header {
background-image: url(Images/GuitarBanner.gif);
background-repeat: no-repeat;
background-position: right top;
}
#header h1 {
position: absolute;
left: 0;
background-image: url(Images/RecordingLogoMain.gif);
width: 313px;
height: 80px;
z-index: 1;
font-size: 1px;
color: #000000;
margin: 0;
}
#header2 {
font-size: large;
text-align: center;
height: 105px;
background-image: url(Images/PostHeaderFiller.gif);
}
#guit2 {
position: absolute;
right: 0;
background-image: url(Images/GuitarRight.gif);
width: 125px;
height: 105px;
z-index: 1;
}
#guit3 {
position: absolute;
right: 0;
margin-right: 125px;
background-image: url(Images/GuitarJack.gif);
width: 63px;
height: 105px;
z-index: 2;
}
Cheers
Graemeholy cow!!
thanks much Centauri
I didnt expect anyone to fix my code for me. I used it right away, but I am going to go back and see what was different tonight after work. 
I appreciate your time.
Thanks also to Ray. I didnt get to your padding suggestion until after Centauri beat me to the punch.
S!
<div id="left" class="column">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"phpBB2/index.php" title="Forums">FORUMS</a>
</div><!-- Closes Column2 -->
here is link to actual page:
webpage (<!-- m --><a class="postlink" href="http://www.recordingjunkie.com/">http://www.recordingjunkie.com/</a><!-- m -->)
here is the CSS
css (<!-- m --><a class="postlink" href="http://www.recordingjunkie.com/SSMain.css">http://www.recordingjunkie.com/SSMain.css</a><!-- m -->)
this isnt displaying for some reason. it worked in IE6 and it works in firefox. The code is all pretty basic and I tried to keep it so it would basically just work in all browsers. It isnt fancy because I tried to keep all the extra stuff out to make it first work in everything.
now that IE7 isnt displaying that for some reason, I lost compatibility with the main browser
any suggestions as to what is happening?
thanks all
p.s. any quick good tips on adding a margin around the text inside the div boxes? when I apply a margin to the div boxes themselves it adds the padding to the outside and changes the layout, when I want to actually move the text a few pixels from the edges of their div containers
thx again
S!You need padding in the divs to give you the spacing you're talking about.Actually, the left column didn't work in FF either...
I had a play - got rid of floats (which cause IE problems), removed a few extra divs and spans, and put in a semantic heading. Seems to work in everything.
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>RecordingJunkie.com</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"SSMain.css" />
</head>
<body>
<!-- div container to hold header and images -->
<div id="header"><h1>RecordingJunkie</h1>
</div>
<!-- closes Header -->
<div id="header2"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/RecordingJunkiePost2.gif" alt="News Header"/>
<span id="guit3"></span>
<span id="guit2"></span>
</div><!-- Closes Header2 -->
<div id="container1">
<div id="left">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"phpBB2/index.php" title="Forums">FORUMS</a></div>
<!-- Closes Column2 -->
<div id="center">
<div id="newsformat">
<p><strong>20 NOV 2006</strong></p>
<p><strong>T</strong>he graphics are coming along as you can see. I am still struggling with the layout of the site, but I am determined to do it right from the beginning and using notepad as my webpage and css editor is a longer process than you think
. Especially while doing my best to keep the code to a minimum. Hopefully the pages will load quickly for even our slow dial up friends .</p><p><strong>N</strong>ext I will try and spend a bit of time on adding some more content so there is actually some useful content here while I plan the next enhancements. Until the next update, keep your heads degaussed.</p>
<p><strong>S!<br/>
Theremin</strong></p>
</div>
<div id="newsformatcenter">
<p><strong>1 NOV 2006</strong></p>
<p><strong>R</strong>ecording Junkie is now tracking. RJ is dedicated to becoming the premier online contribution site. RJ members will be responsible for much of the content and will ultimately determine what features are available for one another.</p>
<p><strong>R</strong>J members will be able to submit materials, how-to articles, links, and anything useful and related to the recording industry. RJ admins will simply keep everything organized and available for reference to users.</p>
</div>
<div id="newsformatright">
<p><strong>S</strong>o submit your tech specs, post reviews, share your experiences. The knowledge you provide can make the difference to someone's next big project, or perhaps something you find here will help determine your decision on the next mic to buy for tracking drums.</p>
<p><strong>W</strong>elcome to <strong>recordingjunkie.com</strong></p>
<p><strong>S!<br />
Theremin</strong></p>
</div>
</div><!-- Closes Column1 -->
<div id="right">
<p></p><h3>21 Nov 2006<br/>
ADDED in Forum Tech Specs</h3><br/>
D12<br/>
D12 service manual<br/>
D12e service manual <br/>
D112<br/>
O5<br/>
FusionPack<br/>
D6 Kick<p></p>
</div><!-- Closes Column3 -->
</div>
<!-- Closes Container1 -->
<div id="footer">Click to <SCRIPT LANGUAGE=JavaScript>
a='admin'; b='recordingjunkie.com';
document.write('<A href=http://www.webdeveloper.com/forum/archive/index.php/"mai');
document.write('lto:'+a+'@');document.write(b+'">');
document.write('send us email</A>');</SCRIPT>
<NoScript>admin(at)recordingjunkie.com</NoScript>.
contact us</div>
<!-- Closes Container2 -->
</body>
</html>
css:
/*** The Essential Code ***/
body {
min-width: 550px; /* 2 x LC width + RC width */
margin: 0;
padding: 0;
position: relative;
background-color: #000000;
}
#container1 {
position: relative;
}
#center {
padding: 5px;
margin-left: 125px;
margin-right: 151px;
background-color: #FFFFFF;
}
#left {
width: 115px;
position: absolute;
left: 0px;
padding: 5px;
background-color: #000000;
color: #FFFFFF;
}
#right {
width: 140px;
color: #FFFFFF;
text-align: center;
position: absolute;
right: 0px;
top: 0px;
padding: 5px;
background-color: #000000;
}
#header {
width: 100%;
height: 80px;
margin: 0;
background-color: #000000;
color: #FFFFFF;
}
#footer {
font-size: large;
text-align: center;
clear: both;
background-color: #000000;
color: #FFFFFF;
}
/*** IE6 Fix ***/
* html #left {
left: -125px;
}
a {
color:#fff;
font-weight: bold;
text-decoration:none;
}
a:hover {
font-weight: bold;
color:#CC9900;
}
#header {
background-image: url(Images/GuitarBanner.gif);
background-repeat: no-repeat;
background-position: right top;
}
#header h1 {
position: absolute;
left: 0;
background-image: url(Images/RecordingLogoMain.gif);
width: 313px;
height: 80px;
z-index: 1;
font-size: 1px;
color: #000000;
margin: 0;
}
#header2 {
font-size: large;
text-align: center;
height: 105px;
background-image: url(Images/PostHeaderFiller.gif);
}
#guit2 {
position: absolute;
right: 0;
background-image: url(Images/GuitarRight.gif);
width: 125px;
height: 105px;
z-index: 1;
}
#guit3 {
position: absolute;
right: 0;
margin-right: 125px;
background-image: url(Images/GuitarJack.gif);
width: 63px;
height: 105px;
z-index: 2;
}
Cheers
Graemeholy cow!!
thanks much Centauri
I didnt expect anyone to fix my code for me
. I used it right away, but I am going to go back and see what was different tonight after work. I appreciate your time.
Thanks also to Ray. I didnt get to your padding suggestion until after Centauri beat me to the punch
.S!