LinuxQuestions.org
Latest LQ Deal: Latest LQ Deals
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 10-06-2022, 01:27 PM   #1
mfoley
Senior Member
 
Registered: Oct 2008
Location: Columbus, Ohio USA
Distribution: Slackware
Posts: 2,195

Rep: Reputation: 165Reputation: 165
css styling for input tag within DIV not working


I have the following:
Code:
<style>   
div.booga input[type="text"] { font-family: 'Courier New'; color: blue }
</style>

:
:

<div class=booga style="position: absolute; top: 190px; left: 180px">     
    <input type="text" name="FMname" readonly width: 35em; border: 1px solid blue;" value="John M."/>
</div>
The text "John M." neither shows with Courier New, nor in blue. What am I doing wrong?
 
Old 10-06-2022, 01:57 PM   #2
scasey
LQ Veteran
 
Registered: Feb 2013
Location: Tucson, AZ, USA
Distribution: CentOS 7.9.2009
Posts: 5,569

Rep: Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175
The in-line style specification overrides the definition. The C in CSS stands for Cascading.
From w3schools:
Quote:
All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:

Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default
So, an inline style has the highest priority, and will override external and internal styles and browser defaults.
https://www.w3schools.com/Css/css_howto.asp

Last edited by scasey; 10-06-2022 at 01:59 PM.
 
Old 10-06-2022, 02:05 PM   #3
teckk
Senior Member
 
Registered: Oct 2004
Distribution: Arch
Posts: 4,448
Blog Entries: 5

Rep: Reputation: 1548Reputation: 1548Reputation: 1548Reputation: 1548Reputation: 1548Reputation: 1548Reputation: 1548Reputation: 1548Reputation: 1548Reputation: 1548Reputation: 1548
This worked for me.

Code:
<!DOCTYPE HTML>
<html lang = "en">

<style>   
<!--div.booga input[type="text"] { font-family: 'Courier New'; color: blue }-->
    div {font-family: 'Courier New'; font-size: 16px; background-color: #FFFF99; color:darkblue}
</style>

:
:

<div class=booga style="position: absolute; top: 190px; left: 180px">     
    <input type="text" name="FMname" readonly width: 35em; border: 1px solid blue;" value="John M."/>
</div>
But, I don't do this much.
 
Old 10-06-2022, 02:33 PM   #4
boughtonp
Senior Member
 
Registered: Feb 2007
Location: UK
Distribution: Debian
Posts: 2,978

Rep: Reputation: 2119Reputation: 2119Reputation: 2119Reputation: 2119Reputation: 2119Reputation: 2119Reputation: 2119Reputation: 2119Reputation: 2119Reputation: 2119Reputation: 2119
Quote:
Originally Posted by mfoley View Post
The text "John M." neither shows with Courier New, nor in blue. What am I doing wrong?
At least four things...
* Not stating which browser(s) you are testing this with.
* Not using the browser developer tools to inspect the element and see whether styles are applied or not and whether anything is overriding it.
* Not re-testing your partially-simplified example before - your example (first code block below) does do what you say it doesn't.
* Not simplifying your test case as far as possible - i.e. strip out everything not directly relevant to your issue, as per second code block below.


Code:
<!doctype html><meta charset=utf-8 />

<style>   
div.booga input[type="text"] { font-family: 'Courier New'; color: blue }
</style>

:
:

<div class=booga style="position: absolute; top: 190px; left: 180px">     
    <input type="text" name="FMname" readonly width: 35em; border: 1px solid blue;" value="John M."/>
</div>
Code:
<!doctype html><meta charset=utf-8 />
<style>
   div.booga input[type="text"] { font-family: 'Courier New'; color: blue }
</style>
<div class=booga>
   <input type="text" value="John M." />
</div>
Both of those show blue text in Courier New font here (with the relevant entry showing in browser dev tools).

Do you have Courier New font installed? Maybe what you actually want is the generic "monospace" instead?


Last edited by boughtonp; 10-06-2022 at 02:34 PM.
 
1 members found this post helpful.
Old 10-07-2022, 12:55 PM   #5
mfoley
Senior Member
 
Registered: Oct 2008
Location: Columbus, Ohio USA
Distribution: Slackware
Posts: 2,195

Original Poster
Rep: Reputation: 165Reputation: 165
As it turns out, I simplified my example too much. In my actual code I had:
Code:
<style>
div.booga { position: relative; font-family: 'Courier New'; border: 2px solid black; width: 1200px; height: 2000px; background-size: 1200px 2000px } ;
div.booga input[type="text"] { font-family: 'Courier New'; color: blue }
</style>
As boughtonp recommended, I ran the html through the WC3 Markup Validator and it revealed an error with the trailing semi-colon on the first div.booga line. When I removed that, it worked!

Thanks.
 
  


Reply

Tags
css, input


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
Need Help to translate this FIX Message with the Tag Name tag Number and Tag Value jtighe Linux - Newbie 3 08-18-2022 09:32 AM
[HTML|CSS] Move div with placeholder so that div in row above may overlap brianmcgee Programming 1 06-15-2011 02:08 PM
LXer: Styling GTK 3.0 With CSS LXer Syndicated Linux News 0 03-17-2011 09:02 PM
Using CSS Styling, for first time... (putting custom border around outside) mitchell7man Programming 7 04-11-2009 09:03 PM
Question about CGI.pm and the <DIV> tag... kdowney Programming 1 11-11-2003 08:38 PM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 01:01 AM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration