JamesAlire
22 Oct 2010, 09:04 PM
I have read through previous post about people having div spacing issues. Unfortunately, they didn't help me. As with all the other issues, I am sure this one is obvious as well.
I have a spacing issue between the header div class and the main div class. Looks fine in Safari, but not in Firefox. Don't know about IE.
You can check out the site here: http://www.jamesalire.com/Staging/NPE/home.html
Here is my CSS code:
body {
margin-top: 0px;
background-image: url(Images/background2.jpg);
background-repeat: repeat-y;
background-position: center top;
}
.wrapper {
width: 1100px;
margin: 0 auto;
padding: 0;
}
.nav {
width: 750px;
margin-left: 185px;
padding: 0px;
margin-bottom: 0px;
}
.style1 {
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #FFF;
}
.main {
margin-top: 0px;
}
.header {
margin-top: 0px;
margin-bottom: 10px;
}
.main table {
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-style: italic;
font-size: 14px;
text-align: center;
}
.bottom {
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFF;
text-align: center;
margin: 5px;
}
Here is my HTML:
<!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>..::NO PROBLEM ENTERTAINMENT::.. NPE - Hip Hop Chicago</title>
<style type="text/css">
@import url("main.css");
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<!--Start Wrapper -->
<div class="wrapper">
<!--Start Header -->
<div class="header">
<div align="center"><img src="Images/NPE_Header.jpg" width="998" height="154" /></div>
</div>
<!--End Header -->
<!--Start Navigation -->
<div class="nav">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="750" height="50">
<param name="movie" value="Flash/NavButtons.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Flash/NavButtons.swf" width="750" height="50">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<!--End Navigation -->
<!--Start Main -->
<div class="main">
<table width="1002" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="296" height="24" background="Images/leftcolumnbg_top.jpg" style="vertical-align:top" td></td>
<td width="706" height="24" background="Images/rightcolumnbg_top.jpg" style="vertical-align:top" td></td>
</tr>
<tr>
<td width="296" style="vertical-align:top" td background="Images/leftcolumnbg.jpg"><div align="center">
<p><img src="Images/findus.jpg" width="183" height="205" alt="NPE No Problem Entertainment Social Media" /></p>
</div></td>
<td width="706" style="vertical-align:top" td background="Images/rightcolumnbg.jpg"><div align="center">
<p> </p>
<p> </p>
</div></td>
</tr>
<tr>
<td width="296" height="24" background="Images/leftcolumnbg_bottom.jpg" td></td>
<td width="706" height="24" background="Images/rightcolumnbg_bottom.jpg"td></td>
</tr>
</table>
</div>
<!--End Main -->
<!--Start Bottom -->
<div class="bottom">
© 2010 No Problem Entertainment, LLC
</div>
<!--End Botton -->
</div>
<!--End Wrapper -->
<script type="text/javascript">
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID");
</script>
</body>
</html>
I have a spacing issue between the header div class and the main div class. Looks fine in Safari, but not in Firefox. Don't know about IE.
You can check out the site here: http://www.jamesalire.com/Staging/NPE/home.html
Here is my CSS code:
body {
margin-top: 0px;
background-image: url(Images/background2.jpg);
background-repeat: repeat-y;
background-position: center top;
}
.wrapper {
width: 1100px;
margin: 0 auto;
padding: 0;
}
.nav {
width: 750px;
margin-left: 185px;
padding: 0px;
margin-bottom: 0px;
}
.style1 {
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #FFF;
}
.main {
margin-top: 0px;
}
.header {
margin-top: 0px;
margin-bottom: 10px;
}
.main table {
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-style: italic;
font-size: 14px;
text-align: center;
}
.bottom {
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFF;
text-align: center;
margin: 5px;
}
Here is my HTML:
<!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>..::NO PROBLEM ENTERTAINMENT::.. NPE - Hip Hop Chicago</title>
<style type="text/css">
@import url("main.css");
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<!--Start Wrapper -->
<div class="wrapper">
<!--Start Header -->
<div class="header">
<div align="center"><img src="Images/NPE_Header.jpg" width="998" height="154" /></div>
</div>
<!--End Header -->
<!--Start Navigation -->
<div class="nav">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="750" height="50">
<param name="movie" value="Flash/NavButtons.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Flash/NavButtons.swf" width="750" height="50">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<!--End Navigation -->
<!--Start Main -->
<div class="main">
<table width="1002" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="296" height="24" background="Images/leftcolumnbg_top.jpg" style="vertical-align:top" td></td>
<td width="706" height="24" background="Images/rightcolumnbg_top.jpg" style="vertical-align:top" td></td>
</tr>
<tr>
<td width="296" style="vertical-align:top" td background="Images/leftcolumnbg.jpg"><div align="center">
<p><img src="Images/findus.jpg" width="183" height="205" alt="NPE No Problem Entertainment Social Media" /></p>
</div></td>
<td width="706" style="vertical-align:top" td background="Images/rightcolumnbg.jpg"><div align="center">
<p> </p>
<p> </p>
</div></td>
</tr>
<tr>
<td width="296" height="24" background="Images/leftcolumnbg_bottom.jpg" td></td>
<td width="706" height="24" background="Images/rightcolumnbg_bottom.jpg"td></td>
</tr>
</table>
</div>
<!--End Main -->
<!--Start Bottom -->
<div class="bottom">
© 2010 No Problem Entertainment, LLC
</div>
<!--End Botton -->
</div>
<!--End Wrapper -->
<script type="text/javascript">
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID");
</script>
</body>
</html>