Frustrating question

**smswetz** · 30-03-2009 02:59 PM

Hey all..I posted here before to get some help, you guys were speedy and pretty damn knowledgable..so here it goes again!

I've got a design that is very grid-based, and doesn't leave too much room for expansion. Which is exactly what we need, but it's causing a problem (so far on only one computer, in everything including IE and Firefox). I think it has to do with the computers font settings, but I'm still not totally sure. Basically, the menu wraps to two lines, and when i set the whitespace to nowrap, the menu expands past the site's border. It's ONLY on one computer, but it's bugging the crap out of me. I'll post a link, screenshot, css, and html to be helpful. If anyone's got some time to look at it, I would appreciate it.

HTML

HTML Code:

<!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" xml:lang="en">

<head>
    <title>Advanced Visual Technologies</title>
	<link rel="stylesheet" href="styles/base.css" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="styles/reset.css" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="styles/screen.css" type="text/css" media="screen" /> 
</head>

<body>
    <div id="container">
        <img src="images/avt_logo.jpg" alt="AVT Logo"/>
        <div id="navcontainer">
                <ul id="navlist">
     			<li<?php echo ($view == "index") ? ' id="selected"' : '' ; ?>><a href="index.php?view=index"><img src="images/icon_home.gif" alt="Home Icon" />Home</a></li>
				<li<?php echo ($view == "products") ? ' id="selected"' : '' ; ?>><a href="index.php?view=products"><img src="images/icon_products.gif" alt="Products Icon" />Products</a></li>
                <li<?php echo ($view == "services") ? ' id="selected"' : '' ; ?>><a href="index.php?view=services"><img src="images/icon_services.gif" alt="Services Icon" />Services</a></li>
                <li<?php echo ($view == "company") ? ' id="selected"' : '' ; ?>><a href="index.php?view=company"><img src="images/icon_company.gif" alt="Company Icon" />Company</a></li>
                <li<?php echo ($view == "clients") ? ' id="selected"' : '' ; ?>><a href="index.php?view=clients"><img src="images/icon_clients.gif" alt="Clients Icon" />Clients</a></li>
                <li<?php echo ($view == "contact") ? ' id="selected"' : '' ; ?>><a href="index.php?view=contact"><img src="images/icon_contact.gif" alt="Contact Icon" />Contact</a></li>
                </ul>
            </div>
            
		<?php include($content); ?>
        
    		<div id="footer">
            	<div id="left">
				73 Second Ave - Burlington MA - 01803  <br /> 781-685-5150 &nbsp;  | &nbsp; info@avtplus.com
                </div>
                <ul id="right">
                	<li><b>Navigation  </b>|</li>  
                    <li><a href="index.php?view=index">Home</a> | </li>
                    <li><a href="index.php?view=products">Products</a> | </li>
                    <li><a href="index.php?view=services">Services</a> | </li>
                    <li><a href="index.php?view=company">Company</a> | </li>
                    <li><a href="index.php?view=clients">Clients</a> | </li>
                    <li><a href="index.php?view=contact">Contact</a></li>
                 </ul>
              </div>
    </div>


</body>
</html>

CSS

HTML Code:

* 
	{
	margin: 0;
	padding: 0;
	}
	
body
	{
	background: url("../images/bg.jpg") #161616 repeat-x;
	text-align: center;
	}

h1
	{
	font-size: 16pt;
	font-weight: 300;
	font-family: georgia;
	color: #ff7c00;
	letter-spacing: 1px;
	}

h2
	{
	font-size: 12pt;
	font-weight: 300;
	font-family: georgia;
	color: #ff7c00;
	border-bottom: thin dashed #ff7c00;
	margin: 4px;
	padding-left: 5px;
	}

h3
	{
	font-size: 13pt;
	font-weight: 300;
	font-family: georgia;
	color: #ff7c00;
	}


#footer
	{
	width: 875px;
	margin-top: 10px;
	margin-bottom: 5px;
	padding-bottom: 20px;
	color: #313131;
	font-family: Tahoma, Verdana, Arial;
	font-size: 10pt;
	}
#left
	{
	float: left;
	}
#right
	{
	float: right;
	}
#footer li
	{
	display: inline;
	list-style-type: none;
	}

#footer a
	{
	color: #ffa000;
	}

#container
	{
	width: 875px;
	border: #b3b3b3 solid 15px;
	background-color: #FFF;
	padding: 13px;
	margin: 35px auto;
	text-align: left;
	}
	
#navcontainer
	{ 
	margin-left: 175px;
	margin-top: -50px;
	margin-bottom: 35px;
	font-family: Tahoma, Verdana, Arial;
	font-size: 12pt; 
	color: #7d7d7d;
	}
#navlist ul{
	white-space:nowrap;
	}
#navlist li
	{
	display: inline;
	list-style-type: none;
	}

#navlist a {	
	border-bottom: #ffa000 solid medium;
	border-style: solid;
	color: #7d7d7d;
	text-decoration: none;
	padding: 6px 9px 9px 6px;
	margin: 5px; 
	}
	
#navlist a#selected
	{
	color: #000;
	font-weight: bold;
	background-color: #f7e9c5;
	text-decoration: none;
	}
	
#navlist a:hover
	{
	color: #000;
	background-color: #ebebeb;
	text-decoration: none;
	padding: 6px 9px 9px 6px;
	margin: 5px; 
	}

#selected a
	{
	color: #000;
	background-color: #f7e9c5;
	text-decoration: none;
	}

/*Spotlight*/
#spotlight
	{
	width: 875px;
	background: #000;
	height: 125px;
	margin-bottom: 15px;
	}
	
.spotLeft
	{
	width: 375px;
	background: #999999;
	height: 125px;
	float: left;
	}
	
.spotRight
	{
	width: 500px;
	height: 125px;
	float: right;
	
	}
/*End Spotlight*/

/*Blurb*/
#blurb
	{
	width: 870px;
	background: #fff;
	height: 160px;
	margin: 15px 0 10px 15px;
	font-family: Tahoma, Verdana, Arial;
	font-size: 12pt;
	color: #545454;
	
	}
	
#blurb_img
	{float: left; padding-right: 5px;}
.break
	{margin-top: 5px;}
/*blurb*/

#infobox
	{
	background: url(../images/infobox_bg.jpg) #fff6e6 bottom center repeat-x;
	border: 1px solid #ffc96d;
	width: 855px;
	padding: 10px;
	postion: relative;
	}
/*contact*/
#gmap
	{
	background: url(../images/infobox_bg.jpg) #fff6e6 bottom center repeat-x;
	border: 1px solid #ffc96d;
	width: 300px;
	padding: 10px;
	float: right;
	font-family: "Times New Roman", Times, serif;
	font-size: 11pt;
	color: #545454;
	}
	
#contactform
	{
	background: url(../images/contactbg.jpg) #ebebeb bottom center repeat-x;
	border: 1px solid #5e5e5e;
	width: 515px;
	height: 315px;
	padding: 10px;
	float: left;
	font-family: "Times New Roman", Times, serif;
	font-size: 11pt;
	color: #545454;
	}
	
#gmap a
	{
	font-family: "Times New Roman", Times, serif;
	color: #333333;
	font-size: 11pt;
	}	

#info_txtL
	{
	width: 400px;
	float: left;
	font-family: "Times New Roman", Times, serif;
	font-size: 11pt;
	color: #545454;
	margin: 5px;
	}
#info_txtR
	{
	width: 400px;
	float: right;
	font-family: "Times New Roman", Times, serif;
	font-size: 11pt;
	color: #545454;
	margin: 5px;
	}




.clear
	{clear:both;}
	
#img_txt
	{
	float: left;
	padding-right: 5px;
	}

	
#contact_container 
		{
		float:left;
		width: 870px;
		margin-top: 10px;
		text-align: left;
		font-family: Tahoma, Verdana, Arial;
		font-size: 11pt;
		color: #545454;
		}
		
#contact_container a
		{
		font-family: Tahoma, Verdana, Arial;
		font-size: 11pt;
		color: #545454;
		}
#left 
	{
		float:left;
		width: 285px;
		margin-right: 5px;
		height: auto;
	}

Link:
Advanced Visual Technologies

**Toon** · 30-03-2009 03:03 PM

Just for your piece of mind, it views fine in FF, Camino, Mozilla, Opera, Safari and Flock for the Mac

**Leah-Q** · 30-03-2009 03:07 PM

Why have you go repeated head tags...

PHP Code:


<!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" xml:lang="en">



<head>

    <title>Advanced Visual Technologies</title>

    <link rel="stylesheet" href="styles/base.css" type="text/css" media="screen" /> 

    <link rel="stylesheet" href="styles/reset.css" type="text/css" media="screen" /> 

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

</head>



<body>

    <div id="container">

        <img src="images/avt_logo.jpg" alt="AVT Logo"/>



        <div id="navcontainer">

                <ul id="navlist">

                 <li id="selected"><a href="index.php?view=index"><img src="images/icon_home.gif" alt="Home Icon" />Home</a></li>

                <li><a href="index.php?view=products"><img src="images/icon_products.gif" alt="Products Icon" />Products</a></li>

                <li><a href="index.php?view=services"><img src="images/icon_services.gif" alt="Services Icon" />Services</a></li>

                <li><a href="index.php?view=company"><img src="images/icon_company.gif" alt="Company Icon" />Company</a></li>

                <li><a href="index.php?view=clients"><img src="images/icon_clients.gif" alt="Clients Icon" />Clients</a></li>



                <li><a href="index.php?view=contact"><img src="images/icon_contact.gif" alt="Contact Icon" />Contact</a></li>

                </ul>

            </div>

            

        <html><head> 

                                        <!---Rollover Javascript -->

                                        <script type="text/javascript">

                                        <!--

                                        function MM_swapImgRestore() { //v3.0

                                          var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

                                        }

**smswetz** · 30-03-2009 04:17 PM

The two header tags--
It was the way I had the page templated, I did fix that.

I'm still really confused as to why this works on EVERYTHING but one computer haha.

**blueocto** · 30-03-2009 06:29 PM

Working fine for me on IE6 and Firefox on Windows XP.

Must be that one computer lol

Thread: Frustrating question

LinkBack

Thread Tools

Display

Frustrating question

Similar Threads

Question

Question...

help! frustrating div/dreamweaver problem.

New with a question

Quick question [newb question]

Bookmarks

Bookmarks

Posting Permissions