Cross Browser Compatibility problems...

I'm trying to setup a navbar container, then some button containers inside that and inside that 3 more divs, button_left, button_middle and button_right.

CSS:----------------------------------------------------------------

.button_container{
border: 0;
margin: 0;
padding: 0;
float: left;
width: auto;
height: 38px;
max-height: 38px;
font-size: 0px;
}

.button_left{
border: 0;
margin: 0;
padding: 0;
float: left;
width: 8px;
height: 38px;
font-size: 0px;
background-image: url(images/button_left.gif);
}

.button_middle{
border: 0;
margin: 0;
padding: 0;
float: left;
width: auto;
height: 38px;
font-size: 0px;
text-align: center;
background-image: url(images/button_middle.gif);
background-repeat: repeat-x;
}

.button_right{
border: 0;
margin: 0;
padding: 0;
float: left;
width: 8px;
height: 38px;
font-size: 0px;
background-image: url(images/button_right.gif);
}

layout/html code:------------------------------------------------------

<div id="nav_bar">

--------<?php $pages = get_pages(); ?>

--------<?php foreach ($pages as $page) { ?>

--------<div class="button_container">

----------------<div class="button_left">
----------------</div>

----------------<div class="button_middle">
------------------------<h2><a href="<?php echo get_page_link($page->ID) ?>"><?php echo $page->post_title ?></a></h2>
----------------</div>

----------------<div class="button_right">
----------------</div>

--------</div>

--------<?php } ?>

</div>

It's displaying correct in FF



But in IE7 and below it screws up:



Does anybody know what i'm doing wrong or got any tips to solve this problem would be much appreciated.

As you can see it's each nav button is made up of 3 divs, with the middle one auto scaling. When this is too wide in FF it put the whole container with the 3 divs in it below, in IE however it just makes the 3rd div in the container div go down 1 line and not the whole container, i thought max-height would cure this but it appears not.

 

IE interprets the width different in most cases. You can overwrite and set widths for the appropriate browsers (ie6, ie7).

Read

 

Cheers! for the info dude appreciate it ^^

 

Let's get something straight. There is no such thing as "cross-browser" compatibility problems. There are only "IE compatibility" problems. Yes, I'm exaggerating but we only spend almost all our time fixing working code to work in IE. All other browsers may need a nip or tuck once in a while but IE gets our devoted attention and sometimes major surgery.

So let's drop this so-called "cross-browser" moniker and call it what it is.

 

Next time don't bother replying.

I'll call it what i want... it's my thread... it got answered by a not so "pedantic" person who understood the gist of what i was saying, thanks but no thanks.

 

Can't we all just get along? LOL Yes IE has most of the browser problems, but I have seen a fair share of problems in all other browsers as well. Usually if I have a browser compatability problem I try to validate my code and the validator will tell me what my errors are so I can fix them. Thats what has fixed every browser problem I have had so far.

 

Designing a site that is Cross Browser Compatibility is not easy.
The major reason is that some of the major browser(eg. IE browser) themselves are not w3c compatible(valid).
Even you design site of w3c compatible, designer must learn much to fix the problems.

I can fix the problem with only $15. Pls let me know if you are interested.