Fri, 2008-10-24 04:07
So I altered my code and IE is treating it extremely unwell. any suggestions?
Fri, 2008-10-24 04:25
#1
Your doctype is incorrect
Your doctype is incorrect and will leave IE6 in it's quirks mode where of course it shows things differently.
Beyond that, with so many errors in your html and even some CSS errors it's no surprise that it isn't working right across browsers. Start by validating your code. If this doesn't fix things (and maybe it won't) then at least we'll have a basis for fixing things.
Standards don't apply to invalid html so having invalid code invites browsers not to follow the standards.
Fri, 2008-10-24 04:48
#2
1. Whats wrong with my
1. Whats wrong with my doctype?
2. The validator shows no real errors
Fri, 2008-10-24 05:19
#3
KoticPhreak wrote:1. Whats
1. Whats wrong with my doctype?
It's wrong. It should be:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. The validator shows no real errors
Which validator are using? Because the only one that matters shows that you have 65 'real' errors.
Fri, 2008-10-24 05:24
#4
Your CSS is all wrong too.
Your CSS is all wrong too. Using that much absolute positioning is going about things the wrong way. Even if you were to use it, you don't specify positive values with + in front of them. You don't need to use any absolute positioning for your layout. It can all be achieved using the normal flow of the page except for your top nav which would need to be floated right.
And you don't need to wrap every style rule in its out separate pair; just put them all in between one set of tags.
Fri, 2008-10-24 06:55
#5
Hmmm, I like the design. I
Hmmm, I like the design. I think dark backgrounds help the colours of a photograph or painting really stand out.
Phreak, here's another good rule of thumb for writing HTML: indent to show parent child relationships.
Why? Cause when your page gets bigger, it'll make it easier to catch unclosed boxes and other important typos.
I tend to use 2 spaces, other people use TAB at its 8-space default or they set tab to some other number of spaces.
<div id="mainparent"> <h1>First Child of mainparent</h1> <p>Second child of mainparent</p> <div id="firstnesteddiv" class="thirdchild"> <p>First child of firstnesteddiv...</p> </div> </div>
Because the last two closing divs line up x-spaces from the left, I know who they're closing. When the page gets really really long, though, you'll want little comments to make it clearer. To avoid an IE6 bug, set the comments inside the closing div tag:
<div id="mainparent"> <h1>First Child of mainparent</h1> <p>Second child of mainparent</p> <div id="firstnesteddiv" class="thirdchild"> <p>First child of firstnesteddiv...</p> <!--firstnested--></div> <!--mainparent--></div>
So if my comments are inside the div instead of outside (what you normally see) then set THEIR indentation to where the closer would be.
Also, the BR's are making your page purr like a motorcycle. It should be silent!
Fri, 2008-10-24 07:16
#6
Quote:So if my comments are
So if my comments are inside the div instead of outside (what you normally see) then set THEIR indentation to where the closer would be.
yuck that looks perfectly ghastly, who taught you that one 
.It's not necessary to comment every closing tag, many are obvious enough, comments are applicable where the separation between opening and closing is great enough that it's easy to loose track.
Fri, 2008-10-24 07:53
#7
Commenting
When the page gets really really long, though, you'll want little comments to make it clearer. To avoid an IE6 bug, set the comments inside the closing div tag:
: )
The point was,
I can never do this:
if those divs are floated. (It's on the PIE page)
They're commented in the example to show how I'd do it-- not because something barely nested and so close together needs commenting. : )
Fri, 2008-10-24 10:49
#8
Sp, that is only one of
Sp, that is only one of several ways to avoid/fix the duplicate content bug, and I'll agree with Hugo, it's æsthetically displeasing; ghastly even.
It is actually quite rare to trigger the bug in day to day coding1. If and when it does pop up, then apply the most appropriate to the case solution.
I think I know where you got the formatting idea. Do keep in mind that many things he's so positive about are neither needed, nor true.
cheers,
gary
1. This may be particular to my coding style. I rarely have successive major sections floating. Small sections usually don't require an ending comment.
Fri, 2008-10-24 11:21
#9
Is duplicate content fixed
Is duplicate content fixed by triggering hasLayout?
I use closing comments outside the div on main layout elements. Many of those will be floated. I haven't seen the duplicate content bug in years. The only special thing I do is automatically trigger hasLayout for all DIV elements.
Fri, 2008-10-24 11:41
#10
From PIE/IE6 Duplicate
From PIE/IE6 Duplicate Characters Bug
These extra comments trigger the bug only when the final float fills the container to the right edge, or to within less than 3px away from it. This is because IE6/win seems to have a weird 3px "bumper" margin on the right side of that last left float. Since the float in this demo is exactly as wide as the container, the bumper has no empty space to occupy, and apparently it is this that completes the bug trigger. The effect also shows symmetry, working the same way in a mirror version of this coding.
There are a lot of conditions to be met before the bug is triggered.
This is one IE bug that just doesn't require a preemptive strike. But, if you want to anyway, add {display: inline;} to all floats as a matter of course. A fix with no know contra-indications.
cheers,
gary
Fri, 2008-10-24 12:42
#11
As has been said it's a
As has been said it's a complex little bug sometimes corrected by simple hasLayout trigger, often though it's not, it sometimes manifests through sibling comments outside floated elements sometimes not, like Chris I can't recall triggering it in a very long while, and if I were to it would at present as I'm heavily commenting code while in dev phase.
Sat, 2008-10-25 05:07
#12
I've fixed most of the
I've fixed most of the errors, there are 11 left and I don't understand what the problems are.
On another note, why is there a little space between the end of the photo and the frame (you can see this if you highlight it)
And why is the 'EXIF DATA' box different size/formatting between IE/firefox?
Thanks for all the help so far! I've got the formatting looking nicer now!
Sat, 2008-10-25 05:13
#13
Easy one first, then I'll
Easy one first, then I'll see if I have a moment to look at the other stuff. Make #mainimage img {vertical-align: bottom;}. See mysterious gap under images for an explanation.
cheers,
gary
Sat, 2008-10-25 05:22
#14
OK, part 2 was easy. Remove
OK, part 2 was easy. Remove all instances of . That tag no longer exists in the current recommendation.
Your server does not specify which character set to use. It is now up to you. Add this line to your section
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
cheers,
gary
Sat, 2008-10-25 05:41
#15
gary.turner wrote:OK, part 2
OK, part 2 was easy. Remove all instances of . That tag no longer exists in the current recommendation.
What would i replace it with to control font, color, size, etc?
Sat, 2008-10-25 06:36
#16
KoticPhreak
OK, part 2 was easy. Remove all instances of . That tag no longer exists in the current recommendation.
What would i replace it with to control font, color, size, etc?
CSS? Just a thought
Sat, 2008-10-25 07:06
#17
Thanks guys, got a lot of it
Thanks guys, got a lot of it fixed, still 4 errors, no idea why...
but now that i switched to css font styles, 'exif' and 'data' are on seperate lines and the entire exifdata box looks differnet on firefox than it does on IE..
Sat, 2008-10-25 07:19
#18
You'll need to ensure that
You'll need to ensure that you have stated rules that apply to both elements by using grouped selectors or be less specific and state the parent of both those elements and then simply the generic element such as
Sat, 2008-10-25 15:50
#19
Hugo wrote:You'll need to
You'll need to ensure that you have stated rules that apply to both elements by using grouped selectors or be less specific and state the parent of both those elements and then simply the generic element such as
I googled group selectors and executed it to the best of my ability, however, this didn't fix the problem, exif and data are still on separate lines...
h3, h4 { font-family:arial; font-size:14px; } h3 { color:#808080; } h4 { color:#FF0000; }
and then executed with:
<p> <h3> EXIF </h3> <h4> DATA </h4> </p>
Sat, 2008-10-25 17:44
#20
KoticPhreak
<p> <h3> EXIF </h3> <h4> DATA </h4> </p>
Have you tried validating that markup?
Sat, 2008-10-25 18:07
#21
Triumph wrote:Have you tried
Have you tried validating that markup?
yes and I don't understand what the error it gives is 
Sat, 2008-10-25 18:23
#22
You are not allowed to put
You are not allowed to put Header elements inside a P element. Put them outside. H1 through H6 are block elements that should be on their own as they denote headings of your content.
So:
<H2>heading</H2> <P>words that pertain to the heading and belong under it</P>
You really should take the time to understand semantic markup because that's what HTML is designed to do and many of the rules are there to make semantic markup possible. Properly marked up code is actually pretty easy to style.
Sat, 2008-10-25 18:44
#23
Ed Seedhouse wrote:You are
You are not allowed to put Header elements inside a P element. Put them outside. H1 through H6 are block elements that should be on their own as they denote headings of your content.
So:
<H2>heading</H2> <P>words that pertain to the heading and belong under it</P>
You really should take the time to understand semantic markup because that's what HTML is designed to do and many of the rules are there to make semantic markup possible. Properly marked up code is actually pretty easy to style.
I only used the
as someone recommended it a few posts up, so how would i get the exif and data on the same line and make the box look the same on ie and firefox?
Sat, 2008-10-25 18:48
#24
Code up your html without
Code up your html without even thinking about that, and ideally without even thinking about style or presentation at all. Take the time to learn to mark up semantically, that is according to the meaning of the content. Doing that takes a little time to learn, but makes styling ever so much easier.
As long as you are worrying about how the result will look as you write your html you will not be writing optimal code and will end up causing yourself ever so much trouble.
Get it semantic and valid first, then worry about how it will look.
Sat, 2008-10-25 22:31
#25
If the only reason why exif
If the only reason why exif and data need to be in different tags is so that they can be different colours, then wrap them both in a single block level element and then use a span on the one that needs to be a different colour, e.g.:
<h3>Exif <span>Data</span></h3>
Spans are inline elements and so it won't force data onto a new line.
Sun, 2008-10-26 01:44
#26
thank tyssen! you rock! Now
thank tyssen! you rock!
Now if you could help me with these two things, i'll send some cookies to australia 
1. The text spacing differs between IE and firefox, seems like theres larger spacing in firefox, any clue why this is happening?
2. The background doesn't show up on google chrome. what gives?
Thanks again!!!
Sun, 2008-10-26 07:04
#27
KoticPhreak wrote: I only
I only used the
as someone recommended it a few posts up, so how would i get the exif and data on the same line and make the box look the same on ie and firefox?
Erm I didn't recommend it , it was simply an example, you must understand that it's not always the case that we supply exact and literal markup, at times we provide the direction that someone needs to follow and state things in general terms. An assumption is made at times that people grasp the fundamentals of valid well-formed markup, assumptions are dangerous things!
Sun, 2008-10-26 09:24
#28
The general idea with
The general idea with whether or not you can wrap this in that is, things are blocks and inlines by default (in the HTML) and you can change this with CSS however it doesn't change the actual rules of who can hold what (even if a browser displays it). Blocks are like buckets and inlines are like water-- water cannot hold a bucket, but a bucket can hold water. Some blocks may only hold other blocks (forms), some blocks can only have inlines (p), and some can have both(div). Inlines can generally always have other inlines.
1. The text spacing differs between IE and firefox, seems like theres larger spacing in firefox, any clue why this is happening?
If it's different spacing between letters, there could be a difference in fonts (some machines may have all the fonts you list while others don't) or, on the same machine, you may notice FF having uglier looking letters. This has something to do with IE getting that font smoother Microsoft has (ClearType?) while FF and Opera don't. Looking in Safari you'd see the letters looking fatter and fuzzier-- just the font smoother brought over from the Mac.
If you mean spacing between lines, this could be line-height. If you didn't specify one, the browser will use whatever default comes with that font (or maybe whatever was listed for an ancestor) and this may be different between browsers.
2. The background doesn't show up on google chrome. what gives?
I see it on Saffy-4-Windows and Teh Chromes (the pattern at the top, right?).
Sun, 2008-10-26 17:11
#29
Quote:If you mean spacing
If you mean spacing between lines, this could be line-height. If you didn't specify one, the browser will use whatever default comes with that font (or maybe whatever was listed for an ancestor) and this may be different between browsers.
I now specified a line height and all, still a small difference, Google chrome and Firefox look identical, IE is a bit off, i took screenshots and put them next to each other
http://i6.photobucket.com/albums/y238/koticphreak/comparison.jpg
I see it on Saffy-4-Windows and Teh Chromes (the pattern at the top, right?).
it shows up now, weird...