A Difference in IE & Firefox

[Graeme]

Hello All,

 

I have a difference in display in IE & Firefox.

 

In IE the page is exactly how I want it but in Firefox the content in the container overflows outside.

 

The test URL is

http://www.btinternet.com/~gj.d/nigel/weddings.html

 

Many thanks as always,

 

Best wishes

Graeme

[Susie]

Hi Graeme,

 

I only took a peek in Fx, but I know this problem well. It's happening because you have 2 floats in that large container, so the container doesn't think there's any content in there (because floated items are taken out of the flow). So, just add something like overflow:auto; or overflow:hidden to the container and it will expand around all your content.

[Andrea]

Graeme, you've been a Killersites member long enough to know about coding errors and the need to validate

 

Close your form where it needs to be closed (right after the form code, not at the bottom of your tables) and then close the twoCol division BEFORE your clearing division, not after.

 

And there is no need at all to start any HTML with a clearing division on top- what are you clearing?

[Graeme]

Thank you so much. I understoosd your advice and thanks for the extra.

 

I'll promise to validate from now on Thelma!

 

By the way, I had to re-register before I could enter the Forum!

 

Best wishes

Graeme

[Andrea]

By the way, I had to re-register before I could enter the Forum!

It's a new forum - we all had to re-register.

[Wickham]

This now validates:-

http://www.wickham43.com/forumposts/graemeweddings090113.html

CSS file:-

http://www.wickham43.com/forumposts/graemedefault090113.css

 

There were so many edits it's easier to put my version online.

 

You had the right idea with the lower clear div (although Susie offered an alternative) but to make it work you need to put it inside the closing tag of the #content div which was missing.

 

The upper clear div does nothing, as Thelma said.

 

You can still see most of the edits I made.

[Susie]

I looked at it only very quickly this morning and didn't look at the code. My mistake.

[Graeme]

Hello Again All,

 

Just getting back to my original style sheet, I can alter the colour of the

Tag but not any of the other tags.

 

I used:-

 

h1, h2, h3, h4, h5 {

margin: 0;

color: #D50672;

}

 

/* Header */

 

#header {

width: 700px;

margin: 0 auto;

color: ;

}

 

#header h1 {

float: left;

margin: 0px 0 0 0px;

font-size: 50px;

letter-spacing: -7px;

}

 

#header h2 {

float: right;

margin: 40px 20px 0 0;

font-size: 18px;

letter-spacing: -2px;

}

 

The colour #D50672 is a purple and the other tags are grey.

 

Thanks as always,

 

Best wishes

Graeme

[newseed]

If you have any of the heading tags (h1, h2, etc.) that has links within them then the color set for the tag will supercede the heading tags color.

 

Wedding

This will show the greyish color which is set by this style:

 

a {

color: #666666;

text-decoration: none;

}

 

If you really want to turn those links that are within the heading tags then you will need to add a new style like this:

 

h2 a, h3 a, h4 a, h5 a {

color: #D50672;

}

 

 

You have another style that is for h2 only that you will find that has it's own color:

 

#content h2 {

margin-bottom: 20px;

font-size: 18px;

letter-spacing: -1px;

color: #808080;

}

Edited January 14, 2009 by newseed

[Andrea]

If you're still talking about the page you linked to in your intital post here - you only have an

in there - no other s.....

[Graeme]

Hello All,

 

Thanks so much for all your help with this, I have achieved what I wanted thanks to you all and another great lesson.

 

Just in case Stef reads this, great new look to the Forum but thankfully with the same members.

 

Best wishes

Graeme

[Andrea]

Your form tags are still messed up - you need to (open and) close each form within its cells. You have one open and a couple random closing form tags.

[Graeme]

Hi Thelma,

 

I thought I had tidyed up the code after you explained. I only have two options at the moment, they seem to be OK, could you explain?

 

Thnks,

 

Best wishes

Graeme

[Andrea]

Wickham gave you a validating solution in his link a couple posts up.

 

What I was referring to is this - and maybe I have it wrong:

>      





</pre>
<table width="100%" style="border:0;background:#f5f5f5;">


Hand Tied Bouquets start from £40


   Flower :


Roses
Lillys




Quantity : 




</table>

I was thinking that having the table start and end inside the form tags was incorrect - but I may have been thinking wrong - someone enlighten me, please

[JBall]

Pretty sure your right on that, Thelma. 'Least, that's how they taught us at school.

[Wickham]

Thelma said: I was thinking that having the table start and end inside the form tags was incorrect.

 

It depends on what you want to achieve; it's sometimes correct, sometimes not. I left the form tags outside the table as Graeme had it, and my version works and validates. I think he had one form tag outside and the other inside. The most important rule is to close them "from the inside out" ie close the inner element before you close the outer one. Edit: I've just remembered - he had a lot of tags opened but not closed which included one of the form or table tags if I recall, which should always be done with XHTML although with very old HTML it was allowed to leave them unclosed.

 

He had a form tag with the action, some p tags with hidden input boxes, then a table for the visible input boxes which is quite common to line up the boxes inside a form with the box description.

Edited January 16, 2009 by Wickham