21 replies [Last post]
tgolden
Offline
Regular
Last seen: 12 years 1 week ago
Timezone: GMT-5
Joined: 2005-10-08
Posts: 44
Points: 0

Validation Errors -

I ran my test page through a validator and it came back with a few errors but they are all related to one or two lines of code. I don't really get what the problem is (although i don't understand exactly how i got the things to work either). Do you have any suggestions?

I'm still trying to figure out how to give my featured cards a margin on the right....i've gotten it to work sucessfully but in IE i now have these gaps!

http://www.blacksoxfan.com/ted.php

Thanks,
Ted

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 4 years 48 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Do my validation errors have anything to do with css?

Some of your errors relate to having & instead of & in your URLs. You're missing a / from the end of some of your images. And I'm guessing that it doesn't like the spaces in description=1912 T207 Golden.
By the way, you spelt your URL wrong. Wink
Also, is anyone else finding the validator really slow of late, or is it just me? :?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

tgolden
Offline
Regular
Last seen: 12 years 1 week ago
Timezone: GMT-5
Joined: 2005-10-08
Posts: 44
Points: 0

Do my validation errors have anything to do with css?

woo hoo...fixed those... so now i just have 2 more questions......

1. I understand it's a BUG in ie that's pushing my menu bar down and my wrapper out to the right (in other words: giving me spaces that shouldn't be there) but can someone explain that to me a little bit better because i don't understand how to fix those problems.... also..

2. Lastly, the #container has a #text section and a #featured section. If i don't set the height on the featured section it cuts off the background...so fine, i set that at 250 px, but! if i add text to the #text section it would seem that once that section is taller than 250px ... the text wraps under the featured and does screwey things..... that would make me think it has something to do with floating...am i correct in that assumption. Is the best way then to make these not do screwey things is to add a #bottom section that would simply run the length of the container underneath the two sections? Hope that makes sense, thanks for all your help.
Thanks for all your help!!!!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 28 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Do my validation errors have anything to do with css?

eewwwww - I hate when IE pusses things up Shock

For question 1 I don't have IE here, so I can't diagnose the problem. Sorry.
But for question 2, the test wrapping under the float is normal behavior. To avoid that simply put a right margin on the #text equal to the #featured column width (or add a little to push away from it).

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 10 years 26 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

Do my validation errors have anything to do with css?

Quote:
Also, is anyone else finding the validator really slow of late, or is it just me?

Yes, over the last week the validator has been very slow for me too.

- r

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 51 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Do my validation errors have anything to do with css?

IE isn't strict about width and height when overflow is visible its default. A number of your divs total width is greater than the 710px of #frame. IE simply pushes out #frame to make it wider, leaving the gap you see at the right.

#new and #text are two divs which sum to more than 710. There may be others.

fyi - you don't necessarily have to specify the width of a block element when you want it to occupy the full width available. The automatic behaviour of a block element is to do just that. Removing the width from some elements would mean things like your #bottom_menu would fill the extra space and the problem with IE wouldn't necessarily be so noticeable.

tgolden
Offline
Regular
Last seen: 12 years 1 week ago
Timezone: GMT-5
Joined: 2005-10-08
Posts: 44
Points: 0

Do my validation errors have anything to do with css?

Chris..S wrote:

#new and #text are two divs which sum to more than 710. There may be others.

Okay ... so.. i hid the overflow in the frameset and it fixed the pushing out to the right... but that doesn't mean i really understand what overflow:hidden means. I kind of get it...but not really. I tried to use that in various places to fix the gap between the menu and the image on top but that hasn't worked yet. At least for now i removed it. Can't figure out why?

As for the text and new divs exceeding 710 ... they sit on top of each other so why should it matter? Also they are in seperate containers. I looked at #text & #features and they don't seem to exceed 710... i'm using negative margines and such, but they seem fine. The same is the case with #news and #thread. Although i have not put any content into thread yet...i just can't figure out the math that makes this too big! Thanks for your time chris.

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 13 years 49 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Do my validation errors have anything to do with css?

I'm no expert, but I can answer one thing, at least. When you set something to overflow: hidden, it will make anything that doesn't fit within whatever bounds you specify just vanish. For a simple test, try this:

(html snippet)

<p class="snip">This paragraph is gonna be pretty long. I mean, look at it... Going on, and on, and on. It certainly does have a tendency to ramble. So many words and so little to say. I guess this is what's meant when one uses the word "content" loosely.</p>

and apply this style:

(css snippet)

.snip
{
     overflow: hidden;
     width: 10em;
     height: 2em;
}

Now, I haven't tested this, but if I did it right, that paragraph, when constrained to 10em width, will be taller than 2em. With overflow: hidden, the stuff that would stick out the bottom (if it were overflow: visible, which is the default) is just gone. You could also experiment with overflow: scroll, which would make a scroll-bar for your example paragraph.

I'm not sure that it's directly pertinent to your page, specifically, but I hope that clears up overflow: hidden, anyway. Cheers.

->Day<-

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 45 weeks 4 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Do my validation errors have anything to do with css?

tgolden wrote:
Chris..S wrote:
I tried to use that in various places to fix the gap between the menu and the image on top but that hasn't worked yet. At least for now i removed it. Can't figure out why?

Normally, IE misbehaves when squeezing images in and adding display:block tends to fix extra white space caused.

Trevor

tgolden
Offline
Regular
Last seen: 12 years 1 week ago
Timezone: GMT-5
Joined: 2005-10-08
Posts: 44
Points: 0

Do my validation errors have anything to do with css?

okay so what's the difference between display block and overflow: hidden also, overflow:hidden; has solved the border on the right but i can't for the life of me figure out the gap above my menu. Not to mention, i used tried both overflow and display in the #frame set and only overflow worked.

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 13 years 49 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Do my validation errors have anything to do with css?

Display: block means something should be displayed as a block (as opposed to in-line). It doesn't mean block it from being displayed. Display: hidden or display: none(?) does that, I think.

->Day<-

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 45 weeks 4 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Do my validation errors have anything to do with css?

Hi

You know, I'm not one of those folks who often ask WHY something works, just that it does, and often IE puts a bit of padding under an image that is tucked (not as a background) into a div that has no other content and is exactly the right height (except that IE treats height as 'make it this height unless you feel like making it bigger Laughing out loud ).

But I THINK that display:block sort of takes the element out of the flow a bit a lets other bits sit beside it instead of under it (like horizontal menus).

It's worth familiarising yourself with IE 'features' by going over to www.positioniseverything.com and looking through the laughable list. So, as others often say here, design for Firefox, look at it in IE, spot the bugs and fix them. Often, a common base css file is a good idea. For instance, this is my default code for a page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>New document</title>
<style type="text/css" media="all">
html,body,p,div,img,h1,h2,h3,h4,li,ul,dl,dd,dt,form,table,td,tr{
/*** Let's go commando ***/
  margin:0;
  padding:0;
  border:0;
  border-collapse:0;
  border-spacing:0;
}
input,select{
  margin:0;
  padding:0;
}
body{
  font-family:verdana,arial,sans-serif;
  font-size:76%; /*** Note: see http://www.thenoodleincident.com/ style the rest of font sizes in ems ***/
}
.clear{
  clear:both;
/*** these next attributes are designed to keep the div
height to 1 pixel high, critical for Safari and Netscape 7 ***/
  height:1px;
  overflow:hidden;
  line-height:1%;
  font-size:0px;
}
/* \*/* html .clear{height:auto} /*** a fix for IE Win ***/
</style>
</head>

<body>



</body>
</html>

tgolden
Offline
Regular
Last seen: 12 years 1 week ago
Timezone: GMT-5
Joined: 2005-10-08
Posts: 44
Points: 0

Do my validation errors have anything to do with css?

okay so what do i do to get rid of the gap between the menu and the image on the top ....

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 45 weeks 4 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Do my validation errors have anything to do with css?

tgolden wrote:
okay so what do i do to get rid of the gap between the menu and the image on the top ....

Hi

Well, I will step you through the process of investigation.

First, the problem is in IE, so it is probably a bug.

Second, whitespace is usually caused by an overflow problem, a float or an inline (not as a background) image taking up too much space. The former is fixed by overflow:hidden, the latter by display:block.

The image is in the background in the css, so it must be an element overflowing.

The problem is the menu is too low, so the element before it is the problem.

You have a defintion list immediately before it, so common sense says this is likely the problem. So, delete the content of the dl (ie all the dd's and the dt. No gap. OK, put an empty dd in. Problem back.

Must be the dl then, but only when it has content.

Try all sorts of things. I know, make the dl float left.

Ah.

Trevor

tgolden
Offline
Regular
Last seen: 12 years 1 week ago
Timezone: GMT-5
Joined: 2005-10-08
Posts: 44
Points: 0

Do my validation errors have anything to do with css?

ClevaTreva wrote:

The image is in the background in the css, so it must be an element overflowing.

The problem is the menu is too low, so the element before it is the problem.

You have a defintion list immediately before it, so common sense says this is likely the problem. So, delete the content of the dl (ie all the dd's and the dt. No gap. OK, put an empty dd in. Problem back.

Must be the dl then, but only when it has content.

Try all sorts of things. I know, make the dl float left.

Ah.

Trevor

wow trevor, you are good.... now in the attempt at understanding...

a. I think i had figured out it was a bug... as it viewed in IE...
b.
What exactly is overflow...my understanding would be if you had an image or content that is 800 pix wide but is only allowed 700 pix in the code...but then that wouldn't make sense b/c it wouldn't display correctly in IE I definitely figured out that the code was before the menu bar (although my rational might have been incorrect)...

but here's where i'm totally lost...
if floats can cause the problem...why would float fix the problem?

Anyone else see a bug in my code.... boy this stuff is fun.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 45 weeks 4 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Do my validation errors have anything to do with css?

tgolden wrote:
What exactly is overflow...if floats can cause the problem...why would float fix the problem?quote]

Hi

Overflow is not a problem except in IE.

Why? Coz MS are daft. For example. Height:170px in Firefox means make this 170px high. If there is more, lose it. That's why the standards also has min-height.

But IE doesn't recognise min-height (neither did Safari until recently). And as for height. The same height:170px means to IE make it any height you like as long as it is no smaller than 170px, you can make it bigger even if there is no additional need for it.

Width isn't quite the same.

Why would float fix it? Dunno. I suppose if I thought about it I would figure it out. But why SHOULD anything about IE make sense?

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 45 weeks 4 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Do my validation errors have anything to do with css?

Oh, and BTW, be VERY careful about using italic text, as IE lets it overflow outside its container.

You would need code like this to fix this bug (add the class to whatever is in italics) (you need the slashes etc):

/* \*/
* html .italics-fix {
overflow: hidden;
width: 100%;
o\verflow: visible;
w\idth: auto;
he\ight: 1px;
word-wrap: normal;
}
/* */

Surely width auto is the norm anyway? Apparently not for IE when in italics mode, v6 uses the hacked last four, v5 needs the first 2 lines.

Trevor

tgolden
Offline
Regular
Last seen: 12 years 1 week ago
Timezone: GMT-5
Joined: 2005-10-08
Posts: 44
Points: 0

Do my validation errors have anything to do with css?

Got it! Thanks for the explanation!!!! Now i've found another bug.... i am trying to figure out how to fix it...but in IE my page doesn't adjust to a resizing of the browser window .... full screen it's fine, but if it's not full screen..well you'll see the problem...boy this is fun stuff.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 45 weeks 4 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Do my validation errors have anything to do with css?

Hi

In the body style, try changing width:710px to min-width:710px

Trevor

tgolden
Offline
Regular
Last seen: 12 years 1 week ago
Timezone: GMT-5
Joined: 2005-10-08
Posts: 44
Points: 0

Do my validation errors have anything to do with css?

ClevaTreva wrote:
Hi

In the body style, try changing width:710px to min-width:710px

Trevor

Sheesh...do i feel small! Trevor gets it again!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 45 weeks 4 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Do my validation errors have anything to do with css?

Hi

I'd like to say wisdom comes with age. I'd like to believe it's true. I'd LIKE.

What really helps is a big bar Cadbury's Dairy Milk cadburydairymilk.co.uk.

Talking of which, I won on the Express last night. A BOGOF offer on theme park tickets. Wow. Shame I hate theme parks and have been to Cadbury's World too many times already.

Trevor

tgolden
Offline
Regular
Last seen: 12 years 1 week ago
Timezone: GMT-5
Joined: 2005-10-08
Posts: 44
Points: 0

Do my validation errors have anything to do with css?

Lol, i'm actually not as young as you might think.... but if you ever see me post on other forums you'll know my quote as:

I'm smart enough to know that there are a lot of people who know more than i do....

in other words, listen and ask before you talk! It will get you far! I'm sure i'll ask some more questions as i run into problems that i can't solve myself! I've got content up on blacksoxfan.com/blacksox.php now as well!