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?
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?
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..
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..
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.
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
I've encountered this a lot of times and never have been able to ensure a decent fix.
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.
it's not listening. again :(
aah thanks that did the trick.
now all that's left is the scrolling problem..
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?
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.
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.
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 and sorry again. I'm better off posting the code in here than giving a link I guess.
it's not listening. again :(
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!
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.
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.
it's not listening. again :(
Why are you using absolute positioning?
it's not listening. again :(
basically, because I'm just trying to see if that helps I guess.
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.