Various CSS Issues

[glloeb]

I recently updated my website http://gabrielloeb.com, but I'm having a few slight issues.

Ideally, the website should be accommodating of user changes in font size (e.g. command +/- on mac), but currently when the font size is increased the images become unpaired even though all placement for images is done in pixels as opposed to ems.

Also, I can't find away to scoot the footer 20 pixels from the bottom of the page, whether by adding padding or margin to my #content div (which is what
's centered on the page) or to #foot, the footer div.

Finally, in IE, the top link at the bottom of the page doesn't show up...presumably because of floating issues. (the gray background is there, but the blue link doesn't appear.)

Ah, I forgot to mention that in firefox and safari my letter-spacing changes work, but in IE they seem to be ignored. is the letter-spacing selector supported in IE?

Any help would be greatly appreciated.

Thanks in advance,
Gabe

[koyama]

Those were many issues. I think we better deal with one question at a time.
Ideally, the website should be accommodating of user changes in font size (e.g. command +/- on mac), but currently when the font size is increased the images become unpaired even though all placement for images is done in pixels as opposed to ems.
The problem is white space in your source code. Remember that the img element is inline by default, so you may think of it as a character. When you separate to img elements in your source code with white space between them, then the images will render as separated by a space character or line break just as if they were ordinary characters. It is the width of this space character that increases under text zoom. When it gets too wide the second image has to wrap to the next line.

Instead of this:

<div class="vphotos">
<img class="image" src="images/snow.jpg" alt="A warm sunset illuminates waves of windswept snow." />
<img class="image" src="images/stalk.jpg" alt="Warm evening light edges around hollow stalks of a now dead plant, jutting through the snow." />
</div>

you can for example do like this:

<div class="vphotos">
<img class="image" src="images/snow.jpg" alt="A warm sunset illuminates waves of windswept snow." /><!--
--><img class="image" src="images/stalk.jpg" alt="Warm evening light edges around hollow stalks of a now dead plant, jutting through the snow." />
</div>

or this:

<div class="vphotos">
<img class="image" src="images/snow.jpg" alt="A warm sunset illuminates waves of windswept snow." /><img
class="image" src="images/stalk.jpg" alt="Warm evening light edges around hollow stalks of a now dead plant, jutting through the snow." />
</div>
or this:

<div class="vphotos">
<img class="image" src="images/snow.jpg" alt="A warm sunset illuminates waves of windswept snow." /><img class="image" src="images/stalk.jpg" alt="Warm evening light edges around hollow stalks of a now dead plant, jutting through the snow." />
</div>

[glloeb]

Thanks so much! That was a great response. One issue down.

Gabe (http://gabrielloeb.com)

[Arbitrator]

is the letter-spacing selector supported in IE?Yes. [1] Web Devout’s Web Browser CSS Support table [2] seems to be a good place to verify these things.

And, by the way, letter-spacing is a property. Selector is the wrong term; a selector is the piece of code used to select the elements that a CSS rule applies to.

Ah, I forgot to mention that in firefox and safari my letter-spacing changes work, but in IE they seem to be ignored.This seems to be another of numerous hasLayout [3] issues. [4] The solution seems to apply zoom: 1 or another declaration that invokes hasLayout to the elements containing the text (e.g., the h1 and h2 elements).

---

Your code has some others issues that should be fixed.

Several of your meta elements use both an http-equiv and name attribute. This is an error; use one or the other. In this case, the attributes needing removal are the http-equiv attributes.
XML’s self‐closing start tag syntax should not be used in an HTML document. That syntax only applies to XHTML and other XML documents. In other words, you need to remove any trailing slashes that appear within a start tag.
href="#" is not the proper way to reference the top of the document; # is not a URI. Use href="#content".
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> and any other meta element with an http-equiv attribute should appear at the top of the head element.



http://www.webdevout.net/browser-support-css#support-css2propsbasic-letterspacing
http://www.webdevout.net/browser-support-css
http://www.satzansatz.de/cssd/onhavinglayout.html
http://www.brunildo.org/test/TextLay.html

[glloeb]

Thanks Arbitrator, that was a very helpful reply. I made a handful of changes including attempted activation of hasLayout in all heading and p tags ( I think that's working ). I also fixed up the other issues you mentioned.

I noticed on web devout that IE6 does not support the :first-child pseudo-class. I was using that to properly space the images on the front page. As a result, in IE6 the images are misaligned with the rest of the page. Is there any way to fix this other than some sort of spacer div? Edit: Okay, that was an easy fix--instead of using :first-child I just made separate classes for images on the left and on the right.

The one other issue I'm noticing at this point is that in IE6 the "top" link at the bottom of the page is butchered. My best guess is that this is occuring since I set the width of the top div to 30px, but I haven't tested it thoroughly.

Thanks again for all your help,
Gabe

[glloeb]

A screenshot of that last problem I described can be seen here (http://gabrielloeb.com/ie6.png) (courtesy of browsershots.org).

edit: the only other issue I see at this point is that safari doesn't respect the 20px margin between #footent and #top and the bottom of the page (aka the end of #foot/#content)

gabe

[Arbitrator]

I noticed on web devout that IE6 does not support the :first-child pseudo-class. I was using that to properly space the images on the front page. As a result, in IE6 the images are misaligned with the rest of the page. Is there any way to fix this other than some sort of spacer div?The first-child pseudo‐class selects the element when it’s the first child of some element. The way that you have things now, all elements of the class image are first children of some element; this means that all elements of the class image are selected by your selector and that your selector is pointlessly over‐specific. You can remove all of the class="image" attributes and change your selector to that below.

img { margin: 0 20px 0 0; }

The one other issue I'm noticing at this point is that in IE6 the "top" link at the bottom of the page is butchered. My best guess is that this is occuring since I set the width of the top div to 30px, but I haven't tested it thoroughly.It’s occurring because of your use of a negative margin. If you get rid of the width on #foot and the negative margin on #top, the issue should go away. You seem to have a lot of widths set unnecessarily.

the only other issue I see at this point is that safari doesn't respect the 20px margin between #footent and #top and the bottom of the page (aka the end of #foot/#content)Safari is, apparently, discarding the margin because it’s on a float. Floats are not in the normal flow, as you will see when trying to apply a background to #foot; you should see nothing happen since all of its child elements are out of flow and, thus, #foot has no height. To make #foot encapsulate the floats, use the overflow: auto declaration on it; this should overcome the Safari bug since it puts an in‐flow element adjacent to the bottom of the page.

[glloeb]

It’s occurring because of your use of a negative margin. If you get rid of the width on #foot and the negative margin on #top, the issue should go away.
Thanks, that worked perfectly.

You seem to have a lot of widths set unnecessarily.
I added some widths to relevant elements because I thought they would activate IE's hasLayout as stated in your suggested reading. This seemed like a reasonable alternative to setting zoom: 1, which I am tentative to do, since according to the reading, it will invalidate my CSS.

Safari is, apparently, discarding the margin because it’s on a float. Floats are not in the normal flow, as you will see when trying to apply a background to #foot; you should see nothing happen since all of its child elements are out of flow and, thus, #foot has no height. To make #foot encapsulate the floats, use the overflow: auto declaration on it; this should overcome the Safari bug since it puts an in‐flow element adjacent to the bottom of the page.
Spot on, as usual.

Thanks so much for your help Arbitrator, you've been a fantastic resource.

Gabe

[koyama]

I added some widths to relevant elements because I thought they would activate IE's hasLayout as stated in your suggested reading. This seemed like a reasonable alternative to setting zoom: 1, which I am tentative to do, since according to the reading, it will invalidate my CSS.
In my opinion, using zoom: 1 is a better way of triggering hasLayout instead of camouflaging ones true intention of triggering hasLayout by setting a redundant width. Here are some arguments supporting that opinion.

(1)
Generally, for fluid boxes, one cannot set an explicit width with which hasLayout can be triggered. One would have to search for alternative, more complex CSS ways of triggering hasLayout.

For example, suppose you have a fluid page. The markup may look like this:
body {
margin: 0;
}
#wrap {
padding: 1em;
}

<body>
<div id="wrap">
[text...]
</div>
</body>

If #wrap for some reason is required to have hasLayout in IE6 and IE7, then it is not possible to trigger hasLayout by setting an explicit width because that width would have to be 100% - 2em which is not a possible value in CSS.

To trigger hasLayout in IE6 you would perhaps use a (double) bug exploit like * html #wrap {height: 1px}. For IE7 you could use #wrap {min-height: 1px}. As you can see this is not intuitive CSS.

(2)
Using zoom: 1 makes it clear that we are fixing a hasLayout issue.

For example suppose we have some code that looks like this
body {
width: 800px;
}
#wrap {
width: 800px;
background: red;
}


<body>
<div id="wrap">
[text...]
</div>
</body>

Now if someone else later needs to modify the CSS then when he sees this code he might at the same time delete that #wrap {width: 800px} because it is redundant, he thinks. #wrap will automatically occupy the full width of body, he argues. What he does not know is that we had set the width for #wrap because we needed hasLayout.

He would not have made the mistake to delete that part if we had coded like this:
body {
width: 800px;
}
#wrap {
zoom: 1; /* trigger hasLayout */
background: red;
}

If one consistently uses zoom: 1 whenever hasLayout is needed (and not already triggered by other means), then one will at a glance recognize that we are fixing a hasLayout issue.

(3)
It may be easier to maintain the style sheet.

Suppose in the above example that we want a wider page and change the body width from 800px to 900px. We will then also have to change the width of #wrap to 900px. Had we instead used the zoom: 1 switch then we would only have had to make the change on the single body element.

(4)
To pass validation one can anyway just use IE conditional comments
<!--[if IE]>
<style type="text/css">
#wrap {
zoom: 1;
}
</style>
<![endif]-->
The down-side is that the styles for #wrap are spread in to places in the document. This makes the code more difficult to overview hence maintain.