CSS & XHTML bugs

Started by Pokedragonfire July 7th, 2004 11:04 AM
  • 604 views
  • 8 replies

Pokedragonfire

ph34r |\/|y 1337 n1nj4 5k1||z

Age 20
Squark.
Seen June 18th, 2008
Posted July 6th, 2007
1,097 posts
19.1 Years
Okay, ignore all the broken images. (Attached page saved as html file) Can anyone get the text box thing next to the table? More info in attached image. Please don't use a table, use CSS to align it. Thanks :)
:t038::t037:
USA
Seen March 5th, 2011
Posted February 7th, 2011
721 posts
19.7 Years
Okay, ignore all the broken images. (Attached page saved as html file) Can anyone get the text box thing next to the table? More info in attached image. Please don't use a table, use CSS to align it. Thanks :)
That isn't well coded and fails to properly seperate presentation from content. I recoded it for you. It took me an hour to do because of 3 reasons:
  1. Typing the comments (you'll see when you look at the html/css) took a good deal of time.
  2. I went to see a movie before I finshed coding it.
  3. I had to troubleshoot why some code didn't work. I found out that I mistakenly used #navbar (I use it on PFU) instead of #nav

I've attached the improved file. It is a bit sloppy (no padding) but it is certainly an improvement.

And no, this doesn't mean that I'm back to stay. I'm here because I wanted to compare something between my forums and another pokemon vBulletin and your thread caught my eye.
Try out Sabayon Linux today.

Pokedragonfire

ph34r |\/|y 1337 n1nj4 5k1||z

Age 20
Squark.
Seen June 18th, 2008
Posted July 6th, 2007
1,097 posts
19.1 Years
That isn't well coded and fails to properly seperate presentation from content. I recoded it for you. It took me an hour to do because of 3 reasons:
  1. Typing the comments (you'll see when you look at the html/css) took a good deal of time.
  2. I went to see a movie before I finshed coding it.
  3. I had to troubleshoot why some code didn't work. I found out that I mistakenly used #navbar (I use it on PFU) instead of #nav
I've attached the improved file. It is a bit sloppy (no padding) but it is certainly an improvement.

And no, this doesn't mean that I'm back to stay. I'm here because I wanted to compare something between my forums and another pokemon vBulletin and your thread caught my eye.
Wow, thank you! I'm a bit new at (X)HTML and CSS, and can't code well at all yet. (Unfortunatly, a small bit of it I copied but chaged a lot of the copied part, but forgot to add all the quotes and /'s) This is my first webpage with the CSS code and XHTML instead of HTML. I can't see the top banner though, although I know you couldn't either, but I could before. Ahh, you don't have to fix that, you've done enough, and I need learn it better myself. Thanks a lot! You have helped me a lot :) I greatly appreciate it.
:t038::t037:
USA
Seen March 5th, 2011
Posted February 7th, 2011
721 posts
19.7 Years
Wow, thank you! I'm a bit new at (X)HTML and CSS, and can't code well at all yet. (Unfortunatly, a small bit of it I copied but chaged a lot of the copied part, but forgot to add all the quotes and /'s) This is my first webpage with the CSS code and XHTML instead of HTML. I can't see the top banner though, although I know you couldn't either, but I could before. Ahh, you don't have to fix that, you've done enough, and I need learn it better myself. Thanks a lot! You have helped me a lot :) I greatly appreciate it.
Your welcome. Also two more things, you'll want to add margin-top: 0; to dl#nav to fix a margin that Firefox adds to dl and add alt attributes (with a short description of the image) to your images so anyone with images turned off knows what the images are about. And as I said in the comments, title attributes are for when you want hover text, not alt attributes (only IE displays alt attributes as hover text and it isn't supposed to). I was showing the HTML to a friend and we came up with those two issues with my revision of your code, sorry about that.

By the way, the top banner is defined in the CSS.
Try out Sabayon Linux today.

Pokedragonfire

ph34r |\/|y 1337 n1nj4 5k1||z

Age 20
Squark.
Seen June 18th, 2008
Posted July 6th, 2007
1,097 posts
19.1 Years
I know it is in CSS but for some reason it doesn't appear! I added a bunch of comments in the head. I uploaded it with pictures (not the actual pictures, just some white spaces to fill up the area) If anyone can fix it, I can finally start making the other pages and style sheets! :)
The Page
Image of sort of what it should look like
:t038::t037:
USA
Seen March 5th, 2011
Posted February 7th, 2011
721 posts
19.7 Years
I know it is in CSS but for some reason it doesn't appear! I added a bunch of comments in the head. I uploaded it with pictures (not the actual pictures, just some white spaces to fill up the area) If anyone can fix it, I can finally start making the other pages and style sheets! :)
The Page
Image of sort of what it should look like
Try replacing this:

#banner{
background: #000000 url("topbanner.gif"); no-repeat fixed center;
}

With this:

#banner{
background: inherit url(topbanner.gif); no-repeat fixed center;
}

By the way, if you need more room, you will want to adjust the "top" position property in both #content and dl#nav. Additionally, I think I should introduce you to a bunch of validators:

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

And specifications:

http://www.w3.org/TR/xhtml1/
http://www.w3.org/TR/html4/ - xhtml is based off this; you might need it for reference purposes
http://www.w3.org/TR/CSS1/
http://www.w3.org/TR/CSS21/

The validators should be a huge help.
Try out Sabayon Linux today.

Pokedragonfire

ph34r |\/|y 1337 n1nj4 5k1||z

Age 20
Squark.
Seen June 18th, 2008
Posted July 6th, 2007
1,097 posts
19.1 Years
Thanks a lot, I will fix it with the validators. The CSS validator says that I have to validate my XHTML code, and I did and fixed everything, then it still said I had to validate my code again. Also, when I tried using the upload CSS file, it can't do HTML and CSS in the same file. And then when I tried putting it in manually, the button did nothing when I hit it. So I can't validate the CSS -_- I don't know what I'm doing wrong.
:t038::t037:
USA
Seen March 5th, 2011
Posted February 7th, 2011
721 posts
19.7 Years
There might be a bug in the CSS Validator (I've already encountered one). Try changing this:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

To this:

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" />

Also, you might want to rearrange your header so that the meta tags are at the bottom of the header. It is just a personal preference but it might be what is messing up the validator.

By the way, you don't have to point the CSS validator to the XHTML page. You can place your CSS in an external file and point the validator at that. You can check my site's XHTML for an example:

http://www.pokemonfanuniverse.com/
Try out Sabayon Linux today.