Web Page Templates Icons, Clipart, Logos

Blog

Hot Topics

Post Archive

Tags

Aug 04, 2009 12:20 AM EDT

Making CSS layouts work in the 3 main browsers: IE6, IE7, and Firefox 2

I recently redesigned my photography website, The Lens Flare. I had Internet Explorer 7 and Firefox 2 installed, and thus wrote the site to make it work with those browsers. Once I had it working on those 2 browsers, I tried it on IE6 and the template was horribly screwed up. Here, I’ll explain what I had to change to make it look good in the 2 current browsers and IE6.

Apparently, IE6 has a bug people have dubbed the double padding bug or double margin bug. The problem can usually be fixed by using the CSS option: “display:inline” on your DIVs that have the double spacing problem. This fixed most of the spacing issues, but it didn’t fix them all.

To fix the last spacing problem, I had to resort to an Internet Explorer Kludge called conditional comments to include a separate CSS file when IE6 is loaded.

To do this, you put the following code after your other CSS files in your HEAD tag:

<!--[if IE 6]><link rel=”style sheet” href=”ie6.css” type=”text/css” media=”all” /><![endif]-->

This loads the ie6.css file when somebody is using IE6.

The main CSS file has the following directions for the col2 div:

.col2 {
width:338px;
position:relative; float:left;
margin:0px 0px 0px 5px; padding:0px;
display:inline;
}

The ie6.css file overrides col2 with the following directives:

.col2 {
width:338px;
margin:0px; padding:0px;
display:inline;
}

In IE6, floating the div to the left and adding a margin on the left side messed things up. From what I can tell, it started the location of the div in a slightly different place than IE7 and Firefox does and therefore has to be positioned differently to appear in the same place on the screen.

Also, another trick I learned while dealing with IE6’s limitations was a handly CSS tidbit called: “overflow:hidden”.

There are several places in my layout where I have a 2 pixel tall div with a background color to act as a horizontal rule. For example, this gray line:

.gray-line {
position:relative;
width:99%;
height:2px;
background-color:#ddd;
margin:0px; padding:0px;
overflow:hidden;
}

However, without the overflow:hidden aspect, IE6 renders a line about 5-8 pixels tall.

Lastly, “background-repeat: no-repeat” solved one last IE6 problem. Since it seems to use different heights for things, in places where I’m using a background image, the image would start to repeat itself again for about 2-3 pixels. Setting this directive on those areas solved that problem. Combine that with overflow:hidden and we’re good to go.

Darren css | browsers | web site format
Aug 04, 2009 12:06 AM EDT

Using GPG with RightScale and Amazon EC2

The idea behind using a service like RightScale in a cloud hosting service like Amazon’s EC2 is that you write a small program to install everything needed on your server. Because of this, you can dynamically turn servers on and off depending on your current traffic.

Where it gets difficult is when you need to install something that requires user input such as when signing a GPG key.

To get around this, you’ll need to come up with a solution that will allow you do finish the task without using user input.

In the example of signing GPG keys, instead I use the –always-trust parameter like this:

gpg –always-trust -ear ‘username’ test.txt

This allows me to encrypt a file in a script without having to answer the Yes/No question of whether I really want to encrypt it or not.

Normally, I would sign the key to avoid this question, but signing the key requires several questions to be answered and I’ve yet to find a way to script their answers.

Darren rightscale | amazon hosting | gpg keys
Aug 04, 2009 12:03 AM EDT

Counting occurances of a string with Grep

I noticed that one of my servers was using quite a bit more of its CPU resources than normal, yet my Analytics software wasn’t showing a spike in traffic. I have a rather large Apache access_log file, and I wanted to see how many times a particular bot scraped my web pages. Looking through it by hand isn’t practical since the log is over 1GB in size.

Instead, what I did was this simple grep command:

grep -c “myregex” access_log

In the quotes, I put the real string that I was searching for. The c flag refers to “Count”, which returns the number of times that regular expression occurs in the file.

In this case, the scraping program that I thought was the culprit had downloaded less than 100 web pages, but the true culprit had downloaded many more. It was using a browser’s User Agent so it’s either a really active visitor, a browser plugin, or a spider spoofing a real browser. To resolve this, I used IPTables to block their IP address. Problem solved.

Darren grep | programming | strings | counting
Displaying all 3 posts

Online Information for Geeks

 

 

 

 

Resource Links