13 replies [Last post]
Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 10 years 9 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

Another CSS adventure, hehe.

currently findable at http://213.189.16.22/~bparq/

the container-div is set to 760px width. but why isn't it listening to that in all non-IE browsers? Sad

also,
it wouldn't expand to 100% height unless I put the 100%-tags in the HTML selector. I don't recall having that done any other time, is there something really not right here?

As a rule, I never touch anything more sophisticated and delicate than myself

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 10 years 9 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

it's not listening. again :(

ahh found it.

it was the <center> tag.

this is the proper way to align DIV's and such right? since text-align only works with text in non-IE browsers..

As a rule, I never touch anything more sophisticated and delicate than myself

stonewall
stonewall's picture
Offline
Enthusiast
between a rock and a hard place
Last seen: 16 years 44 weeks ago
between a rock and a hard place
Timezone: GMT-5
Joined: 2006-04-06
Posts: 93
Points: 0

it's not listening. again :(

Desdinova wrote:
ahh found it.

it was the <center> tag.

this is the proper way to align DIV's and such right? since text-align only works with text in non-IE browsers..
absolutely not! center tags have deprecated for an ice age now. use auto left and right margins. and you should code new pages to a strict doctype.

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 10 years 9 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

it's not listening. again :(

Ok I removed the centertag. I changed doctype to strict, validated. I put some left and right margins to auto, but the page still aligns left.

plus, when the contentdiv exceeds the 100% height, all divs stop except for the contentdiv, causing ugly scrolling Smile
I've encountered this a lot of times and never have been able to ensure a decent fix.

As a rule, I never touch anything more sophisticated and delicate than myself

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 40 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

it's not listening. again :(

You need to add

text-align:center; To the body rule in your CSS (this centres for IE)

Then add:

margin:0 auto; text-align:left; To the container div rule which will centre in FF etc and normalise the text alignment.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 10 years 9 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

it's not listening. again :(

aah thanks Smile that did the trick.

now all that's left is the scrolling problem..

As a rule, I never touch anything more sophisticated and delicate than myself

stonewall
stonewall's picture
Offline
Enthusiast
between a rock and a hard place
Last seen: 16 years 44 weeks ago
between a rock and a hard place
Timezone: GMT-5
Joined: 2006-04-06
Posts: 93
Points: 0

it's not listening. again :(

IE 6 should center with the auto margins if in standards mode (full doctype) - perhaps you're using an older version of IE?

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

it's not listening. again :(

To be honest you have problems throughout that page, you need to understand how properties work, that is the behavior they default to. rather than throwing properties all over the place. You have height and min-height all over you do not need min-height on the body or html elements just height;100% you will need height:auto for .content in FF.

You want the main layout centered ? you have fixed the width of the container ~760px and auto margined it but you have a table that is ~1024px wide, is this the effect your after to have the main content off the screen to the right?, content is meant to overflow fixed widths I get the feeling that you're working from the notion that IE is providing you with the correct view here and is why it is so important not to code and check in IE but in a proper modern CSS compliant browser i.e Firefox, as this would be a classic error to think that FF was wrong and IE right when in fact if coded correctly in FF in the first place then IE would not be having to demonstrate non standard behavior.
if the content is floated then you will likely need to ensure that it's parent has some form of clearing fix on it to force it to expand to contain it's floated children.

When posting code please keep CSS rules firmly out of the body (inlined style attributes) and either in the head (embedded styles) or as external stylesheets.

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

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 10 years 9 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

it's not listening. again :(

Hugo wrote:
To be honest you have problems throughout that page, you need to understand how properties work, that is the behavior they default to. rather than throwing properties all over the place. You have height and min-height all over you do not need min-height on the body or html elements just height;100% you will need height:auto for .content in FF.

You want the main layout centered ? you have fixed the width of the container ~760px and auto margined it but you have a table that is ~1024px wide, is this the effect your after to have the main content off the screen to the right?, content is meant to overflow fixed widths I get the feeling that you're working from the notion that IE is providing you with the correct view here and is why it is so important not to code and check in IE but in a proper modern CSS compliant browser i.e Firefox, as this would be a classic error to think that FF was wrong and IE right when in fact if coded correctly in FF in the first place then IE would not be having to demonstrate non standard behavior.
if the content is floated then you will likely need to ensure that it's parent has some form of clearing fix on it to force it to expand to contain it's floated children.

When posting code please keep CSS rules firmly out of the body (inlined style attributes) and either in the head (embedded styles) or as external stylesheets.

Hugo.

oh *beep*, you like saw the page when I was screwing around with it through the editor that's supposed to fill it up. That's where the table came from. sorry about that.

I thought height wasn't read by FF, that's why I used min-height, which seemed to fix that. and I know IE is the browser that's *beep*ing up. I have it set to auto. I'm gonna see how that works out. thanks Smile and sorry again. I'm better off posting the code in here than giving a link I guess.

As a rule, I never touch anything more sophisticated and delicate than myself

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

it's not listening. again :(

Quote:
you like saw the page when I was screwing around with it through the editor that's supposed to fill it up. That's where the table came from. sorry about that.

Oh I see , well ignore my comments then!

Quote:
I'm better off posting the code in here than giving a link I guess

No, links are good, as long as they can be kept pertinent and demonstrating the problems in hand.

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

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 10 years 9 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

it's not listening. again :(

ok, well I have altered some things about the height now. Seemed to work, however, the scrolling problem was not yet solved.

What I did,

the container div was positioned as relative, which I've changed to absolute. And now the relative positioned divs inside the container, stretch the container! which is exactly what I needed.

However, because of the absolute positioning, it is no longer properly centered in any browser.

Should I change positioning, or should I pull some tricks to have it aligned properly? it should be centered. I have some crappy table in the content div just to show how it stretches. all style-related articles within the content div can be ignored.

As a rule, I never touch anything more sophisticated and delicate than myself

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 11 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

it's not listening. again :(

Why are you using absolute positioning?

Verschwindende wrote:
  • CSS doesn't make pies

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 10 years 9 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

it's not listening. again :(

basically, because I'm just trying to see if that helps I guess.

As a rule, I never touch anything more sophisticated and delicate than myself

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

it's not listening. again :(

Remove position absolute on the container it doesn't help, it will then center.

You have a narrower width on your content than your container so the layout looks unbalanced was that the intention? remove the fixed width and replace with width:100% also do the same with the menubar which looks odd not stretching the full width.

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