s

Posts Tagged with "css"

IE double margin float bug

Sep 15, 2006  -  Comments

I'm sure most people have come across this bug once or twice (or a hundred times). You have a div with a set width and it's floated left or right. You also give it a margin on the same side that it's floated to push it away from the edge of the containing area. Works great everywhere . . . EXCEPT IE! Of course. Your CSS might look something like this:

#box {
  width: 200px;
  float: left;
  margin-left: 20px;
}

The problem with IE/Win is that it doubles the margin that's on the same side as the float. Why does it do this, you ask? Because it's IE. If it behaved the way it was supposed to, it would be Firefox.

There's actually a really simply fix for this. All you have to do is add the magical display:inline to your div, so your final code would be:

#box {
  width: 200px;
  float: left;
  margin-left: 20px;
  display: inline;
}

You can find this hack and many more at this great CSS resource Web site.

Tagged: xhtmlcssie sucks

CSS fish eye menu

Aug 22, 2006  -  Comments

As part of a design for a new website at work, Kim created a text effect on her mock-up of the site design for the main navigation. She was really married to the effect and wanted me to use an image rollover to achieve it. Being that we pride ourselves in making all of our current sites fully accessible to persons with disabilities, I really hate using images for text when it can be avoided. So, as a challenge to myself, I set forth to make the effect work using only CSS. I'm not really sure how difficult this would be for the average CSS person, but I got it done.

She wanted the text of the link to increase in size by about 100% when hovered over. So, to start out, I made the nav div with a set width (the sum of all of the nav elements, which there were four at 150px each) of 400px, gave it a background color, and centered it.

#nav {
  width: 600px;
  margin: 0px auto;
  background-color: #513C33;
}

Next, I made each li float left, gave them a set height, and set the overflow to hidden, so that even if the padding around the anchors extend past the li, it won't cause the div to expand.

#nav ul li {
  list-style: none;
  float: left;
  margin: 0px;
  padding: 0px;
  height: 37px;
  overflow: hidden;
}

Now, all I had to do is set the anchors. I made them display: block; so that they register the hover even when the mouse is over their padding, gave them a height and width, and gave them a top padding so they would be centered vertically.

#nav ul li a {
  display: block;
  width: 150px;
  height: 34px;
  font-size: 14px;
  color: #8AA7A6;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  padding-top: 12px;
}

Last of all, I set the hover style. I just gave it a larger font size and changed the top padding to keep the text centered vertically.

#nav ul li a:hover {
  font-size: 28px;
  color: #74635C;
  padding-top: 3px;
  font-weight: normal;
}

If you'd like to see this in action, you can check it out right here. (UPDATE: This file is no longer available, sorry.)

Tagged: xhtmlcss

Safari line height problem

Jun 14, 2006  -  Comments

It seems like I've been stuck on the line-height property lately. Well, today I noticed Safari giving weird behavior with regards to line-height. In the CSS documents we create at work, we always include a standard set of entity styles at the top and then go back and edit them if needed. Well, in that standard set is where we define the font-size, line-height, padding, etc. for our most-used html tags. I ran into a problem today where Safari was effectively ignoring the previously declared line-height property when I redefined the font-size of an element. So, to fix this, I had to re-define the exact same line-height(in percentage) for the new font-size.

I'm a huge fan of the Mac (I use one at work), but Safari can cause some headaches (nowhere near IE, though).

Tagged: xhtmlcsssafari

IE giving small divs a minimum height

Jun 12, 2006  -  Comments

I ran into a funny problem recently. I had to build an odd layout for a new website at work that involved text following a bending curve. Well, I just gave different padding to each of the <p> tags to accomplish the flowing effect. There were also divider lines between each paragraph that were shorter horizontally than the paragraphs. So, to get around this, I figured I could just create a div with a set width, a height of 2px, and a border-bottom. Of course, this worked fine in all browsers. . . except IE.

For some reason, the div in IE defaulted to a height of around 10px. This was very odd seeing as how I specified a height of 2px in the CSS. Well, after some playing around and a little Google-ing I figured out the problem. Apparently, IE will override the height property if the line-height is greater than the height. So, to get around this little problem, simply set your line-height to a value equal to or less than the desired height of the div.

Here is my code:

.line {
   width: 218px;
   height: 2px;
   line-height: 1px;
   border-bottom: 1px solid #CED9DF;
}

Update: After some more research into the problem, it turns out that IE 6 thinks the height of your div is only as small as your font-size. So, instead of setting your line-height to zero or a small number, set your font-size, like so:

.line {
   width: 218px;
   height: 2px;
   font-size: 0;
   border-bottom: 1px solid #CED9DF;
}

Tagged: xhtmlcssie sucks