# Another CSS/HTML query.

**URL:** https://boards.straightdope.com/t/another-css-html-query/227220
**Category:** Factual Questions
**Created:** [February 2, 2004, 8:26pm UTC](https://boards.straightdope.com/t/another-css-html-query/227220 "2004-02-02T20:26:29Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![II\_Gyan\_II](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@II\_Gyan\_II](https://boards.straightdope.com/u/II_Gyan_II)
#### Post date: [February 2, 2004, 8:26pm UTC](https://boards.straightdope.com/t/another-css-html-query/227220/1 "2004-02-02T20:26:29Z")

</div>

My [url=http://lens.gyan.info]website has valid XHTML Basic 1.0 code and valid CSS code.

I use Firebird as my browser, so sometimes miss out on whether the page renders correctly in IE. Big mistake.

I have two horizontal header boxes followed by a two-column layout (menu + content).

Upon checking in IE, it seems that the links in the menu column don’t work!

After tweaking a bit, I removed the XHTML DTD from the HTML and voila! the links work. But the CSS positioning of the content column gets shifted upwards (only in IE). And thus overlapping with the second header box. Firebird still renders it correctly. Just how do I get the links and layout right in both IE and Firebird?

I guess, all I need to know is how to vertically align two columns in CSS?

---

<div class="post-metadata">

### Author: ![CurtC](https://avatars.discourse-cdn.com/v4/letter/c/ce73a5/32.png) [@CurtC](https://boards.straightdope.com/u/CurtC)
#### Post date: [February 2, 2004, 8:53pm UTC](https://boards.straightdope.com/t/another-css-html-query/227220/2 "2004-02-02T20:53:35Z")

</div>

I see also that the word-spacing attribute in your .areas is not honored in IE.

As to your question about the placement of the “content” div, you specify a hieght of 666px for your “sections” div, then tell the content div that it needs to go to -676px, so it looks to me that it should be 10px higher than the sections div, or right in the middle of your areas div. It seems like IE is rendering it correctly, but isn’t there a more straightforward way to place your elements? Like maybe with absolute positioning?

And one thing that I find really annoying is when a site’s page is way wider than my browser window, so I have to scroll left and right to read it. Your site is that way. You have it hard-coded to be 992 pixels wide, and my browser window is almost always set to be maybe 60% of the width of my 1024-wide screen.

---

<div class="post-metadata">

### Author: ![Duckster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/duckster/32/1244_2.png) [@Duckster](https://boards.straightdope.com/u/Duckster)
#### Post date: [February 2, 2004, 9:06pm UTC](https://boards.straightdope.com/t/another-css-html-query/227220/3 "2004-02-02T21:06:49Z")

</div>

Don’t kill the XHTML DTD.

Build your site according to web standards, and then determine why IE doesn’t render correctly. You will find it is a combination of IE does not fully support web standards and there are bugs in the way it renders CSS.

Study to find out the box back. Buy Zeldman’s web standards book. Buy Eric Meyer’s CSS book.

Also, your width statements are too long. Horizontal scrolling is a big no no.

---

<div class="post-metadata">

### Author: ![Duckster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/duckster/32/1244_2.png) [@Duckster](https://boards.straightdope.com/u/Duckster)
#### Post date: [February 2, 2004, 9:08pm UTC](https://boards.straightdope.com/t/another-css-html-query/227220/4 "2004-02-02T21:08:52Z")

</div>

> [@Duckster](#):
>
> Study to find out the box back.

Ah, it’s box hack.  
:wally

---

<div class="post-metadata">

### Author: ![Urban\_Ranger](https://avatars.discourse-cdn.com/v4/letter/u/e9c0ed/32.png) [@Urban\_Ranger](https://boards.straightdope.com/u/Urban_Ranger)
#### Post date: [February 3, 2004, 6:07am UTC](https://boards.straightdope.com/t/another-css-html-query/227220/5 "2004-02-03T06:07:29Z")

</div>

What version of IE?

---

<div class="post-metadata">

### Author: ![Urban\_Ranger](https://avatars.discourse-cdn.com/v4/letter/u/e9c0ed/32.png) [@Urban\_Ranger](https://boards.straightdope.com/u/Urban_Ranger)
#### Post date: [February 3, 2004, 6:14am UTC](https://boards.straightdope.com/t/another-css-html-query/227220/6 "2004-02-03T06:14:55Z")

</div>

A couple of things:

1. IE messes up the CSS box model, so things will look different in IE than in, say, Firebird. There’s nothing you can do.

2. Your CSS code looks like a kludge. Sorry to say this, but it seems that you can do better.

3. Absolutely positioned boxes don’t care about margins IIRC.

---

<div class="post-metadata">

### Author: ![Achernar](https://avatars.discourse-cdn.com/v4/letter/a/e274bd/32.png) [@Achernar](https://boards.straightdope.com/u/Achernar)
#### Post date: [February 3, 2004, 6:20am UTC](https://boards.straightdope.com/t/another-css-html-query/227220/7 "2004-02-03T06:20:00Z")

</div>

> [@Gyan9](#):
>
> Upon checking in IE, it seems that the links in the menu column don’t work!

Forgive me, but what links in the menu column? All I see there is:

> [@](#):
>
> Recent:  
> few links added  
> neuralens added

---

<div class="post-metadata">

### Author: ![Urban\_Ranger](https://avatars.discourse-cdn.com/v4/letter/u/e9c0ed/32.png) [@Urban\_Ranger](https://boards.straightdope.com/u/Urban_Ranger)
#### Post date: [February 3, 2004, 11:20am UTC](https://boards.straightdope.com/t/another-css-html-query/227220/8 "2004-02-03T11:20:13Z")

</div>

You need to go to the “links” page first.

---

<div class="post-metadata">

### Author: ![II\_Gyan\_II](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@II\_Gyan\_II](https://boards.straightdope.com/u/II_Gyan_II)
#### Post date: [February 3, 2004, 1:29pm UTC](https://boards.straightdope.com/t/another-css-html-query/227220/9 "2004-02-03T13:29:51Z")

</div>

My problem’s been solved.

I removed a padding parameter from ‘sections’ and everything works fine in both browsers. There’s still one glitch. In the ‘content’ box the the h2 tagged text appears with less top padding in IE than in Firebird. What’s wrong?

> [@Urban Ranger](#):
>
> 1. Your CSS code looks like a kludge. Sorry to say this, but it seems that you can do better.

I don’t see it. [http://lens.gyan.info/lens.css](http://lens.gyan.info/lens.css)

Spaces between selectors. One parameter per line. Brackets on their own lines. The only cause for complaint I see is, that parameters for anchor pseudo-class selectors are noted in one line. That suits me just fine. And the color values in comments. The best place to keep them, in case I want to revert. Anything else?

---

<div class="post-metadata">

### Author: ![Achernar](https://avatars.discourse-cdn.com/v4/letter/a/e274bd/32.png) [@Achernar](https://boards.straightdope.com/u/Achernar)
#### Post date: [February 4, 2004, 1:11am UTC](https://boards.straightdope.com/t/another-css-html-query/227220/10 "2004-02-04T01:11:36Z")

</div>

Well, I’d like to help, but I can’t get IE to work. I’m also curious, though, as to what **Urban Ranger** thinks is wrong with **Gyan9** ’s CSS. It looks okay to me.

---

<div class="post-metadata">

### Author: ![II\_Gyan\_II](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@II\_Gyan\_II](https://boards.straightdope.com/u/II_Gyan_II)
#### Post date: [February 4, 2004, 1:27am UTC](https://boards.straightdope.com/t/another-css-html-query/227220/11 "2004-02-04T01:27:23Z")

</div>

> [@Achernar](#):
>
> Well, I’d like to help, but I can’t get IE to work.

Just to clarify, the above means that your IE browser doesn’t start and not that my site still has problems in IE?

---

<div class="post-metadata">

### Author: ![Achernar](https://avatars.discourse-cdn.com/v4/letter/a/e274bd/32.png) [@Achernar](https://boards.straightdope.com/u/Achernar)
#### Post date: [February 4, 2004, 1:38am UTC](https://boards.straightdope.com/t/another-css-html-query/227220/12 "2004-02-04T01:38:06Z")

</div>

That’s correct.

---

<div class="post-metadata">

### Author: ![Urban\_Ranger](https://avatars.discourse-cdn.com/v4/letter/u/e9c0ed/32.png) [@Urban\_Ranger](https://boards.straightdope.com/u/Urban_Ranger)
#### Post date: [February 4, 2004, 6:23am UTC](https://boards.straightdope.com/t/another-css-html-query/227220/13 "2004-02-04T06:23:54Z")

</div>

> [@Gyan9](#):
>
> I don’t see it. [http://lens.gyan.info/lens.css](http://lens.gyan.info/lens.css)
> 
> Spaces between selectors. One parameter per line. Brackets on their own lines. The only cause for complaint I see is, that parameters for anchor pseudo-class selectors are noted in one line. That suits me just fine. And the color values in comments. The best place to keep them, in case I want to revert. Anything else?

Oh, I saw your CSS code. I didn’t mean it’s spaghetti code or incomprehensible, but rather, the way your layout is constructed is a kludge.

---

<div class="post-metadata">

### Author: ![II\_Gyan\_II](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@II\_Gyan\_II](https://boards.straightdope.com/u/II_Gyan_II)
#### Post date: [February 4, 2004, 12:24pm UTC](https://boards.straightdope.com/t/another-css-html-query/227220/14 "2004-02-04T12:24:39Z")

</div>

> [@Urban Ranger](#):
>
> Oh, I saw your CSS code. I didn’t mean it’s spaghetti code or incomprehensible, but rather, the way your layout is constructed is a kludge.

How should it be?
