A neighbor asked me about him build a homepage. I have decided for Wordpress, because I do fairly well and can circumvent the extent already know where I was the best built. I had previously only finished templates used and rarely intrusive really made any changes to it.

Since my neighbor own design had wanted to have a template that is completely rebuilt an existing or completely altered. So I decided for an existing, and made me immediately to work. Since I am NOT% to 99,999 Internet Explorer (same goes for Windows), quickly came the angry awakening The side were set up and also with images and texts filled. Everything looked great and went perfectly well. Then my neighbor called me and said that it would neither the buttons in the header, nor would the page in any discernible way formatted. I was visibly shocked when I convinced myself.

While the IE to blame for many problems, such as Microsoft have just as often schludert in software development and on the quasi-monopoly standard setters rest, but many of the errors came from my side!

So you know what I'm talking about: American parts.de

Let's start with positioning.

I decided to get things in order Stylesheet.css install them on the side to place. To even the positioning on the side to mid-nested I get everything in <div>.

(# alignme
margin-left: 10%;
border: 0;
)

Then I built the header bar (the large lettering) a:

# header (
padding-top; 15px;
width: 777px;
margin-left: 0px;
)

Then I went out the elements arranged:

(# button_cars
width: 126px;
height: 64px;
margin-left: 179px;
margin-top: -64px;
)

(and so on ....)

My first big mistake was that I worked with had negative values!

Then I header.php then the individual pages on the respective buttons linked:

<div id="alignme">
<div id="button_cars">
<a href="?page_id=3">
<img src = "<? php blog info ( 'template_url');?> / images / button_cars.jpg" alt = "Cars" border = "0" />
</ a>
</ div>
</ div>

There are so many many mistakes. So here is the way I did it then resolved:

# header (
background: url ( 'images / banner.jpg') no-repeat top center;
padding-top: 15px;
height: 64px;
width: 777px;
position: absolute;
left: 95px;
top: 1px;
)

(# button_cars
background: url ( 'images / button_cars.jpg') no-repeat top center;
width: 126px;
height: 64px;
position: absolute;
left: 274px;
top: 77px;
)

1. One can already see some differences here.
2. The loading of php img by the chartered css
3. The positioning is now no longer negative
4. There are no longer used margin
5. The positioning takes place only on left and top instead

Let us look now at the code in which the elements in the header.php involved were:

<div id="button_parts" onclick="location.href='?page_id=270';" style="cursor: pointer;"> </ div>

As mentioned here is easily recognizable, the code can be read much better. Furthermore, it can also at any time, the CSS "detach" from the actual page code and repeatedly adjust. Google is pleased to be a search engine also.

But what is much more important! Through this kind of positioning could now finally the Internet Explorer such as the buttons see what previously was not the case!

Insofar as then, everything ran very well and the header was there where he should be, and he also did what he should do. Unfortunately, I could not controlled by container and # # content claim. There was still a mess I experimented constantly at least until I was able to locate the fault. Well, I had an approach, but: Lief it on the IE and Firefox, Safari wanted no more, and vice versa as well. In fact, the site was ready and everything was perfect, but still only a browser for the moment:

Runs perfectly in FF and Safari but not in IE:

# content (
width: 525px;
margin-top: 0px;
margin-bottom: 20px;
margin-left: 200px;
margin-right: 0px;
position: relative;
padding: 5px 25px 15px 25px;
border-right: 1px solid # cccccc;
border-left: 1px solid # cccccc;
min-height: 660px;
)

Runs perfectly in IE but not in Safari and FF:

# content (
width: 525px;
position: relative;
top: 0px;
bottom: 20px;
left: 0px;
right: 0px;
padding: 5px 25px 15px 25px;
border-right: 1px solid # cccccc;
border-left: 1px solid # cccccc;
min-height: 660px;
)

What do now? But I had everything under control as far as Google has given me countless ideas along the way and I have spent hours trying to find the ideal way to be of hacks and rumexperimentieren was speaking here of very difficult, because the speech was ... Then I found an interesting contribution and DEN Walkthrough.

Why not just use 2 different stylesheet.css. I have therefore a stylesheet_ie.css created and the content of the original stylesheet over. Only the block, just what I've shown before, I changed from.

But now I had the header.php nor indicate when they what. Css should invite. This, I solved the following way:

<! [if! IE]>
<link rel = "stylesheet" href = "<? php blog info ( 'stylesheet_url');?>" type = "text / css" media = "screen" />
<! [endif]>
<! [if IE]>
<link rel="stylesheet" href="stylesheet_ie.css" type="text/css" media="screen" />
<! [endif]>

If the browser than Internet Explorer (IE) is detected, then the special others. Css invite, otherwise he should always take the normal.

That was it. I hope that this contribution with other seekers could help build.

Stay tuned