16 Mar 10 IE 7 clear:both not working

IE7 apparently has a bug where clear:both doesn’t work correctly. It would work periodically if I refreshed the page, but that doesn’t give any consistency. Took awhile to find the solution, but here it is:

Set the parent element to have height:100%. It should work now. For clarity sake, here’s some sample code:
<div style="height:100%">
<div style="float:left;width:100px;">left stuff</div>
<div style="float:right;width:100px;">right stuff</div>
<div style="clear:both;">Clear</div>
</div>

Tags: CSS

15 Feb 10 Horizontal CSS Menu Essential

What makes a horizontal UL CSS Menu horizontal?

This one line:

li {
display:inline;
}

That’s it. The rest is just decoration and making it look right.

Tags: CSS

29 Jan 10 Safari CSS Background Not Displaying

Weird error today I thought worth posting the solution to.

If your style sheet has this line at the top Safari won’t display certain background colors.

@charset “utf-8″;

When you create an HTML file in Dreamweaver and add CSS directly to the HTML file, it will automatically insert this into the style section. If you then copy the entire style section and create an external stylesheet, it will then remove all of your background colors. Luckily, it’s an easy fix. Just remove the charset. It’s not needed for CSS unless you’re using a foriegn language that has non-ascii characters (in the code, not the text).

Tags: CSS

04 Sep 09 Javascript and CSS Drop Downs over Flash?

I long thought it impossible to have a drop down fall over a flash movie as you would often want in a header of a website.

However, I just saw a website where they accomplished this. After investigating, I found a JQuery library that allows you to do this.

It involves a new way of embedding flash into pages. With just a div tag and a few lines of javascript you can easily embed flash AND have the opportunity to display drop downs over them.

Here’s the link showing it in action:
http://flowplayer.org/tools/demos/flashembed/wmode.html

If you know of any other ways, please pipe up and let us know.

Here’s another link for a great CSS drop down menu:
http://htmldog.com/articles/suckerfish/dropdowns/

Update
It turns out that it’s not the awesomeness of jquery tools that allows you to do this. It’s simply a parameter wmode=transparent that allows it. Jquery tools does look really cool, however.

Another good link for CSS menus is http://purecssmenu.com/ It is an online CSS menu generator.

Tags: CSS, flash, Javascript, jquery

05 Aug 09 CSS: Default Padding/Margin for a p element

Resetting your css styles is a good thing to do to ensure that your site is rendered the same on all browsers.

Unfortunately, this often wipes out the default p tag padding and margin. The following style will restore a p to it’s normal margin (it doesn’t have a padding).

Each browser styles the p tag differently, thus this restores it to what it would look like in Firefox, creating a uniform look. Exactly what we’re going for.
p{
margin: 1em 0px;
}

Source

Here’s a link on how to use CSS Style Resets correctly:
Resetting Yoru Styles with CSS Reset

Tags: CSS

07 Jul 09 IE5 and IE6 CSS Hacks

Wow! That was annoying. As most know, IE5 and IE6 both tend to misinterpret standard CSS forcing us to resort to hacks designed to make them comply and display correctly.

I just recently found two very useful resources when it comes to making div tags float and pad correctly:

First explains and gives a fix for the odd fact that IE5 and IE6 will double the left margin of an element that has a float:left in it.

The fix is awesomely simple. You just set display:inline;.

http://www.positioniseverything.net/explorer/doubled-margin.html

The other explains gives a fix for the fact that IE5 and IE6 treat padding differently. Per CSS specifications, padding should add to the overall width. So, if you have a 100px div tag with 20px padding on all sides, it should be 140px wide.

The previous versions of IE keep the width exactly and simply pad inward rather than outward. All fine and dandy, except all other browsers don’t.

This is a bit more complicated, here’s the overall hack:
div.content {
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
/* CSS1 UAs should see and use 2nd width */

html>body .content { width:300px }

http://tantek.com/CSS/Examples/boxmodelhack.html

Tags: CSS