Forums

StotleD

Hello All!!

I am working on my site in Firefox 3.0.9 (and a bit newer with CSS than probably many of you here) and it looks fair so far. However, I have a floating horizontal nav bar at the top that looks like is stepping down. Here is what I attempted so far:

1) I have adjusted the margins, zeroed the padding and changed the width of the background image - all to no effect.

2) I tried to create a IE7 folder and point the browser their with a different stylesheet - no effect.

3) I tried to use IE7.js to solve the issue - no effect.

IE is driving me batty! Any thoughts? Here is my CSS & HTML (no laughing ;-) )

Also, here is the link: http://www.core4innovative.com (ignore the fonts - they are not rendering properly according to my stylesheet)

Thanks!!!

/*---my css---*/

#body		{
		margin: 0px 0px 20px 0px;
		text-align: center;	
		background: #450000 url(images/greenstrip.jpg) repeat-x right top;
		}

#maincontainer	{
		width: 720px;
		border-width: 8px;
		border-color: #fff;
		border-style: solid;
		position: absolute;
		margin-left: 50%;
		left: -360px;
		margin-right: auto;
		}


#box p		{
		position: absolute;
		color: #fffceb;
		width: 450px;
		margin-top: 275px;
		margin-left: 16px;
		background: #373635;
		font-size: medium;
		font-family: \"arial rounded mt bold\", \"times roman\";
		text-align: left;
		line-height: 1.5em;
		padding-left:7px;
		padding-right:7px;
		padding-bottom:7px;
		border-style:solid;
		border-color:#bec783;
		border-width: 3px;
		}



#lowerbox p	{
		position: absolute;
		color: #fffceb;
		width: 450px;
		background: #373635;
		font-size: medium;
		font-family: \"arial rounded mt bold\", \"times roman\";
		text-align: center;
		line-height: 1.5em;
		padding-left:7px;
		padding-right:7px;
		padding-bottom:7px;
		border-style:solid;
		border-color:#bec783;
		border-width: 3px;
		width: 450px;
		margin-top: 433px;
		margin-left: 16px;
		}

#featured p	{
		position: absolute;
		color: #000;
		width: 270px;
		margin-top: 825px;
		margin-left: 128px;
		background: none;
		font-size: small;
		font-family: \"arial rounded mt bold\", \"times roman\";
		text-align: center;
		line-height: 1.5em;
		}

#customize p	{
		position: absolute;
		color: #000;
		width: 270px;
		margin-top: 825px;
		margin-left: 420px;
		background: none;
		font-size: small;
		font-family: \"arial rounded mt bold\", \"times roman\";
		text-align: center;
		line-height: 1.5em;
		}


.name		{
		font-weight: bold;
		font-style: italic;
		color: #bec783;
		}

ul		{
		margin: 0px;
		width: 680px;
		line-height: 0em;
		list-style: none;
		font-size: medium;
		font-family: \"arial rounded mt bold\", \"times roman\";
		float: left;
		background: url(images/button.gif);
		}


ul a		{
		display: block;
		padding: 0 1.2em;
		line-height: 2.2em;
		text-decoration: none;
		color: #fff;
		float: left;
		margin-left: 6px;
		margin-right: 0;
		}


ul li		{
		float: left;
		width: auto;
		}


ul a:hover	{
		color:#f26214;
		}

ul a:visited	{
		text-decoration: none;
		}


#textpad ul 	{
		position:absolute;
		width:100px;
		margin-top: 335px;
		margin-left: 481px;
		background: none;
		text-decoration: none;
		}


.promise a	{
		display: block;
		color:#000;
		line-height: 1em;
		font-size: 30px;
		font-family: \"freestyle script\";
		width:150px;
		}

.promise a:visited	{
			text-decoration: none;
			}

#fet a:link, #fet a:visited	{
				text-decoration:none;
				color: #000;
				}

#fet a:hover	{
		color:#f26214;
		}



<!---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>
<title>Core 4 Innovative: Website Solutions For Your Small Business</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<meta name=\"keywords\" content=\" core 4,web,webpage developer,design,web designer, freelance,low cost\" />
<meta name=\"robots\" content=\"index,follow\" />

<!--[if lt IE 7]>
<script src=\"http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js\" type=\"text/javascript\"></script>
<![endif]-->

<link rel=\"stylesheet\" type=\"text/css\" href=\"styles.css\" />

</head>


<body id=\"body\">
<div id=\"maincontainer\">
<table id=\"Table_01\" width=\"720\" height=\"961\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">


<ul id=\"nav\">
<li><a href=\"http://www.core4innovative.com/home.html\">Home</a></li>
<li><a href=\"http://www.core4innovative.com/about/about.html\">About Us</a></li>
<li><a href=\"http://www.core4innovative.com/process/our_process.html\">Our Process</a></li>
<li><a href=\"http://www.core4innovative.com/services/services.html\">Our Services</a></li>
<li><a href=\"http://www.core4innovative.com/contact/contactus.aspx\">Contact Us</a></li>
</ul>

<div id=\"textpad\">
<ul>
<li class=\"promise\"><a href=\"#\">Affordable Web Hosting Starting at $9.99 per month!<a></li>
</ul>


<div id=\"box\">
<p><span class=\"name\">Core 4 Innovative</span> puts your online success within reach. Using our affordable 
website solutions, unique development process and standardized
methods for design you can be sure to recieve a customized product that adds value to your business!</p>
</div>

<div id=\"lowerbox\">
<p><span class=\"name\">We Serve Every Major Industry:</span></br> 
Restuarants • Real Estate • Insurance • Entertainment • Apparel • Automotive • Energy • Professional Services</p>
</div>

<div id=\"featured\">
<p><span id=\"fet\"><a href=\"http://www.core4innovative.com/portfolio/portfolio.html\" alt=\"our featured client\">Our Featured Client</a></span></p>
</div>

<div id=\"customize\">
<p>Customize Your website</p>
</div>
	
<tr>
<td colspan=\"3\">
<img src=\"images/top.jpg\" width=\"720\" height=\"12\" alt=\"\"></td>
</tr>

<tr>
<td>

<img src=\"images/logo.jpg\" width=\"258\" height=\"137\" alt=\"\"></td>

<td colspan=\"2\">
<img src=\"images/apple_graphic.jpg\" width=\"462\" height=\"137\" alt=\"\"></td>
</tr>

<tr>
<td colspan=\"3\">
<img src=\"images/topdivider.jpg\" width=\"720\" height=\"48\" alt=\"\"></td>
</tr>

<tr>
<td colspan=\"2\">
<img src=\"images/topdivider-06.jpg\" width=\"502\" height=\"3\" alt=\"\"></td>
		
<td rowspan=\"2\">
<img src=\"images/notepad.jpg\" width=\"218\" height=\"305\" alt=\"\"></td>
</tr>

<tr>
<td colspan=\"2\">
<img src=\"images/getaquotebox.jpg\" width=\"502\" height=\"302\" alt=\"\"></td>
</tr>
	
<tr>
<td colspan=\"3\">
<img src=\"images/roundboxes.jpg\" width=\"720\" height=\"370\" alt=\"\"></td>
</tr>

<tr>
<td colspan=\"3\">
<img src=\"images/footer.jpg\" width=\"720\" height=\"88\" alt=\"\"></td>
</tr>

<tr>
<td>
<img src=\"images/spacer.gif\" width=\"258\" height=\"1\" alt=\"\"></td>
<td>
<img src=\"images/spacer.gif\" width=\"244\" height=\"1\" alt=\"\"></td>
<td>
<img src=\"images/spacer.gif\" width=\"218\" height=\"1\" alt=\"\"></td>
</tr>
</table>

</div>

</body>
</html>

cybershot

this is most likely happening because your nav area isn't wide enough. try adjusting it by a pixel or two. The reason the contact us is stepping down in i.e is because for I.E, it won't fit where you told it to go.

StotleD

The first thing I did was adjusted the margins on the nav area. It did not work out for me. Any other thoughts?

AshtonSanders

It looks like you have no handled this. Right? The nav looks good in IE7 and IE6.

StotleD

Yes - everything looks great. Thanks!!

Meshach

Instead of using this:


border-color:#fff;
border-width:8px;
border-type:solid;

You could use this:


border:8px solid #FFF;

Same with padding:

Inefficient:


padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;

Efficient:


padding:1px;

Or if you want to give a 5px padding on the right and a 1px padding everywhere else you would do this.


padding:1px 5px 1px 1px;

You can also do the same with margin, just remember it goes in a clockwise pattern (top, right, bottom, left).

Have fun.

Meshach

treehouse : what would you like to learn today?

Forums

Horizontal Nav Bar Stepping Down in IE7