When you have a div-container which has the attribute position-absolute and you put a 2nd div-container inside (which has also a position-absolute attribute) it can happens that Internet Explorer 7 does not interpret this correct.
I had the problem, that the 2nd div-container (which is a fold-out CSS-menu) is larger than the sorrounding div. In IE 7 the CSS-menu lays, in the part outside the sorrounding container, behind those elements. But for a menu you aspect to be the first element in the hierarchy.
Those layer positions can be set using z-index in CSS. The higher the index, the higher the position of the element to users-view. So I set the z-index to a high value but in IE 7 nothing happened.
Continue reading ‘How to use position-absolute and z-index with Internet Explorer 7 and nested containers’
It´s feasible to put elements (like an image) in raw format (base 64 encoded) directly into an HTML-tag. I will show you an example with an img-tag.
First of all you need your image in a base64 encoded format. For this you can use the base64-decoder-encoder of motobit.com. Just choose your file to upload and afterwards hit “convert the source data”. The base64 encoded string will be shown in a textbox. For this example I use the external-link-image of wikipedia. And I´ll get back the following base64 encoded string:
Continue reading ‘How to use images base64 encoded inline an img-tag’
We have decided we our bad Browser-script to not any longer support browsers like IE 6 which does not follow the HTML-standards.
But sometimes, maybe when you are at work, it is not that easy. Sometimes you need a little work around or a special CSS only for IE 6. Today it was one of those days. At work I made a site were articles are shown in a list, only one little overview-snippet for each article. Now I want, to made it more clearly arranged a solid line between each div-container. Thought and done in CSS, it worked fine – in Firefox. But not for Internet Explorer 6.
Continue reading ‘CSS border-bottom for IE 6′
The Internet Explorer 6 has sometimes a problem with floating right. Today I had this problem. I have two div-container: one a image which has to float left and a text block which has to float right. On Firefox this works without any problems. But IE 6 do not float the text to the right but just put it after the image. After a little internet search I found a similar problem, the so called doubled float-margin bug on IE 6. Continue reading ‘Floating problems with IE 6′
Today I had a really annoying problem with two floated elements and a clear afterwards. It´s well known if you want to put two elements (two div-container) side by side instead of one below the other you have to use CSS-floating and to stop the float afterwards (to start the normal document flow) you have to clear the elements.
.element_a {float: left;}
.element_b {float: right;}
.element_c {clear: both;}
Today I had this problem. I was using within a YAML Layout (middle column) some elements, two were floated like shown above. Now I do a css clear for the hr-tag (horizontal dashed line) to stop floating. What I got was the stopped floating, but also a big gap above the line (see first picture below). I was now trying with Firebug and other tools to eliminate this gap for one or two hours and it doesn´t work.
I just wanted to put a negative margin-top to slide the element above. But this doesn´t work at all! 
Continue reading ‘CSS floating problems’
I´m using YAML now for a while on our projects, also at work and for my own website. YAML is build as a core version which has many hacks (maybe for IE) and is made as an 3-column layout. On top of this there are some files which overwrites the other CSS classes and IDs and this is your special layout. Maybe when you use the YAML-Builder you have a finished layout where the classes in the css-directory overwrites the core classes.
For example you want to have a 2-column layout instead of a 3-column one the files in the css-directory set this layout. But when you make your own website you have to overwrite also some settings in the css-directory because you want to change the YAML-layout a bit. Layout, sizing or colours. There are two ways to do this.
Continue reading ‘Using YAML and be fully variable’
last Comments