WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > CSS not behaving properly

Reply
  Thread Tools Display Modes
Old 16th August 11, 12:23 PM   #1
bgareth
WLC Member
 
bgareth's Avatar
 
Join Date: Jul 2010
Posts: 40
Default CSS not behaving properly

Hi there 2 issues which I suspect may be connected:

1) I'm confused by all the conflicting information around which doctype to use to avoid quirks mode and promote cross browser compatibility. (Please don't move my post yet....)

1) In IE9, when I make the browser window smaller on the page below, the purple column block drops to the line below, in Chrome, Chrome helpfully keeps it on the same line making all the columns equally as small to keep them on the same line.

2) I would like to ideally have all my colour blocks the same width, how do I get round compensating the percentage width of the blocks against the padding requirements of the text inside the blocks?

3) In what circumstances should the whole browser window attempt to display everything when it is made smaller and when should it just display what it can encouraging you to maximise the window again? I'm guessing if there's a lot of text it makes little sense to have the window resize attempting to display the whole lot....?

The overall objective of this little project i've set myself is to make sure that my colour blocks always display in the same intended way in every browser that can display images and colour and so be professional. I don't want hacks unless they are acceptable within the industry :-)

At this stage I should ask - does it matter which order you put things in? E.g in div 1 I might decide to have:



Code:
box 2{

height:100%;
width:25%; 
float:right;
background-color:red;
color:green;
}

box 3{

float:right;
height:100%;
width:25%;
background-color:green;
color:white;
}


(I changed around the float and the height and width order here)

Also, when you float an item, does the first item have to have any kind of positioning i.e. absolute or relative or have a left or right margin attribute or can you just rely on box 1's position being on the left to start with by default and tell box 2 to float right of that?


My problematic HTML/CSS is available from:

http://www.garethgroup.com/test/floatcolumnsattempt/

www.garethgroup.com/test/floatcolumnsattempt/css.css (original huh )


Little Biog

My goal is to become professional at website design and development using CSS, Mysql and PHP, fully understand the difference between HTML 4 and 5 (I don't yet) and be able to develop professional websites to make a living.

Website design and development is really important to me because of suffering from Bipolar Disorder (Manic Depression) and often not being well enough to work - website design and development allows me to make a living whilst working from home and taking time out as and when I need to.

Thanks to all those who help me to make this goal a reality - I also commit to sharing what I learn with others to make people's advice and time go as far as possible :-)
__________________
Kind Regards,

Ben
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.

Last edited by bgareth; 16th August 11 at 01:03 PM. Reason: found some answers to my questions by experimenting but can't get any further so I thought i'd streamline the post.
bgareth is offline   Reply With Quote
Old 16th August 11, 02:02 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,196
Default Re: CSS not behaving properly

The order of prperties withing individual rule set do not matter UNLESS you are setting a property twice within a ruleset then the later rule will be applied eg:

border: 1px solid black; will set a border of solid black on all four edges

and after that you set a rule of:

border-color; red green blue;

This will affect ONLY the top, right and bottom borders, setting them to red, green, blue with the bottom border staying black.

if you had them reversed in the ruleset ie.

border-color; red green blue;
border: 1px solid black;

the border-color rule should be ignored and the shorthand rule should take precedence, with all borders set to black.

Other than that the only time where rule order is a concern is with link pseudo-classes, and they have to be set in the correct order

The mnemic is LOVE HATE

for

Link
o
Visited
e
Hover
Active
t
e
chrishirst is offline   Reply With Quote
Old 16th August 11, 04:34 PM   #3
bgareth
WLC Member
 
bgareth's Avatar
 
Join Date: Jul 2010
Posts: 40
Default Re: CSS not behaving properly

Thanks for that Chris - very useful information - could anybody answer the other questions :-) Thanks!
__________________
Kind Regards,

Ben
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
bgareth is offline   Reply With Quote
Old 17th August 11, 02:34 PM   #4
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,710
Default Re: CSS not behaving properly

Quote:
1) I'm confused by all the conflicting information around which doctype to use to avoid quirks mode and promote cross browser compatibility. (Please don't move my post yet....)
That depends what you're using. I prefer XHTML 1.1 strict, but if your useing HTML4, then that needs to be your DOCTYPE. Then use the W3 Validator to make sure you've followed the rules correctly.

What other questions are left?
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 17th August 11, 06:07 PM   #5
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,196
Default Re: CSS not behaving properly

Quote:
Also, when you float an item, does the first item have to have any kind of positioning i.e. absolute or relative or have a left or right margin attribute or can you just rely on box 1's position being on the left to start with by default and tell box 2 to float right of that?
Floats and posioning are two different things.

position absolute removes the element from the document flow so it does not affect element before or after in the document flow.

A float allows the element to take up a position as far to the direction of the float as it can and allows elements to "flow" around the margin edges of the floated element.
chrishirst is offline   Reply With Quote
Old 18th August 11, 11:19 AM   #6
bgareth
WLC Member
 
bgareth's Avatar
 
Join Date: Jul 2010
Posts: 40
Default Re: CSS not behaving properly

Quote:
Originally Posted by chrishirst View Post
Floats and posioning are two different things.

position absolute removes the element from the document flow so it does not affect element before or after in the document flow.

A float allows the element to take up a position as far to the direction of the float as it can and allows elements to "flow" around the margin edges of the floated element.


Thanks for this So am I right in saying that when you float an item, there is no need to set relative or absolute positioning on it, if I am incorrect, in which scenarios would you use both?

Other questions:

1) In IE9, when I make the browser window smaller on the page below, the purple column block drops to the line below, in Chrome, Chrome helpfully keeps it on the same line making all the columns equally as small to keep them on the same line.

2) I would like to ideally have all my colour blocks the same width, how do I get round compensating the percentage width of the blocks against the padding requirements of the text inside the blocks?

3) In what circumstances should the whole browser window attempt to display everything when it is made smaller and when should it just display what it can encouraging you to maximise the window again? I'm guessing if there's a lot of text it makes little sense to have the window resize attempting to display the whole lot....?

The overall objective of this little project i've set myself is to make sure that my colour blocks always display in the same intended way in every browser that can display images and colour and so be professional. I don't want hacks unless they are acceptable within the industry :-)

Thanks Meesa and Chris for your contributions so far.



__________________
Kind Regards,

Ben
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
bgareth is offline   Reply With Quote
Old 18th August 11, 05:39 PM   #7
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,710
Default Re: CSS not behaving properly

1. I don't have IE9 to test.

Quote:
2) I would like to ideally have all my colour blocks the same width, how do I get round compensating the percentage width of the blocks against the padding requirements of the text inside the blocks?
You'll have to use JS to do the calculations.

Quote:
3) In what circumstances should the whole browser window attempt to display everything when it is made smaller and when should it just display what it can encouraging you to maximise the window again? I'm guessing if there's a lot of text it makes little sense to have the window resize attempting to display the whole lot....?
Simple, if everything can be displayed with a reasonable size, then it should all be showed, otherwise it shouldn't. That's why there's the max-width/height and min-width/height CSS styles.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 19th August 11, 01:26 AM   #8
bgareth
WLC Member
 
bgareth's Avatar
 
Join Date: Jul 2010
Posts: 40
Default Re: CSS not behaving properly

Thanks Meesa, is there any other way, than using JS to get equal block widths whilst using padding and whilst filling up the entire width of the page?
__________________
Kind Regards,

Ben
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
bgareth is offline   Reply With Quote
Old 19th August 11, 03:39 AM   #9
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,710
Default Re: CSS not behaving properly

Actually, there may be; I just thought of it. You could have parent containers for the containers that have the padding.

So say you have a three column layout at 20%, 60%, and 20%. You could make three DIVs with those percents, and then in each one, add another DIV in which has a width of 100% and the padding that you want.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 19th August 11, 07:59 AM   #10
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,196
Default Re: CSS not behaving properly

First off you need to forget about positioning TOTALLY there is very little need to position any element.

You ONLY need to apply positioning when an element needs to be moved from its static position like so

So were you thinking of something like this?
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:52 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.