HTML5/CSS3/advancedJavascript learning and programming logs - Page 2 - Computer Technical Help

Two Plus Two Forums Other Topics Computer and Technical Help

HTML5/CSS3/advancedJavascript learning and programming logs

Post Reply Subscribe

...

Page 2 of 12

1 2 3 4 5 6 7

Page 2 of 12

1 2 3 4 5 6 7

04-30-2011 , 04:07 AM

#26

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Yeah.....

Found an interesting problem:

So, in my sample, there are two different areas for links. The new tag for this is <nav>.

I changed the <nav> properties in the <head> section, which works fine if there was only one <nav>, obv.

The issue is figuring out how to change the properties of the second <nav>. Using <nav id="whatEverIsInTheHeaderNextToHash"> doesn't work out so well.

Hmmmm.... maybe I'll try nav#second in <head> and then use <nav id="second"> in the body?

It's going to be interesting to create full pages without the use of <div> everywhere, though I am not sure if that is possible at this point.

Do they really want to get rid of all the div? Is changing <div id="main"> to <article> a good choice?

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

If the idea is to be semantic, I think using article is missing the mark with this expansive definition.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">


header
{
background-color:#D2691E;
height: 8em;
border-style: solid;
}

nav
{
position: absolute;
background-color: #D2691E;
width: 7em;
height: 20em;
border-style: solid;
padding-left: 0.5em;
}

article
{
height: 20em;
background-color: #D2691E;
margin-left: 7em;
border-style: solid;
padding-left: 1em;
}

footer
{
background-color: #D2691E;
height: 10em;
border-style: solid;
}


#hList
{
border-style: none;
}

</style>
</head>
<body>

<header>
    <h1>Welcome....
    <h2>to a wonderful webpage.</p>
</header>

<nav>
    <p><strong>Stuff:</strong></p>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</nav>

<article>
    <time datetime="2011-03-15">Last Thursday</time>
</article>

<footer>
    <p>
    <strong>Links that don't work:</strong>
    </p>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    
</div>

</body>
</html>

Quote

$25m Guaranteed WPM on CoinPoker

Join the action now

Daily Rewards • Splash Pots • CoinRaces

04-30-2011 , 09:01 AM

#27

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

I wouldn't ID/Style Nav/article/footer etc tags. Just leave them naked. I found that older browsers don't understand them so completely ignore them, it's better to style other elements. EG:

<nav>
<p><strong>Stuff:</strong></p>
<ul class="firstNavList">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>

Then style:

.firstNavList{

}
.firstNavList li {

}

Quote

04-30-2011 , 09:02 AM

#28

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

Also use this tool:

http://gsnedders.html5.org/outliner/

To make sure your markup is semantically correct

Quote

04-30-2011 , 11:21 AM

#29

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

html5shive - http://code.google.com/p/html5shiv

This will get older versions of IE to notice the new tags and it works very well as long as JS is enabled. The only reason IE doesn't see them is because they don't exist within the browser by default. This file just adds them to the DOM at runtime.

Quote

04-30-2011 , 07:50 PM

#30

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by Gullanian

Does using this code layout the page as it is seen? I am attempting to keep the layout exactly as such. I am not sure if you are wrapping <nav> in <div>. I'll do some cross-browsing testing later on, just want to finish this one first and see what happens. However, I was working on the first code on my gf's pc and she has FF3.6x installed. Everything worked well except for the curved border. That was easily fixed by adding -moz- to the style sheet.

Glad you guys found those other links. I was well aware of it, but I figured if people were following along and reading the resources, they would find it. There is a link included that shows the entire javascript that you can imbed into your header or external file that is available for use. I posted part of it in my OP.

The best link, IMO is the one where the author talks about people "making **** up." I laughed.

Oh, right: I'm not sure what resource people normally use to find colors, but this is the only one that doesn't make me feel color-blind.

http://www.devguru.com/technologies/...lor_chart.html

Surprising how much there is to figure out from the mere basics.

Quote

04-30-2011 , 11:57 PM

#31

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Here is a link to css that I forgot to put in the OP:

http://www.glish.com/css/

Lots of link to some great website. Especially check out the Eric Meyer.

Quote

05-01-2011 , 08:15 PM

#32

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Last night, I was looking at the standards for HTML5. I found some interesting things. I find it astounding that so many web bloggers and sites are discussing the use of <em> and <strong>. They consistently state that using <i> and <b> is no longer valid, unprofessional or something like that. Regardless to how it is stated, they leave one with the impression that <i> and <b> are no longer good coding practices.

This is wrong: a complete mis-comprehension of what the standards are saying. If HTML5 is a "semantic" language, then taking out <i> and <b> makes absolutely no sense. They ~do~ include these tags in the standards, but they create strict rules on when to choose <em> over <i> and when to choose <b> over <strong> and vice versa.

Anyways, I created a mock-up webpage today some of the semantic changes and additions found in HTML5. I think it would be interesting to discuss the changes and the choices I used. For example: do you agree or disagree with my choice in using <article> instead of <section>? Why?

What do you guys think of using the new <hr> vis-a-vis <hr /> markup?

I do think that in this case, using <section> would probably be better, but what if this was a blog post? What would be your over-riding decision in using either <section> or <article>?

(Dracula is in the public domain and free for all to use, however, I did copy/paste the writing from project gutenberg).

further note: I know that this code is horrible and sloppy in many ways. For example, I created a pseudo-frame layout with a fixed element. Although you would be able to read up to "twenty-seven" in the source, depending on your screen size, you wouldn't be able to see all of it. My screen is rather small, so I only see up to "twenty." I really don't want to get into a discussion about this.

I used a gradient tag, but I don't understand a word of the IE tag, I just know that this code creates a gradient from bottom to top, which does not match what happens in the sample page I created:

Code:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */

So, with gradient actually working on ff4 (confirmed), chrome (confirmed), safari (I think), and not testing this in Opera:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">

body
{
background-image:url('http://fc09.deviantart.net/fs10/f/2006/325/b/2/paper_texture_by_akinna_stock.jpg');
}

nav
{
position: fixed;
background: -webkit-gradient(linear, right top, left top, from(#FF0000), to(#EEEEEE));
background: -moz-linear-gradient(right, #FF0000,  #EEEEEE); 
width: 7em;
height: 60em;
top: 0;
left: 0;
bottom: 0;
padding-left: 0.5em;
}

article
{
margin-left: 8em;
}

</style>
</head>
<body>

<nav>
    <p><strong>chapter:</strong></p>
    <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
    <li>eleven</li>
    <li>twelve</li>
    <li>thirteen</li>
    <li>fourteen</li>
    <li>fifteen</li>
    <li>sixteen</li>
    <li>seventeen</li>
    <li>eighteen</li>
    <li>nineteen</li>
    <li>twenty</li>
    <li>twenty-one</li>
    <li>twenty-two</li>
    <li>twenty-three</li>
    <li>twenty-four</li>
    <li>twenty-five</li>
    <li>twenty-six</li>
    <li>twenty-seven</li>

    </ul>
</nav>

<article>

    <p>posted on: <time datetime="2011-05-01">May1, 2011</time></p>
    
    <hgroup>
    <h1>DRACULA</h1>
    <h2>A Mystery Story by Bram Stoker</h2>
    <h3>1897 edition</h3>
    </hgroup>
    
    <hr>
    
    <p>How these papers have been placed in sequence will be made manifest in thereading of them. All needless matters have been eliminated, so that a historyalmost at variance with the possibilities of latter-day belief may stand forthas simple fact. There is throughout no statement of past things whereinmemory may err, for all the records chosen are exactly contemporary, givenfrom the standpoints and within the range of knowledge of those who made them.</p>
    
    <hr>
    
    <hgroup>
    <h1>Table Of Contents</h1>
    <h2>Chapter</h2>
    </hgroup>
    <ul>
        <li>1 Jonathan Harker's Journal</li>
        <li>2  Jonathan Harker's Journal</li>
        <li>3  Jonathan Harker's Journal</li>
        <li>4  Jonathan Harker's Journal</li>
        <li>5  Letter From Miss Mina Murray To Miss Lucy Westenra</li>
        <li>6  Mina Murray's Journal</li>
        <li>7  Cutting From "The Dailygraph", 8 August</li>
        <li>8  Mina Murray's Journal</li>
        <li>9  Letter, Mina Harker To Lucy Westenra</li>
        <li>10  Letter, Dr. Seward To Hon. Arthur Holmwood</li>
        <li>11  Lucy Westenra's Diary</li>
        <li>12  Dr. Seward's Diary</li>
        <li>13  Dr. Seward's Diary</li>
        <li>14  Mina Harker's Journal</li>
        <li>15  Dr. Seward's Diary</li>
        <li>16  Dr. Seward's Diary</li>
        <li>17  Dr. Seward's Diary</li>
        <li>18  Dr. Seward's Diary</li>
        <li>19  Jonathan Harker's Journal</li>
        <li>20  Jonathan Harker's Journal</li>
        <li>21  Dr. Seward's Diary</li>
        <li>22  Jonathan Harker's Journal</li>
        <li>23  Dr. Seward's Diary</li>
        <li>24  Dr. Seward's Phonograph Diary</li>
        <li>25  Dr. Seward's Diary</li>
        <li>26  Dr. Seward's Diary</li>
        <li>27  Mina Harker's Journal</li>
    </ul>
    
    
</article>

<article>
    <hgroup>
    <h2>Chapter 1</h2>
    <h3>Jonathan Harker's Journal</h3>
    </hgroup>
    
    <p>(Kept in shorthand)</p>
    <p>3 May. Bistritz.--Left Munich at 8:35 P.M., on 1st May, arriving at
Vienna early next morning; should have arrived at 6:46, but train was
an hour late.  Buda-Pesth seems a wonderful place, from the glimpse
which I got of it from the train and the little I could walk through
the streets.  I feared to go very far from the station, as we had
arrived late and would start as near the correct time as possible.
</p>
    <p>The impression I had was that we were leaving the West and entering the
East; the most western of splendid bridges over the Danube, which is
here of noble width and depth, took us among the traditions of Turkish
rule.</p>
    
    
    <p>We left in pretty good time, and came after nightfall to Klausenburgh.
Here I stopped for the night at the Hotel Royale.  I had for dinner,
or rather supper, a chicken done up some way with red pepper, which
was very good but thirsty.  (Mem. get recipe for Mina.) I asked the
waiter, and he said it was called "paprika hendl," and that, as it was
a national dish, I should be able to get it anywhere along the
Carpathians.</p>
    <p>I found my smattering of German very useful here, indeed, I don't know
how I should be able to get on without it.
</p>
    <p>Having had some time at my disposal when in London, I had visited the
British Museum, and made search among the books and maps in the
library regarding Transylvania; it had struck me that some
foreknowledge of the country could hardly fail to have some importance
in dealing with a nobleman of that country.</p>
</article>

<article>
    <hgroup>
        <h2>Chapter Two</h2>
        <h3>Jonathan Harker's Journal</h3>
    </hgroup>
</article>

</body>
</html>

What do you think of the semantics?

Quote

05-02-2011 , 04:00 AM

#33

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

My newest creation. It's a --little-- more serious. The layout is better and the anchors have effects on mouse hover.

At first, I was placing <h1> in the <hgroup> tags within the <article> tags.

It turns out that Chrome and ff4 interpret these tags differently, so I had to use the <h2> tags. I'll have to work on it a bit more tomorrow.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style type="text/css">

header
{
border-bottom-style: double;
text-align: center;
height: 3em;
}

time
{
position: absolute;
top: 1em;
left: 0.5em;
}

h2#price
{
position: absolute;
top: 0em;
right: 0.5em;
}

nav
{
border-bottom-style: double;
text-align: center;
word-spacing: 5em;
}

a:hover
{
color: white;
text-shadow: 1px 1px 1px black;
}

div#robo
{
width: 13em;
height: 10em;
margin-top: 1em;
text-align: center;
}

img
{
width: 12em;
}

article#robotArt
{
postion: absolute;
margin-left: 14em;
margin-top: -11em;
}

p#roboP
{
-moz-column-count: 3; /* firefox */
-webkit-column-count: 3; /* safari, chrome */
column-count:3;
}

article#fireGod
{
width: 20em;
text-align: justify;
}

div#fire
{
width: 3em;
}

</style>
</head>
<body>

<header>
    <hgroup>
    <time datetime="2011-05-01">May1, 2011</time>
    <h1>THE NEWSPAPER</h1>
    <h2 id="price">50 ¢</h2>
    </hgroup>
</header>

<nav>
<a>Local</a>
<a>Nation</a>
<a>World</a>
<a>Weather</a>
</nav>

<div id="robo">
    <img src="http://i218.photobucket.com/albums/cc208/davidtoomey/android-logo.jpg" alt="Android Logo.">
    <figcaption>A police drawing of Robot</figcaption>
</div>
    
    <article id="robotArt">
    <hgroup>
    <h2>MYSTERIOUS ROBOT ATTACKS LOCAL CIVILIANS<h2>
    </hgroup>
    <p id="roboP">Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks Robot Attacks 
    <br>
    <br>
    <i>continue reading...</i>
    </p>
    
</article>
    
<article id="fireGod">
    <hgroup>
    <h2>Church Worships Flaming Fox</h2>
    </hgroup>
    
    <p>Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of
    <div id="fire">
        <img src="http://i218.photobucket.com/albums/cc208/davidtoomey/firefox-512.png">
    </div>
    god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath Church warns of god's firey wrath 
    <br>
    <br>
    <i>continue reading...</i>
    </p>
    
</article>

</body>
</html>

Quote

05-02-2011 , 01:22 PM

#34

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

You should avoid using <br /> whenever possible. It would be better to apply a margin-top style to a class associated with italics or even better make it a paragraph tag with the margin-top and a font-style of italic.

Quote

05-02-2011 , 11:06 PM

#35

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

So you want me to create a new <div>? I am assuming you would want me to put a div in a div...:

div##
{
position: absolute;
margin-left: 0px;
margin-bottom: 0px
width: 5em;
font-style: italic;
}

All of this code for two words? I suspect you didn't see the results in a browser. I can also come up with many reasons why I'd prefer to use a <br> in this instance.

If I'm getting the approach correctly, I think the idea is to try to create a code that: a) deprecates properly if it is in a browser w/o css/js, and b) is usable for people who have screen-readers or other tools. I'm trying to figure out how a screen-reader would use this:

div-in-div or div-over-div:

"and then...."

"This article now ends."

User: "what? Where the **** is the rest of the goddamn story?"

With the <br>

"and then..."

"Link item: continue reading"

The DOM itself is a disaster at this point. If you decide to use div-in-div, you have a reasonable tree, but you just created parent-child-child and that extra child isn't too useful (should really be a sibling, IMO). For example, what if you created a CSS effect? Now you have to add more colors to other elements, etc etc etc. If it is this messy with CSS, imagine the mess this creates with JS.

So, now what do I want to do to create the sibling pair? Lets see here:

<article>
<h> Title </h>
<div> article </div>
<div> continue reading </div>
</article>

or I could attempt this:

</article>
<div>
<div>
<h>title<h>
<p>article</p>
</div>
<div>
<a> continue reading </a>
</div>
</article>

(I do understand that my logic could be completely wrong here, but at least it's better than "It's better not to use it.")

Quote

05-02-2011 , 11:45 PM

#36

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

Uhh? All you would need is this:

p.read-more { margin-top: 24px; font-style: italic; }

<p class="read-more">Hey guys, I'm in italics and I'm positioned 24 pixels below the previous element. Maybe this isn't the desired value, change my margin-top property until you're happy!</p>

Quote

05-02-2011 , 11:50 PM

#37

anononon

Guest

Posts: n/a

You should generally avoid <br /> especially when you are duplicating it for spacing issues. I thought Shoe Lace was just being a nit about it (a lot of people want to use a giant blunt hammer to solve a problem that <br /> actually works fine for) but yeah, you should be using margin in CSS.

Quote

05-03-2011 , 04:31 AM

#38

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

+1 for generally avoiding <br />s but tbh I use them for spacing things I don't see much wrong with it. It's pretty lazy because CSS should be layout for everything but sometimes it's a case of having a couple of <br />s or refactor your css/layout which sometimes I cba to do. Old habbits die hard I guess.

A note on h1/h2:

<h1>THE NEWSPAPER</h1>
<h2>MYSTERIOUS ROBOT ATTACKS LOCAL CIVILIANS<h2>

I would 10x prefer the H1 to be the title of the article. Ideally every h1 should be unique, and is weighted a lot more in searches.

Quote

05-03-2011 , 01:17 PM

#39

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by Gullanian

Sorry, I over-reacted with my off-the-cuff response. I think it was past nap time.

I guess the more appropriate tag would be <a>. See, nit.

I do agree with the bolded. I originally had it in <h1> but Chrome peed all over my party. I'm not sure why that happened, but it was ugly:

Without me using a bunch of pics, it looked like:

in ff4:

MYSTERIOUS ROBOT ATTACKS LOCAL CIVILIANS

and in Chrome (4x larger than it should be):

MYSTERIOUS ROBOT
ATTACKS [spacer.gif] LOCAL
CIVILIANS

There's only one of two reasons I can figure this happened: ff4 went psycho and screwed up my sizing, or I did something stupid. Probably the latter.

Quote

05-03-2011 , 02:42 PM

#40

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

If you want a good project to work on, try something like:

1. Make a 960 pixel width layout.
2. Make it look pixel perfect in Chrome, Opera, IE7+, FF, and Safari without using hacks.
3. By loading a different css file (a conditional on the user agent) make it also look different / ideal for mobile phones.

The only rule is, you're not allowed to touch the html to make it look good in everything.

960 is a popular width because most people use 1024x768 or higher. 960 is enough for your page to not scroll horizontally when the vertical scrollbar is present and it gives you a few extra pixels so it doesn't look squished.

Quote

05-03-2011 , 08:59 PM

#41

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by Shoe Lace

Sweet. I think I will try this.

Any preferences in images/layouts/etc?

When I define my width, should I convert all the element sized em/px to %?

------------------------------

One small topic of debate that I find is interesting: cross-browsing.

So, when I make a form in HTML5, I have this option:

DiH suggests not to worry about the ie problem. This I can agree with.

In The Newspaper page I created, I used a CSS3 to create a 3-column layout in the first article. While this option is supported by everyone but (you guessed it) Internet Explorer, should I say oh well to that as well? I think the answer to this one is yes: the actual layout of the page is not affected by the loss of the three column layout: it simply shows up as one column. The loss is only cosmetic.

As a developer who should be thinking about how to create cross-browser sites, where is the line? Is using the three-column layout a bad practice since I am stymied by one and only one (major) browser? At one point do we stop laying down in from of Internet Explorer and rather than let it force us to slow down, we force it to come up to speed?

Okay, that last sentence is belligerent, but I wonder if HTML5 implementations will begin to open this debate. I suspect that part of the intention was to open this debate as well.

I've read a few articles on cross-browsing configuration, and there seems to be a few developers -- good or bad, I don't know -- that seem to be moving away from the thought that all things must be matched 100%.

Quote

05-03-2011 , 09:12 PM

#42

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

Why doesn't the 3 col layout work in IE, can you paste the entire code?

Quote

05-03-2011 , 09:56 PM

#43

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

I would use a fixed width in pixels for the layout. Forget images. If you need to distinguish different sections of the page just use a different background color and/or border. The idea isn't to create a production ready super layout that you're going to sell. You just want to write well formed html and for it to look consistent. Later down the line if you want to spruce it up with images, go for it.

As for forms looking slightly different, every browser has their own default form look. You can reset the text boxes to look the same across every browser pretty easily (set the fore/background color + border) but to get button consistency involves a little trickery. You can look at Google's source code to get an idea of how to do it, or alternatively Google around to see if someone else came up with a nice looking consistent set of form elements.

I draw the line when it no longer looks exactly the same in every major browser. Usually that involves developing for the least common denominator. If it's a particularly awesome bit of cosmetic goodness I'd consider applying it to the browsers that support it.

If you stick to standards and don't go too crazy you'll see even IE6 will render it properly.

Quote

05-03-2011 , 10:29 PM

#44

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by Gullanian

Why doesn't the 3 col layout work in IE, can you paste the entire code?

http://caniuse.com/#cats=CSS

It's called "CSS3 Multiple Column Layout" toward the bottom of the page. Pink means non-supported.

and the code; site also includes a jQuery solution to the problem:

http://dotmac.rationalmind.net/2011/...uery-and-css3/

Code:

<style type="text/css">
/* Support for Webkit, Mozilla, Opera */
div#multicolumn, .multicolumn {
	-moz-column-count: 3;
	-moz-column-gap: 20px;
	-webkit-column-count: 3;
	-webkit-column-gap: 20px;
	column-count: 3;
	column-gap: 20px;
	width:600px;
}
</style>

There's ways to style the space between columns, and define the actual text-length. I think I added a justify style in my original code as well.

http://www.quirksmode.org/css/multicolumn.html

Code:

div#multicolumn3 {
	[-moz- | -webkit-]column-width: 150px;
	[-moz- | -webkit-]column-rule-color: #cc0000;
	[-moz- | -webkit-]column-rule-style: solid;
	[-moz- | -webkit-]column-rule-width: 10px;

}

Quote

05-03-2011 , 10:57 PM

#45

RML604

old hand

Join Date: Dec 2008 Posts: 1,438

Cross-browser compatibility just depends on how important it is to you. If it's a business website, and you're looking to make money from it, I think it's obviously fairly important to cater to IE users. If you're just making a personal website and don't care as much, then having a semi-gimped IE version is probably fine.

I typically try to shoot for IE7+ compatibility. No chance I'm wasting my time on IE6 if I don't have to, and if I'm making a personal website, I'll simply display a message to any IE6 user that their browser is a POS and they need to upgrade if possible.

Quote

05-05-2011 , 06:25 AM

#46

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by Shoe Lace

Quote:

Originally Posted by Shoe Lace

Got started on this one a little bit earlier.

There was the issue, once again, with the h1 and h2 tags in the hgroup, except this time, ff4 showed up in different sizes.

The code has a bunch of html5 elements for the sake of the extra little challenge. The sizing issue occurred in the <div> section I created. The solution to this problem is easy: just name the size for the h1 and h2 tags. Problem solved so far.

The second issue is found in the div element. For some reason, ff4 renders the div smaller than the article, nav, and section elements. Chrome and Opera doesn't have this problem. For some reason, ff4 renders <div> as 300 x 125 while all the other elements are 300 x 130.

So, I went ahead used the Eric Meyers CSS reset:
http://meyerweb.com/eric/thoughts/20...set-revisited/

And boy oh boy is the web a brand new world. I know I may not have done this challenge correctly since I did use a hack (?), but the webpage views correctly in every browser now. (not really, I use XP, and I am not allowed to download IE9 in it)

Not sure if this was the spirit of the challenge since I used what could be called a hack, but regardless, this sure taught me a lot.

There is one issue with the EM reset: you have to adjust it so that it works correctly and the page views as you would want to render. I'm sort of used to "seeing" the results as I type them in, but this one screws things up. I think that I will learn quite a bit even by examining and adjusting the EM code.

I know that the script is also a hack of sorts, but my javascript has fell too pieces since the last time I used it. Ugh; so much to learn still....

I am working on the cellphone part of it right now. Turns out that the Opera cell phone emulator views media="screen" for its rendering. I'll continue working on this one later. Research teaches me to create max width and and an extra stylesheet for this. I'll go ahead and use the same settings of this stylesheet for media="handheld."

Yeah, it ain't pretty:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> some page </title>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link rel="stylesheet" href="cssreset.css" />

<link rel="stylesheet" media="screen" href="screen.css" />

<link rel="stylesheet" media="handheld" href="mobile.css" />

</style>
</head>

<body>

@media handheld

<header>
<h1> Welcome to the site </h1>
</header>

<nav>
<hgroup>
    <h1> Hello </h1>
    <h2> Thank you for viewing </h2>
</hgroup>
    <p> Site under construction </p>
</nav>

<article>
<hgroup>
    <h1> Hello </h1>
    <h2> Thank you for viewing </h2>
</hgroup>
    <p> Site under construction </p>
</article>

<div>
<hgroup>
    <h1> Hello </h1>
    <h2> Thank you for viewing </h2>
</hgroup>
    <p> Site under construction </p>
</div>

<section>
<hgroup> 
    <h1> Hello </h1>
    <h2> Thank you for viewing </h2>
</hgroup>
    <p> Site under construction </p>
</section>

<article>
<hgroup>
    <h1> Hello </h1>
    <h2> Thank you for viewing </h2>
</hgroup>
    <p> Site under construction </p>
</article>

<div>
<hgroup>
    <h1> Hello </h1>
    <h2> Thank you for viewing </h2>
</hgroup>
    <p> Site under construction </p>
</div>

</body>
</html>

Code:

body
{
width: 960px;
background-color: black;
}

h1
{
font-size: 32px;
}

h2
{
font-size: 24px;
}

header
{
height: 50px;
background-color: blue;
margin: 10px
}

section, nav, div, article
{
width: 290px;
height: 125px;
background-color: blue;
color: white;
margin: 10px;
float: left;
padding: 3px;
}

and the EM:

Code:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define visible focus styles! 
:focus {
    outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Quote

05-05-2011 , 06:27 AM

#47

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by RML604

One day you'll get a job that wants you to optimize for Slim, Amaya, K-meleon, Maxthon, SeaMonkey....

Quote

05-05-2011 , 06:37 AM

#48

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Very interesting article by Eric Meyer on prefixes:

http://www.alistapart.com/articles/prefix-or-posthack/

Quote

05-05-2011 , 06:41 AM

#49

MrWooster

veteran

Join Date: Mar 2007 Posts: 2,984

Might be worth checking out http://html5boilerplate.com/ too. Its a framework for HTML (5) that keeps the code tidy and cross compatible between browsers.