Hi all,

 

I'm working on my family's pavement company website, but I'm running into one problem. The Spry navigation bar I used with Dreamweaver works perfectly fine in Firefox/IE8, but in Chrome the width is too short, and in IE7 the width is too long and it wraps to another line.

 

There are 10 buttons in the navigation and I defined the width to be 955px and told each individual button to be 10% wide. For some reason IE7 and Chrome both misinterpret it.

 

Is there a way to fix this so it shows up correctly in all browsers? If you want to see the site, go to http://www.hei-way.com/newsite

 

Thank you for your help in advance!

 

Christian

As a quick fix, try 9.9% for the width or change one of them to 9% with a class.

 

There are situations where browsers apply % differently and round up resulting in a few extra px which affects a layout.

Well, I tried a fixed pixel width. The whole page is 955 px wide, so I made each button 95 px wide. That threw them to the next line in FF3 and IE8, so I went down to 95.49px wide - that works fine in IE8 and FF3.

 

In IE7 it's the right width now, there's just an awkward space that does NOT show up on IE8. I've attached pictures so you can take a look.

 

Unfortunately, the site still shows up incorrectly in Google Chrome - it's still too short even though I set it to a fixed pixel width.

 

Does anyone have any ideas?

In IE7 it's the right width now, there's just an awkward space that does NOT show up on IE8. I've attached pictures so you can take a look.

 

Try specifying a height for your header (e.g. 150px). Additionally you may need to add an overflow:hidden; rule.

Unfortunately, the site still shows up incorrectly in Google Chrome - it's still too short even though I set it to a fixed pixel width.

 

Does anyone have any ideas?

 

You can't specify pixel dimensions with a decimal place.

 

Chrome is rounding down to 95px.

 

If you want to specify the width in pixels then you will need to make five of the nav btns 96px wide to fill that 5 pixel gap.

I can't see what is causing the gap in ie7

try this

 

 

 <div id="header">
   <img src="assets/header.jpg" width="955" height="150" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="52,10,360,103" href="index.html" alt="Homepage link" />
<area shape="rect" coords="544,91,715,120" href="mailto: info@hei-way.com" alt="info@hei-way.com e-mail address" />
</map></div>


    <ul id="MenuBar1" class="MenuBarHorizontal">
         <li><a href="index.html">Home </a>        </li>
         <li><a href="aboutus.html">About Us</a></li>
         <li><a href="products.html">Products</a>        </li>
         <li><a href="environment.html">Environment</a></li>
         <li><a href="videos.html">How-To</a></li>
         <li><a href="safety.html">Safety Info</a></li>
         <li><a href="testimonials.html">Testimonials</a></li>
         <li><a href="advantages.html">Advantages</a></li>
         <li><a href="paving.html">Paving</a></li>
         <li><a href="contactus.html">Contact Us</a></li>
       </ul>

 

css add #header{height:150px;}

ul.MenuBarHorizontal add background-color:#418166

You can't specify pixel dimensions with a decimal place.

 

Chrome is rounding down to 95px.

 

If you want to specify the width in pixels then you will need to make five of the nav btns 96px wide to fill that 5 pixel gap.

 

Sorry, but I'm not a Dreamweaver expert... with that Spry Navigation bar how would I assign an individual width to five of the nav buttons? Because I only know how to change all of them at the same time.

 

Thanks!

You leave the stylesheet with the width for all of them and code a class just for one of them:-

<ul id="MenuBar1" class="MenuBarHorizontal">
         <li class="first"><a href="index.html">Home </a>        </li>
         <li><a href="aboutus.html">About Us</a></li>
         <li><a href="products.html">Products</a>        </li>
         <li><a href="environment.html">Environment</a></li>
         <li><a href="videos.html">How-To</a></li>
         <li><a href="safety.html">Safety Info</a></li>
         <li><a href="testimonials.html">Testimonials</a></li>
         <li><a href="advantages.html">Advantages</a></li>
         <li><a href="paving.html">Paving</a></li>
         <li><a href="contactus.html">Contact Us</a></li>
       </ul>

.first { width: ??px; }