How to use very large font sizes in Internet Explorer with CSS that won't affect design?


Tags: css,internet-explorer

Problem :

The font size I need to match the design I have is 85pt, which is extremely large. In IE6 and IE7, my design is affected because the divs that contain these elements become larger than they normally are, and as a result, elements under these are pushed further down, somewhat breaking the design. I have the height defined for these elements and when I decrease the font size, the elements begin to shrink to the correct size. I've added line-height: 0; to the element and this works in all modern browsers.

Unfortunately, the design I'm working on cannot be shown publicly, but I was hoping to get some insight into other possible techniques that I could try to get the design to render correctly. The height of the parent element is 144px, which includes 10px padding on top and bottom and a top and bottom 1px border.

Unfortunately there's not a lot more that I can add to this, but I'll include whatever info I can if asked.



Solution :

Thank you all for your input. Originally I needed absolute positioning on the element in question, while the parent element had relative positioning. However, using this with line-height: 0 caused the text to disappear in IE6 and 7; after trying to figure out where the text was initially, I removed absolute positioning and decided to leave the text left aligned in IE6 and 7, which affected the position of other elements as a result. I revisited the original absolute positioning and added border to the element to reveal its location. Doing this showed that it was exactly as I defined it: an element with a line-height of 0px, so the top and bottom borders were next to each other. For IE6 and 7, I defined line-height: 100%; and my text was almost where I needed it. I added top and the needed pixels and now my element is in the correct position with its line-height not affecting any of the other elements because of the positioning.

Thank you all again for your assistance.


    CSS Howto..

    How to dynamically create a css style rule that is overridable by earlier rules

    Showcase Image and Carousel Caption

    How to make liquid layout in css using em?

    How to make a full page JS and CSS menu

    How do you associate a css/sass stylesheet to a view in rails?

    how to show element if visible in view-port with jQuery? (UPDATE)

    How can I remove a bootstrap buttons hover effect?

    How to make a table with no cells-per-row defined only with CSS

    jQuery UI sortable: how to leave css values of changed items untouched?

    HTML & CSS: How do I completely remove the scroll-bars on the side of
    ?

    How to align text in the following way using css / html?

    How to style my unordered list like a table?

    How to apply asynchronously fetched CSS into view

    How to remove Clear:Both in CSS

    Resharper: How to suppress inspection errors resulting from CSS hacks?

    TYPO3: how to add an element to the RTE, which allows the user to use a defined CSS class

    How can I place an element at the top of a page using CSS?

    When styling XML with CSS, how to refer to tag names that contain periods or colons?

    How to hide text using CSS?

    How to apply different styles based on the number oif col in a table

    How to CSS style a radius border

    Show/hide without using CSS

    How can I mark it up? [closed]

    How can I get a IE8-compliant css theme for JSTree?

    How do I make these buttons stay activated after clicking on them?

    How to make an image inside a diamond shape morph to circle

    CSS - How to center a div relative to a background image positioned as cover

    how to animate a css grandient change with jquery

    In CSS how to achieve, two cells with auto width in fixed width parent, with priority to see content in second cell and with ellipsis at first cell?

    How to position two elements side by side using CSS