PDA

View Full Version : spacing problem - hopefully a simple fix.



mattMD
Jan 27th, 2009, 05:38 PM
Hi. I'm a newbie @ CSS (I've only started learning it in the past two weeks via online tutorials and learnwebdevelopment.com tutorials).

I'm working on a site layout and can't seem to get rid of the "red line" beneath my div containing the Flash menu in the link below:

http://howsweetitis.businesscatalyst.com/about.html

I know it's part of the "wrapper" div showing between the "flashMenu" div and the "left" and "right" divs, but I can't seem to fix it.

Also, I've tried adding a black border around the entire "wrapper" div but that doesn't seem to show up.

Any suggestions are much appreciated. Thank you!!

The css is in the head (I may move it into an external file later) for now. The code is below:


<!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" />
<title>css equal length columns</title>
<meta name="" content="authored by http://nopeople.com/Design" />
<style type="text/css">
html, body {
background: #FFFFFF;
background-image: url(/images/howsweetheader_06.jpg);
background-repeat: repeat-x;
}
* {
margin: 0px;
padding: 0px;
border: none;
}
#wrapper {
margin: -2px auto;
width: 800px;
background-color: #b92a19;
border-width: 2px;
border-color: #000;
}
#left p {
text-align: center;
}
#header {
height: 35px;
background-color: #000;
}
#header p {
font-family: "Trebuchet MS";
font-size: 12px;
color: #FFF;
text-align: left;
margin: 0px;
}
#left {
float: left;
width: 198px;
padding:5px;
}
#right {
background-color: #FFF;
border-left:solid 1px #000;
padding: 15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 208px;
}
#footer {
height: 25px;
background-color: #330000;
clear: left;
padding-top: 10px;
}
p {
font-size: 12px;
margin: 0px 2em;
color: #FFF;
font-family: "Trebuchet MS"
}
#right p {
color: #666;
}
h1, h3 {
text-align: center
}
pre {
margin-left: 2em;
}

#flashMenu
{
}
#footer p {
text-align: center;
}
</style>
<script src="/Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<table align="center" width="790px"><tr><td width="575px"><p>{module_whosloggedin}</p></td><td><a href="wholesalelogin.html"><img src="/images/wholesale-login-button.gif" width="184" height="25" alt="Wholesale Login" /></a></td></tr></table>
</div>
<div id="flashMenu">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="230" id="FlashID" title="menu">
<param name="movie" value="/fullheader.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.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="/fullheader.swf" width="800" height="230">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.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>
<!-------end flashMenu div------->
</div>

<div id="left">
<p>{module_menu,11160}</p>
<p><img src="/images/newsletter-icon-new.gif" width="118" height="71" alt="Newsletter Signup" /></p>
</div>
<div id="right">
<p>{tag_pagecontent}</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></div>
<div id="footer">

<p>How Sweet It Is Produce &amp; Garden Center | Rt. 13 South, Eden, MD | 410-742-8600 | Contact Us</p>
</div>
<!--closes wrapper --></div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

jerry62704
Jan 27th, 2009, 05:49 PM
In your id=flashMenu, I changed the background color to blue and that red turned to blue. I'd look there first.

Your source code has 25 errors. Always a reason to wonder if a problem isn't hidden in there.

mattMD
Jan 27th, 2009, 05:54 PM
In your id=flashMenu, I changed the background color to blue and that red turned to blue. I'd look there first.

Your source code has 25 errors. Always a reason to wonder if a problem isn't hidden in there.

Thanks. I will check it out.

mattMD
Jan 27th, 2009, 06:00 PM
In your id=flashMenu, I changed the background color to blue and that red turned to blue. I'd look there first.

Your source code has 25 errors. Always a reason to wonder if a problem isn't hidden in there.

I changed the max height of the flashMenu div to 230px and that fixed it. Can you tell me how you checked for the errors in my coding? I'd like to try to "fix" whatever I can and learn a bit since I'm new at this css stuff. :)

EDIT: Nevermind, I found it a w3.org.

Excavator
Jan 27th, 2009, 06:13 PM
Can you tell me how you checked for the errors in my coding? I'd like to try to "fix" whatever I can and learn a bit since I'm new at this css stuff. :)

Hello mattMD, check out the links about validating in my sig below.

Add your border like this:

#wrapper {
margin: -2px auto;
width: 800px;
background-color: #b92a19;
border: 2px solid #000;
}

When you do margin: -2px auto; that is also putting a -2px on the bottom. Maybe it would be better to do margin: -2px auto 0 auto; if you really need that negative 2 at all.

mattMD
Jan 27th, 2009, 07:35 PM
Hello mattMD, check out the links about validating in my sig below.

Add your border like this:

#wrapper {
margin: -2px auto;
width: 800px;
background-color: #b92a19;
border: 2px solid #000;
}

When you do margin: -2px auto; that is also putting a -2px on the bottom. Maybe it would be better to do margin: -2px auto 0 auto; if you really need that negative 2 at all.

Thanks!! I could've sworn I tried that but I must have been doing something wrong.

As far as some of the validation errors, it seems like a lot of them are contained within the "content" page that is being loaded into the template, so I'll have to validate them separately.

jerry62704
Jan 27th, 2009, 09:10 PM
Just in case you are wondering how I changed the color, I opened it in Firefox and turned on Firebug. That tool allows for temporary local changes to see what happens.

BTW, I tried changing the size using the same tool, but that didn't seem to work (I tried 225 for the size).