13 replies [Last post]
Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 2 years 26 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

Erm, am I being retarded or does IE 8, for some strange reason, not support/render

border-style: outset;

(or inset) if the compatibility view mode is turned off, but it does in compatible mode.

AFAIK that is valid, W3 standards-compliant, CSS, yes? But In my test using the MS virtual machine with IE8 running on XP SP3 or Vista, IE 8 displays that border as a solid line if the com-mode is disabled.... - Compatibility mode is "old" mode, so that it will take and render all the crap old IE-specific CSS, yes?

Cheers

MH

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 23 hours 11 min ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15650
Points: 2788

No it does support it I'm

No it does support it :? I'm getting the impression that you are very hung up on 'Compatibility Mode' IE* provides two mechanisms to deal with backwards rendering you can set a meta tag in the document so that IE8 browsers when they hit your page will be forced to render as older versions, this it strikes me is for lazy or bad developers that can't or don't want to correct their pages or for code that was so badly hacked around to render in IE=<7 that it has to forgo IE8 much improved standards rendering. The other mechanism is the 'browser button' to change the mode if the developer has not been able to implement anything; you can also set compatibility mode for local (intranet) and for WAN internet.

IE=<7 did not render outset or inset IE8 does it does quite a lot correctly now, took a while but they seem to have got there - ish, the shame is the lie that was IE7 it never existed it was a smoke screen buying time while they finished IE8

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 2 years 26 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

Hmmm.....

The reason I'm concerned with the compatibility view is I am writing an app that needs to be very robust, and the users will be on IE 7 or 8 and may (for some reason) not be using comp-view mode - if they aren't the pages still need to render properly.

I've tried it on my virtual machines, and also on another machine with IE8 installed and the results are consistent, so I'm guessing it must be something I'm doing wrong then....what's wrong with this code (I've simplified the content for this example):-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        .mainWrapper
        {
            margin-top: 15px;
            border-style: inset;
            width: auto;
            background-color: #FBEFFB;
        }
 
        .hdrWrapper
        {
            border-style: outset;
            margin: 15px 15px 0px 15px;
            background-color: #E0F8E0;
        }
 
        .detWrapper
        {
            margin: 0px 15px 15px 15px;
            background-color: #E0F8F7;
        }
    </style>
    <title></title>
</head>
<body>
 
    <div class="mainWrapper">
        <div class="hdrWrapper">
	    Some header text<br/>
	    here, it's great!
        </div>
        <div class="detWrapper">
	    Detail here<br />
	    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec faucibus. Vestibulum congue. Etiam consectetuer accumsan purus. Nullam mi mi, sodales vel, laoreet a, tempor vel, libero. Pellentesque pretium, elit vitae mollis lacinia, sapien nisl ornare velit, vel laoreet metus eros a velit. Cras ultrices, elit ut condimentum nonummy, ligula wisi imperdiet magna, vel vestibulum neque wisi eget purus. Fusce ac enim sed magna vestibulum ultricies. Quisque faucibus. Etiam a elit. 
<br />Cras rhoncus interdum pede. Maecenas lorem. Duis vel wisi sit amet magna sodales porta. 
        </div>
    </div>
    <div class="mainWrapper">
        <div class="hdrWrapper">
	    Another Header<br />
	    Some more header text
        </div>
        <div class="detWrapper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec faucibus. Vestibulum congue.<br />Etiam consectetuer accumsan purus. Nullam mi mi, sodales vel, laoreet a, tempor vel, libero. Pellentesque pretium, elit vitae mollis lacinia, sapien nisl ornare velit, vel laoreet metus eros a velit. Cras ultrices, elit ut condimentum nonummy, ligula wisi imperdiet magna, vel vestibulum neque wisi eget purus. Fusce ac enim sed magna vestibulum ultricies. Quisque faucibus. Etiam a elit. 
<br />Cras rhoncus interdum pede. Maecenas lorem. Duis vel wisi sit amet magna sodales porta. 
        </div>
    </div>
 
</body>
</html>

I've attached screenies showing how it renders on IE7, IE8 (no comp-view) and IE8 with comp-view enabled - on the 7 and 8/comp the inset and outset render ok, but without comp-view on 8 it renders as a solid line

Cheers

MH

AttachmentSize
IE7_Border_CSS.JPG 105.8 KB
IE8_Border_CSS.JPG 113.82 KB
IE8_Comp_View_Border_CSS.JPG 112.2 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 23 hours 11 min ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15650
Points: 2788

Ok see what you mean ,

Ok see what you mean , firstly ignore my ramblings IE6 didn't support certain border styles IE7 does, the problem here seems to be only using the border-style part of the border property try setting the border as shorthand e.g border: 5px outset green; if you are explicit then all is well and you will get the same rendering; can never remember exactly but if you don't state colour and/or width it has to be inherited from somewhere and it's this that is the problem, IE 8 does not appear to be finding these aspects as FF and IE7 are. solution is to state the full property which is always the practise I have followed not doing so is often problematic with one browser or another in possibly placing it's own rules on where the missing values are derived from.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 5 years 1 week ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

Yup, somewhere someone

Yup, somewhere someone interprets the lack of other necessary information as meaning, "there is no border". Because borders all have certain things, a colour and a width etc. What some browsers do is, if that information isn't supplied,they make a guess-- for instance, not stating a border-color might mean "default to black". I think it was specifically the width-- no explicit width, then width="0" which means "no border" in someone.

Really you'd think if the designer cared enough that the border is outset or inset, that they'd also care even more about, like, the colour and stuff.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 23 hours 11 min ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15650
Points: 2788

They don't make a guess Poes

They don't make a guess Poes there are actual rules to govern this occurrence if no colour stated then it's taken from somewhere or other, but it's not the sort of thing i tend to remember as I would and never do state a border in this fashion and only use shorthand or component properties of the parent when I need to reset or change a previous value that has already been explicitly stated. As you say one should care enough to want to state explicitly these values.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 2 years 26 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

Aha, yes, that works,

Aha, yes, that works, cheers. Looking very closely it seems IE8 defaults to subtle shades of black (niiiiiiice) as a default to insets and outsets - sorry, I should have noticed that.....

Hugo wrote:

Ok see what you mean , firstly ignore my ramblings IE6 didn't support certain border styles IE7 does, the problem here seems to be only using the border-style part of the border property try setting the border as shorthand e.g border: 5px outset green; if you are explicit then all is well and you will get the same rendering; can never remember exactly but if you don't state colour and/or width it has to be inherited from somewhere and it's this that is the problem, IE 8 does not appear to be finding these aspects as FF and IE7 are. solution is to state the full property which is always the practise I have followed not doing so is often problematic with one browser or another in possibly placing it's own rules on where the missing values are derived from.

my god, do you turn blue when typing your posts coz you don't seem to pause for breath... =9)

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 23 hours 11 min ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15650
Points: 2788

Hmm someone else picking me

Hmm someone else picking me up on punctuation, makes me a wee bit angry :mad: I wouldn't go there the last person who did that via a lengthy PM got an absolute *bollocking* from me for being rude and patronizing but then they were young and callow.

I threw a few commas in, last time I checked a comma is literally intended as a pause to draw breath :shrug:

Oh better add this Smile just in case any one takes me too seriously

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 13 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9176
Points: 3175

Quote:If an element's border

Quote:

If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.

Example(Drunk:

In this example, the border will be a solid black line.

p { 
  color: black; 
  background: white; 
  border: solid;
}

This is from ยง8.5.2 Border color.

cheers,

gary

ps It wouldn't kill you to punctuate a bit, H, and it would make your ramblings more understandable. So, there Tongue

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 23 hours 11 min ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15650
Points: 2788

That's the spec I was

That's the spec I was thinking of. Trouble is when there is no colour specified it'll be having to trawl back looking for one or using browser default. I would suspect that there is variance in browser handling, if not in this directly then in the handling of component properties Vs. the full declaration i.e 'shorthand declarations'.

N.B Written with petulant fury!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 2 years 26 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

Don't Rely On Default

Yes, I suppose I'm complaining about my own laziness really, hehe - the old axiom about not assuming anything - so if you rely on default values, without necessarily knowing how they are derived, then you can't complain if they don't give you what you want (unless, ofc, the derivation of the defaults are known and then are randomly changed, not that this ever happens.....). So I'll put up my hands on this one and say it was my fault rather than anything stupid MS have done (not often that happens....).

On the subject of sentences, I only pointed it out because I am just as guilty of it, lol - I find that my brain spews forth a train of thought and then fingers just type it out as it comes.....often when I am asking or answering Qs on forums I type my post and then have got into the habit of going back over it and making it more comprehensible =8)

L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 5 years 1 week ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

I think a bunch of us just

I think a bunch of us just happened to pick on Hugo all at once. I'd just said something about punctuation in another thread... yesterday? And the smilies. So sometimes the Wrath of Hugo appears.

NB written without ANY L0L-sp33k

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 2 years 26 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

Is that....?

L0LKTHXBYE wrote:

So sometimes the Wrath of Hugo appears.

Is that anything like the second star trek film?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 13 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9176
Points: 3175

Mad-Halfling

Mad-Halfling wrote:
L0LKTHXBYE wrote:

So sometimes the Wrath of Hugo appears.

Is that anything like the second star trek film?

Nah! Hugo has a modicum of redeeming social value.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.