Tiny logo image with oik and Atahualpa theme
I’ve received two reports of the logo image in the header of a website built with the Atahualpa theme becoming minute when oik is activated. It’s due to a CSS issue which can be easily overcome.
In the Atahualpa theme the HTML for the header is created using table tags.
The image ( img ) goes in the first cell ( td ) in the first row ( tr ). The CSS class of this cell is logoarea-logo.
The CSS selector for this cell sets the width of the cell to 1%. Additionally the image has a margin.
td.logoarea-logo {width: 1%; }
img.logo { margin: 0px 10px 5px 10px; }
Unfortunately this produces a conflict with the oik.css file that sets the maximum width of an image to 100%.
img { max-width: 100% }
Since the image is within the table cell it scales itself down to the cell size… which is minute.
The problem can be resolved by altering the CSS for td.logoarea-logo to width: 100%
td.logoarea-logo { width: 100%; }
Live demo of the problem
 |
