css3

Have a equal row height in a dropdown list

I’ve got a dropdown list. Each row is in a different font type. Now the problem is that each row height is different due to the different font type. My question is that how do I have a equal height for all rows in my drop down list? EDIT: <select class=”fonts”> <option style=”font-family: ‘Comic Sans MS'”>Comic Sans MS</option> <option style=”font-family:…
Read more

CSS-based menu bar inside a table: li’s are 1px off; problems with the table border?

Edit: The target browser is IE10 or higher; no need for compatibility to other browsers. Inside the header of a page I have 3 elements (this is also the order): An application logo The application title A CSS-based menu bar Here is a JSFiddle for those who can’t wait 😉 The header itself is 60px high, the elements should be…
Read more

Can’t load svg image using css property

I try to load image using css property background in the following way: background: #0d2c40 url(../img/icon-star.svg) no-repeat left bottom; My directory structure has the following structure: What I do wrong? Source: css3

Expand Collapse menu on click

I am trying to replicate this menu found here: http://www.google.com/makani/ (which is only viewable on mobile or tablet devices). I have managed to replicate the static menu button, but i am struggling to get the contents to exapnd on click. HTML: <body> <div class=”header compact” role=”banner”> <div class=”menu “> <h2> Menu </h2> <div class=”nav” style=”width: 536px; height: 615px;”> <ul role=”navigation”…
Read more

CSS rotate making links unclickable unless double clicking

I can’t seem to find the issue that is causing my links to only be clicked on the white portion. It’s a “3D” button by that, I mean it is a link with CSS rotate transitions. I’m not able to find any solutions so I’m looking for some help! Here’s the codepen link. HTML: <nav> <ul> <li><a href=”index.html” data-hover=”Home”>Home</a> </li>…
Read more

Add style to table by id

I have a table #good-table. Could I add to all content in this table ( a,div,img,td,th … ) something like *, *::before, *::after { box-sizing: border-box; } but only for this table and content in this table. Thanks Source: css3

Rotating images on a circular path using CSS/SASS

I came across Hugo Giraudel’s excellent tutorial on arranging images on a circle using SASS/CSS, and I am trying to take it another step further by animating the rotation of the circle of images. I have modified a codepen showing one of a variety of unsatisfactory results I am getting. The HTML is just an unordered list of five images:…
Read more

Float text right even when text falls below image

I have an image with text right next to it floating. It works fine for large desktop. But when I reduce device dimensions then the text does not float nicely vertically anymore. Basically, the text goes below the image and takes the full line. How to get the text always to float right (vertically aligned nicely) regardless device dimensions /…
Read more