CSS, Internet Explorer, DIV Hot Spot Link, FAIL!
Today’s post is going to be posted in both the /faceplant and CSS portion of the blog today. I do enjoy fixing IE CSS Errors... but come on! Really? This one KILLS ME. If anyone has a better solution, please let me know and I’ll get it posted. Honestly I’ve only checked in IE 7 & 8... I’d hate to see what happens in IE6.
Situation:
You want to create a CSS "hot spot" with a div container. The reason you need a div is because "behind" the div is some dynamic content – lets say an image for this purpose. Your layers are as such:
- div.container
- image within div 'container'
- action you want taken when roll over / hot spot is hit (div.ShowMe)
- the actual hot spot container (div.RollMe)
View the HTML / CSS Setup here:
http://www.vipersuite.com/samples/css/ie_zindex_hot/without.html
.container needs to be positioned as relative due to the absolute divs within. We don’t want them floating around on the page, we want them inside the container.
.RollMe is positioned absolute and in the center of the .container. Using a block display and a specific z-index, height, and width.
.ShowMe is hidden until the .RollMe gets a "roll-over" action.
I know I am kind of assuming you can read JavaScript / jQuery... but you can tell in the jQuery what it is doing.
Point being, take a look at the code with the above link... test in FireFox... then test in Internet Explorer... stupid right? I know. I’ll tell you how to fix it...
View the HTML/CSS changes:
http://www.vipersuite.com/samples/css/ie_zindex_hot/with.html
What I believe to be happening is the div.RollMe doesn’t "exist" in the previous html document. It is used as something other than an element... no clue why. But all I did was add a background-color to the .RollMe.. and vola! IE Reads it like a champ.
But wait, I don’t want the hover action to have color... I just needed the hotspot. Well simply fix that either with JS/jQuery or add
"-moz-opacity:.01; filter:alpha(opacity=01); opacity:.01;"
This should work just fine for you as it has worked for me. I still can’t believe that IE is being crazy like that... but that is Microsoft for you.
Install / Configure mod_security
Security, one of the most important aspects of a web server. After a few days of google'n I have decided to use mod_security.
"ModSecurity is an open source web application firewall (WAF) engine for Apache that is developed by Trustwave's SpiderLabs. It has a robust event-based programming language which provides protection from a range of attacks against web applications and allows for HTTP traffic monitoring, logging and real-time analysis. With over 10,000 deployments world-wide, ModSecurity is the most widely deployed WAF in existence." - http://www.modsecurity.org/
There are many free packages out there with precompiled rules and such.
- Install mod_security: "yum install mod_security"(If you are on Plesk/CentOS) "cd /etc/httpd/conf.d/modsecurity.d/"
- Download HyperOIS.com's rules: "wget http://hyperois.com/files/modsec2_rules.tar.gz"
- Uncompress: "tar -xzvf modsec2_rules.tar.gz"
- "cd /etc/httpd/conf.d/"
- Open/edit mod_security.conf: "vi mod_security.conf"
Many OS/Control Panels are different, so replace the IfModule part only with the following code:
<IfModule mod_security2.c>
SecRuleEngine On
# "Add the rules that will do exactly the same as the directives"
# SecFilterCheckURLEncoding On
# SecFilterForceByteRange 0 255
SecAuditEngine RelevantOnly
SecAuditLog logs/modsec_audit.log
SecDebugLog logs/modsec_debug_log
SecDebugLogLevel 0
SecDefaultAction "phase:2,deny,log,status:406
SecRule REMOTE_ADDR "^127.0.0.1$" nolog,allow
SecServerSignature "Rules Powered By HyperOIS.com"
#First, add in your exclusion rules:
#These MUST come first!
Include /path/to/config/files/exclude.conf
#Application protection rules
Include /path/to/config/files/rules.conf
#Just in Time Patches for Vulnerable Applications
Include /path/to/config/files/jitp.conf
#Comment spam rules
Include /path/to/config/files/blacklist.conf
#Bad hosts, bad proxies and other bad players
Include /path/to/config/files/blacklist2.conf
#Bad clients, known bogus useragents and other signs of malware
Include /path/to/config/files/useragents.conf
#Known bad software, rootkits and other malware
Include /path/to/config/files/rootkits.conf
#Additional rules for Apache 2.x ONLY! Do not add this line if you use Apache 1.x
Include /path/to/config/files/apache2-rules.conf
</IfModule>
- You will want to replace "/path/to/config/files" to the destination you have selected for your rule configs.
- Save your file: ":wq"
- Let's make sure there is no errors: "cd /etc/init.d/" "./httpd configtest"
- If everything is okay, reboot apache! "./httpd restart"
You have just installed and configured mod_security! Congrats!
Hope this helps someone.
Introduction of the web developer: Steven Podlecki
I started programming when I was 14 years old. I started in qBasic which was fun. Simple yes/no programs with loops and such. After qBasic, I started to develop software in Visual Basic. VB was a great introduction to programming and allowed me to quickly learn the dynamics of programming. Developing software to make “life a bit easier” when doing repetitive tasks at work.
One of my favorite programs developed was a .CSV creator for eBay's “Turbo Lister.” It would create dynamic eBay Product Descriptions with different information on one template. It really helped out when you had to develop the design then input 50-100 products each with their own file… after doing the different designs, you would have to make a list of titles… not fun when the lists were a couple thousand items. Normally it would take about 2-4 full business days to complete this task. After the program was designed and working, this task turned into about 1-2 hours total. Not too shabby if you ask me.
While I was happy with VB, I wanted to touch base into PHP. Why PHP? It is open source, extremely dynamic, ever changing, and very powerful. My PHP career started out with just having some fun with different pre-made systems such as osCommerce.
I am a fully self-taught web developer. I started in PHP and XHTML (non-tabless)… after a couple years of getting comfortable with PHP, I learned CSS very quickly. The cross-browser tricks is probably the most fun I've had in the development side. CSS was very easy to learn in my opinion. As of late, I have been having fun with jQuery animations and AJAX. jQuery seems to be very powerful and very much supported cross-browser.
My Tools:
Dreamweaver MX, Flash MX, Adobe Suite CS3, Notepad, putty, Linux, Apache, mod_*, MySQL, oh… and google!
My Expert Knowledge:
PHP, CSS, CSS3, XHTML, Cross-Browser Compatibility, Server maintenance, Online Marketing Solutions, MySQL DB Design/Raw Queries, Windows (ya ya, I know… FAILGA!), jQuery, Free Search Engine Optimization
Stuff I have been google'n on:
jQuery, HTML 5, WordPress, PHP5 OOP