www.webdeveloper.com
Results 1 to 3 of 3

Thread: Overriding parent element font size

Hybrid View

  1. #1
    Join Date
    Feb 2005
    Location
    Norwich, UK
    Posts
    138

    Overriding parent element font size

    Hi,
    I'm creating a menu with text sat on top of thumbnail images.

    For various layout reasons, I've had to set the font-size of the parent container element to 0 (the space taken up by the container appeared larger than the image otherwise).

    The problem is, I then can't set the font size of the text within it using em units - it seems I have to resort to px values instead (as 1em = 0). I'd rather not use explicit px values, as I'm trying to code an adaptive layout.

    Is there any way of ignoring the parent container element's font-size when it comes to the text, or perhaps relating it back to the main document?

    HTML code:
    Code:
    <div class="sect_thumb_container"><a href=""><div class="sect_button"><img src="images/work01.jpg" /><span>Title Text</span></div></a></div>
    CSS:
    Code:
    .sect_thumb_container {
    	width: 50%;
    	float: left;
    	padding: 0;
    	margin: 0;
    	font-size: 0;
    }
    
    .sect_button {
    	font-size: 0.75em;
    	font-weight: bold;
    	margin: 1px;
    	background: #262626;
    	color: #FFFFFF;
    	text-align: center;
    	height: 100%;
    	padding: 0.75em 0;
    }
    
    .sect_button img {
    	max-width: 100%;
    	height: auto;
    	width: auto\9;
    }
    
    .sect_button span {
    	width: 100%;
    	font-size: 1em;
    	color: #FFFFFF;
    	background: #000000;
    	padding: 1em auto;
    	z-index: 10;
    	position: relative;
    	bottom: 0;
    	height: auto;
    }
    In the case above, the .sect_button_span font-size of 1em equates to 0, thanks to the parent (sect_thumb_container) setting font-size to 0.

    So is there anyway of setting it back (ie so 1em relates to the main body element instead?)

    I hope that makes sense!

    Thanks,

    Derek
    _____________________________________________

    http://www.djillustration.com

  2. #2
    Join Date
    Feb 2005
    Location
    Norwich, UK
    Posts
    138
    I think I've got round the problem by placing the text and image elements one after the other within the container element, rather than making the text a child of the image element. This way it then looks to the font size of the container element.
    _____________________________________________

    http://www.djillustration.com

  3. #3
    Join Date
    Jul 2013
    Posts
    14
    The result of this call is a red background for the level-2 list. Since we do not supply a selector expression, the parent element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.
    http://www.globalelist.com/Peoplesof...ail-lists.html

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles