background: url and <!DOCTYPE html>

rept · 04-10-2012, 01:04 PM

I have the following in my CSS:

Code:

 .Vdivider {
  background: url("VDivider.png") no-repeat right top;
  min-height: 60px;
  }

In the index.html I got:

Code:

<div class="VDivider">					
	Text to put in box...
</div>

The strange thing is: when I don't start my index.html file with

Code:

<!DOCTYPE html>

it displays perfectly in Chrome with the vertical dividers as well but IE is completely garbage. When I put the doctype in front then IE displays the page fine, except no vertical dividers and in Chrome the vertical dividers will be gone as well.

Any clues?

Thanks in advance!

SB65 · 04-10-2012, 01:51 PM

You certainly need a doctype to make IE display correctly.
This suggests a problem elsewhere. Can you give a link to your page?

abduraooft · 04-10-2012, 01:53 PM

Please post your complete code a link to your page.

and btw, you need a DOCTYPE, always!

rept · 04-10-2012, 03:00 PM

Quote:

Originally Posted by SB65

You certainly need a doctype to make IE display correctly.
This suggests a problem elsewhere. Can you give a link to your page?

Yup that's what I found out as well but I find it strange that the seperators dissappear in chrome after doctype is set.

This is the page: www.qrright.com

SB65 · 04-10-2012, 03:19 PM

Ah. Css is case-sensitive:

Code:

.Vdivider {
  background: url("VDivider.png") no-repeat right top;
  min-height: 60px;
  }

Code:

<div class="VDivider">					
	Text to put in box...
</div>

The absence of the doctype causes some browsers to render in "quirks mode" - so css is not treated as case sensitive, but IE displays unpredictably.

Sort your cases and it should be OK.

rept · 04-10-2012, 03:31 PM

Quote:

Originally Posted by SB65

Ah. Css is case-sensitive:

The absence of the doctype causes some browsers to render in "quirks mode" - so css is not treated as case sensitive, but IE displays unpredictably.

Sort your cases and it should be OK.

You rock!!! Problem solved

thanks a lot.