Thursday, July 26, 2012

CSS: Solution for negative margin-top in Chrome and Safari due to min-height

There are different reasons for negative margins not being translated properly in Chrome and Safari. This is a particular scenario that involves min-height. I had a div whose negative margin-top is not working in Chrome and Safari. Worked in Firefox, Opera and IE 9 but not working in Chrome and Safari. This is what I had:

<div id="top-div">
  <div class="container">
    <img src="image-link" />
  </div>
</div>

<div id="bottom-div">
  <div class="container">
    <p>text text text</p>
  </div>
</div>

The CSS for the above was like this:
#top-div .container {
  min-height:250px;
}

#bottom-div {
  margin-top:-50px;
}

Now the fix. All I had to do was add "height:100%" in "#top-div .container", like this:
#top-div .container {
 min-height:250px;
 height:100%; /* adding this does the trick for Chrome and Safari */
    }

Giving a fixed required height such as "height: 300px" might work as well (can't remember if I tried this), such as:
#top-div .container {
  height:300px;
}

Tuesday, July 3, 2012

Concrete 5: .htaccess redirect - add .html extension

If you want to add .html extension to the end of the URL, try the code below in your .htaccess file. Also make sure Pretty URL is enabled from Dashboard.

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME}/index.html !-f
RewriteCond %{REQUEST_FILENAME}/index.php !-f

# Rewrite rule for displaying as directories
#RewriteRule ^(.*)$ index.php/$1 [L] # disable this

# Rewrite rule for appending .html
RewriteRule ^(.*)\/$ $1.html [R]
RewriteRule ^(.*).html$ index.php/$1 [L]