Member Avatar for davy_yg

Hello,

I wonder why my navigation input text box size being effected by the agent.css

agent.php

<html>

<link href= "css/style.css" rel="stylesheet" type="text/css" media="screen">

<?php include('includes/navigation.php'); ?>

<link href= "css/agent.css" rel="stylesheet" type="text/css" media="screen">




<body>
<br><br>

<div id="form">

<div id="formtitle"><br><center>FORMULIR PENDAFTARAN AGENT INDONUSA</center></div>

<br><br>
<div id="formtable">
<table border="0">
<tr>
<td class="field">Nama Lengkap</td>
<td><input type="text" name="name" placeholder="harus diisi" value=""></td>
</tr>

agent.css

#form { width: 900px; height: 1500px; background-color: white; display: block; border: 1px; margin: auto; background-color: white;}

#formtitle { width: 900px; height: 50px; background-color: blue; z-index:1; font-family: arial; color: white; font-weight: bold; }

#formtable .field{ padding-right: 15px; padding-left: 15px; text-align: right;}

#declaration { width: 500px; background-color: orange; border-radius: 5px;}


input[type="text"], textarea {
    width:17em;
    border-radius:2px;
    border: solid 1px #ccc;
    padding:0.4em;
    background-color: #eeeeee;
}

I also include <?php include('includes/navigation.php'); ?> in other pages and the input text width size remains small, now as I insert:

<link href= "css/agent.css" rel="stylesheet" type="text/css" media="screen">

which is below the navigation include, I thought the navigation should not be affected by the codes of agent.css.

  • 2 Contributors
  • 3 Replies
  • 202 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by davy_yg

Recommended Answers

All 3 Replies

Member Avatar for cmps

try to use '!important' near the style you want to take place
example:

input[type="text"], textarea{
width:17em !important;
etc...
}
Member Avatar for davy_yg

whatif I have two input[type="text"] css:

style.css

input[type="text"] {
    background-color: white;
    width:7.5em !important;
}

agent.css

input[type="text"], textarea {
    width:17em;
    border-radius:2px;
    border: solid 1px #ccc;
    padding:0.4em;
    background-color: #eeeeee;
}

style.css is to style the navigation input box, whereas the agent.css is to style the agent input box.

Now, if I place !important in style.css then, the whole input box will be 7.5em in size.

In here, I am trying to distinguish between navigation input box size and agent input box size. How?

Member Avatar for davy_yg

I finally figure the solution:

I place #search for the navigation inputbox.

#search input[type="text"] {
    background-color: white;
    width:7.5em;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.