Web Design Advice

[pakmannen]

That also seems to work.

Well that's Internet Explorer right there for ya

[pakmannen]

Oh, I thought these were the thing:

 

div#hack_test{

html>body div#hack_test{

 

IE doesn't see the 2nd one.

Hm, don't know if I would call that conditional elements though. Personally, I tend to use the term "selectors" for anything that specifies a certain element. The element > element selector is commonly known as child selectors I believe.

[Subjective Effect]

Ja, child selectors are one way to do it. And they can be used in css so it's all good for the time being.

[Springheel]

Ok, one final (I hope) problem.

 

I want to space out the menu buttons. Seems simple enough, right? Hspace isn't supported anymore, so that didn't work effectively. I tried to create a new div class for the images and create padding on either side, but for some reason that did the following:

 

 

Why does adding a margin suddenly stack the images instead of leaving them side-by-side? Can I force them to stay horizontally aligned somehow?

 

All I did was create a new div class of:

 

div#menu button {

margin:0 10px 0 10px;

 

}

[pakmannen]

No need to add any code, all you need to do is edit

div#buttons img {
margin:0 1em 0 1em;
}

Just increase the margins currently set to 1em to something larger.

 

General advice: You don't need to add new div classes every time you want to do something. That code I quoted basically means: apply this style to every img tag found in the div with id "buttons".

[pakmannen]

Also, you can't really put a padding on an image, since padding is the "inside" margin or however you should explain it. I'm sure you know what I'm talking about.

 

As to why your images are placed like that when you increase the margin: when you use float:left the images are placed after each other, until they don't "fit" in the element they are placed in no more, and the image that "don't fit" jumps down to the next row. I'm not too good with explaining, but hopefully you got that last one.

 

However, that's no 10px that are causing it in your picture, so there's something fishy going on. But nevermind that, try the code in my previous post.

[Springheel]

I didn't realize the 'div#button img ' was talking about the button images (should have by the name, I guess). Once I modified that it worked fine, thanks.