IE7 Fun Times!

[Psy]

Here's the dealio. I have a navigation bar that has two floats; one to the left, one to the right. The right one is currently blank as I plan to add something there in the future.

Now it's time for a picture of IE7 lovelyness.

The menu bar; it's gone on hiatus!

CSS

Code: Select all

   /* Menu */

      #menu a, p {
         padding: 5px;
         font-weight: 800;
      }

      #menu {
         position: relative;
         height: 80px;
         width: 800px;
      }

      #menu-top {
         float: left;
         width: 800px;
         height: 32px;
         word-spacing: 8px;
         text-transform: uppercase;
         font-size: 16px;
      }

      .menu-float-right {
         float: right;
         width: auto;
      }

      .menu-float-left {
         float: left;
         width: auto;
         text-transform: uppercase;
      }

      #menu-icons {
         float: right;
         text-align: right;
      }

      #menu-bottom {
         background-color: #6e8091;
         border-top: 1px solid #90b2d2;
         border-bottom: 1px solid #90b2d2;
         padding: 4px 0 4px 4px;
         width: 100%;
         height: 16px;
         position: absolute;
         margin-top: 40px;
         text-align: left;
         text-transform: uppercase;
         font-size: 12px;
         word-spacing: 5px;
      }

HTML

Code: Select all

   <div id="menu">

      <div id="menu-top">
      
         <div class="menu-float-left">
            <img src="<?php echo $root_url; ?>site-images/headings/name.png" />
         </div>
         <div class="menu-float-right">
            <a href="mailto:aarongarcha@gmail.com" title="Email"><img src="<?php echo $root_url; ?>site-images/icons/email.png" /></a>
            <a href="linkedin" title="LinkedIn"><img src="<?php echo $root_url; ?>site-images/icons/linkedin.png" /></a>
            <a href="steam" title="Steam Community"><img src="<?php echo $root_url; ?>site-images/icons/steam.png" /></a>
            <a href="twitter" title="Twitter"><img src="<?php echo $root_url; ?>site-images/icons/twitter.png" /></a>
         </div>
         
      </div>
      
      <div id="menu-bottom">
      
         <div class="menu-float-left">
            <a href="<?php echo $root_url; ?>?page=home">Home</a> <a href="<?php echo $root_url; ?>?page=info">Info</a> <a href="<?php echo $root_url; ?>blog">Ramblings</a>
         </div>
         <div class="menu-float-right">
         </div>
         
      </div>
      
   </div><!-- End MENU -->

The blue bar is 'menu-bottom'. The left and right floats are 'menu-float-left' and 'menu-float-right'. I'm using the HTML Strict doctype.

Please, save me from the wrath of the IE7 gods.

[Psy]

Actually, I'm using IE8. oops!

By changing the position under 'menu-bottom' to 'relative', it displays in IE but under FF it's all horrible. How do I add conditional statements to my CSS to load up another stylesheet to fix the layout under IE?

[Blink]

How do I add conditional statements to my CSS to load up another stylesheet to fix the layout under IE?

http://www.quirksmode.org/css/condcom.html

They work for IE8 as well

[Psy]

I did try that but it refused to work even if I placed a link to the stylesheet within the curly brackets.

Nevermind. I got it all fixed anyway.