I recently ran into the most bizarre bug. It takes a 'perfect storm' to create – one that I hadn't created before in hundreds (thousands?) of HTML files I've worked on. To recreate you need an absolute positioned element – then an element that's floated right, then another element that is positioned relative. A little odd I know, but in a layout I was working on – this was the scenario I ended up with. The result: The absolute positioned element was just GONE from the page.

Take a look at the real basic example here (If you have IE7, that's where you'll see the problem.) Here's what it's supposed to look like:

Here's what IE7 shows

Notice the missing text at the top? In my layout that was a company's logo. Lovely.

The fix? Equally as stupid. A static DIV after the absolute positioned element and all is good. If you have IE7 you can see the fixed page here.

Many hairs were pulled in the discovery and fixing of this IE7 bug. Here's to hoping I can save you and your hair some pain.

Related posts:

1. The mysteriously disappearing WordPress 3.1 Admin Bar I've run into this problem a few times now and...

Related posts brought to you by Yet Another Related Posts Plugin.

<php if (strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")) { ?>
... CUSTOM CSS FOR IPHONE...
<php } ?>

This will also work for iPhones and iPod Touch:

<php if (strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) { ?>
... CUSTOM CSS...
<php } ?>

That's great and all – but then suddenly one day it stopped working. Going back through what changed on the site, I realized one thing we added was a cache plugin. DOH! So the page gets cached without the custom CSS for the iPhone – the iPhone calls up the site but gets served the cached page (non-iPhone version)… Yeah, that would do it.

So I found this solution:

<!--[if !IE]>-->
<style type="text/css">
@media only screen and (max-device-width: 480px) {
.... CUSTOM CSS HERE....
}
</style>
<!--<![endif]-->

or of course you can pull in a whole stylesheet for the iphone:

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="iphone.css" />
<!--<![endif]-->

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

1) Each tab has four "states" – Off, Off (with right tab on), On, On (with right tab on). I combined each of these four states in the one image for each tab. So it looks like this:

2) The HTML is pretty simple and looks like this:

<div id="navbar">
<ul>
<li id="nav_home"><a href="#"><span>Home</span></a></li>
<li id="nav_about"><a href="#"><span>About Us</span></a></li>
<li id="nav_products" class="right"><a href="#"><span>Products</span></a></li>
<li id="nav_sales" class="current"><a href="#"><span>Sales Reps</span></a></li>
<li id="nav_contact"><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>

Notice that when one of the tabs is set as the "current" tab – we also need to define the tab before it with a class of "right" (meaning that the tab to the right of this one is set as "on")

3) Then we define the various states in CSS. In this case, all the tabs are the same width and height:

#navbar li {
float: left;
}
#navbar li a {
display: block;
height: 29px;
width: 91px;
}

Hide the text with css since we're using images for the tabs:

#navbar li a span {
margin: 0 0 0 -100000px;
}

Define the image to be used for each tab:

#nav_home a {
background:url(images/nav_home.gif) top left no-repeat;
}
#nav_about a {
background:url(images/nav_about.gif) top left no-repeat;
}
#nav_products a {
background:url(images/nav_products.gif) top left no-repeat;
}
#nav_sales a {
background:url(images/nav_sales.gif) top left no-repeat;
}
#nav_contact a {
background:url(images/nav_contact.gif) top left no-repeat;
}

4) I'm going to skip over the rest of the class definitions and move to the jquery part – because I think it will make more sense to see how the classes are being defined if you see what class I'm applying when and where.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready( function() {
j('#nav_about a').hover(function() {
j('#nav_home a').addClass("left");
}, function() {
j('#nav_home a').removeClass("left");
});
j('#nav_products a').hover(function() {
j('#nav_about a').addClass("left");
}, function() {
j('#nav_about a').removeClass("left");
});
j('#nav_sales a').hover(function() {
j('#nav_products a').addClass("left");
}, function() {
j('#nav_products a').removeClass("left");
});
j('#nav_contact a').hover(function() {
j('#nav_sales a').addClass("left");
}, function() {
j('#nav_sales a').removeClass("left");
});
});
</script>

So what I'm doing here is, anytime I mouseover a tab, I'm adding the class "left" to the <a> tag in the tab in front of the one my mouse is on.

So if the tab in front of the one my mouse is on is "off" – then we need to change that tab to state #2 (Off – with the tab next to it on). If that tab has the class "current" applied to the li tag – then we need to move that tab to state #4 – (On – with the tab next to it on).

4) So on to the various states with css….

When hovering – we go to the "on" state – (in this case, when tab is current, it lookes the same as when we mouse over it.) So the most basic state – state #3: Whether the tab is current, or hovering – move to that "Third" state: On – with the tab next door off.
#navbar li.current a,
#navbar a:hover {
background-position: 0 -58px;
}

This is for state #2: Off – with the tab next to us as On. (the ".right" class applied to the li tag means that the tab in front is "current")
#navbar li.right a,
#navbar li a.left {
background-position: 0 -29px;
}

This is for state #4 – On with the tab next to us as on.
#navbar li.right a:hover,
#navbar li.current a.left {
background-position: 0 -87px;
}

One thing to note – the last tab really only has two states – because there is no tab in front of it – but to keep things simple in the code and css – I just made the image with the extra versions. This way it could have the same styles applied to it – without having to make a special case for it.

Here are some more demos:

No tab set as current

Home tab set as current (no "right" class needs to be applied – since home is the first tab)

Last tab set as current

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Except when I implemented it, the drop down menus were showing up BEHIND the rest of the content instead of "above/over it".

There was a lot of other things going on in the page, I have a simple example that demonstrates the issue.

I'm sure it makes sense somehow, if I had a better grasp of what "position: relative" does to the document – beyond that "position: relative" allows items INSIDE a relatively positioned block to be absolutely positioned WITHIN it (which is why I had done that). The side effect though is that it does that crazy thing with the menu.

Oh the HOURS and HOURS to figure that out…. /sigh.

Here is the same page – with just that one line (position: relative) removed.

I've now seen this problem crop up a few times. In one case, I was working with a design that I had not originally created and even though there were no "position: relative" in any of the css files – the only way to get the menu to be ABOVE the content was to explicitly declare "position: static" inside the div tag itself. (Even just declaring it in the css wouldn't fix it – somewhere else it must have still been getting overridden)

While I'm at the point where I can't even imagine designing a page using a table based layout anymore, I still get hit with some CSS sticking points that I just don't get. So if you have more insight on this feel free to elaborate in the comments. I'm just so glad I was able to get the menu working!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Introduction …………… Page 1
Information ……………. Page 2
More Info ……………… Page 3

… where the "Page" text lines up and the "….." just fills in until it reaches the "Page" text… kind of like you'd see in a table of contents in a book? (Ideally the "…." wouldn't even be text in the markup. It would just be a background fill or something…) Is that even possible?

Update: Jenna got me on the right track…. (Thank you!)

Make each line part of a list item. Apply the background image to <li> style. Wrap each part with another tag. Float one right, the other left, and give them both a solid color background the same as the rest of the page (so that it covers the dot, so it won't show through under the text). I also wanted the right column to line up, so I gave it a width, and told the text to align-left. Here's the example.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

The code on that page is simply:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
a img {
text-decoration: none;
border: none;
}
-->
</style>
</head>
<body>
<a href="#"><img src="gecko.gif" alt="gecko" /> Test</a><br />
<a href="#"><img src="gecko.gif" alt="gecko" /></a> <a href="#">Test</a>
</body>
</html>

I thought it might be a doctype issue – but changing it doesn't seem to make a difference.

Added after: Just to make this even more mysterious… This DOES NOT create that line:
<a href="#"><img src="gecko.gif" alt="gecko" /> </a>
It doesn't show up until we add a *character* within the <a> tag that the underline pops up…(I've updated the example to show this…)

Updated 3/30/07 Shaun wins the prize for finding the solution!:a img {
display:block;
border: none;
float: left;
}

The example has been updated…

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

<li>Item one</li><li>
Item two</li>

or make set them to float: left | right (which messed up the way the list was showing up…

The only thing that worked for me – was setting the line-height to the be the same size as the font-size used for the list. ie:

li {
font-size: 12px;
line-height: 12px;
}

And then you can add your own specific padding or margins as needed… Hope that saves someone the headache I just went through!!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Here's today's CSS dilema. Had a simple floated div. Gave it a margin – and for some reason, IE doubled it. The solution is just to add "display: inline;" to the floated div, and all is well.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

See example here.

Found this solution which basically suggested adding the following so that it wouldn't do that:

.containerdiv:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

As well as adding a height: 1% (to to the container div)

See fixed example here.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

the thing with vertical-align is that it's vertical aligning text according to the default line-height of the inline-text boxes. You can manipulate that by setting the line-height to the same height as your block, but this will only be effective if the line of text (link) does not wrap onto more than one line.

NOW it makes sense…

So if you had:

<div id="nav"><a href="#" class="centerme">Home</a></div>

Then:

#nav {
height: 25px;
line-height: 25px;
}
.centerme {
vertical-align: middle;
}

should do the trick…

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.