Hi folks I have just created my first tableless CSS test page, it worked perfectly in all the browsers until I tried to view it on a system with IE6. Half the page does not show. I cannot work out why. I have read through various articles on compatibility without finding a solution, and used Dreamweaver's validation tests but no issues were found. Thanks for any help in advance. http://www.aupcheck.com/IE6Problem/
You have 3 major problems and one minor problem. One, your page has a Byte Order Mark; make sure you save your pages without the BOM in order to get rid of it. If you're using Notepad, get another text editor. Two, anchors cannot contain DIV, because inline elements (such as anchors) cannot contain block-level elements (such as DIVs). Three, your "links" ID has already been defined. If you want to use the same name, change your ID to a class and adjust your stylesheet accordingly. Your minor problem is in your stylesheet - cursor: hand; is not valid. Use cursor: pointer; instead. http://validator.w3.org/check?uri=http://www.aupcheck.com/IE6Problem/ http://jigsaw.w3.org/css-validator/...pcheck.com/IE6Problem/&warning=1&profile=css2 Fix those errors, then check in your browsers again. If you're still having problems, post here and I'll see what I can do to help you.
Thanks for your comments, I have fixed the outstanding problems, but the problem still exists. I have tested the revised page on various systems with IE6 and also used the www.browsershots.org online tool, but the results are always the same, ie. half the page is missing. All other browsers are normal. http://www.aupcheck.com/IE6Problem/ Thanks for any assistance in this matter.
Well, the lack of semantic markup, use of dynamic fonts over fixed height elements breaking the layout on large font machines, inlining of presentational elements, use of spans where they are unneeded, use of classes where they aren't needed, etc, etc, means someone like Dan or I would have to throw it out and start over to even come CLOSE to figuring out what is wrong with the page. Being it's broken in both Opera and IE7 here, not just IE6, I'd say your entire layout is in question. In general, you have WAY too much markup for such a simple page. For example: #header - this whole div doesn't do anything, get rid of it. #minitab, minitab1, minitab2 - there is no reason for these to be DIV, or to have ID's... You have a list of options, aka a menu. That means this should be an unordered list. .minitabtext - one word is NOT a paragraph, why are you marking them up as such? Since they are all the same inside a perfectly good ID, they also shouldn't even need a class. LIKEWISE the anchors inside them too should NOT need a class. The same could be said of the menu below that... and that's before we even get to the CONTENT. I'm seeing 8k of markup for a page that likely should only need half to two-thirds that. I don't even want to LOOK at the CSS.
Thanks DeathShadow Your post illustrates how little I understand correct CSS usage. I have redone the whole layout after educating myself in semantic markup and some of the other issues you mentioned, and have rewritten the page with these things in mind. I have uploaded the revised page here: www-aupcheck.com/IE6Problem3/ I still found that I have to use Divs in some areas to logically group items, although I read that beginners tend to use way too many DIVs. For example the banner area under the menu is made up of 6 images divided so I can optimize each for size. I initially tried floating them all together instead of positioning them absolutely, which works but I still had to use DIVs to get them to hold together properly. I have used unordered lists for the menu and point lists, and have used <strong> and <p> and <h?> whenever appropriate to facilitate correct semantic markup. I am still finding problems on IE5.5 and before, the banner images and other sections tend to come apart and don't float together like they do in Firefox, IE7 and Opera. Also I am trying to generate a 1px grey horizontal line as a separator with the following code which works in IE7, FF, Opera but in IE5.5 / IE6 it is very thick: #introcontainergreyline { height: 1px; width: 93%; background-color:#b7b7b8; margin:-2px 0 0 20px; } Is there anything obvious I am doing wrong here? For the time being I am still using fixed size items that do not scale properly because I havent researched a better way. I imagine it has to do with using percentages and ems instead of px, but I had no success with my initial explorations of that. Thanks for any comments.
I'd probably use a border instead of a DIV there, but I'm far too busy with work to take a look at the markup right now.
As Dan said, that should likely be a border, or possibly an <hr>. In IE, when you create a block element, it creates an anonymous inline-box. That inline-box will be the height of the font plus leading, that is, the line-height. At default values, that's 16px×1.2=19.6px, or 19/20px depending on the browser's rounding/ceil/floor method. Since the container has layout, it expands to a height equal the line-height. I disagree with ds on the <p> thing. The <p> is the least specific of the semantic containers and should apply to any brief composition complete in one typographical section that does not conform to a more specific description. That could be as simple as the © symbol at the bottom of the page, <p>©</p>. Can't offer more as your server seems to be off line. cheers, gary
I wouldn't go that far in defining a paragraph, Gary. Source: http://en.wikipedia.org/wiki/Paragraph Source: http://www.davidappleyard.com/english/grammar.htm Source: http://www.moonstar.com/~acpjr/Blackboard/Common/Glossary/GlossTwo.html
Look at your own def, the last one, "A paragraph is a portion of text, usually small, used to isolate a thought." From a typographic, structural and semantic point of view, that is very much equivalent to what I said. Taking my example, what would be the more semantic container than p? cheers, gary
Given that the rest of the definition in question expands upon the first part, I'd have to say that a paragraph is not the appropriate element to use for something like a copyright statement. What I do is put the copyright statement inside an EM element (to give it emphasis) and then put that inside a DIV with an ID of "footer". If I need footer links, they can go inside the DIV as well. The use of EM instead of P also helps ensure that the copyright notice is distinguishable from the rest of the page when styling is not applied (due to the semantic emphasis I am placing upon it).
That it usually consists of multiple sentences does not imply that multiple, or even complete sentences are required. My example certainly implies a "change of focus", to adhere to your expansion. Your container, the div, has no semantic value. It is strictly a structural device. The em is a phrase element, not a container. You'll need a better argument than that. cheers, gary
Just ignore IE6 it is a buggy software. You shall recommend your users to upgrade or switch to firefox.
You're right about the DIV, but you seem to forget that in this case it IS the container - a contaner that is containing a phrase element (a copyright statement). I also said that the container (the DIV with the ID of "footer") can also contain other content, such as a list of footer links, or other information. If a phrase element isn't a sentence, and a paragraph needs at least one sentence, then how can a copyright statement - which at best is usually a sentence fragment or two - even be considered to be a paragraph in the first place? You say that. And then come back when you can code a four column layout with no conditional comments or hacks that works identically in IE 5.01, IE 5.5, IE 6, IE 7, Firefox, Opera, Safari, and other browsers (note I am referring to the layout, some things such as PNG alpha-transparency support, min/max-width/height, :hover on elements other than anchors, and so forth cannot be avoided, but that's acceptable in this case). Furthermore, not everyone wants to or even CAN upgrade or switch to another browser, and Firefox isn't ideal for everyone anyway (that and I always advocate Opera over that steaming pile of XUL garbage called Firefox anyway - I've even gotten a few die-hard Firefox fans to switch as well, and they're happy as ever to be using Opera full-time). The point is, that IE 6 isn't as bad as people make it out to be. Most of the "bugs" and "problems" can be overcome by changing the coding habit, not hacking the browser or creating a custom stylesheet. And if you want to see the 4 column layout example in action, you can do so right here: http://www.dan-schulz.com/temp/4columnlayout/ (I've released it to the Public Domain, so feel free to use it in all your work - no attribution or credit required).
Thanks Dan and Gary for your comments. I decided to go with a styled <hr> and it works great. The main problem remains however, and that is that in IE5.5 every image is broken up with space between it and the other images, and the overflowing onto the next line breaks the page completely. All other browsers IE6 up, FF, Opera, Safari look fine. In the banner under the menu there are 6 images floated together, I tried forcing widths and heights, containing them in a div, etc. but still they dont want to stay together. Any further ideas? aupcheck.com/IE6Problem3/ Thanks to all.
Semantic works both ways - you are IMPLYING a meaning, that it's a paragraph... It is not a paragraph, it's ONE WORD. Just as a sentance fragment is NOT a paragraph. An english teacher would rip you a new *** for even implying such. In this case, you do NOT want to imply an incorrect meaning. An Image is not a basic prose element, that's why they are separated out in print - These elements are unrelated breaks in content flow or not part of it (literary flow, not layout flow) and as such should not be in paragraphs. Hell, the only time I can think of an image tag being inside a paragraph being semantically correct would be for a smiley. Otherwise you are implying meaning on it which is incorrect.
I don't think it'll work (I don't have the time to check right now, been working on four SEO reports today for three clients), but one thing I always do is kill the borders on my images and set the vertical alignment to "bottom" like so: img { border: 0; vertical-align: bottom; } Code (markup):
Silly question - why are you even USING separate images for that in the first place?!? My solution, save yourself five handshakes (and up to 4 seconds download time) and use a single image. Oh, and you are aware of this on large font/120 dpi machines, right? (tossed a couple screencaps on my server) http://battletech.hopto.org/for_others/antigen You've got MAJOR layout issues.
Here, I needed a brief diversion, so I did a recode 'my way' that you can learn from... For the most part your HTML wasn't too bad - but the CSS was iffy at best. http://battletech.hopto.org/for_others/antigen/template.html as with all my examples the directory: http://battletech.hopto.org/for_others/antigen is unlocked so you can grab the gooey bits. Validates XHTML 1.0 Strict, tested working in IE 5.5, 6 & 7, Firefox 2.0.0.14 and 3.0 beta, Opera 9.27 and 9.5 beta, and Safari 3 windows, as well checking behavior in large fonts/120dpi vs. small fonts/96dpi. I also axed a lot of the 'click more' links for more 'meaningful' links. As a rule 'read more' or 'click here' are considered bad form in the semantics AND SEO fields. I remastered a lot of the images just to make them work 'my way', adding more mouse-over effects in the process. Despite the added functionality it trims 2k off the markup, comes in at the same size for the CSS, and shaves 5k off the images. Hope this helps - If I have time I'll try to document it, but things are a bit tight time-wise right now. You'll notice a lot of spans and tags, and colors/formatting being applied in the CSS you can't normally see.... Turn images off with CSS still on.
WOW I am at a bare minimum, extremely thankful for the time that you put into doing this. I took me a week to do the initial layout and you slammed this together in what a few hours?? With no bugs? I grovel embarrassingly at your feet. I have just printed the HTML and CSS code and am going to pore over it to extract its meaty goodness. I noted the interesting things you did with the menu items and the try it button. Gotta learn how to do that. I tried opening it in Dreamweaver CS3, and it completely failed to make head nor tail of it, do you use any tools to do this or is it just mind + notepad + skill? Thanks * many