Send to a friend
One of the best computer based drawings I've seen, this video ta..
Iam going to warn you that if you’re a web developer and you watc..
This simple tutorial is a great for those getting to grips with t..
Learn how to use textures and filters to create photo-realistic r..
Jazz up text with Gradient Overlay
Some simple Photoshop techniques for giving your text and little oooomph!..
Panoramic images the easy way with Photoshop PhotoMerge
Creating Panoramic images from your photos is easier than you think, when you know how. So..
Creating a 3D Tunnel Effect in Flash
Learn how to create this very cool 3D tunnel effect in Flash using some simple 2D animatio..
How to transform a standard photograph for use with a specific colour scheme or brand imag..
Problem: Various sizes, margins and padding attributes can display differently in Internet Explorer, this coded snippet can help you sort out these problems.
Add this code with your required settings underneith your pages <style> or external style link:
<!--[if IE]>
<style>
.item {
margin: 5px;
padding: 10px;
}
</style>
<![EndIf]-->
These setting will now only be loaded when your page is viewed in Internet Explorer. I often use this setting to tweak areas of my layout that do not quite display the same as in other browsers.
Problem: When trying to create a DIV tag and the height will not go below about 12px
Simply add the following attribute to the DIV tag
{line-height: 0px;}
If this does not work try adding the line-height attribute to a <p> paragraph tag within the <div> tag itself.
Your final code should resemble one of the following:
<div style="line-height: 0px; height: 5px;"></div>
<div style="height: 5px;"><p style="line-height: 0px;"></p></div>
Problem: Setting the margin attribute for any CSS element in Internet Explorer it will often appear either double the size or with added width, which can seriously disrupt detailed layouts.
Simply use the {display: inline;} attribute on the tag containing your margin setting.
Your final code should resemble the following:
<div style="display: inline; margin-left: 5px;"></div>
Problem: The CSS Light box script will not appear on top of a Flash movie, this disrupts the actual function of the script.
Add the following setting(s) to the Flash HTML code:
<param name="wmode" value="transparent"/>
Also add this to the <embed> tag
wmode="transparent"
Be sure to add both of these settings for this to work properly, your final flash code should look similar to this:
<param name="allowScriptAccess" value="sameDomain" /><param name="wmode" value="transparent" /><param name="movie" value=" movie.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src=" movie.swf" quality="high" bgcolor="#000000" wmode="transparent" width="232" height="218" name=" movie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>
These days to keep ahead of the competition most web hosting companies do just more than provide hosting services. They find ways to provide cheaper services such as cheap dedicated hosting. Not only that but you can also register a cheap domain name with them.
They offer business software for free for a limited time to people who take up business hosting packages. They give away free dial up connections to attract customers and they offer services for website design as well. Not only that but they very particular about the people they hire too. They only look to employ the best out there such as cisco's 642-586 certified.
Comments (18)
Posted by: sezer on 02/05/2008
http://www.comesolvego.com/2008/05/02/the-quickest-css-hack-fix-for-ie/
Posted by: vpetreski on 02/05/2008
I could french kiss you right on the mouth... Birds are chirping, sun is shining... the double margin in IE6 was making me want to jump from a bridge and the display: inline; did the trick. BEAUTIFUL!
Posted by: Aaron Wagner on 01/05/2008
font-size within a div tag will also allow you to make boxes less than the minimal size
Posted by: Anonymous on 08/03/2008
{line-height: 0px;} on the DIV tag! THANKYOU!
Posted by: kbr on 01/09/2007
The minimum height bug usually shows up in empty div spacers like: div id="spacer" style="height:8px;" this is because IE is applying the page (or default) line height to the row. to compensate i just put an empty comment in all my div spacers: div id="spacer" style="height:8px;" works like a charm every time!
Posted by: kds on 28/08/2007
Just use Firefox!!!! Nice post - personally I do the yahoo reset http://developer.yahoo.com/yui/reset/
Posted by: Matt Davies / Attitude Design on 23/08/2007
Pretty much all of these bugs can be addressed simply by remembering to do a CSS reset in your stylesheet. It's good practice anyway, but it also helps to eliminate those pesky IE 'bugs' (many aren't bugs, they are simply browser pre-set styles that haven't been specifically overwritten - hence the css reset) http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Posted by: Matt Wilcox on 19/08/2007
If you are doing height-specific absolute placement then a fix I found useful is to add: p {line-height:0.95em} to only IE viewers. Lines everything up nicely, especially if you are using WYSIWYG
Posted by: methodin on 19/08/2007
does this show same on the each browser like firefox, IE , Opera....!!!
Posted by: mowglitech on 18/08/2007
hi, as if there weren't enough things conspiring to affect the web designer's masterpiece, the web browser also wants to get in on the act. Wot u say?
Posted by: Shailesh Mistry on 31/07/2007
cool
Posted by: 3p on 20/07/2007
hmm cool
Posted by: Tom on 19/07/2007
Thanks for the info Joshua, although I do remember my version of the error working properly in Firefox so I guess i just assumed IE was the culprit, I guess its just one of those things you can never be 100% sure of :)
Posted by: Ben on 19/07/2007
The Flash thing isn't an IE bug, it's an issue in all browsers. And wmode=transparent is only necessary if you want content below (in the Z order) the Flash movie to show through the transparent parts. wmode=opaque works just as well if your lightbox (or whatever) is going to be over the flash movie. Both of these are in contrast with the default wmode=window. And the double margin bug only happens when you're floating the element, and only in the case of a floating element can you safely specify display:inline without your block-level element actually becoming an inline element.
Posted by: Joshua Paine on 19/07/2007
There's also the mysterious disappearing elements bug that can be fixed just by applying the style "position:relative". Details here: evolt.org/article/MSIE6_bug_with_floating_divs_and_spacers/17/23899/
Posted by: chriso on 19/07/2007
Very informative, when i started using css, i used to much divs and guess what i've got same the problems, the minimum height bug. But that was long ago, those divitis years were long forgotten. But still FINALLY I FOUND THE ANSWER!! HELL YEAHH!!
Posted by: tehsemanticcss on 14/07/2007
the minimum height bug was solved on IE only when I used the
tag. But now it is my Firefox which is creating a bigger div!!
Posted by: Guilherme on 01/06/2007
Gradients are like gold when it comes to creating clean, sleek designs, This article hopes..
eres a tutorial on how to create Multi-page PDF documents using Adobe Photoshop, thats rig..
A few tips for using levels in flash when loading swf files, and how to set the position o..
A large selection of expert tips and advice to help you design and market the perfect web ..
This article will teach you how to create an Auto run CD for a fullscreen Flash presentati..
A list of great sites to submit your tutorials and articles that actually bring traffic to..
Send to a friend
CSS "Cascading Style Sheets" LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html