Browser Compatibility and CSS

  • RockmanTV
  • Proficient
  • Proficient
  • RockmanTV
  • Posts: 348

Post 3+ Months Ago

I'm working on my portfolio site and I'm struggling with some CSS spacing and IE 6/7. My site is: http://www.soluml.com/. If you look at the site in Firefox it looks like what I'm wanting. However if you view the site in either IE 6 or 7 there's an awkward indentation of the navigation links. I've narrowed it down to the navigation styles, but I'm not quite sure what's doing it. Any CSS/IE specialist that could shed some light on my situation? Thanks in advance!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Wow, nice Flash header!

You might be able to fix that menu problem by defining a width for the navigation links:
Code: [ Select ]
.nav a {
    display:block;
    padding-right:3px;
    border:1px solid #F1F1F1;
    text-decoration:none;
  width:100%;
}
  1. .nav a {
  2.     display:block;
  3.     padding-right:3px;
  4.     border:1px solid #F1F1F1;
  5.     text-decoration:none;
  6.   width:100%;
  7. }

Haven't tested it, but I think IE is collapsing the overall width to the size of the widest text.
  • RockmanTV
  • Proficient
  • Proficient
  • RockmanTV
  • Posts: 348

Post 3+ Months Ago

jameson5555 wrote:
Wow, nice Flash header!

You might be able to fix that menu problem by defining a width for the navigation links:
Code: [ Select ]
.nav a {
    display:block;
    padding-right:3px;
    border:1px solid #F1F1F1;
    text-decoration:none;
  width:100%;
}
  1. .nav a {
  2.     display:block;
  3.     padding-right:3px;
  4.     border:1px solid #F1F1F1;
  5.     text-decoration:none;
  6.   width:100%;
  7. }

Haven't tested it, but I think IE is collapsing the overall width to the size of the widest text.


Glad you like it. It took me awhile to design because Graphic Design isn't my strong suite. I tried the changes you suggested and an interesting thing happens when I try that. In pushes the borders of the links the extra space from the left and puts it on to the right part of the link. I'll link to an screen shot I took of it to show you.
Image
  • RockmanTV
  • Proficient
  • Proficient
  • RockmanTV
  • Posts: 348

Post 3+ Months Ago

If I couple the Width change you made and if I add a negative margin-left value for the links, at least in IE it makes it work. So if I make those changes browser specific it should be alright I believe.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 80 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.