Please assist in resolving this basic CSS problem

[unconformed]

Hi

I hit the website “leanstack.com” recently (great site for business modeling BTW) and noticed some odd and thought I’d have a crack at fixing it in browser for fun.

We can see the problem here:

To replicate, you need to make a new canvas and then select “Edit title”.

Here is the HTML:

http://pastebin.com/wkDiLgY2

(pls tell me baste way to paste code here)

Here is the CSS<, along with my lame solution (I know !important is not a great solution, and zero padding is also not good)

/* this is the entire element */#canvas_title_container input { height: 2...

Which results in this

Please, i you any advice.

I am unsure about targeting elements in forms. I know the ID is overriding the input element.

Thanks

[Erik_J]

Hi,

To replicate, you need to make a new canvas and then select “Edit title”.

But first create an account, sorry no deal. So I’m limited to your posted code snippets.

(pls tell me baste way to paste code here)

Paste the code, select it, hit the </> button above:

<form class="edit" style="display: block;" id="edit_canvas_226975" action="/canvases/226975" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" value="✓" type="hidden"><input name="_method" value="patch" type="hidden"><div class="textarea-container">
<input autocomplete="off" value="Whitelabel - Health food, healthy lifestyle market" name="canvas[name]" id="canvas_name" type="text">
</div>
<input name="commit" value="Save" class="submit" type="submit">
</form>

/* this is the entire element */
#canvas_title_container input {
    height: 24px;
    font-size: 25px;
    color: #222;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 3px;
    width: 35rem;
}

/*this controls the input field (I suck at forms)*/
input[type="submit"] {
    font-family: Tahoma,Verdana,Arial,sans-serif;
}
/* I do this very poorly here to target and override input element, the result is not event that good! */ 
 
input[type="submit"] {
    font-family: Tahoma,Verdana,Arial,sans-serif;
    font-size: 15px !important;
    padding-top: 0px !important;
}

Your Pastebin code (posted above) isn’t complete, e.g. the “#canvas_title_container” isn’t in the html and the screenshot show that the submit input has styles that overrides some of the “#canvas_title_container input” declarations.
The css looks weird or fragmented. Is the code snippets from the site’s actual files or is it what your browser tool displayed?

My two cents:
Instead of an arbitrary font-size for the submit button you could try 100% or inherit. Can also be useful to add in the eventual css reset ruling.

[unconformed]

Hi - thanks for taking a look - sorry for delay.

The css looks weird or fragmented. Is the code snippets from the site’s actual files or is it what your browser tool displayed?

It is what the browser displayed.

I tried your suggestion in browser, and it target the entire element.

This paste bin should have everything:

// complete HTML

The issue seems so basic, input[type=“submit”] is being overridden by #canvas_title_container input. Should there be something in the html to help with specifity?

Cheers