How do I center this code in the middle of the page?

HTML & CSS
164
165

So it works in IE8 and Firefox 3.5 :grimacing:
What year was that?

166

Because lots of old code still exists in the wild and browsers necessarily still support it, but they may stop supporting it at any time. Their choice.

167

Analogy.

If your boss said your position was going to be phased out in 6 months and your landlord said you were going to be evicted in 6 months, would you start looking for another job and apartment or would you say “why should I, I’m still working and I’m still in the apartment?”.

When code is designated as Deprecated it means it is scheduled to have support for it stopped.

A wise designer / developer will use the time to prepare for when support stops, not keep using it because so far it still works.

It can be a lot of work to go over old code. Knowing something is Deprecated gives time to do that work.

But there is no excuse to be writing new code or to edit old code and use anything known to be Deprecated.

3 Likes
168

Can you tell me why this code isn’t working in code pen?

169

The problem (bug) with flexbox in ie11 is that it does not understand the min-height:100vh and needs a real height instead.

e.g.

.outer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
}

It does actually understand min-height on the container but not as a basis to center the flex items unfortunately.

There should be not detriment in using a fixed height in that above example but if content should exceed the height of the container then overflow will occur.

1 Like
170

I’m using firefox.

But it works perfectly fine here: http://www.cssdesk.com/YpVwp

and it works fine here: https://testblog567895.blogspot.com/

173

It is invalid.
The nesting of divs is messed up and you have self closing divs, which don’t exist in the html spec.

<div class='item-line'/>

:-1:

174

Tag omission None, both the starting and ending tag are mandatory.

Read:
<div /> will not work.

175

it’s messed up in jsfiddle too. https://jsfiddle.net/ur6envpk/1/

176

how do I fix it?

177

No surprise.

178

How do I fix the flexbox code you helped me with: https://jsfiddle.net/ur6envpk/1/

It works fine here, http://www.cssdesk.com/YpVwp but it doesn’t work in jsfiddle or code pen and people are saying that there are issues with the code.

179

What about

do you not understand?

Maybe I’m too familiar with the terminology and have forgotten what it is like to be starting out at it, but it seems very clear to me what is required to be done.

180

I don’t understand, I’m new to this.

181

and that’s what “catch it” means?

The break tag is most commonly used to force an interruption in the flow of text so the next word starts on a new line. That would be its purpose in your table code, too. But why???
Why would anyone need to force the orange bar to start on a new line? The orange bar takes up exactly all of the available width in the table cell. So what’s up? If it isn’t needed, how did it get there?

Maybe the HTML, or parts of the HTML, was used in a different setting where the break tag was needed or at least useful. However, copied and pasted into the tight fitting table cell, the break tag became superfluous.

Oh, but wait! Suppose someone were writing a modern, fluid (responsive) page where the table cells resize to accommodate the width of the viewport. One might need the break tag to prevent the orange span {display:inline-block, width:300px} from aligning itself on the same line after the end of the text at wide widths… that is, unless the <span> were a full width normal block <div>, then the break tag would be unnecessary.

So why was it used in this code now? To “catch text” ???

Hmmmm.

182

I removed all the span and replaced them with div, and I deleted all the br’s from all 3 codes.

183

Why did you tell me to remove span from flexbox if it doesn’t work with div? You told me to change that? https://jsfiddle.net/ur6envpk/1/

184

Without wishing to be rude, it seems to me that your problems are largely caused by trying to run before you can walk. You need to learn the basics of HTML and CSS before you start worrying about fancy layouts.

Most HTML elements require an opening and a closing tag. e.g. <p>like this</p>. But some tags are “self-closing”, like <br> (or <br/> for xhtml).

Please take a little time to learn basic terminology and the basics of HTML and CSS, so that you can at least understand the help that others are offering. Otherwise, you’re just wasting their time and yours.

These links may help:
http://www.htmldog.com/guides/

1 Like
185

So, then this one is correct then?
<td class='one'>

            Radio 4

<div class='two'>
</div>
  </td>