Jump to content

A Few Css Elements Not Validating


jaidanwolf
 Share

Recommended Posts

Sorry guys, ignore the title. Everything is validating just fine, the problem is something else...I'm having an issue with one particular page format being a bit glitchy in IE. It works fine in Firefox but as an IE user, I really need it to work in my main browser. Basically, the text on those pages isn't always showing up/rendering properly...if you scroll down the page, some text appears to be missing or cut off on random lines here and there, but then reappears if you highlight it or scroll down and back up again. It seems to be a problem with the black/gray background blocks that the text is on, because if I remove that element from the stylesheet, the text on those pages looks just fine.Here is the CSS fileHere is an example of the pages using that stylesheetAnd here what I believe to be the problem section of the code...the text-related issues seem to lie with this particular item (the back/gray background blocks). Everything checks out with the CSS and Site/XHTML validators. So if anyone knows how to fix up what's happening in IE, that would be stellar, because I'm lost.

div.blogitem {background: #000 url('images/pfade.jpg') repeat-x bottom;padding: 20px 15px 50px 10px;}

Link to comment
Share on other sites

Just a suggestion. Pretty print the page so it is easier to navigate. For example (as formatted) the div that starts in line 24 ends at line 216. That's a lot of distance to transverse to debug.You have 'target="blank"' which will work despite it being wrong (correct: target="_blank"). And that is deprecated now.You have <h1> on line 17 and 32. One to a page.Congrats on no html errors (other than the logical ones above)!Congrats on no css errors.I saw the same problem you did in IE6, but I'll have to look into further. Normally, people have crappy code and that has to be fixed first or they lack the doctype - easy to find. Yours is harder.edit: I did see you have a line-height of 9px and a font size of 13px (p tag). IE will (incorrectly) expand a box to hold what's in it. Try making the line-height bigger and see if that fixes the problem.

Link to comment
Share on other sites

I did see you have a line-height of 9px and a font size of 13px (p tag). IE will (incorrectly) expand a box to hold what's in it. Try making the line-height bigger and see if that fixes the problem.
Aha thanks for that! I increased the line height to 135% and the problem doesn't seem to be occurring anymore. I'll have to resize the pictures now but the important thing is for all the text to be showing up properly, so I appreciate the helpful (and very simple) solution!
Pretty print the page so it is easier to navigate. For example (as formatted) the div that starts in line 24 ends at line 216. That's a lot of distance to transverse to debug.
Just get rid of all the blank lines or is there some sort of more complicated formatting system?
You have 'target="blank"' which will work despite it being wrong (correct: target="_blank"). And that is deprecated now.
Is there a better way to open a link in a new window or will _blank do the trick? It validates just fine as simply "blank" -- is it imperative to change?
You have <h1> on line 17 and 32. One to a page.
Same question...it validates fine. Is it going to cause problems or is it just a matter of preference? Because if it's not really problematic, I'd prefer to leave it as is...the use of h1 for the individual page titles is different from how it's used in the header. If there's an easy way to achieve the same thing without duplicating the h1 tag - only if it's necessary - then I'd appreciate any details.Thanks again for your help!
Link to comment
Share on other sites

Aha thanks for that! I increased the line height to 135% and the problem doesn't seem to be occurring anymore. I'll have to resize the pictures now but the important thing is for all the text to be showing up properly, so I appreciate the helpful (and very simple) solution!Just get rid of all the blank lines or is there some sort of more complicated formatting system?Is there a better way to open a link in a new window or will _blank do the trick? It validates just fine as simply "blank" -- is it imperative to change?Same question...it validates fine. Is it going to cause problems or is it just a matter of preference? Because if it's not really problematic, I'd prefer to leave it as is...the use of h1 for the individual page titles is different from how it's used in the header. If there's an easy way to achieve the same thing without duplicating the h1 tag - only if it's necessary - then I'd appreciate any details.Thanks again for your help!
It's not complicated at all. You WANT some blank lines, especially between logically grouped things. But you also want the text indented. I have used 2 spaces in since the 70s. Lately, I switched to using a tab as it takes a little less space and is easier.
<div>  stuff  stuff  <div>	more stuff	more stuff</div>

See how the missing </div> sticks out? A missing closing tag is very common.I use "_blank" 90% of the time. "blank" will work because it isn't one of the valid values and the default in that case is a new window. The alternative to be compliant with XHTML STRICT is to use a javascript open, but I find that worse than the original "problem" as people can turn off javascript, but they can't turn off html.The <h1> is a semantic problem. It's valid, but SEO will search for it as the prime description/caption of a page. They might get confused if they find two of them. Also, as a semantic problem, it leads to confusion with accessibility. 508 rules you know. Try listening to your page using JAWS and you will see what I mean.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...