Problem with CSS???

[jrotunda85]

I think I'm having a blonde moment because I can't seem to get the bit of CSS/HTML working. When I make changes to the code such as cellpadding and cellspacing in the table attribute, it doesn't do anything to the form itself. I've even tried changing something like BGCOLOR and nothing happens (I even added a second table thinking it may have had something to do with the form tags but no luck there either). I think it has something to do with inheritance but I can't seem to figure it out -- any ideas?

HTML Page:

<div class="container">
	<div id="content">
		<div class="bread-crumbs"><a href="index.php">Home</a> &rsaquo; Login</div>
		
		<div class="sidebar">
			<h4>Sub Navigation</h4>
			<ul class="submenu">
				<li><a href="#">Link</a></li>
			</ul>
			<div class="sidebardivider"></div>
			
			<h4>Latest Tweets</h4>
			<script type="text/javascript">
			$(document).ready(function() {
					$('#tweets-sidebar').jtwt({image_size : 0, count : 2, username: 'cigardig', convert_links : 1, loader_text : 'Loading new tweets...'});   
			});                      
			</script>
			<div id="tweets-sidebar"></div>
			
			<div id="sidebar-base"></div>
		</div><!-- close .sidebar -->
		
		<div id="main-content-sidebar">
			<h1>Login</h1>
			
            
             <form method="post" action="processlogin.php">
            <table>
            <tr bgcolor="#006699"><td>Username</td><td><input name="username" type="text" class="formbox"></td></tr>
            <tr bgcolor="#333399"><td>Password</td><td><input name="password" type="password" class="formbox"></td></tr>
            <tr bgcolor="#996600"><td colspan="2"><input type="submit" name="Submit" value="Login"></td></tr>
            </table>
            </form>
            
            <table bgcolor="#00CC33" width="100px" height="100px">
            <tr><td>akakjakljalkja</td></tr></table>
          
          
            
<br/>
		
		
		</div><!-- close #main-content-sidebar -->
		
     
        
		</div> <!-- close #content -->
</div><!-- close .container -->

Relevant CSS Entries

.sidebar {float:right; width:238px; margin-top:5px; padding:32px 0 0 32px; background:url(../images/site/sidebar-divider.png) top left no-repeat;}
#main-content-sidebar {width:646px; float:left; }
#content .sidebarleft {float:left; background:url(../images/site/sidebar-divider-left.png) top right no-repeat; padding:32px 32px 0 0; margin-right:24px;}
#content .sidebarleft #sidebar-base {background:url(../images/site/sidebar-base-left.png) top left no-repeat; left:250px;}
#sidebar-base {background:url(../images/site/sidebar-base.png) top left no-repeat; height:86px; width:20px; position:relative; right:32px;}
.sidebardivider {margin-bottom:40px;}
.sidebar h4 {margin-bottom:10px;}
#content ul.submenu li {list-style:none; margin-left:0px;}
ul.submenu li a {display:block; padding:0 0 15px 34px; text-decoration:none; background:url(../images/site/submenu-list.png) 0px 6px no-repeat;}
ul.submenu li a:hover {color:#000; background:url(../images/site/submenu-list.png) 0px -69px no-repeat;}
#formbox {border:1px solid #666; padding:5px; height:25px;font-size:13px; color:#333;-moz-border-radius:3px;-webkit-border-radius:3px;}
.container {width:940px; margin:0 auto; overflow:hidden; }
#content {padding:28px 0 28px 0; width:940px; overflow:hidden;}

[Annon]

Hi, Please elaborate the problem, what exactly you want.

I am assuming that some style is not working due to some hierarchical structure, try to give !important trailing any style you are applying.

Exp.
.element { padding:20px !important; }

This may not be the proper solution because I didn't get you properly but still try if it help.

[shaya4207]

Sounds like your CSS is not working at all (at least that's what I understood), maybe you're linking your CSS wrong?

[teedoff]

If your adding inline styles ie a background color for your table row and its still not working, then css file path is probably not the issue, nor should be any inheritance.

Can you post all of your code? or better a link to your site so I could look at it in firebug.

[tinymark]

I think you need to restate your problem. What do you mean by making changes to the table doesn't effect the form? I made a quick page from your code and I have full control over the table using CSS.

[scottloway]

Agree we need more detail about what your issue is. I attached a screen (from FF) of your identical code (I included your css within the html document inside <style>). Seems like it applies as you'd generally expect. Perhaps your link path to a .css file is wrong?

We're just guessing at this point.

[teedoff]

Agree we need more detail about what your issue is. I attached a screen (from FF) of your identical code (I included your css within the html document inside <style>). Seems like it applies as you'd generally expect. Perhaps your link path to a .css file is wrong?

We're just guessing at this point.

He has another css file called reset.css that is over riding many tags when he tries to style them. Not sure if this is a wordpress theme or not. If he gives his form and or table elements an id or class then styles that, then it can be resolved I think.

[tinymark]

That's not a bad file to use after you have read it and understood it. It is meant to setup defaults for the browser to use which is supposed to 'normalize' the display from browser to browser. It should be the first stylesheet followed by your style sheet. The other way is trouble. Everything you want is overridden.

[scottloway]

He has another css file called reset.css that is over riding many tags when he tries to style them. Not sure if this is a wordpress theme or not. If he gives his form and or table elements an id or class then styles that, then it can be resolved I think.

Where are you seeing a reference to reset.css?

Who knows what is in this particular reset.css, but generally speaking, resets are very light in terms of specificity so doesn't seem likely to override any of his styles.

Given the code posted, there is nothing that indicates styles would not apply (except that there is no explicit reference to ANY css from the HTML that was posted.

[teedoff]

Where are you seeing a reference to reset.css?

He sent me a private message with a link to his site because he didn't want his site posted yet.

[shaya4207]

He sent me a private message with a link to his site because he didn't want his site posted yet.

At least he's conversing with you, cuz he didn't come back to here since he first posted (3 days ago), so it's quite hard to help him...

[scottloway]

At least he's conversing with you, cuz he didn't come back to here since he first posted (3 days ago), so it's quite hard to help him...

Agreed; it would be nice to have the thread continued here, or marked solved pending your resolution.

[jrotunda85]

Thanks everyone for the help. I'm still having troubles with it but teedoff's help looking at the site has given me an idea of what may be causing the problem. I'll keep looking into it and if I can't fix it, I'll post another thread with the full CSS. Thanks again :)

[teedoff]

Please keep us informed. I'm curious to find out if this gets resolved. Regardless of how many stylesheets one has, if you style an element within the page(embedded), that will over ride your external stylesheets. So surely that would work here.