CSS conflict with <select>

[EricOnAdventure]

I have a CSS issue where one code is overrunning another, I tried to fix it but I failed. Here is my code for my search bar in the upper right area. I know the issue has to do with <style> and I tried to correct it but failed every time.

 

<style type="text/css">
#tabeluni {
   border: 1px solid silver;
   border='1' cellpadding='4'
}
#buttonx{
    background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
    border: 1px solid #red;
    color: #524f49;
    cursor: pointer;
    width: 100%;
    border-radius: 2px;
    font-weight:bold;
    font-size:15px;
}

#button:hover{
    background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
#unitext{
    color: #f2836b;
    font-size: 15px;
    text-align: center;
}
labelx{
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold;
}

selectx{
    margin-bottom: 0px;
    margin-top: 0px;
    width: auto;
    height: auto;
    font-size: 16px;
    font-family: cursive;
}
</style>
<?php
$unisearchbar = "<div id='selectx'><table id='tabeluni'><tr><td>
<div align='Left'>
                    <div><form action='unisearch/search.php' method='post'>
                    <div id='unitext'>University Search</div>
                    <label>Catagory</label>
                    <label  for='programtype'></label>
                    <select  name='programtype' id='programtype' required >
                    <option selected='selected' value=''>---Select---</option>
                    <option value='Social Science'>Social Science</option>
                    <option value='Arts '>Arts </option>
                    <option value='Humanities and Liberal Studies '>Humanities </option>
                    <option value='Engineering '>Engineering </option>
                    <option value='Technology '>Technology </option>
                    <option value='Health '>Health </option>
                    <option value='Biology and Life Sciences '>Biology</option>
                    <option value='Physical Sciences '>Physical Sciences </option>
                    </select>
<br>
                    <labelx>Country</labelx>
                    <select name='Country'>
                    <option value=''>--</option>
                    <option value='United Kingdom'>United Kingdom</option><br />
                    <option value='United States of America'>United States of America</option>
                    <option value='Argentina'>Argentina</option><br />
                    <option value='Australia'>Australia</option><br />
                    <option value='Austria'>Austria</option><br />
                    <option value='Bangladesh'>Bangladesh</option><br />
                    <option value='Belarus'>Belarus</option><br />
                    <option value='Belgium'>Belgium</option><br />
                    <option value='Brazil'>Brazil</option><br />
                    <option value='Canada'>Canada</option><br />
                    <option value='Chile'>Chile</option><br />
                    <option value='China'>China</option><br />
                    <option value='Colombia'>Colombia</option><br />
                    <option value='Cyprus'>Cyprus</option><br />
                    <option value='Czech Republic'>Czech Republic</option><br />
                    <option value='Denmark'>Denmark</option><br />
                    <option value='Egypt'>Egypt</option><br />
                    <option value='Estonia'>Estonia</option><br />
                    <option value='Finland'>Finland</option><br />
                    <option value='France'>France</option><br />
                    <option value='Germany'>Germany</option><br />
                    <option value='Ghana'>Ghana</option><br />
                    <option value='Greece'>Greece</option><br />
                    <option value='Hong Kong'>Hong Kong</option><br />
                    <option value='Hungary'>Hungary</option><br />
                    <option value='Iceland'>Iceland</option><br />
                    <option value='India'>India</option><br />
                    <option value='Indonesia'>Indonesia</option><br />
                    <option value='Iran'>Iran</option><br />
                    <option value='Israel'>Israel</option><br />
                    <option value='Italy'>Italy</option><br />
                    <option value='Japan'>Japan</option><br />
                    <option value='Jordan'>Jordan</option><br />
                    <option value='Kenya'>Kenya</option><br />
                    <option value='Latvia'>Latvia</option><br />
                    <option value='Lebanon'>Lebanon</option><br />
                    <option value='Lithuania'>Lithuania</option><br />
                    <option value='Luxembourg'>Luxembourg</option><br />
                    <option value='Macau'>Macau</option><br />
                    <option value='Malaysia'>Malaysia</option><br />
                    <option value='Mexico'>Mexico</option><br />
                    <option value='Morocco'>Morocco</option><br />
                    <option value='Netherlands'>Netherlands</option><br />
                    <option value='New Zealand'>New Zealand</option><br />
                    <option value='Nigeria'>Nigeria</option><br />
                    <option value='Norway'>Norway</option><br />
                    <option value='Oman'>Oman</option><br />
                    <option value='Pakistan'>Pakistan</option><br />
                    <option value='Poland'>Poland</option><br />
                    <option value='Portugal'>Portugal</option><br />
                    <option value='Qatar'>Qatar</option><br />
                    <option value='Republic of Ireland'>Republic of Ireland</option><br />
                    <option value='Romania'>Romania</option><br />
                    <option value='Russian Federation'>Russian Federation</option><br />
                    <option value='Saudi Arabia'>Saudi Arabia</option><br />
                    <option value='Serbia'>Serbia</option><br />
                    <option value='Singapore'>Singapore</option><br />
                    <option value='Slovakia'>Slovakia</option><br />
                    <option value='Slovenia'>Slovenia</option><br />
                    <option value='South Africa'>South Africa</option><br />
                    <option value='South Korea'>South Korea</option><br />
                    <option value='Spain'>Spain</option><br />
                    <option value='Sweden'>Sweden</option><br />
                    <option value='Switzerland'>Switzerland</option><br />
                    <option value='Taiwan'>Taiwan</option><br />
                    <option value='Thailand'>Thailand</option><br />
                    <option value='Turkey'>Turkey</option><br />
                    <option value='Uganda'>Uganda</option><br />
                    <option value='Ukraine'>Ukraine</option><br />
                    <option value='United Arab Emirates'>United Arab Emirates</option><br />

                    </select>
                    
                    
                     <input type='submit' name='button' id='buttonx' value='Search' />
            
                </form></div></div></td></tr></table></div>
                
                "?>

You can see the search bar working correctly here

http://efunstudies.com/guide.php

 

and you can see it working incorrectly because of CSS conflicts here

http://localhost/efun/q/register2.php

 

[kicken]

Your second link is to localhost. We can't look at your localhost.

 

It's better if you describe what the actual problem is rather than just saying to look at a URL. Everyone will have their own interpretation of what is correct vs incorrect on a page unless you are specific about what it is you're seeing as being incorrect.

[EricOnAdventure]

HAHA, sorry about that, twas an accident. efunstudies.com/q/register2.php

Well In this link the UNI search box at the top right is more or less how I want it, quite condensed with width set at auto and margins at 0. However in the link that was correct earlier (http://efunstudies.com/guide.php) the CSS's are battling for domination and one overrides the other, changing my margins and width. The issue revolved around but I am not sure what to do to fix this, I tried many options, but nothing thus far has worked.

[Muddy_Funster]

My Opinion:- menu items, and also form elements, should never have a fluid size, they should always be fixed dimensions.  If you want to you can wrap them in a responsive container but the items themselves should be static.

 

If you are having issues with CSS conflicts then I would say you need to either clearly define CSS by element using IDs rather than classes and assigning any questionable attributes fully to bypass inheritance or, preferably, map out your inheritance model and apply granular CSS attributes that are appropriate to the level of the elements in the DOM tree so that only relevant attributes are assigned at appropriate levels.  Here's some links to help with what I'm talking about:

 

 https://www.w3.org/TR/CSS2/cascade.html

https://www.smashingmagazine.com/2010/04/css-specificity-and-inheritance/

[EricOnAdventure]

Thanks for the links Muddy, I figured it out

[Muddy_Funster]

Glad to hear it, why not post up what you did to fix it and then flag it as answered? That way you will help others who come across your post because of similar issues.

[EricOnAdventure]

The trick I learned, if this helps anyone. Is to simply stop using the original <select> or <label> or any such thing and create new Id's...such as #selectx an set the ID to #selectx...for example my <select> is now <select 'id='selectx'>   the later ID overrides the original command.

[Zane]

Classes are cool too.

.aCoolSelect {
   background-color;cool;
   color: black;
   font-weight:bold;
   font-family:"The Fonz"
}
<div class='aCoolSelect'>Eyyy!!</div>