SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 34 of 34
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,857
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by wc43870n View Post
    what's a good method for testing ie on a mac?
    If you mean what's the best way of running Windows on a mac then I would suggest parallels.

    There is no version of IE for the actual mac system (apart from IE5 mac which died ten years ago).

    so if i have a div called abc, and i want to center it, do i need to set a width first and then use auto left and right margin?
    and what would be the best width to set it to ?
    Yes normal static elements need a width and auto margins to centre them. If you don't give the element a width then it becomes auto width which means it strecthes from left to right and is therefore centred anyway because there is nothing to centre. The width you apply depends on the width of the content you want to hold and how it fits with the layout so I can't give you a "one size fits all" answer.

    If you want shrunk wrapped content to centre then you can without a width use the following techniques:

    1) Make the element display:inline-block and then apply text-align:center on a parent. No width is required.

    2) Make the element display:table and use auto margins. No width is required for table elements to center. (IE8+ only)

    3) CSS3 flex box. Browser support is not good enough yet.

    This one needs a width:
    4) For absolute elements give them a width, auto margins and also left:0 and right:0 and they will center (IE8+ only)


    so if i have a design that is approximately 724 px and i always want it to be centered and have space on both the left and right sides.
    Yes just use auto margins with that width specified.

    would i use any specific type of positioning scheme?
    Not unless you want to remove elements form the flow.

    Hey paul, i'm wondering how do you get the border radius rounded buttons to work in IE any version? 6-8 for example. it works in 9 right?
    Don't bother IE8 will be gone in a year or two so don't waste effort on small embellishments like round corners. There are polyfills such as CSS3 PIE but I generally find they cause more problems than they fix.

    Read the link below first:

    http://dowebsitesneedtolookexactlyth...rybrowser.com/

  2. #27
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,857
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by wc43870n View Post
    i read that position: fixed does not work in IE 6 or 5. Does it work in IE 8?
    position:fixed works from IE7+

    Ie6 is dead so don't bother with it in any special way. Just let it have normal non fixed elements.
    when are the best times to use this? only when you want something to stay in the same spot all the time when you scroll.
    Yes a fixed positioned element is one that doesnt scroll with the document. It just stays fixed to the spot.

    Fixed positioned elements are best for small areas of content such as a one line header (menu ) or a one line footer.

    The major problem with fixed elements is that if any content reaches outside the edge of a viewport (any edge) then it is unreachable because you can't scroll it back into view. Therefore it is not useful for side menus unless they are only 3 or 4 lines tall or you give them their own scrollbar (which is messy).

    Fixed elements are removed from the flow so you always have to make sure that existing content can be seen because the fixed elements will sit on top of anything in the way.
    what is the workaround for making it work in IE 6 ?
    Don't bother supporting IE6. It's use is down to 0.2% which is virtually zero as far as we are concerned. If you need to support IE6 then just don;t bther with fixed elements. It's no great loss.

    Websites are built with progressive enhancement (or graceful degradation) in mind in that you enhance the view for more capable browsers but don't try to support new features in old browsers. (Jquery2 doesn't even support IE8.)

  3. #28
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    in the rare instance, where you need to support china, where there remains a 22% rate of users on IE 6, then i would need to know. so out of curiosity, i would like to know if at all possible about ie6 as well.

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,857
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by wc43870n View Post
    in the rare instance, where you need to support china, where there remains a 22% rate of users on IE 6, then i would need to know. so out of curiosity, i would like to know if at all possible about ie6 as well.
    Hi,

    I think you'll find that the China figures you mentioned were from about three years ago and now they are down to about 6%.

    The answer is still the same though. IE6 doesn't support position fixed so just give IE6 users a normal element instead. There's no great loss if IE6 users get a static header and better browsers get a fixed header. They won't know what they are missing.

    Polluting your mark up just to support an old browser is not a good move unless you have no choice especially when the browsers works ok without the enhancement you are adding. There are ways of adding support for fixed positioning in IE6 (to answer your question) requires either javascript or flaky hacks.

    Fixed positioning is quite often troublesome and if you have a fixed header any "in page links" will scroll underneath the fixed header and confuse users so care must be taken in how you implement it.

  5. #30
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    
    .feature {
    	width:100%;       /* this indicates that my section with the 3 articles spans 100% of the site */
    	display:table;    /* this apparently makes this behave like a table element, but how? 
    	This is for my section with 3 articles. */
    }
    
    article.main-article {
    	display:table-cell;  /* enable equal columns in ie8+ , normally lets
    	the element behave like a td element */
    	
    	/* top, right and left, and bottom */
    	padding: 238px 0 10px;
    	background: pink;
    }
    
    The difference between these two is that feature is the class selector  that styles the container for the 3 articles. 
    
    Article.main-article is the class selector that styles the individual articles. 
    
    So the container is set to display table to act as a table container.
    
    And the article.main-article  display : table-cell, makes each article act like real table cells. 
    
    Which lines in this are IE specific? 
    
    Is it only the width and display in .feature ? 
    And the display: table-cell in article.main-article? 
    
    Is the top padding here for article.main-article strictly for the background image that I have set which is actually 218px x 218px? 
    
    Is there any particular reason why we provide 238 px?  Instead of 218px? 
    
    Bottom padding here is 10px for apparently giving some space between the background image and the text correct?
    Code:
    /* this features section is a parent level element */
    .feature {
    	width:100%;       /* this indicates that my section with the 3 articles spans 100% of the site */
    	display:table;    /* this apparently makes this behave like a table element, but how? 
    	This is for my section with 3 articles. */
    }
    
    .feature h2 {  /* feature is a section class and the h2 is the element under that section and in each article. 
    Therefore within each article, the h2 text is being centered */
    text-align:center; 
    }
    
    
    .feature p {
    	padding:0 10px;
    
    /* top , right and left, and bottom margins , bottom equal to 1 em */
    	margin:0 0 1em; 
    }
    
    
    article.main-article {
    	display:table-cell;  /* enable equal columns in ie8+ , normally lets
    	the element behave like a td element */
    	
    	/* top, right and left, and bottom */
    	padding: 238px 0 10px;
    	background: pink;
    }
    
    /* main-article is the class for each of the articles */
    * html .main-article {  /* this is a ie hack */
    
    float:left; 
    }/* ie6 gets floated */
    
    *+html .main-article {  /* weird +html selector */
    float:left 
    }/* ie7 gets floated */
    
    /* here i am using element.class to style the background and also set the horizontal position of the image 
    in the background to the center. and the vertical position just 20px down.  */
    
    article.firstb {
    	background: url("http://webpage.pace.edu/wc43870n/engine/img/feature_01_b.png") no-repeat 50% 20px;
    	width: 33.3%;
    
    }
    i looked through this code and i wondered do i need to set a width of 33.3% like this?

    I also wondered how am i centering the section that contains these 3 articles.
    the total width here is defined as 100% and i haven't defined margin -left and right to auto?

    is there a good tool to measure the width of your layout elements?

    If i do define margin left and right auto, do i do it to the section tag here? which has a class as feature?

    The other thing i wondered was why IE needs to float the main articles. what would happen if they weren't floated?

    let me know, thanks.

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,857
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I'm not sure which questions I needed to answer but I've pulled some out of the comments

    this apparently makes this behave like a table element, but how?
    All elements have a display property and a normal html has a display property of table. CSS replicates this table behaviour when you change an element to be display:table and then it takes on most of the characteristics of a table.

    You can do similar with some other elements and you could set a p element to display:list-item and get a bullet (although it wouldn't make much sense).
    Which lines in this are IE specific?
    These 2 rules below use two well known parsing hacks (which are still valid code) to pass styles to IE7 and IE6 which don't understand the display:table properties and would stack those three horizontal elements vertically if they were not floated.
    * html - this is for IE6
    *+html - -this is for IE7

    You just create separate rules when you need to target those browsers. Don't comma separate those rules because each doesn't know the other and so both will fail.

    So If you said:

    Code:
    p {color:red}/* all browsers*/
    * html p{color:blue}/* ie6 only*/
    *+html p{color:green}/* ie7 only */
    The above is valid code but just nonsense and relies on a parsing hack in ie6 and 7. There is no parent to the html element so placing a universal selector (*) before html has no meaning because there is no such element and the rule should be ignored. IE6 and 7 get it wrong but in different ways that allow us to use it as a 100% safe hack.

    Code:
    * html .main-article { float:left }/* ie6 gets floated */
    *+html .main-article { float:left }/* ie7 gets floated */
    Is the top padding here for article.main-article strictly for the background image that I have set which is actually 218px x 218px?
    Yes it provides space for the image and also a bit of breathing space without needing extra rules.
    Is there any particular reason why we provide 238 px? Instead of 218px?
    Just breathing space at the bottom instead of a margin. It's not of vital importance.

    Bottom padding here is 10px for apparently giving some space between the background image and the text correct?
    Not quite. The padding bottom is after the text and makes sure theres some space before anything else starts. We have increased the min-height anyway but this was just an extra precaution. (Padding can always be useful for stopping margin-collapse on main containers and I often give those elements a 1px top and bottom padding.)

    Most of the above can be tweaked as you like but you must always have enough height to show the image and to keep the following text clear.
    i looked through this code and i wondered do i need to set a width of 33.3% like this?
    I think I answered that in a previous post and that element would be better as auto-width but setting a width on the inner block instead (the block that holds the text.)
    I also wondered how am i centering the section that contains these 3 articles.
    the total width here is defined as 100% and i haven't defined margin -left and right to au
    If you are referring to the code I gave then this code centers the elements.

    Code:
    section.main {
    	max-width:1280px;
    	margin:auto;
    	overflow:hidden;
    }
    It sets a max-width and then uses auto margins.

    is there a good tool to measure the width of your layout elements?
    There are a number of add-ons for Firefox which shuld do the job. I use a tool called calipers which is quite useful.


    If i do define margin left and right auto, do i do it to the section tag here? which has a class as feature?
    That's answered already above I believe.

    The other thing i wondered was why IE needs to float the main articles. what would happen if they weren't floated?
    They would be non floated and just stack up vertically.
    Last edited by Paul O'B; Nov 5, 2013 at 02:41.

  7. #32
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    79
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    drawbacks to using css3 pie

    Hi Paul,

    i was just wondering about the drawbacks to using css3pie.com which helps me use things like boxshadow in older versions of i.e.?

  8. #33
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,857
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by wc43870n View Post
    Hi Paul,

    i was just wondering about the drawbacks to using css3pie.com which helps me use things like boxshadow in older versions of i.e.?
    There are a number of bugs that can crop up when you use css3pie and they are actually documented on the site. It can get pretty tricky in complicated stacking situations and I just feel that for old browsers its a step too far these days.

    It was fine a few years ago before IE9 came out but why weigh down your page with decorations that few will see and those that do see it will get a slower response on the page due to all the work behind the scenes drawing these extra decorations.

    Most of my clients agree and we let ie8 and under have square corners and no shadows (and sometimes they look nicer and cleaner than the enhanced version - especially as "flat design" is now the vogue).

    If you use it sparingly you should be ok but be aware you could send 90% of your time fixing up old browsers rather than concentrating on the newer ones. It all depends on your priorities and of course your audience. If all your users use IE8 then you may want to make the experience better (but better may mean that the site is quicker and easier to use rather than prettier).

  9. #34
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    One reason you might want/need to use something like pie is if your clients are moslty using the site you build for them and it's on an intranet. If their office version of IE is low then it might be worth it to add in all the pie junk.

    External sites aimed at the general populace are better to go by statistics or, what I prefer, what Paul said (leave little graphical things old in old browsers).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •