Ok, I Am Fried - Need CSS Assistance From A Pro

HTML & CSS
1

To anyone that can assist, thank you (for real). I am fried from trying to read, review, test, and search for a solution. And in the end, I know it will be that I overlooked something, so let me say in advance, my apology for my oversight.

I am trying to edit a CSS file on this site: http://www.tacticalgearnews.com/

On the sidebar is a newsletter signup, I simply can’t get it to work, I got other parts of the site to, but that one… I just don’t get it.

It is aligned to the left where I want it, even with the bullet points of other sidebar locations, but its not filling out. We are wanting the input box and buttons to match the styles of the search bar at the top. Black background input box, green button with white text.

The CSS file has all the existing information in it, but I cant seem to get it?

Can anyone (and please do this in a simple manner if you want to assist) show me what I did wrong (then I again I removed all the errors), or show me what code to put there. I am mentally exhausted, and do not like to burden others with issues like this.

The code for the newsletter and search are this:


/* Newsletter */
.newsletter {float:left; background:#222222; margin:-10px 0px 20px 0px;}

/* Top Panel - Here is Navigation and search box*/
#toppanel	{width:920px;}

/* Navigation in Top Panel*/
#navigation	{ float: left; position:relative; z-index:99;}
#navigation ul	{ font-weight: bold; font-size:14px; text-transform:uppercase; list-style: none; }
#navigation li	{ position:relative; float: left;}
#navigation li a	{color: #FFF; text-decoration: none; float: left; padding:15px 15px 15px 15px; letter-spacing:0.6px; }
#navigation .main_category {background-image: url(../images/navigation_hover.gif); background-position:top center; background-repeat: no-repeat;}
#navigation .active	{ background: url(../images/navigation_active.gif); background-position:top center; background-position:0px 10px; background-repeat:no-repeat;}
#navigation li.current-menu-item { background: url(../images/navigation_active.gif); background-position:top center; background-position:0px 10px; background-repeat:no-repeat;}
#navigation li.current_page_ancestor { background: url(../images/navigation_active.gif); background-position:top center; background-position:0px 10px; background-repeat:no-repeat;}
#navigation ul li ul	{ position:absolute; top:50px; left:0px; display:none;	list-style-type: none; list-style-image:none; list-style-position:outside; width:230px; }
#navigation ul li ul li a	{ color:#FFF;	padding: 15px 0 15px 36px; width:194px; }
#navigation li a.odd	{ background:#2b2b2b url(../images/navigation_dot.gif);	background-repeat:no-repeat; background-position:18px 23px; text-transform:uppercase; }
#navigation li a.even	{ background:#222 url(../images/navigation_dot.gif);	background-repeat:no-repeat; background-position:18px 23px; }
#navigation li a.odd:hover, #navigation li a.even:hover	{ background:#444 url(../images/navigation_dot.gif);	background-repeat:no-repeat; background-position:18px 23px;	}

/* Search in Top Panel*/
#search	{float:right; height: 30px; margin:10px 0 0 0; }
#search input.field {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;background: #1f1f1f url(../images/search_icon.png); background-position:top right; background-repeat:no-repeat; width: 160px; padding:7px; outline: none; font-size: 13px; color: #FFF;	border: none; z-index: 1; height:16px; float:left; padding-right:30px;}
#search input.field:focus {background:#2b2b2b url(../images/search_icon.png); background-position:top right; background-repeat:no-repeat;}
#search input.submit {width:70px; height:30px; background: #595d42;	color:#FFF;	font-weight:bold; float:left; border:none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; cursor:pointer; margin:0 0 0 1px;}
2

As a general rule, I would say “don’t float anything you don’t need to”. Although, to be fair, that would apply to any positioning style. There’s no need to float those elements, so why do it? All that happens is that you set yourself up for rendering bugs, particularly in older browsers. Keep it as simple for yourself as you can!

3

Ah, that made the buttons stack on top of each other, and not side by side.

4

Hows that look?

5

Ok, let me see if I can try out what your saying, trying to learn this.

6

At the moment, you haven’t got any styling on the form controls in <div id=“newsletter”>. You’ll need them to be slightly different, eg you won’t want the magnifying glass icon, and the positioning of the buttons needs to be different, so you’ll need to set up new styles for
newsletter input[type=text] { … }
newsletter input[type=submit] { … }
copying the relevant bits from your search form styling.

Oh yes, and you’ll need to include an action for the form as well.

7

I can’t figure this out, its just not working for me.

8

Wait, do I add another line called newsletter or put the settings under the existing .newsletter

9

Piece of cake. The styling around the search box is applied with #search, so you just need to repeat it for newsletter and you’re done.

10

Thank you, I fixed the float, and that fixed the background. Now I just need to figure out how to make the input box and buttons like the search ones up top. Haven’t been able to fix it so far.

Any ideas?

11

Ok woah, so what changes do I need to make as it sits right now? Sorry guys, I read all your stuff, and now am not sure what to do to it lol.

12

In the [type=submit] declaration, if you take off float:left; and change the right margin from 5px to 12px, that should do the job.

13

Your newsletter <div> is floated, which means that its parent element doesn’t surround it. I don’t see why it needs to be floated. Try just taking the float off, and it should behave as you want it to.

(You could also do with running your code through the W3C Validator - it’s full of errors, and that just isn’t acceptable if you’re saying it’s XHTML Strict - and tidying up your CSS file, it’s quite staggeringly bloated!)

14

Normally, most browsers treat inputs as either inlines, or inline-blocks (seems to depend on the browser). So most of the time, so long as there’s room, they’ll stack up side by side anyway. Assuming they are next to each other and not wrapped individually in blocks or something.

So normally one shouldn’t need to float inputs… Though the large right margin they both have may have forced one below the other. Setting the right margin to 6px let them both sit side by side.

Ideally you’d only set margin on the first one, so that you could make them exactly match the width of the input. You could do that using some fancier CSS, but it wouldn’t work in IE6, if you care.

.newsletter form p:last-child input {
margin: 10px 0 0;
}
.newsletter form p:last-child input:first-child {
margin-right: something like 12px maybe… play with it;
}

Would be less CSS if you put a class on the first submit button though.

15

@Stevie: Just a question. Why taking the float out? I just tried it and the butons lining up nicely. Is there a reason why you would take that out? Just curious.

16

Try reducing the right margin on the submits to 6px and go from there.

I agree with StevieD re floating and positioning… you have the least amount of code if you start with document flow default (how things will sit natually before you position them) and then add on little changes as necessary.

17

How does that look guys?

18

Hmm, maybe I changed something else as well when I was playing around with it. Try changing the margin values until they line up as you want…

19

Well, its almost flawless. But I cant get the two buttons to be the exact width of the input box. Any ideas? This is the code as it stands right now, you can see the input box is slightly longer then the two boxes below it.


/* Newsletter */
.newsletter {background:#222222; margin:-10px 0px 30px 0px;}
.newsletter input[type=text] {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;background: #454545; width: 290px; padding:10px; outline: none; font-size: 13px; color: #FFF; border: none; z-index: 1; height:16px; float:left; padding-right:0px;}
.newsletter input[type=submit] {width:142px; height:30px; background: #595d42;	color:#FFF;	font-weight:bold; float:left; border:none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; cursor:pointer; margin:10px 5px 0px 1px;}