IE7 Fun Times!

Show off new creations, get help, or just chat about all aspects of web development and design.

IE7 Fun Times!

Postby Psy on Mon Jun 08, 2009 2:41 pm

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.

Image

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.
User avatar
Psy
Veteran
Veteran
 
Joined: Sat Dec 03, 2005 5:41 pm
Location: United Kingdom

Re: IE7 Fun Times!

Postby Psy on Mon Jun 08, 2009 3:17 pm

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?
User avatar
Psy
Veteran
Veteran
 
Joined: Sat Dec 03, 2005 5:41 pm
Location: United Kingdom

Re: IE7 Fun Times!

Postby Blink on Mon Jun 08, 2009 4:32 pm

Psy wrote: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
User avatar
Blink
Cool 'n that
Cool 'n that
 
Joined: Fri Oct 08, 2004 4:16 pm
Location: UK

Re: IE7 Fun Times!

Postby Psy on Mon Jun 08, 2009 5:10 pm

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. :)
User avatar
Psy
Veteran
Veteran
 
Joined: Sat Dec 03, 2005 5:41 pm
Location: United Kingdom

Return to Web Design & Development

Who is online

Users browsing this forum: No registered users