CSS - Need Small Makeover Help

moved on....

Wondering if anyone can tell me why there is a gap above my header image. Surely I am missing something in Firebug?

h**p://www.topofferspage.com

Hello,

I couldn't think of a more appropriate title, so I apologize - but as it says, I have a series of small questions regarding my CSS layout and would be most grateful if someone could assist me.

I'll start with the biggest one. (See Image)

http://img379.imageshack.us/img379/9779/46432769lm3.png

As you can see, when viewing my layout in Google Chrome or Safari, everything in between the header and the footer gets caught on my top menu. I tried to correct it, but I am really unaware of the problem's source; if anyone knows I'd appreciate it.

The topmenu CSS is he
Code:

.topmenu {
  float:left; 
  padding:0; 
  margin:0;
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
  width:898px; border:solid 1px #363636;
  clear:both;
} 


.topmenu  a, .topmenu a:visited {
  font-family:Arial, Helvetica, sans-serif;
  font-style:normal;
  font-weight:bold;
  font-size:12px;
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
  text-decoration: none;
}


.topmenu ul {
  list-style-type:none;
  padding:0; 
  margin:0;
}


.topmenu ul li {
  float:left; 
  position:relative; 
  z-index:auto !important /*Non-IE6*/; 
  z-index:1000 /*IE6*/; 
  border-right:solid 1px #363636; 
}


.topmenu ul li a {
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
  float:none !important /*Non-IE6*/; float:left /*IE-6*/; 
  display:block; 
  height:30px; 
  line-height:30px; 
  padding:0 10px 0 10px; 
  text-decoration:none; 
}


.topmenu ul li ul {
  display:none; 
  border:none;
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
}


.topmenu ul li:hover a {
  background-color:#008000; 
  text-decoration:none; 
  color:#FFFF00;
} 


.topmenu ul li:hover ul {
  display:block;  
  position:absolute; 
  z-index:999; 
  top:29px; 
  margin-top:1px; 
  left:0;
}


.topmenu ul li:hover ul li a {
  display:block; 
  width:12em; 
  height:auto; 
  line-height:1.3em; 
  margin-left:-1px; 
  padding:5px 10px 5px 10px; 
  border-left:solid 1px #363636; 
  border-bottom: solid 1px #363636; 
  background-color:#0000FF;  
  color:#FFFFFF;
} 


.topmenu ul li:hover ul li a:hover {
  background-color:#CA0000; 
  text-decoration:none;
  color:#FFFF00;
} 


.topmenu table {
  position:absolute; 
  top:0; 
  left:0; 
  border-collapse:collapse;
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
}


.topmenu ul li a:hover {
  background-color:#008000; 
  text-decoration:none;
  color:#FFFF00;
} 


.topmenu ul li a:hover ul {
  display:block; 
  width:12em; 
  position:absolute; 
  z-index:999; 
  top:29px; left:0; 
}


.topmenu ul li a:hover ul li a {
  display:block; 
  width:12em; 
  height:1px; 
  line-height:1.3em; padding:4px 16px 4px 16px; 
  border-left:solid 1px #363636; 
  border-bottom: solid 1px #363636; background-color:#0000FF;  
  color:#FFFFFF;
} 


.topmenu ul li a:hover ul li a:hover {
  background-color:#CA0000; 
  text-decoration:none;
  color:#FFFF00;
} 

The next two things aren't really significant. (See Image)

http://img73.imageshack.us/img73/1725/50804367ww7.png
(Shown in red)

If possible, I would like to remove that space in the center column and expand the width of the blockquote section in my sidebar, but I can't seem to find out how.


Website: http://banjouniverse.110mb.com/css2.php
CSS: http://banjouniverse.110mb.com/master2.css

Hi! In this page [www].bezlica.ru/chat/sample.php , left bottom flash window is 3 pixels up of its normal position. In Firefox it renders well. Is there any way to fix in IE, while not affecting Firefox?

Hi everyone,

I am new to the forum. I am new to CSS and just trying to learn as much as i can as i go. I am currently working on a website and having a small problem with my drop down menus. It works great in Firefox, but in Safari when i hover over the drop down, it shifts to the left by a few pixels. I haven't added the IE workaround yet because i wanted to get this sorted before doing that so it won't work in IE yet.

I would post a link but can't because i'm too new.

I'm new to this, so be kind on my coding

The code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Center test - "text-align: center" set for body, "text-align: left" for containing div</title>
	<style type="text/css" media="screen">
body		
		{
			margin: 0;
			padding: 0;
			text-align: center;
		}
		
div#container		
		{
	
	width: 100%;
	
	background-color: #EAFBFF;
	width:760px;
	height:220px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #0066FF;
	border-right-color: #0066FF;
	border-bottom-color: #0066FF;
	border-left-color: #0066FF;
		}
div#container2		
		{
	width: 760px;
	background-color: #ddd;
	width:760px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0033FF;
	border-right-color: #0033FF;
	border-bottom-color: #0033FF;
	border-left-color: #0033FF;
	padding-top: 15px;
	padding-bottom: 15px;
		}
div#container3		
		{
	width: 760px;
	background-color: #666666;
	width:760px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #0033FF;
	border-right-color: #0033FF;
	border-bottom-color: #0033FF;
	border-left-color: #0033FF;
	padding-top: 13px;
	padding-bottom: 10px;	
		}
#container {
}
    #Layer1 {
	position:absolute;
	width:760px;
	height:115px;
	z-index:1;
	left: 405px;
	top: 102px;
	background-color: #0000FF;
	overflow: scroll;
}
#container2 {
}
    #Layer2 {
	position:relative;
	width:760px;
	height:600px;
	z-index:1;
	left: 405px;
	top: 102px;
	background-color: #0000FF;
	overflow: scroll;
}
#container4 {
	font-family: Arial, Helvetica, sans-serif;
	width: 500px;
	font-size: 14px;
	font-style: normal;
	color: #DDDDDD;
	text-decoration: none;
	text-align: left;
	margin-right: 110px;
	margin-left: 125px;
	background-color: #999999;
	border: thin solid #999999;
	padding-left: 15px;
}


    #Layer3 {
	position:relative;
	width:200px;
	height:600px;
	z-index:1;
	left: 405px;
	top: 102px;
	background-color: #0000FF;
	overflow: scroll;
}
    .style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
    .style2 {
	font-family: Arial, Helvetica, sans-serif; 
	color: #FFFFFF;
}


    #navbar {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #666666;
	margin: 0px;
	padding: 0px;
	height: 20px;
}
    #navbar ul {
	padding: 0;
  	margin: 0;
  	list-style: none;

}
    #navbar li {
	float: left;
	text-align: center;
	background-color: #666666;
  	position: relative;
  	width: 130px;
}
	#navbar li ul{
	position: absolute;
	display: none;
	text-align: center;
	line-height: 25px;
	padding-top: 7px;
}
	#navbar li > ul {
	top: auto;
	left: auto;
}
	#navbar li:hover ul { 
	display:block;
	text-align: center;
	text-indent: 0;
}
	#content {
	clear: left;
}

    
    #mainphoto {
	padding: 0px;
	float: right;
	border: 1px solid #0066FF;
	margin-top: 20px;
	margin-right: 30px;
	margin-bottom: 30px;
	margin-left: 30px;
}
    
    #container6 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
	padding-right: 30px;
	padding-left: 30px;
}
    .style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}
    .style4 {color: #000000}
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; }
    a {
	font-size: 12px;
	color: #FFFFFF;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #CC6600;
}
a:active {
	text-decoration: none;
	color: #CCCCCC;
}
    </style> 
</head>
<body>
<div id="container">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="(URL address blocked: See forum rules)=7,0,19,0" width="760" height="220">
    <param name="movie" value="(URL address blocked: See forum rules)">
    <param name="quality" value="high">
    <embed src="(URL address blocked: See forum rules)" quality="high" pluginspage="(URL address blocked: See forum rules)" type="application/x-shockwave-flash" width="760" height="220"></embed>
  </object>
</div>
<div class="style2" id="container3">
<div id="navbar">
<ul>
  <li><a href="(URL address blocked: See forum rules)">Home</a></li>
  
   <li>About the Office
    <ul>
      <li><a href="">Meet Dr. Toolson
        </a></li>
      <li><a href="">Meet the Team</a></li>
      <li><a href="">Office Tour</a></li>
	  <li><a href="">Location</a></li>
    </ul>
  </li>
  
  <li>About Orthodontics
    <ul>
      <li><a href="">Adults</a></li>
      <li><a href="">Children</a></li>
		</ul>
	</li>

  <li>Life with Braces</li>

  <li>Contact Us
    <ul>
	  <li><a href="">Contact Information</a></li>
      <li><a href="">Request Appointment</a></li>
	  <li><a href="">Location</a></li>
    </ul>
  </li>
</ul>
  </div>
</div>
<div id="container2">
  <div id="container4">
    <p class="style3">Contact Information Form</p>
	
    <form action="(URL address blocked: See forum rules)" method="post" class="style4">
      <span class="style1">
      <label>Name
        <br>
        <input type="text" name="Name">
      </label>
      </span>
    
      <span class="style1">
	  <br>
	  <br>
      <label>Email
        <br>
        <input type="text" name="Email Address">
      </label>
      </span>
    
      <span class="style1">
	  <br>
	  <br>
      <label>Phone Number
        <br>
        <input type="text" name="Phone Number">
      </label>
      </span>
   
        <span class="style5">
		<br>
		<br>
        <label><span class="style4">Description (if neccessary)</span> </label>
      </span>
        <span class="style4">
		
        </span>
	
      <label><br>
        <textarea name="Description" rows="5"></textarea>
      </label>
  
    
      <label>
	  <br><br>
      <input name="Submit" type="submit" class="style1" value="Submit">
      </label>
      <label>
      <input name="Reset" type="reset" class="style1" id="Reset" value="Reset">
      </label>
      <input name="recipient" type="hidden" id="recipient" value="jeff@dinorestoration.com">
	  
	  <input name="redirect" type="hidden" id="redirect" value="(URL address blocked: See forum rules)">  
    
	</form>
  </div>
</div>
  
<div class="style1">
Copyright Toolson Orthodontics 2009 </div>
<p>&nbsp;</p>

</body>
</html>

Hi everyone

I recently stumbled upon the CSS sprite idea and i've been loving it! Makes changing and adding graphics so much easier. However i've run into a concern. My image sprite is becoming quite large (>150KB) and my HTML code has many divs who's background refers to this sprite (can get upto 100 divs). With this i've started to notice slight sluggishness of my HTML page and got me thinking weather i should divide my large sprite into a number of smaller ones to enhance performance. This is mainly because i have quite a lot of hover effects (which merely shift the background position) and i suspect this is causing the sluggishness and high memory usage.

It's far too time consuming to try this myself so i'm wondering if anyone has any experience with such an action.

Many thanks

Ok, I have a two column layout. And I'm trying to get the base of the div stacks to match eachother.

Here's the stripped down code I've been playing with to try to create this behavior.

Code:

<div style="width:600px;">

    <div style="width:50%; background-color:#66C; float:right; text-align:center;">
    	<img src="#" width="150" height="300"  alt="Fake Content"/><br />
    </div>
	
    <div style="width:50%; height:150px; background-color:#0F0;">1</div>
    <div style="width:50%; height:30px; background-color:#C96;">2</div>
    <div style="width:50%; height:50px; background-color:#CCC;">3</div>
    <div style="clear:both;"></div>

</div>

So the size of div #1 is always fixed, #2 contains dynamic content, and #3 is fixed content but I would like the height of #3 to stretch to match the right column when needed.

For the right column, the content is dynamic, and I would like it to stretch to match the bottom of #3 when needed.

So basically, the height of both column will vary and I'd like the shorter of the 2 to stretch. I looked around and experimented a bit with some success, but not exactly the behavior I was looking for. The things that have been giving me the most trouble, is that the left column consists of 3 divs, and the right column is floated. From the left, I could probably get away with removing the content from #1 from it's div and let it hang out in the parent div, but the other two really need their own containers. Also, I don't know how else to put the right column on the right side other than to use a float or absolute position (and absolute won't expand the parent div) because both columns are dynamic...

Anyhow, I'm searching for suggestions.
One thing that sucks is I know this would be a non issue using tables, but this is a page layout and I'm not about to cave now.

I've got three issues with my CSS on my page that I cannot seem to figure out. I'm stumped again. Any help would be appreciated.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<title></title>
		<style type="text/css" media="screen"><!--
body  { background-color: #fff; background-image: url(../images/top_bar_striped.gif); background-repeat: repeat-x; margin: 0; padding: 0 }
hr  { color: #ccc; background-color: #ccc; width: 100%; height: 1px; border: 0 }
#container  { background-color: #fff; margin: 0 auto; width: 950px }
#main  { margin: 0 auto; padding: 0; width: 938px }
#top { margin-bottom: 6px; height: 40px }
#nav      { height: 40px }
#banner { height: 212px; overflow: hidden }
#body { background-image: url("../images/body_back.gif"); background-repeat: repeat-y; margin-top: 6px; overflow: hidden }
#bodyLeft  { background-image: url("../images/body_left_top_back.gif"); background-repeat: no-repeat; padding: 30px 20px 20px; width: 200px; min-height: 100px; float: left }
#bodyLeft ul  { color: #333; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: right; list-style-type: none; margin-left: 0; padding: 0 }
#bodyLeft li    { margin: 12px 0 }
#bodyLeft li a    { color: #333; text-decoration: none; padding: 4px 6px }
#bodyLeft li a:hover    { background-color: #a5a687 }
#bodyRight   { background-image: url("../images/body_right_top_back.gif"); background-repeat: no-repeat; padding: 40px 30px 30px; width: 632px; min-height: 100px; float: right }
#introHeading    { color: #32508a; font-size: 16px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; line-height: 22px }
#introText   { color: #333; font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 18px }
#introPullout     { color: #c00; font-size: 16px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 28px; background-image: url("../images/quote_back.gif"); background-repeat: no-repeat; margin-bottom: 30px; margin-left: 30px; padding-left: 20px; width: 180px; float: right }
#featuredProject { margin-top: 30px; clear: both }
#featuredPhoto  { margin-right: 20px; margin-bottom: 20px; float: left; border: solid 8px #fff; outline: solid 1px #ccc }
#featuredTitle     { color: #333; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; background-image: url("../images/featured_arrow.gif"); background-repeat: no-repeat; margin: 0 0 10px; padding: 0 0 0 12px }
#featuredText  { color: #333; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px }
#footer { background-image: url("../images/body_btm_back.gif"); background-repeat: no-repeat; height: 24px }
#copyright  { color: #666; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 14px; text-align: right; padding: 20px }
--></style>
	</head>

	<body>
		<div id="container">
			<div id="main">
				<div id="top">
					<div id="nav"></div>
				</div>
				<div id="banner"></div>
				<div id="body">
					<div id="bodyLeft">
						<ul>
							<li><a href="#">Link 1</a></li>
							<li><a href="#">Link 2</a></li>
							<li><a href="#">Link 3</a></li>
							<li><a href="#">Link 4</a></li>
						</ul>
					</div>
					<div id="bodyRight">
						<div id="introPullout">
							<p>Text here...</p>
						</div>
						<div id="introHeading">
							<p>Text here...</p>
						</div>
						<div id="introText">
							<p>Text here...</p>
						</div>
						<div id="featuredProject">
							<img id="featuredPhoto" src="photo.jpg" alt="" width="130" border="0"/>
							<div id="featuredTitle">FEATURED PROJECT</div>
							<hr/>
							<div id="featuredText">Text here...</div>
						</div>
					</div>
				</div>
				<div id="footer"></div>
				<div id="copyright"></div>
			</div>
		</div>
	</body>

</html>

1. How do I make the background color for the links (bodyLeft li a:hover) in the bodyLeft DIV fill the entire width of the DIV? Minus the padding, of course.

2. The text/DIVs inside the bodyRight DIV appear to have too much space above them in Safari (appear too far down). It looks like IE is correct. Any ideas?

3. The text in DIV featuredTitle is supposed to have an arrow on its left side where the text would normally start. It doesn't appear and/or looks like the featuredPhoto is covering it up. How can I make the arrow (background image) appear in the correct spot and slide the text over to the right?

Thank you for all your help!

I am busy building a site with XHTML & CSS, which is nearly finished. I build my sites by hand and check while building in FF and IE7. When I thought I was finished I checked the site in IE6 and saw ONE of the divs was slightly shifted to the right. I was amazed, since only one of them was shifted, and nearly all are positioned in a similar matter. I have tried to remove all parts of the CSS, edited the containing layer, the layer before, and after, nothing worked. I now haven't got a clue on what to do next or what could cause this difference in rendering. Can you help me?

You can find the site here. The CSS is external, you can find it here. [edit: links are outdated, sorry /]

If have made the background of the whole site white and of the containing div (with id "main") black. The layer that is shifted now has the color red and has the CSS id "boven_rechts_top".

By the way, the XHTML is validated as: Valid XHTML 1.0 Transitional and the CSS is validated as well.

Hey, I'm new to this board and CSS design in general.

I have a question that I couldn't figure out or find anywhere.

projecthoods. com/clients/bpa (minus the space before com)

(FF) Although I set the div width to 666 (not intentional), why is the background color only appearing in IE? FF doesn't display the bg. I'm assuming it has something to do with the unordered list, because it all works fine if I replace the list with text, however, I can't find a solution because I need the list in there.

Any ideas?

Thanks guys.

CSS
Code:

body
{
margin: 0 0 0 4em;
padding: 0;
background: #384c7f url(images/bg.gif);
font-family: Verdana,Arial,"Times New Roman",sans-serif;
font-size: small;
color:#484848;
text-align: justify;
}

a:link
{
color: #384c7f;
}

a:visited
{
color: #384c7f;
}

a:hover
{
color: #6173a3;
}

ul
{
margin: 0 0 0 25px;
}

h3
{
font-family: Georgia,"Times New Roman",Verdana,sans-serif;
margin: 0 0 0 0;
}

#header
{
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#eprnavigation
{
color: #f2f2f2;
background: #4b5f92;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 666px;
}

#nav a
{
color:#f2f2f2;
background: #4b5f92;
text-decoration: none;
font-weight: bold;
padding: 5px 5px 5px 5px;
} 

#nav a:hover
{
color: #f2f2f2;
background: #6173a3;
padding: 10px 5px 10px 5px;
}

#nav
{
list-style: none;
color: #f2f2f2;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: .8em;
background: #4b5f92;
width: 666px;
}

#nav li
{
float: left;
margin: 0 0 0 0;
padding: 10px 10px 10px 10px;
color: #f2f2f2;
background: #4b5f92;
}

#content
{
background: #e5e5e5;
color:#484848;
width: 666px;
margin: 0 0 0 0;
}

#footer
{
background: #6173a3;
height: 15px;
width: 656px;
color: #f2f2f2;
font-size: .7em;
padding: 5px 5px;
text-align: center;
}

acronym
{
color: #4a5c8b;
background: #e5e5e5;
border-bottom: 1px dotted;
cursor: help;
}

/* Finish Style Formatting */

/* Start Layout Structuring */

#picture
{
text-align: center;
}

#footer
{
clear: both;
}

#left
{
padding: 10px;
float: left;
width: 200px;
}

#right
{
padding: 10px;
float: right;
width: 400px;
}

/* End Layout Structuring */

hey just got a small problem i dont know hw to fix, take a look at my site
http://funnyguys99.tripod.com/index.htm
if u hover over the links on the left side of the page, the border around them is not even. I want the border to end at the same spot when u hover over them, no matter how many more letters there are in the link.
Here's the Css for the left bar, please fix it

[CODE]
div#menubar
{
padding-right: 0.5em; padding-left: 0.5em;
padding-bottom: 20%;
margin: 120px 0px 0px 0px;
padding-top: 0.5em;
left: 0px;
width: 8em;
top: 0px;
height: auto;
position:absolute;
background:#FFFFFF;
border-right:1px solid black;
border-bottom:1px solid black;
border-top:1px solid black;
}
div#menubar ul
{
padding-left:0px;
padding-top:0px;
list-style:none;
line-height: 85%;
margin:0px;
}

div#menubar a
{
font-weight: bold;
text-decoration: none;
font-size:0.6em;
padding-right:7.5em;
padding-top:0px;
padding-bottom:0px;
}

div#menubar a:link
{
color: #ffa500;
}
div#menubar a:visited
{
color:dark red;

}
div#menubar a:active
{
font-weight: normal;
}
div#menubar a:hover
{
color: white;
background:#999999;
border:1px solid black;
}
[CODE]

Am putting the finishing touches to my site but in firefox 8 the top of the side menu there is a space and login part is to low as well.

My site is www.carswapped.co.uk

Building a online store website...

If you go here, you can see my problem.

My problem is, when the product title is longer than a single line, then it moves the transparent box down. I need the transparent box to move up. If anyone can help, thanks!

I have two small issues that I can't seem to figure out.

I've attached markup and css files to this post and would appreciate a look by someone with css good chops.

The first issue is that in I.E. the page displays with the header at the top of the browser window, whereas in Firefox there is a gap.

I have set the body, and containing div with zero margin, zero padding, so I'm assuming that the thing should attach itself to the top of the window.

The second issue is a curious thing to me. If you look at the style sheet attached, in the content portion of the page, if I remove the top padding from the #content div, i.e. puts a break between the nav bar and the content where the body background shows through.

#content {
clear: left;
padding: 1px 10px;
background-color: #FFF;
margin: 0;
}

No issue with firefox.

If someone could take a look at these issues and respond I would appreciate it.

Hello all!

I'm new to the community here--it feels great to be a part of an active community where people can give eachother help.

I'd consider myself a pretty good Web designer, I mean, I've been doing it for a long time, however, I'm still very new to the concept of CSS. I've used it with rollover links, but never have I used it to design an entire Web page (basically, I've used tables my whole life).

Now that I've gotten some practice with CSS by reading books and tutorials, I've put together a start-up page for a computer company that I am a part of. We are a new company and are looking to start off on the right foot by having a killer Web site. So in the past two weeks I've been hand-coding this Web site.

http://www.freewebs.com/missaghi

As you can see, it's all in CSS! I'm very happy that I've been able to accomplish this, but there is a problem that I've found, and honestly, I've yet to find the cause! If you are using Firefox (and I hope you are, if you're using a PC), you'll notice that the TOP of the paragraphs are CORRECTLY horizontally aligned with the TOP of the navigation links. It looks nice and clean.

Now open up the site with Internet Explorer (I know it's hard for some of you, as it is me, heh), and notice how the paragraphs sit lower by about seven or so pixels. Well, if you look at my code, I have forced the margin up by 18 pixels (margin: -18px 0px 0px 140px) in order for my paragraphs to be aligned in Firefox. I COULD have modified it for IE, but meh, I'd rather make sure Firefox is covered since in my opinion, it has the best CSS support. However, my goal is to find out WHY it is acting different in all these browsers, and WHY I need to cheat (using the -18px) in order to make it work. Any help would be greatly appreciated, and I'm sorry that this is so long.

Regards,
Nathan