Welcome!

[dork]

Suddenly IE6 will handle the bottom/right absolute position. Why? Because it "hasLayout". What 'genius' came up with this idea at MS is beyond me, but it's likely because they didn't release the first version with proper positioning support and then "fixed" it in a later patch by giving this positioning through "hasLayout". I hate the IE development team.

Thanks! I feel the same way.

[Waterdhavian]

Yeah and the development team that builds the CSS parser for IE should get some training as well

Here is a good website to see how badly IE support CSS (even 2.1 )
http://kimblim.dk/css-tests/selectors/

[jorre]

Hi Guys,

I have had the following question for a long time already, but I've read different solutions for this:
What is the correct bulletproof color setup for photoshop when designing websites?

As you can read on the url below, some are saying to completely disable color management when designing websites:

http://www.viget.com/inspire/the-myster ... lor-shift/

while others are saying it's best to use sRGB when designing for the web.

My question is: how do I set up photoshop is such a way that it is best for designing for the web?

Thanks, you're doing a great job here at smashing magazine

[Tarvalon]

What is the correct bulletproof color setup for photoshop when designing websites?

There is never going to be a "bulletproof" setup - all you can do is play around with a few different ones and go with the setup that works best for you.

[dork]

Hi, does the zoom:1 correct the :hover properties of non-anchor tags in IE6?

[hardy]

Hi, does the zoom:1 correct the :hover properties of non-anchor tags in IE6?

No, it doesn't.
You need javascript for ie.

[dork]

No, it doesn't.
You need javascript for ie.

craptastic! Thanks for the reply

[Tarvalon]

No, it doesn't.
You need javascript for ie.

Precisely - but don't forget to build this out using standard CSS :hover pseudoclasses anyways - you can then just remove the redundant JS when you no longer need to support IE6. What I'm saying is:

Code: Select all

li:hover { text-decoration:underline; }
li.hover { text-decoration:underline; }

[popbogdan]

An issue I run into frequently is sizing links differently from body copy.

It seems to be a rule of thumb these days to do your font sizing in ems as opposed to pixels. I'm ok with that, and have been using the trick of setting the font size of the whole document to 62.5%, thus equating 1.0em with 10px.

So, I have something like this:

Code: Select all

<p>copy copy copy <a href="#">linky</a> copy</p>

The designers have indicated that the body copy should be 12px while the links should be 10px. So my CSS would be:

Code: Select all

p{font-size: 1.2em;}
p a{font-size: 1.0em;}

Hey, check out this post (http://www.webia.info/articles/code/swi ... m-px-to-em) on switching from px to em. It describes this problem...

Problem is, because ems size your text relative to it's current size, this essentially says that the links should be sized to 100% of their current value... or no change at all.

Sure, I could just size the links in pixels explicitly, but is there a way to deal with this?

[webdevelopertut]

Hi wonderer,
I use Yahoo YUI CSS framework. It is very simple and easy to learn. check this link...
http://htmlcsstutorials.blogspot.com/2009/06/popular-css-frameworks.html

[pulpzebra]

basically, what I need to do is to make a 2-column, 960px wide layout. The left column (230px, float left display inline) contains the menu, while contents are listed in the main column. When contents length exceed the height of the menu column, contents expand under the column. It would be no problem if contents didn't include pictures, but of course they do, and pictures vary in both height and width. For each content list entries, pictures are to be displayed left of the text content and under the title. My problem is that when I try and stack list entries, if text content is lower than picture's height, the following entry title get stacked left of the picture, instead of being displayed under it. Please refer to the picture to see how the final result should be.

how layout should be.

ex_layout.jpg (32.85 KiB) Viewed 137 times

Thank you

[Linda]

Looks like a really simple layout to me pulpzebra. Difficult to say what you're doing wrong without a live example (provide link please).
Are the images floats (looks like they should be) and are you clearing them properly?

[pulpzebra]

Thanks for answering.

Looks like a really simple layout to me pulpzebra.

To me as well, and that's why I cannot understand what am I missing.

Difficult to say what you're doing wrong without a live example (provide link please).

For a number of reasons I can't post a live link at the moment. I may try and set up a mockup.

Are the images floats (looks like they should be) and are you clearing them properly?

The answer is yes:

HTML markup is:

Code: Select all

...
<div id="container">
    <div id="menu">
     <ul>
            <li>item 1</li>
            <li>item 2</li>
            ...
            <li>item n</li>
     </ul>
    </div>

    <ul>
             <li class='content'>
                   <h2>Title content 1</h2>
                   <div class='img_cont'>
                        <img src='assets/image_1.jpg>
                   </div>
                    In sed sit littera quod formas. Lectores praesent euismod vero notare nunc. Amet seacula veniam mazim vulputate sit.

Et feugait praesent iriure soluta littera. Seacula et quinta mutationem seacula amet. Vel et quis quod esse qui.
             </li>
             <li class='content'>
                   <h2>Title content 2</h2>
                   <div class='img_cont'>
                        <img src='assets/image_2.jpg>
                   </div>
                    In sed sit littera quod formas. Lectores praesent euismod vero notare nunc. Amet seacula veniam mazim vulputate sit.

Et feugait praesent iriure soluta littera. Seacula et quinta mutationem seacula amet. Vel et quis quod esse qui.
             </li>
             ...
             <li class='content'>
                   <h2>Title content n</h2>
                   <div class='img_cont'>
                        <img src='assets/image_n.jpg>
                   </div>
                    In sed sit littera quod formas. Lectores praesent euismod vero notare nunc. Amet seacula veniam mazim vulputate sit.

Et feugait praesent iriure soluta littera. Seacula et quinta mutationem seacula amet. Vel et quis quod esse qui.
             </li>
    </ul>
</div>
...


And css code is

Code: Select all

#container {
       width: 960px;
       float: left;
}

#menu {
     width: 300px;
     float: left;
     display: inline;
}

.content img{
        float: left;
        display: inline;
}



I didn't provide floating to .content since if I do, the li block assumes an improper width. If I clear the img div, the container falls below the menu column.

Doctype is loose.dtd

[ipad]

Hi Chris, my question is

How to place an image behind a container? Let's say i have a container of the 960gs grid and I what to put a shadow (shadow.png) How I achive that?

Code: Select all

<div class="shadow">
<div class="container_12" id="container">



</div> <!-- end of the container_12 -->
</div> <!-- end of the shadow -->


[Rask]

I asked this in the forum but I'm sure loads of people could benefit from knowing this: How to make a pure CSS-based dropdown menu that is accessible and can be used without a mouse.

If I have the time I could try constructing something. Not sure if it'll work out correctly (semantics, standards, etc.).