19 replies [Last post]
whenisayjump
Offline
Regular
Last seen: 12 years 22 weeks ago
Joined: 2007-03-25
Posts: 11
Points: 0

Hello!

Okay. Firstly, this is a height question... and I've looked around and see it's a common woe. So I apologise (hopes not to get flamed)

...I've made http://www.kingstonlgbt.co.uk ...and I have having woe making the middle, purple bit go to full height in IE (actually, I've had a lot of trouble in IE)...

This is the CSS

/* CSS Document */

html,body{
height: 100%;
margin: 0;
padding: 0;
}

body {
background: #444444;
margin-top:0px;
padding-top:0px;
padding-bottom:0px;
margin-bottom:0px;

}

#upperCell {
border: solid #5A5068;
background-color: #5A5068;
height:170px;
width:60%;
overflow: hidden;
top: 60px;
position: relative;

border-width: 5px;
margin-top:0px;
padding-top:0px;
}

#mainCell {
border-left: solid #FFFFFF;
border-right: solid #FFFFFF;
background-color: #5A5068;
width:750px;
margin-left:-375px;
left:50%;
overflow: visible;

min-height:100%;
top: 0;
position: relative;

border-width: 5px;
margin-top:0px;
padding-top:0px;
/*Experiment*/
padding-bottom:0px;
margin-bottom:0px;
/*End*/
padding-left:0px;
padding-right:0px;

}

#maincontentheader {
color: #FFFFFF;
text-align: left;
font-weight: bolder;
font-size: 30px;
font-family: Geneva, Arial, Helvetica, sans-serif;
margin-left:5px;
margin-right:5px;
padding-left:5px;
padding-right:5px;
}

#maincontent {

overflow: auto;
color: #FFFFFF;
vertical-align:middle;
text-align:left;
position:relative;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding-bottom:10px;
margin-bottom:0px;
margin-left:5px;
margin-right:5px;
padding-left:5px;
padding-right:5px;

}

/******************
* Links Formating*
*******************/

/*Old Navigation Bar Formating*/

a.one {
padding-right:30px;
color: #FFFFFF;
font: 800 14px "Courier New";
}

#links {
color:#FFFFFF;
left:0;
right:0;
width:95%;
margin-left:5px;
margin-right:5px;
padding-left:5px;
padding-right:5px;
font: 800 14px "Courier New";
}

/*Links within the main text*/

a.two{
color: #FFFFFF;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-decoration: underline;
font-weight:bold;
}

/*******************
*Start of Menu Code*
*********************/

ul {
margin: 0;
padding: 0;
list-style: none;
width: 365px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */

/********************
* End of menu code *
********************/

The bit in question is '#main cell'... and as I've said, I have read the guides and such, but as I'm quite the beginner I'm finding it hard to understand what's going on. Apologies again for being annoying.

Oh, and I'm James

Thank you in advance

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Incomplete doctype, lets get

Incomplete doctype, lets get that fixed up first Wink

Verschwindende wrote:
  • CSS doesn't make pies

whenisayjump
Offline
Regular
Last seen: 12 years 22 weeks ago
Joined: 2007-03-25
Posts: 11
Points: 0

Sorry... what? What does

Sorry... what?

What does that mean. I'm really new, you'll have to forgive me. Sorry

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

Welcome, We shall be

Welcome,

We shall be careful to avoid flaming Smile

Firstly there are some chores to attend to, boring but necessary!

1. you are presently using a trans DTD(Doctype) without system identifier(url) this is throwing your pages into 'Quirks Mode' rendering, not a good idea.
You need to either add a url or better, change to a strict DTD with or without the url (check the link in my sig line)

2. you have some errors in your markup that need addressing:

  • You have no 'title' tag in your head statement
  • You are attempting to use XHTML syntax with 4.01 DTD; you do not need to close empty tags <br/>
  • You have closed a tag that was never opened and used an attribute as a element name </align=right>.
  • The use of the element 'center' is largely redundent you do not need to use it all presentational aspects of your elements should and can be handled through style properties.
  • Try not to use <br> tags to effect styling, as above use CSS properties for this

These aspects need to be sorted out then can begin the work of addressing the layout requirements.

Hugo.

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

whenisayjump
Offline
Regular
Last seen: 12 years 22 weeks ago
Joined: 2007-03-25
Posts: 11
Points: 0

Right. Okay... With this

Right. Okay...

With this 'doctype' business... I need to put a piece of text in to get it to validate properly. I'm not really sure I understand which one it is I should use (sorry about this).

When you say I have 'no title'... I was important that, so I can change it easily. I've tried to fix the other stuff on http://www.kingstonlgbt.co.uk/phasetwo/legal.html.

I'm a little confused about the problem... how can I do that in css, without messing up the padding? Just make a picture div tag?

Sorry if I sound hopeless.

James

Edit: I've now put the in the css. I'm using the 'legal' page to test this stuff, at the moment.

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

The reference was to the

The reference was to the document title tag which is mandatory

CSS Creator

Use this DTD( copy and paste)

As for your last paragraph can you be more specific as to the problem/confusion you're having ?

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

whenisayjump
Offline
Regular
Last seen: 12 years 22 weeks ago
Joined: 2007-03-25
Posts: 11
Points: 0

Okay. I've copied that

Okay. I've copied that 'DTD'...

...I've put it in the HTML (is this right)... ?

The title is in 'http://www.kingstonlgbt.co.uk/phasetwo/title.js'... I've done that, so I can update the title easily. Is that bad?

Edit: I was slightly confused about the centering, but I think I fixed it.

James

Thank you

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

'Title' is a text string

'Title' is a text string describing/titling each page ,look at the top bar left side of browsers where it describes the page; this info is pulled from the title tags, also search engines will use it.

Don't worry about styling the page yet just loose the deprecated elements. All requirements for elements centred can be achieved through using margin auto or text-align properties in your style declarations

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

whenisayjump
Offline
Regular
Last seen: 12 years 22 weeks ago
Joined: 2007-03-25
Posts: 11
Points: 0

Yes. I know what the title

Yes. I know what the title is. If you look in 'http://www.kingstonlgbt.co.uk/phasetwo/title.js'

...the title is in there. So it imports into each page. Does that make sense?

...and I think I've solved the center issue.

Have I made any other errors in my code?

James!

Thank you for your help so far!! Laughing out loud

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

Oh I see what you mean erm

Oh I see what you mean erm that's ok to some extent but you don't necessarily want each page with exactly the same title text (look at the forum as you move through pages)

As for other errors are you updating the page you linked to?

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

whenisayjump
Offline
Regular
Last seen: 12 years 22 weeks ago
Joined: 2007-03-25
Posts: 11
Points: 0

This

This page:

http://www.kingstonlgbt.co.uk/phasetwo/legal.html

...is my test page. This will hopefully be free from errors.

James

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 13 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

you need to change <link

you need to change
to
in your header
and then you will be relativly free from errors besides not having a character encoding set

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

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

Actually looking at things

Actually looking at things you can't write the title tag with document write as it is processed after the head is parsed as it were, if it were server side scripting it would be ok, but if you look at the source markup you don't have a title tag you have a script tag, and the validator still aint going to pass it as valid.

N.B as Duece says you also need to declare a character encoding meta tag

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

whenisayjump
Offline
Regular
Last seen: 12 years 22 weeks ago
Joined: 2007-03-25
Posts: 11
Points: 0

I think... that's okay now ?

I think... that's okay now ?

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

One thing left to do and

One thing left to do and that is the reverse of that which Duece mentioned earlier, normally spot on with advice he likely in this instance missed the fact that we are using html 4.01 so you do not need to close empty tags /> no slash needed.

On to the height:
try adding for IE6

* html #mainCell {height:100%;}

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

whenisayjump
Offline
Regular
Last seen: 12 years 22 weeks ago
Joined: 2007-03-25
Posts: 11
Points: 0

Wow! Thank you... that seems

Wow! Thank you... that seems to have fixed my distress.

One question though... what did that actually do?

If I were to add height:100% to 'maincell' it would go crazy. But that magic code made it work?

Thank you so much

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

IE is a pile of dung manure

IE is a pile of dung manure (am I allowed to say that?) height is meant to be just that height as stated if you say height:100px then that is what you get it can't change same with height:100% that is generally 100% of the html body which is the viewport, which is why min-height must be used if your content will actually scroll off the canvas. IE gets this completely wrong as they decided that height would be flexible and if content exceeded set height then they would ignore the set height and expand it instead to contain the content, this is very very bad, still it means that simply stating height:100% in IE gets you a flexible dimension problem is that real proper browsers mustn't see that fixed height so we hide it with the star selector filter '* html' only IE6 will see this. there are other approaches but this should suffice in this instance.

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 50 weeks 2 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hugo wrote:IE is a pile of

Hugo wrote:
IE is a pile of dung manure (am I allowed to say that?)

I would not be so restrained or polite.

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

I'm not being it's just that

I'm not being it's just that I can't spell *beep* *beep* *beep* *beep* as that's what I really wanted to say! 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

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 13 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Hugo wrote:...the reverse of

Hugo wrote:
...the reverse of that which Duece mentioned earlier...

I've taken up "speed reading"
Instead of actually reading full posts or code I just glance at them and try to make educated guesses on what they are talking about

Smile

That or I goofed - you pick

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph