Arkinder 93 Posting Pro in Training

They are simply the different versions of CSS. Currently CSS2 is the latest officially released version of CSS, and is what should be generally used. CSS3 is the newest version of CSS, but is still being made. Some properties from CSS3 are supported but very few.

No, you would use the .css file extension for all of them.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

What browser are you having this problem in?

Regards
Arkinder

Arkinder 93 Posting Pro in Training

Start with validating your page. Then stop using tables for layout and deprecated attributes.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

Remove width: 100%; from this CSS rule.

div#navigation {
    height: 350px;
    position: absolute;
    text-align: center;
    width: 100%;
}

Regards
Arkinder

Arkinder 93 Posting Pro in Training

You should never use tables for layout. It is an outdated technique from 1996. The problem is from margin: 0; in this CSS rule.

ul#menu {
    background: url("../img/menu-bg.gif") repeat-x scroll left top #FFFFFF;
    font-family: "Lucida Grande",Verdana,sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    height: 43px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

This is because the form isn't being pushed far enough down. You can either remove the margin: 0; and allow FF to set it automatically. Or you can use margin-bottom: 8px; Regards
Arkinder

Arkinder 93 Posting Pro in Training

I would still need the complete CSS. Have you tried using Firebug, or Google Chrome, to inspect the elements and see what the box model is doing?

Regards
Arkinder

Arkinder 93 Posting Pro in Training

That's interesting. With the setting set to no are your users being validated? I'm sure the update will fix something. It just shouldn't be that difficult to activate users.

Arkinder 93 Posting Pro in Training

Never, ever, use any version of Internet Explorer as a test browser. It is 8+ years behind web standards, and this is exactly what happens when you do. You're also using tables for layout, which is an outdated technique from 1996. Firefox, Safari, and Chrome are only displaying what you told them too.

The first thing you need to do is put a real doctype in your page.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

You have a lot of deprecated markup and attributes. After adding it validate your HTML and CSS. Once those are fixed, view the page in Firefox and post back here.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

Alright, I was asking because testing in a smaller window like the one provided is a bad idea. It messes with how the page can look in an actual browser.

Anytime, if there's ever something that you don't understand - feel free to ask.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

You're positioning some of these elements the wrong way. To get it to center you will have to fix that. I'll make the changes red.
First we need to remove the margin-top from navigation .

div#navigation {
    z-index: 1;
}

And place it in the body rule.

body {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    margin-top: 450px;
}

Alright, I'm going to just use one of these as an example, but you need to change them all.

div#accessories {
    float: left;
    margin-left: 470px;
    margin-top: -290px;
    position: absolute;
}

Needs to be:

div#accessories {
    float: left;
    left: 470px;
    top: -290px;
    position: absolute;
}

When using position: absolute; You can use the top and left properties to move elements on a page. This move them around a little. Add 8 pixels to the left for each element. So the above rule would be.

div#accessories {
    float: left;
    left: 478px;
    top: -290px;
    position: absolute;
}

This will shove a few things to the top of the page. Don't worry, it's supposed to happen.

div#navigation {
    position: relative; /* This will move the images back down and is what allows the properties below to work */
    width: 1135px; /* A set width is needed. Unfortunately this number is just what works for my screen. You could also use 94em. */
    margin: 0 auto; /* This is what's actually centering the images */
    z-index: 1;
}

Regards
Arkinder

Arkinder 93 Posting Pro in Training

First off, I just want to mention that your header is a little off. You'll see what I mean here. What TerryJuneJr suggested will work fine. You just need to make a few changes so you can actually do it.

Place the text in a division on its own.

<div id="mainContent"> 
<div id="intro">   
    <h2>BLISS NO.5</h2><!--The clear property specifies which sides of an element where other floating elements are not allowed.-->
    <h1>A New Dimension in Good Taste</h1>
    <div id="sideImage"><img height="223" width="355" alt="cup" src="http://i1200.photobucket.com/albums/bb328/tobeeornot/cup_tin.png"></div><!--make sure png image is set upon a transparent canvas in Fireworks (modify/canvas/canvas color/transparent-->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco aboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- end #mainContent --></div>

And then move sideImage outside of that.

<div id="mainContent"> 

<div id="intro">   
    <h2>BLISS NO.5</h2><!--The clear property specifies which sides of an element where other floating elements are not allowed.-->
    <h1>A New Dimension in Good Taste</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco aboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor …
Arkinder 93 Posting Pro in Training

Please post a link to this page, and I'll be more than happy to help. Also, are you wanting the layout centered or on the left of the page?

Regards
Arkinder

Arkinder 93 Posting Pro in Training

Any idea why one setting or another would prevent activation e-mails from going out but allows all other e-mails to be sent?

Security. You, the admin, are being notified that a user needs activation and can manually activate the user. It's allowing you to screen each person before giving him or her access to your site. Joomla! just seems to have a not so user friendly interface.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

That's one browser. Good luck getting Firefox, Safari, Chrome, Opera, and IE7/IE8 to display consistently with malformed CSS. By the way, a doctype helps determine how CSS is used.

Here is a cleaned version of your markup with the number on the right. Please let me know if I did something that doesn't make sense to you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Header Template</title>
<style type="text/css">
	div#header {
		border-style: solid;
		border-width: 2px 0px 2px 0px;
		border-color: #999;
		padding-top: 3px;
		padding-bottom: 1px;
		width: 100%;
	}
	div#header p {
		font-family: "Times New Roman", Times, serif;
		font-size: 20px;
		letter-spacing: 4px;
		display: inline;
		width: 100%;
	}
	
	.black {
		color: #000;
	}
	.grey {
		color: #999;
	}
	div#header p.big {
		font-size: 26px;
		padding: 0;
		letter-spacing: 0px;
	}
	
	div#telephone {
		float: right;
	}
	div#telephone p {
		font-size: 15px;
	}
</style>
</head>
<body>
<div id="header">
	<p class="black big">T</p>
	<p class="black">HE </p>
	<p class="black big">N</p>
	<p class="black">AME </p>
	<p class="grey">| BOB JONES</p>
	<div id="telephone">
		<p class="grey">| </p>
		<p>1855-ANUMBER</p>
	</div>
</div>
</body>
</html>

Regards
Arkinder

Arkinder 93 Posting Pro in Training

Alright, so here are few things you can try. In the Global Config > Server > Mail Settings . Make sure that the "Mail From" address is not the default "you@yourdomain.com"

If that doesn't work, try changing Global Configuration < Server < Mail Settings < Mailer to Sendmail .

And another possible solution. Global Configuration < Server < Mail Settings < Mailer to SMTP using SSL , and remove any non a-z characters out of the From Name box.

These are just things that I've been able to find that other users used to fix that problem. As I said before, I've never used Joomla!. I hope that it helps regardless.

Regards
Arkinder

vectro commented: Thanks again +2
Arkinder 93 Posting Pro in Training

First you need a doctype. No browser will work correctly without one.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

It's not taking up the full width because you're using display: inline; Inline only allows the element to use the width and height that it is actually taking up, while block allows the element to use all of its width and height in addition to whatever margin or padding it may have.

Also, validate your CSS. You need to have a unit with the value of font-size and letter-spacing .

Regards
Arkinder

Arkinder 93 Posting Pro in Training

If the user is receiving an e-mail and the activation link included works, then Joomla is working correctly. What you're wanting isn't offered as a general setting by Joomla.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

Oops, I understood your problem but lost it somewhere along the way. ^_^ Try adding this to your .htaccess file.

ErrorDocument 404 /error404.php

If you already have this, or it doesn't solve the problem. Then your issue is with McAffee.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

Agreed, but there is no section for CMS or blogging.

Understandable, did you try what I suggested?

Regards
Arkinder

Arkinder 93 Posting Pro in Training

This is easy enough to fix, but before going straight to the problem there are several things that can be done to make things a little easier. I'm going to try to change your markup as little as possible, and making the changes red.

Let's begin with the header section. The two images have a combined height of 180px. However, you've set the height of their container to only 115px.

#header {
    background: none repeat scroll 0 0 #4D3821;
    height: 180px;
    margin: 0;
    padding: 0;
    position: relative;
}

This will push your navigation down a bit. Don't worry, we'll fix that soon. Next we're going to move where your images are in the markup. They're displayed before your navigation, and that's the way it should be in your markup.

<div id="header">
<img width="960" height="115" src="http://i1200.photobucket.com/albums/bb328/tobeeornot/header_bg.jpg" alt="header">
<img width="960" height="65" src="http://i1200.photobucket.com/albums/bb328/tobeeornot/indentifier.jpg">
                <div id="shoppingCart"><a href=".htm" title="shop">shop</a></div>
                <div id="joinButton"><a href="mailto:contact@bliss.com" title="join">join</a></div>
                <div id="mainNav">
                    <ul>
                        <li><a href="index.htm">about us</a></li>
                        <li><a href="products.htm">products</a></li>
                        <li><a href="order.htm">custom order</a></li>
                        <li><a href="contact.htm">contact us</a></li>
                        <li><a href="recipe.htm">recipe</a></li>
                    </ul>
                </div><!-- end #mainNav -->
 </div><!-- end #header -->

Now it will look exactly like it did before you moved the images. It just makes a little more sense to anyone reading the markup. Now let's move your navigation back up with the top property.

#mainNav {
    background-color: #8DADAF;
    bottom: -30px;
    height: 30px;
    top: 115px;
    left: 230px;
    position: absolute;
    text-align: center;
    width: 590px;
}

Now we can remove <h3>&nbsp;</h3> from your mainContent section, and decrease its height to …

jingda commented: Welcome back, Arkinder!! +9
Arkinder 93 Posting Pro in Training

Regardless, this has nothing to do with HTML or CSS.

It's a problem with both. Try renaming .htaccess to .htaccess.old and retry the McAfee verification. If that works then follow the verification process at the end. And rename your .htaccess.old file back to .htaccess

Regards
Arkinder

Arkinder 93 Posting Pro in Training

I've never used Joomla, and this really isn't a question about HTML or CSS.

  • Are your users even receiving the activation e-mail?
  • Is there a restart that Joomla needs to do? Is there a restart that you need to do?
  • Are there any delays between settings changes?
  • Is there a setting where you activate accounts that you need to change to allow automatic activation?
  • Does Joomla offer tech support or FAQs?

Regards
Arkinder

Arkinder 93 Posting Pro in Training

Try stripping it down and seeing if it works with this.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

HTML is only the structure of a web page. CSS is what styles it. It is kind of like HTML is the architect and CSS is the interior designer. To make a modern web page you will need both.

Start here.

If you need any help feel free to post here.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

I don't know a lot about Perl, but PHP can definitely do it, and this is not the right forum to ask this question in - Perl. Yes, your friend is correct.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

I'm actually on a trip in Europe right now, so there I don't have time to take a look at it. But if no one replies in the next 4 days just send me a message, and I should be able to help you. :)

Regards
Arkinder

Arkinder 93 Posting Pro in Training

It seems that the template is just calling the element a slope. JavaScript is most likely being used, but I couldn't tell you for sure without actually seeing the page.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

I'm a little confused as to what you're talking about. Are you saying that there is a section of text, and that when you click it more appears?

HTML is simply the structure of a page. JavaScript, or JavaScript libraries like jQuery, is used to make pages dynamic - user interaction.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

Given a top-padding is not a good solution because .picture_box_home will remain in .navigation_menu ul

.navigation_menu ul has a height of 0. An element can't be inside of something that "isn't" there. The floating li are still pushing the box down 140px (50px from height, 70px from margin).

Regardless margin should be used in this case. So ansaripk's suggestion is the better one. ^_^


Regards
Arkinder

Arkinder 93 Posting Pro in Training

Well first off 50px isn't enough to move it. Have a look at the box model. Margin is outside of the element. So basically the amount of margin has to be the same as the space between the element and the element above it. On the first page you posted, try changing margin: 0 auto; to margin: 20em auto; . Take a look at the image I attached. The blue from the top of your image is margin. Now if you're thinking that this seems a little ridiculous for just adding space - it is. Go back to your original CSS for the box. However this time, add padding-top: 50px; .

.picture_box_home {
    clear: both;
    background-color: red;
    width: 800px;
    min-height: 540px;
    margin: 0px auto;
    padding-top: 50px;
}

You'll be able to see the results and difference for yourself.

A few notes:

The margin in the image below is going all the way up to your banner, but it's skipping over your navigation. This is one example of how using the float property removes an element from the normal flow of the page.

While I didn't include it in my previous post, which was an error on my part. Always include the unit for a value. margin: 0px auto; instead of margin: 0 auto; Regards
Arkinder

Arkinder 93 Posting Pro in Training

margin: 0 auto; is just saying:

margin-top: 0;
margin:-bottom: 0;
margin-left: auto;
margin-right: auto;

The browser takes the remaining space on the page and evenly distributes it to the left and right margins - centering the element. margin: 0 auto; is preferred over margin: auto; to keep the top and bottom margins at their default value of 0.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

"Good" is a matter of preference. Ultimately it's up to what you find easiest to use or the most effective. Color coordinated code with spacing is much easier to read and can save a lot of time when scanning for errors, but sometimes that can all just get in the way. Play with a few different text editors and see which works best for you.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

The heights of the text in biker_bio and biker_bio2 are exceeding the height their containers. Try changing the font-size in each CSS rule to 13px.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

That's definitely a possibility. If you're running Mac OSX, you do realize that there are currently no viruses that can affect it in the wild (surfing the web). Unless you are downloading questionable applications and giving them your password, then you really don't have anything to worry about.

Regards, Arkinder

Arkinder 93 Posting Pro in Training

Because a div is a block-level element, where as a hr is an inline-element.

Regards, Arkinder

Arkinder 93 Posting Pro in Training

That's a possibility. Try this.

Regards, Arkinder

Arkinder 93 Posting Pro in Training

If you're trying to scan your entire computer, try scanning small sections at a time.

Regards, Arkinder

Arkinder 93 Posting Pro in Training

For example: if you positioned an element absolutely, you can either use top or margin-top . They do not stack.

Regards, Arkinder

Arkinder 93 Posting Pro in Training
  1. What are doing when it freezes?
  2. What application/s do you have open?
  3. Do you actually quit the application/s or just close them?
  4. How old your Mac?
  5. What version of Leopard (if at all) are you running?
  6. How much RAM does it have?
  7. How big is the harddrive, and how much space is left?

Just saying that it freezes is like going to a restaurant and telling the waiter that you would like an order of food.

Regards, Arkinder

Arkinder 93 Posting Pro in Training

The letter-spacing property, margin, or padding.

Regards, Arkinder

Arkinder 93 Posting Pro in Training

Visually yes, but no. Margin is part of the box model, while the top and left properties interact with elements a little differently, and typically require the element to be removed from the normal flow of the page.

relative-placed blocks? Do you mean relatively positioned block level elements?


Regards, Arkinder

vedro-compota commented: +++++++++ +1
Arkinder 93 Posting Pro in Training

The problem is only occurring in IE7. Modern browsers have no problem with it, so it's doubtful that there is anything actually wrong with the code. Taking apart the site would be pointless, not to mention a huge waste of time for a problem that's exclusive to a browser that's known for its many flaws.

Try removing the width and float from your #horizontal_line rule. This should allow the element to cover the entire width of the page. Is it still being moved?


Regards, Arkinder

Arkinder 93 Posting Pro in Training

Check this out.

Regards, Arkinder

Arkinder 93 Posting Pro in Training

Please keep in mind that floating an element removes it from the normal flow of the page.

Regards, Arkinder

Arkinder 93 Posting Pro in Training

It appears to be a problem with the JavaScript outputted. Start here.


Regards, Arkinder

Arkinder 93 Posting Pro in Training

That's a good question. Inch is a fixed value, so changing the screen resolution will change the value of an inch. Try using a dynamic unit, such as percentage or em.

Regards, Arkinder

Arkinder 93 Posting Pro in Training

The text is clearly in the code outside of any tags. Why don't you simply remove it?

Regards, Arkinder

Arkinder 93 Posting Pro in Training

By default, each browser has its own margin and padding for elements. To "reset" this simply add a universal rule (*) in your CSS.

* {
    margin: 0;
    padding: 0;
}

As for the doctype I'm going to quote a mentor of mine,

"The doctype is the set of rules you are telling the browser you are using to create the page. Change the doctype, change the rules."


Regards, Arkinder

Arkinder 93 Posting Pro in Training

What browser are you testing in? Hanging text does not make sense. Please be more specific.

Regards, Arkinder

Arkinder 93 Posting Pro in Training

The entire purpose of the overflow property is to accomodate overflow. If there is no overflow, then the property will do nothing.

Regards, Arkinder