SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help about CSS Hack

    Hi there,

    Can anyone tell me what is this hack all about?

    body {
    <strong>text-align: center;</strong>
    }

    #wrapper {
    width: 720px;
    margin: 0 auto;
    <strong>text-align: left;</strong>
    }
    When I write it the same way, it is not displaying the result in major browsers but on removal of <strong> & </strong>, it is displaying properly.

    Please explain me the meaning of this (which browser will aceept this and which will skip) and when to use this.

    Thanks

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should never have HTML elements or comments in a stylesheet.

    You would put text-align:center on body to compensate for IE5.x/Win not understanding that auto left and right margins should center a block-level element and thinking that text-align:center floats block-level elements in addition to inline elements. text-align:left is used to set the text-align back to its default in #wrapper and its children.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the simple solution

    If things can be done so smoothly, I wonder why do people use hack???

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But the HTML elements in the stylesheet isn't a hack, it's an error.

    Where did you copy that code from?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I took it from the same old place.

    CSS Mastery: Page Layout

    The article is excellent but I didn't understand that hack(or whatever described there) part.

    One more thing, when I am testing my page without those, IE 6.0 is accepting margin: auto.

    That's why I was wondering why is that required?

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE 6 probably ran into a page with a proper complete DOCTYPE for starters, which puts it into standards rendering mode. From there, it saw that the element in question had a width applied to it, and then from there was able to center it via automatic widths on the left and right margins.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I see what you're talking about. The HTML was meant to be code tags. Won't work here anyway. You need to use the [code ] [/code] tags and then the [b ] bold tags [/b] to highlight what you want.

    text-align: center is used for IE 5.x and IE 6 in quirks mode. By setting the first child element of the element with the "hack" to left, it clears everything contained in it and allows for normal flow to resume.

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah. The <strong> elements are shown because the code is placed in a <textarea> instead of a <pre>. The <strong> elements should not be included in your stylesheet.

    IE6 only needs the hack if it's in quirks mode. If margin:auto works then IE6 is in standards mode.

    I used a contact form on their site to inform them of the problem.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't look at the site. I thought he was just trying to highlight that particular segment of code for our benefit.

  10. #10
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By the way, I am totally now.

    What are you guys talking about?

    I had pasted the code in the previous thread of mine "Gap b/n content and footer".

    As Dan said, may be the DOCTYPE triggered IE6 to be in standards complaint mode. I was actually going through the tutorial and whenever I practice some, I always open a basic page from my favourite Dreamweaver 8. (No need of further tensions of DOCTYPE and all )

    Here it goes again for reference

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>2 Column Fixed Centered Layout</title>
    <style>
    
    * {
    	margin: 0;
    	padding: 0; 
    }
    
    body {
    	
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10pt;
    }
    
    #branding h1 {
    	margin-top: 20px;
    	padding: 2px 10px;
    	color: #515151;
    }
    
    #branding h3 {
    	padding: 0 0 20px 10px;
    	color: #888;
    }
    	
    #wrapper {  
    	  width: 720px;  
    	  margin: 0 auto;  
    	  border: 1px solid #000;
    	  background: #fafafa;
    }  
    
    #content {
    	 width: 520px;  
         float: right;  
    	 background: #dedede;
    }
    
    #content h1, h2, h3, p {
    	padding: 10px 20px;
    	margin: 0;
    }
    
    #mainNav {  
    	  width: 180px;  
    	  float: left; 
    	  background: #888 
    }
    
    #mainNav h3 { 
    	padding: 10px 20px;
    	margin: 0;
    }
    
    #footer {
    	 clear: both;
    	 background: #555;
    	 color: #ddd;
    	 border-top: 1px solid #000;
    } 
    
    #footer h4 {
    	margin: 0;
    	padding: 10px 20px;
    } 
    
    </style>
    </head>
    
    <body>
    
    <div id="wrapper">
    <div id="branding">
      <h1>CSS Mastery - Two Column Layout </h1>
      <h3>By: Andy Budd with Cameron Moll and Simon Collison</h3>
    </div>
    <div id="content">
     <h3>Content area</h3>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris sem purus, venenatis eu, bibendum vel, elementum sed, mauris. Phasellus vitae justo vel ante eleifend pretium. Proin mattis ante id dui. Vestibulum faucibus, sapien at hendrerit suscipit, felis magna sodales diam, vel tempus nibh nisi eget justo. Vestibulum cursus nisi vel nunc. Pellentesque tincidunt. Phasellus non sapien in leo ultricies imperdiet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sit amet ligula vitae dolor consectetuer rutrum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut mollis venenatis lacus. Curabitur pellentesque. Curabitur lacinia vestibulum quam. Mauris iaculis sapien id risus. Quisque imperdiet justo in justo. Phasellus vitae sapien. Quisque leo. Vivamus fermentum, sem et pharetra cursus, eros urna eleifend lectus, tempus sodales est erat vel dui. Vestibulum gravida, augue eget viverra sodales, purus metus tempus leo, in tempus turpis enim eu massa. </p>
    
    <p>Nam magna. Vivamus massa erat, commodo a, ullamcorper pellentesque, vestibulum ac, ipsum. Praesent tempus felis sit amet orci. Aliquam scelerisque, tortor ut luctus aliquam, sem leo hendrerit sem, quis mattis arcu libero non nisl. Sed in dui vel neque lacinia porttitor. Donec velit enim, lacinia at, iaculis non, viverra nec, arcu. Curabitur non risus vitae mi tristique fringilla. Vestibulum adipiscing, ante eget commodo faucibus, risus quam tincidunt ante, non mollis erat lacus et tortor. Maecenas odio urna, tincidunt in, vulputate vel, congue eu, tellus. Sed imperdiet porttitor leo. Nam vulputate leo sit amet ligula.</p>
    </div>
    <div id="mainNav">
     <h3>Left Navigation</h3>
    <p>Vivamus massa erat, commodo a, ullamcorper pellentesque, vestibulum ac, ipsum. Praesent tempus felis sit amet orci. Aliquam scelerisque, tortor ut luctus aliquam, sem leo hendrerit sem, quis mattis arcu libero non nisl. Sed in dui vel neque lacinia porttitor. Donec velit enim, lacinia at, iaculis non, viverra nec, arcu.</p>
    </div>
    <div id="footer"> <h4>This is Footer</h4></div>
    </div> 
    </body> 
    </html>

  11. #11
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan thought that you added the <strong> elements to make the text-align declarations bold.

    I actually went to the page you linked to and saw that they were added to try to make the text-align declarations bold but were showing up because the example code was placed in <textarea>s instead of <pre>s.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With only 256MB of RAM on this machine, and a lot of tabs open as it is, I'm trying to keep what memory open that I can. Hence my refusal to open yet another tab just to go to a reference site.

  13. #13
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh God!

    Since then I was thinking that it was a hack (to combine html tags and css) to make it work in IE 5.x, 6 but when I actually tried, I found that it was not working anywhere!

    So I removed that strong and it was working perfect! I would have never found out that on my own.

    Dan thought that you added the <strong> elements to make the text-align declarations bold.

    I actually went to the page you linked to and saw that they were added to try to make the text-align declarations bold but were showing up because the example code was placed in <textarea>s instead of <pre>s.
    Thanks a ton Kravvitz for explaining this.

    By the way,

    With only 256MB of RAM on this machine, and a lot of tabs open as it is, I'm trying to keep what memory open that I can. Hence my refusal to open yet another tab just to go to a reference site.
    I can understand this but whatvever happens, you guys are very prompt in replying! All of my doubts are clarified!


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
  •