simple answer to a simple problem?

He has: 7 posts

Joined: Dec 2005

ok, so ive NEVER had this problem before, and i dont know why im getting it now... for some reason the tags are not operating in Firefox but they are in IE :/

look at this site please

Notice the gap between the "update" and "welcome" news topics, there is a nice gap between them on IE but FF is just ignoring it... any ideas?

Quote:

Upcoming Featues
Now that the common page structure is finished, i intend to apply some new features
including a JavaScript/css navigation system and the ability to change styles.

Web site launched
Welcome to the new look yabos
web site. Over the last few weeks i have been reading some books which have helped
me develop my design and JavaScript skills, so i thought it was time i updated my web site and
implement some of the features i’ve come across!

If you have an interest in WDD then i strongly recommend the
following titles:

  • The Zen of CSS Design
  • JavaScript in Easy Steps

I have found these books incredibly helpful in so many ways, too many to begin to discuss!

thats the xhtml code right there. and yes i know i should use tags but i couldnt be bothered to go and set a style for them and i was just testing the layout.

NOTE: the tags work fine within the text elemnts, they just dont do theri job between the news posts!!

Busy's picture

He has: 6,151 posts

Joined: May 2001

is actually (has a space)

It appears to be working ok in firefox, can't see a display problem as such, the css is doing what you've told it to

In your code you also have the title tags outside of the head tags and you have list, which isnt a (x)html tag

He has: 7 posts

Joined: Dec 2005

ok thanks for the heads up on the title tag (doh)

the doesnt make any diff with the space, i tried that already. and there is a diff in FF u just havent noticed it thyere is spacing between the two news items (welcome and update) but its only a few fixels, if you look on IE there is a larger gap between the two, thats how i WANT it to look on FF.

Btw what should i use instead of ??? i only just started learning xhtml so im still quite new to the differences.

Busy's picture

He has: 6,151 posts

Joined: May 2001

    = unordered list
      = ordered list
      so no need for or anything

      The gap before the ending slash does make a difference, and are different, older browsers will ignore the slash if there is a space, will guess it without.
      As you are using XHTML Strict you must be spot on, I'd suggest you use transitional until you fimilarise yourself a bit more, doc tag is:

      Looking at your code, it wouldn't validate anyway, working from the bottom you've missed the slashes in the image tags (shoule be )
      you have an empty span tag between a heading tag ..) ok you have a few of those h2 and h3.
      your javascript needs to be lower case, things like onMouseOver needs to be onmouseover
      you're using 'import' which will only work on newer browser, so older browser will get the defaults of everything, ideally you need another stylesheet or just make one standard one for all browsers.

      you must have a really big screen cause Your tabs are half way across the page at 800x600 and is a mission trying to work out your code.

      Your spacing problem has to do with your CSS, with you using a wide screen it would take me forever to work out your classes and placing and nesting of things, sorry I don't have that much time to spare at the moment. Hopefully someone else can help, otherwise I'll take another look when I can.

He has: 7 posts

Joined: Dec 2005

ok, thanks for your help.

1. i would rather just keep using strict as i will never learn unless i make mistakes Smiling

2. Mistakes in the tags are my bad, just not double checking them properly lol

3. wide screen? i have a 17" monitor on 1024x768, i tab in 4 times for CSS maybe 5 if my classes get too long.

4. onMouseOver and onClick is the way i used out of a book, its also they way we were tought in Uni, maybe that is an old standard or something, the command still works so its not a problem. Also with @import we are told this is the preferred way to link stylesheets at Uni. Maybe standards are changing Smiling

5. Empty span WAS for a text/replace image but then had to remove, forgot to remove the span Sticking out tongue i only started making the site yesterday evening and it isnt finished, i was only looking for an answer to the problem.

Thanks for pointing out the errors though mate, and thanks for all the other info.

Busy's picture

He has: 6,151 posts

Joined: May 2001

Books and Uni are like learning from a Frontpage tutorial, both usually very outdated with lots of mistakes.
Number one for XHTML, all tags and attributes MUST be in lowercase
Making mistakes is the best way to learn, as you do learn, you also learn (most of the time) why it happened. Is good to know what,where,why and how. But Strict does have very tight limits, not true limits as strict, trans and frameset require different techniques - not all suitable for everything, transitional give syou a greater learning curve as you can experiment a lot more instead of being stuck behind very strict rules. (no pun)

Tabbing is not always good, especially if you transfer to programming as tabs will get you in trouble - your choice thou.

w3c.org is where to want to go for reference.

No need for the thanks, it's good to see you wanting to learn the proper way straight off - you'll go far Smiling

He has: 7 posts

Joined: Dec 2005

Thanks for the comments matey Smiling

just to let you know the books i read were:

JavaScript (in easy steps) by: Mike McGrath (published 2003)
The Zen of CSS Design by Shea & Holzschlag (published 2005)

Not very old books.

JeevesBond's picture

He has: 3,956 posts

Joined: Jun 2002

You need to remove
float:left;' from #news'

So:

#news {background-color:#000000;
float:left;
margin:0px;
width:287px;
border:dashed 1px #333333;
padding:10px;
padding-top:3px;
font-size:10px;
font-weight:normal;
text-align:justify;}
'
... becomes:
#news {
margin:0px;
width:287px;
border:dashed 1px #333333;
padding:10px;
padding-top:3px;
font-size:10px;
font-weight:normal;
text-align:justify;
}
'

The problem wasn't with FF, it was with the float, Opera surmised the same and if O says something it must be true. Smiling

Less tab action is optional, but recommended. I had problems reading that code too. Am hoping it wasn't Molly (the Holzschlag part of that book) who told you to do all that tabbing, don't listen, she's really rather pretentious.

a Padded Cell our articles site!

He has: 7 posts

Joined: Dec 2005

is it just me, or are most supposed "experts" own web sites, horrible?

useit.com anyone?

Busy's picture

He has: 6,151 posts

Joined: May 2001

It's not just you, a lot of the 'experts' sites look like they were done by kids at day care.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.