attempting Xhtml and css formating

@motherandmoreApr 04.2006

Hi there,

I have designed this site, ~~[URL=http://www.mygenesisonline.com/chase]~~Chase Pullan Foundation[/URL] and it’s very graphic-y but I’m happy with the appearance.

In trying to use more xhtml and css, I’m adjusting code here and there and running into trouble. Just from closing all img, p and br tags with />, it’s adding top and bottom margins to many areas. Yes, this is still in a table format…one step at a time.

I can fix the problem by removing the xhtml stuff but I really want to learn how to implement it.

Any direction? Klda or Kdla, are you there?

Thanks in advance, Missy

to post a comment

HTML

18 Comments(s) _↴

@GarySApr 04.2006 — #Welcome to XHTML!

While <img> and <hr> need to be "self-closed" for XHTML, this isn't appropriate for <p> tags: these are expected to [B]contain[/B] something:

[CODE]<p>here is the paragraph</p>[/CODE]

To take an example piece of code from the website you're working on...

[CODE]<p />
 <a href="help.html" onmouseover="document.help.src='helpon.gif'" onmouseout="document.help.src='help.gif'">
 <img src="help.gif" name="help" width="163" height="22" alt="How You Can Help" border="0" />
 </a>[/CODE]

... the "p" has been closed "before it has started". Here's how I think it should look:

[CODE]<p>
 <a href="help.html" onmouseover="document.help.src='helpon.gif'" onmouseout="document.help.src='help.gif'">
 <img src="help.gif" name="help" width="163" height="22" alt="How You Can Help" border="0" />
 </a>
 </p>[/CODE]

Hope that helps!

@motherandmoreauthorApr 04.2006 — #Oh wow, I didn't know that! I've been reading so much, but obviously missed that.

I've been using the p tag for a big line break, not for a paragraph of certain format.

Thanks so much, I'm going to go fix my homepage and move on to the other pages.

Oh, and thanks for the welcome, Missy

@motherandmoreauthorApr 04.2006 — #oh darn!

I got rid of the closing p tags but still have the problem...arghhh.

Any more ideas?

Missy

@GarySApr 04.2006 — #Without seeing the "before" version, it's hard to tell where you're getting unwanted spaces. But before getting to specifics, I have another recommendation for you:

[INDENT]Validate your page[/INDENT]

There are a couple of online validating services - such as http://validator.w3.org/

Get the code valid [B]first[/B], and [B]then[/B] fix the layout.

A huge amount of time can be wasted if you try to do it the other way around.

(BTW, I wrote an article on converting a web page from HTML to XHTML, wi the help of a validator. Might be worth a look at some point: http://www.brainboxweb.co.uk/articles/html-to-xml)

@GarySApr 04.2006 — #When you post again, could you give an example of exactly where you're seeing unwanted space. Thanks.

@motherandmoreauthorApr 04.2006 — #Validating...yep, thanks for bring that up! That has got to be the most annoying little creation in my world! I'm totally into the challenge...but oh, does my family suffer for it! But you have an article? Super thanks so much...I'll get to that asap.

Ok, the bad version was good for a while...that's when you probably saw it, Gary. Sorry..

Bad version with beginnings of xhtml is at [URL=http://www.mygenesisonline.com/chase]my site[/URL] btw, its bad in IE, not firefox

Good version of how it should look but no xhtml is at [URL=http://www.chasepullanfoundation.org]Chase Pullan Foundation, its new home![/URL]

You'll see extra light green background above and below images.

Thanks so much, Missy

@GarySApr 05.2006 — #I've had a play with the page. I started by following my own advice and sent it through the validator. Needed to add a couple of things to the top of the page to let the validator know what it was dealing with:

[code=html]<!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" lang="en" xml:lang= "en">
 
 <head>
 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <meta http-equiv="Content-Language" content="en" />[/code]

I then just went through, mechanical monkey fashion, correcting the (X)HTML errors until I ended up with a clean sheet.

At that point it was (as I suspected it would be) almost perfect, with just the gap at the very bottom remaining. Changing this:

[code=html]<img src="genesisbar.jpg" width="844" height="40" border="0" alt="Website Creation donated by GENESISonLine to support families effected by cancer" />
 </a>[/code]

... to this (i.e., just removing the line break)...

[code=html]<img src="genesisbar.jpg" width="844" height="40" border="0" alt="Website Creation donated by GENESISonLine to support families effected by cancer" /></a>[/code]

fixed it.

* * * * * *

If you like, I'll post the code for the whole page... but I recommend that you go through the validating process yourself.

@motherandmoreauthorApr 05.2006 — #Guess what I did?

[B]I got my first ever....validated page![/B] WOOOHOOOO!

I hope I can find all that head info you gave me back at the w3schools...I don't know nutt'n 'bout that.

Question 1: Instead of border color, I used something from Klda to another needing person awhile back: style="border: 3px solid #3f4f32;" is that correct to be used there?

Question 2: Should I always close </a> on the same line as the rest of the a code...I didn't think it mattered until now.

Question 3: Have you seen the page of IE? It's still has extra light green below images. How do I get rid of it?

I can't believe you went through my whole page...thank you so much, Gary!

Missy

@GarySApr 05.2006 — #Delighted that you've gone down the "valid code" route: I guarantee it will save you a ton of time in the long run. You should already have peace of mind: whatever is wrong with your page now has...

... nothing to do with moving from [B]HTML to XHTML[/B]...

... and nothing to do with [B]invalid code[/B].

* * * * * *

Your CSS declaration...

[code=html]style="border: 3px solid #3f4f32;" [/code]

... is perfect.

* * * * *

The <a ... >...</a> is a bit of a GOTCHA (hope that translates!). As you said it usually doesn't matter too much how you lay out you HTML code. But in the example from the bottom of your code that I used previously, there's a subtle difference about what's "in the link." Is it:

(a) an image, or

(b) an image... and perhaps a line-break... maybe a spot of white space.

In this particular case, your image is the same width as the table cell... so any "extra stuff" in the link is in danger of... breaking things.

And talking of table cells, that's another place where you have to watch out for line-breaks and whitespace.

Here's you last table row again:

[code=html]<tr><td colspan="2">
 <a href="http://www.mygenesisonline.com">
 <img src="genesisbar.jpg" width="844" height="40" border="0" alt="Website Creation donated by GENESISonLine to support families effected by cancer" /></a>
 </td></tr>[/code]

This has a couple of line breaks that are likely to cause problems. To be on the safe side, take out all the line breaks/whitespace in both the cell (td) and the link:

[code=html]<tr><td colspan="2"><a href="http://www.mygenesisonline.com"><img src="genesisbar.jpg" width="844" height="40" border="0" alt="Website Creation donated by GENESISonLine to support families effected by cancer" /></a></td></tr>[/code]

... and you should find the IE gets it right.

Repeat for any other cell that's completely filled with an image, and you should be left with a perfect page.

Good luck!

@motherandmoreauthorApr 05.2006 — #Yep, you were right about those breaks! It looks fine in IE now...

AND...I now have 2 validated pages!!!

but, I have another question:

in html, I had table borders green for tr, td also, not just outside border. they are showing white inside the table since I've changed to xhtml, the code for the border is:

<table width="842px" border="1" cellpadding="0" cellspacing="0" bgcolor="#6e8e59">

If I take out ...border="1"...then there is no distinction between cells, which I do want.

So, here is the question, finally, can I make those inner border lines green?

Yikes, one more ?...since I got rid of the <p> between my buttons, how can I set the size between to be bigger angain...right now it's only <br> and it's not a big enough size...earlier I put in two <br> together and it was fine in firefox but way too long in IE...I suppose this needs to be set in css.?

thanks a bazillion, Missy :p

@GarySApr 05.2006 — #Yes - it's time for you to jump into CSS with both feet.

Starting with this one...

<table width="842px" border="1" cellpadding="0" cellspacing="0" bgcolor="#6e8e59">

You could remove most of this and tidy what's left:

[code=html]<table style="width:842px">[/code]

Add the details back into your stylesheet:

[code=html]table{
 border: 1px solid #465a39;
 background: none #6e8e59 
 }[/code]

We're not quite there yet, as "border=1" used to apply a border to table and the cells. So we need to add the border back to the cells. And we need to replace the "cellpadding" which we do via '"padding":

[code=html]table{
 border: 1px solid #465a39;
 background: none #6e8e59 
 }
 td{
 border: 1px solid #465a39;
 padding: 0
 }
 [/code]

Still not quite there. At this point there are a couple of ways you can go... depending upon the kind of look you want. I usually like to suck all of the air out from between the cells... which you would do with border-collapse:

[code=html]table{
 border: 1px solid #465a39;
 background: none #6e8e59;
 border-collapse: collapse;
 }
 td{border: 1px solid #465a39;
 padding: 0}
 [/code]

But that's moving a bit away from your original design, so keeping the cells apart may be preferable. I'm on slightly shaky ground here, as this isn't something I've played with very often. In theory, something like this would do the trick:

[code=html]table{
 border: 1px solid #465a39;
 background: none #6e8e59;
 [COLOR=Red]border-spacing: 1px;[/COLOR]
 }
 td{border: 1px solid #465a39;
 padding: 0}
 [/code]

If you get to this point, your page should look something like your "good" version... though you'll need to play with the width of the td elements to get it spot on.

* * * * * * * * * * * * * * * * * *

On to your navigation list.

CSS purists (and I'm close to being one) will tell you never to use <p> and <br> for "presentation purposes". Your buttons are a list, and I'm going to suggest that you mark them up as such. But I'm going to save you a whole world of pain by suggesting a definition list, rather that the usual <ul> list. The mark up is much the same, though:

[code=html]<dl>
 <dd>item1</dd>
 <dd>item2</dd>
 </dl>[/code]

Here it is for you page:

[code=html]<tr><td  valign="top">
 <dl>
 <dd><a href="story.html"onmouseover="document.story.src='storyon.gif'"
 onmouseout="document.story.src='story.gif'"><img src="story.gif" name="story" width="163"
 height="22"alt="Our Story" border="0" /></a>
 </dd>
 <dd><a href="support.html" onmouseover="document.support.src='supporton.gif'"
 onmouseout="document.support.src='support.gif'"><img src="support.gif" name="support" width="163"
 height="44" alt="Services Available to Help Families" border="0" /></a>
 </dd>
 <dd>
 <a href="help.html" onmouseover="document.help.src='helpon.gif'"
 onmouseout="document.help.src='help.gif'"><img src="help.gif" name="help" width="163" 
 height="22"  alt="How You Can Help" border="0" /></a>
 </dd>
 <dd>
 <a href="calendar.html" onmouseover="document.calendar.src='calendaron.gif'" 
 onmouseout="document.calendar.src='calendar.gif'"><img src="calendar.gif" name="calendar" width="163" 
 height="22" alt="Calendar" border="0" /></a>
 </dd>
 <dd>
 <a href="links.html" onmouseover="document.links.src='linkson.gif'"
 onmouseout="document.links.src='links.gif'"><img src="links.gif" name="links" width="163"
 height="22" alt="Helpful Links" border="0" /></a>
 </dd>
 <dd>
 <a href="contact.html" onmouseover="document.contact.src='contacton.gif'"
 onmouseout="document.contact.src='contact.gif'"><img src="contact.gif" name="contact" width="163" 

 height="22" alt="Contact Us" border="0" /></a>
 </dd>
 <dd>
 <a href="index.html" onmouseover="document.home.src='homeon.gif'"
 onmouseout="document.home.src='home.gif'"><img src="home.gif" name="home" width="163" 
 height="22" alt="Homepage" border="0" /></a>
 </dd>
 </dl>[/code]

If you do that, your page will look... a bit messy. CSS to the rescue. When working with <dl> lists, a good place to start is to remove all margins and padding:

[code=html]dl{
 margin:0;
 padding:0
 
 } 
 dd{
 margin:0;
 padding:0
 }	[/code]

We're tidy again, but things are squished. But now you have the power to add back spacing... in a way that browsers are likely to treat in a consistent way. It also gives you more control: you can add in space at the top, the bottom and between the elements separately. For example:

[code=html]dl{
 margin:0 0 30px 0;
 padding:0
 
 } 
 dd{
 margin:15px 0 0 0;
 padding:0
 }	[/code]

* * * * *

A quick disclaimer to finish. The way I've used CSS here assumes that all [B]tables[/B], all [B]td[/B]s, all [B]dl[/B]s and all [B]dd[/B]s are to be formated in the same way. This won't always be the case, and that's where classes and the like come in....

... but that's another story...

@motherandmoreauthorApr 05.2006 — #Holy Cow!!!! :eek: :eek: :eek:

that's a lot of stuff...thanks so much for going to the effort!

I'm getting to it all but just wanted to let you know, that all of my pages now validate!!! It's so lovely to see the green from the validator!

sigh, okay, stepping both feet into css now.

Wish me luck, Missy :rolleyes:

@motherandmoreauthorApr 05.2006 — #Ah, :o

almost done...one more thing...

the "navingation bar" makes verticle lines on the right side when moused over

any idea why or what to do about it?

can you believe it? validated and css all in one day! but I am not totally in the clouds, I realise I still have a table format...not looked upon well by most here at web developer.com :rolleyes:

so what do you think of the site?

Missy

@GarySApr 05.2006 — #This will be a quick post - it's late where I am!

Haven't got to the bottom of the vertical line: seems to be Firefox only, and only with JavaScript enabled. (Did get as far as discovering that adding [B]style="padding: 1px"[/B] to the td that contains the navigation stops it happening... but it's not a very clever solution.)

* * * * * * *

A couple of [B]<nav>[/B]s have turned up. These will invalidate your code... and the browsers won't know what to do with them.

(It is possible to give other elements the [I]class [/I]of "nav." More on this another day... )

* * * * * * *

Like your site design... and forgive you the table-based layout. As I've said before, I'm 95% purist... but there are times when a table layout will get you more predeictable results.

The website's [I]content [/I]is heartbreaking... and inspiring at the same time.

* * * * *

I'll sign off for today. G

@motherandmoreauthorApr 06.2006 — #I was playing with the navs to try to get some things to work a different way....it didn't work but following your info did...so I do think the navs are gone now...the code still validates but I've moved all the good stuff over to the real address now at www.chasepullanfoundation.org.

You've been so great to help...I really appreciate you.

btw, this may be totally stupid, but do you all really watch British comedies or is that just us Americans? I recently saw with with Hugh (can't remember his last name) where he has a butler named Jeeves. I laughed so hard...it's Dr. House from the fox show, "house". I love him, think he's hilarious and so over the top...to hear his British accent was so fun.

Missy

@motherandmoreauthorApr 06.2006 — #sorry, posted double

@GarySApr 06.2006 — #Yes - I've been watching Hugh Lawrie since 84 in all kinds of comedy roles (though I missed Jeeves first time around). When I first saw House I was blown away: (a) when did he become a "serious" actor, (b) when did he move to the US, and (c) when di he hurt his leg ( - kidding) !

********

Better finish with a spot of HTML ... just in case anyone is moderating.

You're using scrolling windows (actually a scrolling div) on the site. I'll leave aside arguments about whether this is "a good thing".... and focus on a CSS refinement you could add.

At present you have this in your CSS file:

[code=html]div {	margin: 15px;
 overflow: scroll;
 height: 417px;
 text-align: left;
 }[/code]

You could go one better by changing the overflow line to:

[code=html]
  overflow-y: scroll;
 [/code]

That will get rid of the horizontal scroll bars. You could take it one stage further and have the veritical scroll bars appear [I]only when necessary[/I]:

[code=html]
  overflow-y: auto;
 [/code]

* * * * * * *

I have mentioned before that your CSS "declarations" currently apply to [B]all[/B] tables and [B]all[/B] tds. Similarly, the above declaration will apply to [B]all[/B] divs.

You soon going to find this very limiting. You get around this limitation by adding a class (or an id... but I'll leave that particular complication aside for now...) to the element.

The other day when you added a <nav> here and there, you could have (correctly) added this:

[code=html]<div class="nav"> ... </div>[/code]

... and then styled it in your CSS file like this:

[code=html].nav {
 margin: 4px
 padding: 1px
 }
 [/code]

Coming back to your styling of DIV...

[code=html]div {	margin: 15px;
 overflow: scroll;
 height: 417px;
 text-align: left;
 }[/code]

... I'd recommend that you give your div a class name in the HTML:

[code=html]<div class="main">....[/code]

.... and then change the CSS to

[code=html].main {	margin: 15px;
 overflow: scroll;
 height: 417px;
 text-align: left;
 }[/code]

You're now free to use div - a very handy item indeed - in other places... without being tied to any "global" div styling.

@motherandmoreauthorApr 06.2006 — #Oh so cool...I was wondering about that horizontal scrollbar and such...wow, there's so much to learn!!!

hmmm, the class and whatever # is for are very confusing to me. I have been using my book, Elizabeth Castro's, HTML for the www, 5th ed. with xhtml and css. It's just not specific enough in css for me, I think. I'm having better luck at the w3c schools (and here, of course).

But, this site is up and I'm quite happy with it...had to change some form coding to help it validate...so I'm going to go check on that now.

But, I'm quite please with it.

Thank you so much!!!

Missy

Also in #HTML _↴

quicktime problem Want Iframes to work with Netscape secure form problems

Success!

Help @motherandmore spread the word by sharing this article on Twitter...

Tweet This

attempting Xhtml and css formating

18 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

attempting Xhtml and css formating

18 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #HTML _↴