29 replies [Last post]
KoticPhreak
Offline
Regular
Last seen: 10 years 13 weeks ago
Joined: 2008-10-20
Posts: 19
Points: 0

So I altered my code and IE is treating it extremely unwell. any suggestions?

http://youcsb.awardspace.com

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

KoticPhreak
Offline
Regular
Last seen: 10 years 13 weeks ago
Joined: 2008-10-20
Posts: 19
Points: 0

1. Whats wrong with my

1. Whats wrong with my doctype?

2. The validator shows no real errors

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

KoticPhreak wrote:1. Whats

KoticPhreak wrote:

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">

KoticPhreak wrote:

2. The validator shows no real errors

Which validator are using? Because the only one that matters shows that you have 65 'real' errors.

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

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

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.

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

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

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!

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:So if my comments are

Quote:

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 Smile .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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Commenting

"Stomme poes" wrote:

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. : )

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 8 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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. Smile

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.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 8 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

From PIE/IE6 Duplicate

From PIE/IE6 Duplicate Characters Bug

Quote:

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

KoticPhreak
Offline
Regular
Last seen: 10 years 13 weeks ago
Joined: 2008-10-20
Posts: 19
Points: 0

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!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 8 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 8 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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" />
Since you're OK with utf-8 (that's what the W3 validator defaulted to) use it as your charset.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

KoticPhreak
Offline
Regular
Last seen: 10 years 13 weeks ago
Joined: 2008-10-20
Posts: 19
Points: 0

gary.turner wrote:OK, part 2

gary.turner wrote:

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?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

KoticPhreak

KoticPhreak wrote:
gary.turner wrote:

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 Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

KoticPhreak
Offline
Regular
Last seen: 10 years 13 weeks ago
Joined: 2008-10-20
Posts: 19
Points: 0

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..

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

KoticPhreak
Offline
Regular
Last seen: 10 years 13 weeks ago
Joined: 2008-10-20
Posts: 19
Points: 0

Hugo wrote:You'll need to

Hugo wrote:

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>

Triumph (not verified)
Anonymous's picture
Guru

KoticPhreak

KoticPhreak wrote:

<p>
<h3>
  EXIF
</h3>
 
<h4>
  DATA
</h4>
</p>

Have you tried validating that markup?

KoticPhreak
Offline
Regular
Last seen: 10 years 13 weeks ago
Joined: 2008-10-20
Posts: 19
Points: 0

Triumph wrote:Have you tried

Triumph wrote:

Have you tried validating that markup?

yes and I don't understand what the error it gives is Sad

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

KoticPhreak
Offline
Regular
Last seen: 10 years 13 weeks ago
Joined: 2008-10-20
Posts: 19
Points: 0

Ed Seedhouse wrote:You are

Ed Seedhouse wrote:

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?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

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

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.

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

KoticPhreak
Offline
Regular
Last seen: 10 years 13 weeks ago
Joined: 2008-10-20
Posts: 19
Points: 0

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 Tongue

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!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

KoticPhreak wrote: I only

KoticPhreak wrote:

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!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

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.

Quote:

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.

Quote:

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?).

I'm no expert, but I fake one on teh Internets

KoticPhreak
Offline
Regular
Last seen: 10 years 13 weeks ago
Joined: 2008-10-20
Posts: 19
Points: 0

Quote:If you mean spacing

Quote:

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

Quote:

I see it on Saffy-4-Windows and Teh Chromes (the pattern at the top, right?).

it shows up now, weird...