Moloney

Thanks, I think this should help. I'm going to have a go at it again and post back. I'm guessing that something along the lines of OR || inside the elseif statement should be the way to go.

Hi all, There is something simple i am probably missing here, can anyone see it? I've tried debugging it for a while now. This is the html part: <p> Company Name: <input type="text" name="company_name" value="Company Name" /> </p> This is the php part $name = $_REQUEST['company_name']; if (!EMPTY($name)) { $condition2 = TRUE; } elseif (!EMPTY($name) == FALSE) { echo "<p> Sorry, the form has not been submitted. A Company name has not been submitted</p>"; } elseif ( $name == "Company Name") { echo "<p> Sorry, the form has not been submitted. A <b>valid</b> Company name has not been submitted</p>"; } The first 2 parts of the statement work but the third part of the statement does not. I can't figure out why the third part is not echoed. It looks like $name is the same as "Company Name". Any ideas what is wrong? Thanks

I suppose that is the trouble it WYSISYG editors! You can't really control it that well.

Hey there, I'm not sure what a spry menu is but if it is just a normal horizontal navigation menu then I had this problem before. This was the first real problem that I came up against when I started using css a few months back and there is a post where others on this forum contributed to my solution. css positioning problem Maybe the following will help you find a solution: http://jsfiddle.net/j6ecR/ (inline-block method) --> the text-align:center; is what centers the li element. or perhaps something along these lines this could work for your either (modified to your requirements): http://jsfiddle.net/jDc5J/1/ (float:left; method) --> By setting a width for each li element, i think it should do what you want it to. The total of the 6 <li> widths must be 100% or 960px in your case. All the Best,

Go raibh maith agat!

I like it. I've almost finished upgrading my father's existing site. http://www.seanmoloney.com/ it only runs in IE 9+. Otherwise, It redirects to the old site which my wife made a few years back . My first site but it took a long to build. Speed itself must be a skill.

What are the advantages of using a virtual box ? Funny I see this thread here because I was thinking of making one lately. Is it mainly just to view the website in other browsers such as ie 6, 7 and 8 or are there more benefits?

I think that media queries might not be necessary for this project because the navigation menu is only three elements wide. But responsive designs using css is the answer --- essentially you need to change your widths to percentages instead of pixels. But you would have to learn at least a little bit about how to use css.

ok, i figured this one out. the problem was that the background color of the nav ul li:hover element had to be set to #fff just like the nav element. But I thought this colour would have been inherited. Wonder why it wasn't? (maybe hover simply doesn't inherit parent features?)

Hi all, I am using the translate property to pull down my nav buttons a little bit when they are hovered over. The problem I am having though is that the overflow is hidden. I thought it should be visible by default? nav ul li:hover { -moz-transform:translate(-4px, 4px); overflow:visible; } Also, even when I put overflow:visible; in specifically, it still is hidden because the background-color of the body shows up rather than the button background color. In fact, I've tried a few different things now including changing the z-index and position to relative and I can't seem to get the overflow of these nav buttons to show up. Any ideas anyone?

Im not sure exactly what your asking but why don't you get rid of positoon absolute for the .content div and change it to position relative and change it to margin right and left = auto. That should centre it on the x axis. You could then centre in on the y-AXIS by setting a margin top = 30% or 300px again for the .content Div but the exact px or percentage depends really on your height requirements. Im not sure is this what your looking for?

I'm going to look into it a bit more. I think there are other programs like fiddlejs too. But that's why I used it because it makes testing and asking questions easier for other people & they should have to stress the minimum to get an answer! Thanks again.

I'm glad I asked because this is a perfect explanation and I wasn't clear about what I was doing. Now I am. Here I added var x ="My"; and the stuff on the right is added to the stuff on the left like your said ---.> http://jsfiddle.net/GdBBf/58/ Here I added var x = "My"; and then used the = sign instead of += and it replaces what is in the x variable. --> http://jsfiddle.net/GdBBf/59/ *** I think rather than replacing what is in var x ="My"; --> It just grabs the last item that looped through the .each function which was the Irish Span (would i be right here?) ******* Thanks a lot. By the way, do you know what happens to the stuff on fiddlejs -- is it left there forever? Do you use fiddlejs for this type of question/example?

Hi there all, Can somebody tell me what exactly += means and how exactly does it differ with =? I kinda get it by trial and error but I'm looking for more of a definition. http://jsfiddle.net/GdBBf/46/ When I run this function with +=, the first and second div show up in a single alert box. So I know this is because I am using += but what exactly += telling the variable to become? http://jsfiddle.net/GdBBf/47/ When I run this function only with =, then only the 2nd <class="span"> shows up and not the first <class="span"> Why didn't both fire sequentially as the .each function looped through the <class="span">? Stephen [ps. I'm not too familiar with fiddlejs --> does that stuff stay up there forever?]

yep. all the specific numbers are unecessary. cheers

Hey, I'm only learning too so don't rely too much on my advice. But I think this is one of many possible solutions to the above problem: (Also, it will need to be tweaked a bit to your liking) I have no time to add fancy css or double check it or anything but others can look into it and check for mistakes if they want. Happy new year! Relevant css: #content { float: left; width: 1100px; min-height:650px; } #content .images1, .images2 { width:1000px; height:250px; } .images2 { margin-top:30px; } #content .images1 .img1, .img2, .img3 { display:inline-block; width:33%; } #content .images2 .img4, .img5, .img6 { display:inline-block; width:33%; } Relevant HTML: <div id="page"> <div id="content"> <h2>The PINK ALLIANCE</h2> <p>Some of our Favorite Teams from across the FRC Community</p> <div class="images1"> <div class="img1"> <h3><a href="http://thehitchhikers.org/index.php"'>http://thehitchhikers.org/index.php" accesskey="1" title="">The Hitchhikers - Team 2059 - Cary, NC</a></h3> <img src="images/2059.jpg" title="" alt="" height="200" width="280" /> </div> <div class="img2"> <h3><a href="http://www.lospolloslocos.com/"'>http://www.lospolloslocos.com/" accesskey="1" title="">Los Pollos Locos - Team 2815 - Columbia, SC</a></h3> <img src="images/2815.jpg" title="" alt="" height="200" width="280" /> </div> <div class="img3"> <h3><a href="http://www.team587.org/index.html"'>http://www.team587.org/index.html" accesskey="1" title="">The Hedgehogs - Team 587 - Hillsborough, NC</a></h3> <img src="images/587.jpg" title="" alt="" height="200" width="280" /> </div> </div> <!-- end of images1 --> <div class="images2"> <div class="img4"> <h3><a href="http://thehitchhikers.org/index.php" accesskey="1" title="">The Hitchhikers - Team 2059 - Cary, NC</a></h3> <img src="images/2059.jpg" title="" alt="" height="200" width="280" /> </div> <div class="img5"> <h3><a href="http://www.lospolloslocos.com/" accesskey="1" title="">Los Pollos Locos - Team 2815 - Columbia, SC</a></h3> <img src="images/2815.jpg" title="" alt="" height="200" width="280" /> </div> <div class="img6"> <h3><a href="http://www.team587.org/index.html" accesskey="1" title="">The Hedgehogs - Team 587 - Hillsborough, NC</a></h3> <img src="images/587.jpg" title="" alt="" height="200" width="280" /> </div> </div> <!-- end of images2 --> </div> <!-- content --> </div> <!-- page -->

I read through the list. Good Advice in there. Method 1 and 3 seem to be the most convenient. Method 1 worked for me -- although I had to add it to the child container aswell -- maybe because the <li>'s are also seen as block elements. I couldn't seem to get method 3 working but my brain is fried for now on this topic. So anyways, thanks for all your advice, it's helped me to achieve the horizontal navigation menu in 2 different ways and I sort of understand them both now.

Thanks Eric. Great solution. Menu bar resizes without dropping down how i wanted it but I don't understand it - I thought a nav tag was just like a div tag.

I'm going to go at this again today and try to solve this responsive issue. Eric: I got rid of the reset css at the start -- It was unnecessary but I really wanna keep HTML 5. This is my learning site so I can afford to spend time on it using more style sheets for ie. Kevin: I made that change with the Shiv but problem with IE9 is actually the font. It is not accepting the google font for some reason. But I'm not going to worry about IE now since I will do a separate stylesheet for IE. Wickham: This is actually the issue I am most concerned with and spending all my time on --- when I use the float method -- Items drop down below and overlap stuff beneath it (I was hoping to keep them all in a line no matter how small the window size).The method you are suggesting is the same as method 5 in Eric's website but I really want the elements to meet the sides 100% in all window sizes. When I use the inline block method -- then the elements squish up beside each other no matter how narrow the window -- or at worst, they drop down but they stay inside their parent container. This is good. But the big problems I am having with inline block method is matching the elements exactly to the margins ie. 100% in all window sizes. There is also an issue of white spaces between the elements -- although there seems to be some fixes for that.

About internet explorer -- it has caused me several headaches including IE9. I am thinking of writing up a separate stylesheet for IE6,7,8 in a more basic style -- is this a fairly acceptable solution nowadays given the low usage levels? It looks okay but I'm not happy with it since there are several things I just can't seem to do yet.... Like a lack of control --- I want to do X but am forced to do Y instead. Most of my problems are stemming from attempting to get a responsive page and I am completely confused about what exactly inline-block is and float is and it seems there are pros and cons to both. Anyways, I'll post back tomorrow with specifics.

Okay. Thanks Eric. I'll try it with those fixes. I found this blog: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ What do you think of responsive design in general? Maybe fixed widths and media queries for different screen sizes is a better idea? [i'm not sure if I have the terminology exactly right either]

Not sure of the best way to show the code.here is a link to the current problem -- uploaded temporarily.

Hi Kevin, I applied the method on the link you suggested and it works but it leaves a space between each list item. I have read up on fixes for these spaces but it seems all a bit messy. Are there any other ways using inline block but sticking with the % widths?

Hi Eric, I've looked through your 6 methods and bookmarked it as they seem useful methods depending on the situation. I've just gone through methods 4 - 6 which seem most applicable to my case. The 5th method -- using relative positioning should work but then the whole thing about the overflow:hidden puts me off.. The 4th and 6th method would be nice if they would work with % widths. Is it possible with % widths? (It didn't seem to work for me when I tried it this way). A slight modification of the 4th method --- which is the same as Kevin's link INLINE BLOCK METHOD works but it leaves a white space between each list item.

Hi Kevin ---- I removed the first question because I solved it after I posted..... It was something to do with my image throwing out the margin... I had stupidly put the image directly into the html like this <header> <img src=""> </header>. I changed the header to a background image using css and bing -- problem gone. I am going to read your post now on how to fix the second problem. And Yes, the <li>s are floated left.