I am having a problem trying to float a div in IE using the following CSS:
.highlight {
position: absolute;
top: 20px;
right: -1px;
width: 20%;
margin: 0px;
padding: 3px;
font-size: 0.8em; /* font size ssssssssssssssssssssssssssssssssssssssss */
background-color: #CCCCFF;
border: 1px solid #006699;
}
If you view the following link
<!-- m --><a class="postlink" href="http://dev.casac.co.uk/?cl=section&op=display_section_area&sid=14">http://dev.casac.co.uk/?cl=section&op=d ... rea&sid=14</a><!-- m -->
in both IE and then Mozilla/Firefox you will see that the floated div is treated differently by the different browsers. How can I get IE to size the div as 20% of the screen (rather than 20% of the parent div) as is done by Mozilla/Firefox.
Any advice or pointers in the right direction are gratefully accepted.Place the div before the table(layout)
Change:
.highlight {
z-index:1;
position: absolute;
top: 125px;
right: 7px;
width: 20%;
margin: 0px;
padding: 3px;
font-size: 0.8em; /* font size ssssssssssssssssssssssssssssssssssssssss */
background-color: #CCCCFF;
border: 1px solid #006699;
}
The layout will break on very narrow screens, but that is the consequence of table layout.Due to the way the templating system works and the way the layout is organised this is not possible.If you can't move the div then change the width in .highlight to:
width: 20% !important; width: 37%;
Moz. will use 20%, but IE will use 37%Thanks. Seems to work fine. Are there any disadvantages to using this kind of workaround.
Re Tables, I have thought about replacing the tables with divs, so that the layout is structured using divs (rather than the table element). Would this change allow me a better approach to solving this div width issue?
Thanks again for you help.The !important declaration (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules">http://www.w3.org/TR/REC-CSS2/cascade.h ... tant-rules</a><!-- m -->) is ignored by IE win and old versions of NS. It's use "safe".
Using CSS for layout is preferable to tables.
.highlight {
position: absolute;
top: 20px;
right: -1px;
width: 20%;
margin: 0px;
padding: 3px;
font-size: 0.8em; /* font size ssssssssssssssssssssssssssssssssssssssss */
background-color: #CCCCFF;
border: 1px solid #006699;
}
If you view the following link
<!-- m --><a class="postlink" href="http://dev.casac.co.uk/?cl=section&op=display_section_area&sid=14">http://dev.casac.co.uk/?cl=section&op=d ... rea&sid=14</a><!-- m -->
in both IE and then Mozilla/Firefox you will see that the floated div is treated differently by the different browsers. How can I get IE to size the div as 20% of the screen (rather than 20% of the parent div) as is done by Mozilla/Firefox.
Any advice or pointers in the right direction are gratefully accepted.Place the div before the table(layout)
Change:
.highlight {
z-index:1;
position: absolute;
top: 125px;
right: 7px;
width: 20%;
margin: 0px;
padding: 3px;
font-size: 0.8em; /* font size ssssssssssssssssssssssssssssssssssssssss */
background-color: #CCCCFF;
border: 1px solid #006699;
}
The layout will break on very narrow screens, but that is the consequence of table layout.Due to the way the templating system works and the way the layout is organised this is not possible.If you can't move the div then change the width in .highlight to:
width: 20% !important; width: 37%;
Moz. will use 20%, but IE will use 37%Thanks. Seems to work fine. Are there any disadvantages to using this kind of workaround.
Re Tables, I have thought about replacing the tables with divs, so that the layout is structured using divs (rather than the table element). Would this change allow me a better approach to solving this div width issue?
Thanks again for you help.The !important declaration (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules">http://www.w3.org/TR/REC-CSS2/cascade.h ... tant-rules</a><!-- m -->) is ignored by IE win and old versions of NS. It's use "safe".
Using CSS for layout is preferable to tables.