We Keep Coding

Background colors not touching from two lines of text

I'm just trying to get the backgrounds touching on their long edge; like in this code, but with the two blues touching.
the code i have:
.header h1{ background:#0060D3; padding:10px; text-align:center}
.header h3{ background:#00CBFF; padding:10px; text-align:center}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>

You have to normalize the css (overwrite the default states of padding and margin properties).
* {
margin: 0;
padding: 0;
}
.header h1 {
background: #0060D3;
padding: 10px;
text-align: center
}
.header h3 {
background: #00CBFF;
padding: 10px;
text-align: center
}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>

As much as Kind User's answer solves your problem perfectly, you will still find yourself having to ask for help again next time a similar problem occurs. So rather than attempt to answer your question directly, I will explain how to figure it out for yourself.
Your browser will have an inspector (usually right click and choose Inspect from the context menu). I often use Firebug which is an extended inspector you can install as a plugin, but it is not essential for this task and the one built into your browser will suffice.
Click on the button on the top left of the inspector that looks like a cursor over a box, then click on any element on your screen to select it.
You will see under 'rules' all of the CSS rules that are currently affecting that element. Selecting the 'box model' tab will allow you to see the size of the element itself as well as the padding, border and margin on each side. Hovering your cursor over the element will also highlight each part of the box model separately so you can easily tell that the white space you saw was part of the margin.
To test this theory, you could go back to the rules tab and create a new rule stating margin:0px; and you will immediately see the effects. This is an effective technique for checking what CSS changes would appear to do before adjusting your actual file.
Side note: Just for clarification, although I would like to think it was obvious, I never make such assumptions. Any changes made in the inspector are entirely non-persistent in that they will not be saved in your file. If you refresh the page it will reload from the file and any changes made in the inspector will be gone.

How can I get my images to auto Align in a "collage style" inside a div/tab/ul container?

Im self taught and don't know anything about code from scratch, I just edit templates, and after hours of getting image properties the way I wanted, I have a new problem that I just CANOT solve.
I have looked online but I wasn't able to find an answer.
Here is my problem: (great... cant post images...)
http://imgur.com/hxuz2XP
Assuming the images are the same size, I made the perfect padding to my liking, but it all changed when I started uploading all of the photos.
Im hoping there is a way to somehow have the images display in a collage style, so no matter the size, they will all be within the right distance.
NOTE
Even having it to where the bottom images aren't alined is ok.
My style.css
ul.gallery { list-style:realative; margin: 0px 0; padding: 0; overflow:hidden;}
ul.gallery li { display:block; float:left; margin: 5px 10px 5px 0; position: relative;}
ul.gallery li.alt { margin-right: 1px 0;}
ul.gallery li img { padding: 5px; background: #cec4a9; width: 129px; height: 129;px }
HTML:
</div>
<div id="tab2" class="tab_content">
<ul class="gallery">
<li class="alt"><img src="img/gal/IEM01.jpg"/></li>
I can post Js or fancybox css if needed, as long as you specify the right file. I really appreciate the help!

What you're trying to achieve is also known as the "tumbler effect" or "pinterest effect", since these are two websites that used it for a while now. The easiest way to go is using masonry.js. What masonry does is calculate the rendered size of each of the elements and positions them absolutely so they all tile up nicely. And for now, this is the only way to go if you want to have only one continuous list of items.
An alternative to this would be to divide your list of items in how many columns you want to have and render all columns side-by-side, eventually changing the number of columns and redistributing items on the fly using javascript or any other client side script alternative in order to give it responsiveness.
But again, most people use masonry for this and don't even ask themselves how the effect is achieved technically.

CSS hover effect on ajax content and mobile devices

I've build a quiz. Each question has 2 answers. When the visitor answers a question, the next one is loaded using Ajax. Before the questions are loaded the visitor has to click a start button first, so the HTML for the questions isn't included in the initial page load.
The problem is when a question is anwsered, the hover effect from the previous question is still active when the next one is loaded.
For example: I anwser question 1 with "B" > question 2 is loaded > the hover effect is active on button B for question 2
I've included an image to make this more clear.
I only have this on mobile devices (iPhone, iPad,...) but not on my laptop.
I've done some research if I can alter the hover pseudo class, but apparently this isn't possible using javascript.
I think the problem is that the HTML is the same for each question, so the hover state stays active for the css class when the first question is answsered.
I can't supply a jsfiddle because the questions are entered as a content type in Drupal, and I can't include the entire Drupal in a fiddle. But here is the HTML and CSS.
<div class="quiz_st_content form-wrapper" id="ajax_form_multistep_form_content">
<div class="quiz_st_content_answer form-wrapper" id="edit-a--2">
<div class="quiz_st_content_answer_info_wrapper">Option A</div>
<div class="quiz_st_content_answer_button_wrapper">
<input class="quiz_st_content_answer_button form-submit ajax-processed" type="image" id="edit-answer-a-2" name="answer_a_2">
</div>
</div>
<div class="quiz_st_content_answer form-wrapper" id="edit-b--2">
<div class="quiz_st_content_answer_info_wrapper">Option B</div>
<div class="quiz_st_content_answer_button_wrapper">
<input class="quiz_st_content_answer_button form-submit ajax-processed" type="image" id="edit-answer-b-2" name="answer_b_2">
</div>
</div>
</div>
CSS
input.form-submit.quiz_st_content_answer_button {
margin: 0;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
height: 30px;
width: 30px;
padding: 20px;
background: #ccc;
}
Hover
input.form-submit.quiz_st_content_answer_button:hover {
background: #ba043f;
}
As mentioned above, this only happens on mobile devices. I've been bashing my head at this for hours now and I'm clueless on how to resolve this.
If anyone could help me, or point me in the right direction it would be greatly appreciated.

When I was working with mobile devices I added
ontouchstart=""
to the body tag like so:
<body ontouchstart="">
This made the hover pseudo selectors not act so awkwardly for me, it may be worth a shot.

I was able to fix this. Well,..its not really a fix because the hover state is still active, but I overwrite the color with the default color on touch devices, like so:
$('.quiz_st_form,').bind('touchstart', function(){
$('body').addClass('touchdevice');
});
So when someone "clicks" on the quiz start button on a mobile device, my body gets the class touchdevice and I "remove" the hover with CSS, like so:
body.touchdevice input.form-submit.quiz_st_content_answer_button:hover {
background: #ccc;
}
Technically the :hover state is still active, its just not visible anymore.
I don't really see a better way on fixing this at the moment. If someone does, please let me know.

Reason for a mysterious padding breaking my design?

I have been trying to wrap my head around this issue for the past few hours but with no success. If you look at this page.
On the left side, where its titled "Latest Tweets", there is a mysterious left-padding to the list of tweets. I can assure you that I have not added any styling to it to have that padding... not to my knowledge anyway.
For a past few hours ago, before I made major changes around the page, it looked perfect. Here is a screenshot of how it should be aligned.
Its 11.15pm, I'm tired and I want to watch Game of Thrones. Can someone kindly assist me in solving this issue so that I can call it a night?

You have margin-left: 15px; on .projects li.
That is what causes the move to the right...
Perhaps you added it for the list of videos, but it is affecting the list of the tweets since both are under the projects element.
Add .projects .sidebar_left li{margin-left:0} to fix it..
Update
or better yet, since you already have a rule for them #twitter_update_list li add the margin-left:0 to that.

Gaby beat me to posting the answer, but you could have found it yourself inspecting the elements using Google Chrome for example - you can click an element and it tells you what style the element has, like this:
.projects li {
width: 202px;
display: block;
float: left;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 40px;
}
Better yet, you appear to be able to test style changes LIVE. Pretty cool, actually.

Why is this DIV rendering with no dimensions?

http://clifgriffin.com/blockade2/
Ok, I have an unordered list that serves as a list of menu links. In each li there is a div that is set to absolute positioning, bottom: 0. The idea is you hover over the link in the li and jQuery animates the height to show the hidden menu div.
It's a simple concept, but I am apparently confused.
The issue I'm having is that the div that contains the slide down menu doesn't take up any dimensions (according to Firefox and Chrome's calculated style information) when I put it in the li. If I put it anywhere else on the page it renders PERFECTLY. You can see what I mean from the link. The gray menu looking thing at the top is how it is supposed to render inside the li but doesn't.
<div class="ram">
<div class="gray_middle">
<ul>
<li>Guest Services</li>
<li>Concierge / Local Attractions</li>
<li>East Restaurant</li>
<li>Aquarium Lounge</li>
<li>Health Club</li>
<li>Sandcampers Program</li>
<li>Treasure Chest Gift Shop</li>
</ul>
</div>
<div class="gray_bottom">
<img src="images/top_menu_slidedown_gray_bottom.png" />
</div>
There is a bit of javascript going on that is supposed to find the height of the menu div and set the id of the containing li equal to the height so that it can be referenced later. Doesn't matter...the point is, when the div is in the li, its computed height is 0. When it is outside, it's correct.
Any ideas?
This is driving me absolutely batty. I have never had this many issues with something so simple.
Thanks in advance,
Clif
P.S. I added some HTML comments to the destination so that you can better see what I mean.

Absolutely positioned elements are "outside" of a container and can't really determine its size.
Relatively positioned elements impact container size (and content flow) but then they move elsewhere.
Also, for absolutely and relatively positioned elements, you should always give an explicit X,Y position. This avoids some rendering differences, cross browser.
Anyway, I made the following CSS changes and that submenu seemed to render OK on FF 3.6.4:
For <li id="49"> add: height: 230px; overflow: hidden; .
For div.subMenu add: top: 17px; and delete: bottom:0; .
For gray_middle add: height:160px; top:0; and delete: padding-top:20px; .

When you absolutely position an element, it won't expand the size of it's container to the size required to accommodate it.
EXAMPLE
HTML
<div id="outer"><div id="inner">In</div>Out</div>
CSS
#outer {
background-color: red;
}
#inner {
width: 100px;
position: absolute;
top: 100px;
background-color: blue;
}
See it live here - http://www.jsfiddle.net/r7MgY/86/

Hi clifgriffin Had a quick look at you HTML, shame you didn't give us the CSS aswell, but ... there are a few things I'm not sure on - the header says generator WordPress 2.9.2 but the html does look like "familiar" WordPress. If it is WordPress generated then check the wp_list_pages & wp_list_categories tags you are using. Also I serously recommend an upgrade to WP3.0 as it has MUCH more functionality (custome post/page types etc) plus a "built" in menu function.
I think you may be using too much CSS. Most of what you want to acheive can be done with a lot less.
Guest Services
Concierge / Local Attractions
East Restaurant
Aquarium Lounge
Health Club
Sandcampers Program
Treasure Chest Gift Shop
You can then give the ul an ID (remember ID's need to be unique) this will help with any Java you want to use also add to your ram class with a background image class images/top_menu_slidedown_gray_bottom.png. As you use the ram class again without the image. e.g. <div class="ram backgroundimageclass"> You are then saving a lot of "code" and download times etc.
If you give the ram class the attribute "position: relative;" you can then give the UL id the attribute "position: absolute;" the li's can be styled such as
ul#ID li {line-height 30px; etc ...)
ul#ID li:hover {line-height 30px; etc ...)
ul#ID li:hover a {line-height 30px; etc ...)
and so on.
Ohh forgot ... also why not add this code in the head
<meta http-equiv="X-UA-Compatible" content="chrome=1">
And this just after the tag
<!-- DO NOT REMOVE -->
<!-- THIS SECTION SETS THE LAYOUT FOR GOOGLE CHROME FRAME IF YOU NEED FURTHER INFO LOOK HERE http://code.google.com/chrome/chromeframe/ -->
<!-- Google Chrome Frame is a free plug-in that helps you enjoy modern HTML5 web apps within Internet Explorer. -->
<div id="prompt"><!-- if IE without GCF, prompt goes here --></div>
<script type="text/javascript">
CFInstall.check({
mode: "inline", // the default
node: "prompt"
});
</script>
<!-- END THE LAYOUT FOR GOOGLE CHROME FRAME -->
This allows "detection" of the browser and gives them the option (if not installed) to use Google Chrome Frame, you can:
Start using open web technologies - like the HTML5 canvas tag - right away, even technologies that aren't yet supported in Internet Explorer 6, 7, or 8.
Take advantage of JavaScript performance improvements to make your apps faster and more responsive. Enabling Google Chrome Frame is simple. For most web pages, all you have to do is add a single tag to your pages like above and detect whether your users have installed Google Chrome Frame.
If Google Chrome Frame is not installed, you can direct your users to an installation page.
If Google Chrome Frame is installed, it detects the tag you added and works automatically.

Cliff Just "totally" realised what you are trying to do here - sorry took so long to "twig"
OK you can do this with much more ease than you are trying to do at the moment. All it needs is a little JQuery and some basic CSS. No need to positions absolute etc.
In your CSS use { display: none; } for the class="subMenu" as you know this will "hide" it, I might also be tempted to do the same in your JQuery functions to be "doubly sure". Then in the JQuery create a mouseover effect (mouse over "better" than hover) for the class top_menu_links (I think you could take out the classes "aco" and "white_middle" or at least combine them in the css for the relevant ul) to show the .next('ul); you can slide it etc. Then a mouseout function on the ul. That way the ul stays visable until a mouse out event. I have done this quite successfully on a WP theme to display a "dynamic" list of categories on a mouse over event on a div made to look like a button. Sorry don't have the code to hand but will look later and "pass it over"
In addition you can set the ul background image as the approp. <img src="images/top_menu_slidedown_white_bottom.png" /> (or grey) just by setting it to background position: bottom repeat: none; and a bottom padding the height of the image. No need for alt tags etc.

Sorry been "out for a bit" anyhow here is a code I have used to "recreate" your bottom menu. It doesn't do as you suggest it closes after either a mouseout of the "menu item" or the "submenu". To get it to work on the top menu, just change the position from bottom to top:
$(document).ready(function() {
$('.indexMenu').mouseover(function(){
$(this).children().show();
$(this).children().mouseover(function(){
$(this).children().show();
});
});
$('.indexMenu').mouseout(function(){
$('.sub_menu').hide();
});
});
Here is the "html"
<div class="indexMenu">
Menu 1
<div class="sub_menu">
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
Menu 2
<div class="sub_menu">
Item
<br />
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
<div class="sub_menu">
Menu 3
<br />
Item
<br />
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
Menu 4
<div class="sub_menu">
Item
</div>
</div>
Obviously you can "use" any thing in submenu a ul,ol, etc...
And the "simple CSS
.indexMenu {
position: relative;
bottom: 3px;
width: 240px;
height: 32px;
float: left;
line-height: 30px;
border-top: 2px solid #FFFFFF;
text-align:center;
text-transform:uppercase;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
font-weight: 900;
color:#333333;
}
.sub_menu {
display: none;
position: absolute;
bottom: 33px;
width: 240px;
background-color:#DBF3FD;
opacity:0.8;
filter: alpha(opacity=80);
}
OK I've added a filter in the submenu to have a certain transparency

Gentleman,
Thanks for all of your responses! I'm sorry it took me so long to get back to this post.
This whole issue has revealed a few things I don't yet understand about the way HTML elements are rendered.
I was able to solve this problem by switching the main menu blocks to div elements instead of li elements.
This makes no sense to me in that both are rendered approximately the same way as far as I can tell from looking through the computed styles. But, for whatever reason, once the container is a div the contained divs rendered with their proper dimensions which allowed the rest of my code to work properly. I didn't even have to change the attached CSS!
As the main goal of this project was to finish and make the customer happy, I didn't experiment beyond this finding.
I welcome theories on why this would be.
Thanks again.
Clif