Need some CSS I.E 6.0/Safari/Firefox help (pulling hair out) - will pay $'s if need

First thank you for taking the time to read my request.

If you visit the site http://dnfinder.com, I will explain what I am trying to do. You can't see it yet, but I just became part of McAfee's Security program thingy and so I added there code to my page, it's an invisible link at the moment just to the bottom right of my logo where it says DNfinder.com, you will know you found it cause when you mouse over the text cursor will change. If you use a visual CSS editor you can clearly see it. I am trying to get that logo to appear to the 'right' and center of the heading logo. Easy right? Just put that code in it's own DIV and set the float property to right and then set some padding from the bottom...

So for example, I tried to set the CSS code to : #securityLogo {margin: auto;display: inline;float: right;}
(here is the entire css document in case you are curious, http://dnfinder.com/style/style.css)

So did it work? ... NO! =(

This seems to work on firefox and safari to some extent, but on internet explorer 6.0 and 7.0 it fails, adding somehow huge amounts of space when viewed on internet explorer.

Another small problem that is only Safari, is the main image seems to have a line separating it from the rest of the header? not sure why it's doing this. It is only on safari though.

To view in different browsers, I use http://browsershots.org.

In anycase, I will pay for assistance as I need to get this up =( and I'm getting grey hairs quick, and apparently I suck at this. If you can teach me what I did wrong and any suggestions I will greatly appreciate it. I will donate to anyone who contributes help in return for your time. Thanks very much in advance!

Best,
- Joe

 

I just wanted to fix some of the confusion, the problem 'still' exists. I temporarily 'stopped' most of the problem temporarily by putting the logo for mcAfee to left bottom of my dnfinder.com main header logo, but I really want it to appear to the right and center, or at least be more centered where it is.

 

Have you tried this?

#securityLogo {float:right;}

Code (markup):

It's a bit hard to sift through your code because everything is in one line. Let me know if the float right doesn't work as intended.

 

nope that is what I talked about it doesn't work in firefox now if I do 'just that' it has to have the display inline; tag also with a float right, and then if I do that and it works in firefox, then it doesn't in I.E =( (and I have no idea how to make it work in I.E at all in the first place), so not sure of what _ hacks to do.

so confused...

 

man I feel like crying... when I change #securityLogo to...

#securityLogo {margin: auto;display: inline;float: right;}

The page looks different in EVERY browser, safari looks correct, firefox is incorrect, and internet explorer is incorrect but in a different way. God help me...

There HAS to be some universal way of doing this.

 

First of all, your #masthead code is not desirable. The way you sliced the logo into two images is just not right (your code could have been better). Did you rely on dreamweaver to code this site? But anyway, since I can't rewrite the code for you a quick fix for this would be:

Adding this code to your css:

#securityLogo {/*delete everything here*/}
#securityLogo img {position:absolute;top:30px; margin-left: 650px;}

Code (markup):

Please delete your #securityLogo code and try using the #securityLogo img code I provided. Let me know if that works.

 

Wow it worked, nice!

Some questions glorie, I'm trying to learn how to properly code with CSS, this site was actually a job that was done for me that I was trying to edit so I imagine there are a lot of problems with it.

I'm curious if you know any good articles that explain how to design well as to avoid problems between browsers?

It seems position absolute is an interesting solution, all though I don't think that would work to well on a dynamic site that didn't have a wrapper. Fortunately it works in my situation though. I find it strange how every browser interprets display:inline and float:right or left differently. Makes me wonder why? Especially safari and firefox which are supposed to adhere to the WC3 standards, even they have totally different visual results to the code.

 

pm your desired budge and contact details includeing email so we get back to you.

 

I tried applying your technique to my sister site, http://itechware.com, but unfortunatly the same trick did not work. It works in I.E 6.0, Firefox and Safari, but not in Internet Explorer 7.0, any ideas why?

 

My budget is $100 though to anyone who can sit down with me and teach me proper CSS design. My goal of course being how to make CSS that will work in Safari,Firefox,I.E 6.0 and I.E 7.0

 

It takes a LOT of time, I'll tell you. It's been a bit over a year for me, of total learning (from zero). I got to get paid by my work to learn HTML and CSS. No matter how many people are saying HTML is easy, I still find myself learning more of it to this day.

CSS takes even longer, I think because of the More Than One Way To Do It set-up and the browser bugs.

When he's finished (will he ever be?) Dan Schulz is making a site called Minimal Markup which shows people how to use the least amount of code to get what you need.

You need to learn proper HTML before jumping into CSS. I could not properly CSS that current page (the dnfinder one).

Now when I started out, I had this book called Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd (this is like THE best book for beginners), so I never started out with the older-fashioned garbage:

<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('http://www.dnfinder.com/images/home_on.gif','http://www.dnfinder.com/images/demo_on.gif','http://www.dnfinder.com/images/buysell_on.gif','http://www.dnfinder.com/images/media_on.gif','http://www.dnfinder.com/images/pricing_on.gif','http://www.dnfinder.com/images/news_on.gif','http://www.dnfinder.com/images/forums_on.gif'); ">

Code (markup):

MM_swap crap, that's pretty much a dreambeaver thing. Settin margins on the body in the HTML is just an Old Code thing. Do:
<body>
<div id="container">...

body {
margin: 0;
}

Although using a CSS reset is easier:
* {
margin: 0;
padding: 0;
}

resets margins and padding to zero for every element, for every browser. Easier to know where you're starting.

Your menus should be unordered lists, your Javajunk should be either external (sitting in a file somewhere else on your server) or at least all in the <head> tags, use CSS image replacement for the swap thing, and learn what's been deprecated (hspace, vspace...??).

Hmmm, getting started with HTML... I would say HTMLdog.com and/or the book I mentioned (which I just can't plug enough) both are free if you can get the book at the library, but really it's worth it whatever you pay for it. It really got me started.

For CSS positioning, besides crawling various forums (including csscreator.com and sitepoint.com/forums and here), I learned a good basis (only a basis) from the book
HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer-- also prolly old enough to be in your local library.

You can't learn complicated positioning techniques without knowing the basics first.

Avoid w3schools.com. They are outdated and have not corrected their errors.

 

* {
margin: 0;
padding: 0;
}

Code (markup):

Very useful thing indeed. Every my stylesheet starts with this

 

Hmm, you need a new coder. A better one.
Stop scrimping on your budget for coding, I've seen tons of clients ending up spending more because the code ended up giving them more problems and had to pay someone to fix it everytime

It takes experience to familiarize yourself with properly coding css. You can try alistapart, sitepoint and message boards. I've been coding css for the past 5 years - everyday and there are still times where I find myself stuck with a bug. A good start would be finding a good template and start with that, look at how it was coded. Read a book and code as much as you can. If you're a designer, just outsource your css coding work if it would take too much of your time.

I hardly use absolute positioning unless it's vital. I only used this for you because I didn't want to edit anything else with your code.

 

I'll try and take a look at this later.

 

I'll disagree with this one simply because the way most templates are written, they are bloated, filled with so much extra unneeded code, and it's not easy for someone who's actually GOOD at CSS to style (or, change a current style). They are made to be flexible, which makes them a pain, a real pain, to edit. Another thing is that many templates do this silly grouping... all link colours in one CSS sheet, all major boxes in another CSS sheet, and stuff like forms and menus in separate sheets, totally illogical grouping, making it a hair-loss programme to find the piece that's overriding your new code...

And lastly, it's pretty hard to find a good template unless someone who's a coder picks it out for you and says, "Here's a GOOD template, a well-written one."

Although it can't hurt to play around with one, but then when you get unexpected results, it's just hard to find where that came from.

Oh, they don't, not with the minimal code... that's other code interfering (with one LARGE difference... IE6 sometimes needs display: inline; on a float to stop a double-margin float bug). Display: inline on a float should do absolutely NOTHING on a float... because a float is a block, and you can't undo its display state without first undoing the float (float: none. Luckily, IE6 notices it and removes its bug.

I'll say again, you should learn lean and proper HTML before learning CSS... it makes the CSS much easier.

    <li><a  href="http://itechware.com/contact.php">Contact page</a></li>
  </ul>
</div>
<!--Top Navigation ends here-->
<!--Header ends here--> 
	
<!--Middle Container starts from here--> 

Code (markup):

I only see a single closing div, for the (usually unnecessary) extra wrapping div around the menu... your header closing div is not where your comment says End Header at all... it's further up. This sort of thing can increase hair loss.

Where do you want your McAffe thingie on your new site? Currently, in FF1.5 on Linux it's at the top, near the right, just under the home/mail icons.

 

It's actually good to learn from example. Looking at how others implement certain layouts is a good source of information. There's no beating writing everything from scratch, but at some point, everyone needs help. I remember having a hard time implementing a 3 column fluid layout, I relied on the template to build out the structure of the code. Glish.com and alistapart.com would be some samples of where I could get sample templates from.

 

Well I'm going to start a new project then as an experiment to learn properly. DNfinder can wait for now, I think it may be beyond easy repair it seems from what I've learned from you guys. I suppose I'll just code the sites myself for now on, hard to find a good credible CSS coder.

The new project is at, http://howmanymilesinakilometer.com, and it's just a 'test' site to learn my CSS skills and maybe something can come of it. The design plan for how it should look when finished is here.

http://howmanymilesinakilometer.com/HowManyMilesInAKilometer.png

So any tips on how to start, or how I'm doing so far? Currently the site looks different in I.E and Firefox and Safari, and not sure if I'm going about this correctly.

Should I design the site to look good in FireFox first? and worry about other browsers later? I will try to apply some of the techniques you've mentioned above.

If you notice I used the

* {
margin: 0;
padding: 0;
}

That's cool that it sets everything to proper locations on all browsers, that is the kind of stuff I need to know!

 

Okay, we'll start with your HTML. : )

Oh, also, I just looked now in an ancient FF 1.5 and fake IE6 for linux. My IE6 seems to be puking on your png-fix, since I get at the bottom "Done, but with errors on the page." and the grey background doesn't show up...Maybe for a starting-out site, don't use PNGs who have alpha transparency. You can make a repeating jpg or png-without-alpha if the middle is fixed width anyway, smaller file, no IE6 hassles...

my remarks in bold

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[b]let's start you out on the right foot, and either make this XHTML1.0 STRICT or HTML4.01STRICT (either are good).  There's no reason to hold yourself back with Transitional...[/b]
<html xmlns="http://www.w3.org/1999/xhtml">
[b] I learned from Dan Schulz that sticking the lang attributes in the HTML tag as well as a meta language tag is good for accessiblity, so let's do it:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">[/b]
<head>
	<title>How many miles are in a kilometer?</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<meta name="Description" content="If you want to convert how many miles in a kilometer use this conversion tool." />
	<meta name="Keywords" content="car, travel, miles, kilometer" />
	<meta name="rating" content="general" />[b]not sure what this is doing (although that could just be my ignorance, but there are apparently lots of meta tags, esp for robots, that don't actually do anything...)[/b]
       <meta http-equiv="content-language" content="en" />[/b]
	<meta name="resource-type" content="text/html">[b]Content-type, not resource-type[/b]
	<meta name="robots" content="index, follow" />[b]this is a default, robots follow unless told otherwise[/b]

	<meta name="Language" content="english">
[b]I think you don't need the one above when you have the one below... repeating yourself repeating yourself[/b]
	<meta http-equiv="Content-language" content="en-us">
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	[b]I'd wait on this stuff for a bit...[/b]
	<!--[if lt IE 7.]>
	<script defer type="text/javascript" src="pngfix.js"></script>
	<![endif]-->
	
	<script type="text/javascript" src="jquery-1.2.6.js"></script> 
	<script type="text/javascript" src="jquery.pngFix.js"></script>
	<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
	</script>
</head>

<body>
<center>[b]this is a deprecated tag, since HTML4 actually... you only get away with it because of your Transitional doctype... instead, use your div id="outerContainer" and give it a width in CSS, and margin: 0 auto to center it... works in every browser except IE5.5 and below... we can use a hack for that if you care about that browser[/b]
	<div id="outerContainer">
	[b]we'll see if you really need three outer containers... [/b]
		<div id="container">
			<!--Header starts from here--> [b] while it's quite usefull to state where something is ending (since they all look like </div>, it's just wasting bytes to state you're starting something right before <div id="header" cause it's obvious[/b]
			<div id="header" class="zoneWidth100">
			
[b]Instead of locking your text up in a logo, we can do image replacement... it's "safer" as for some UNKNOWN reason (pisses me off) there are some screen readers who don't read alt text... wtf??? Yeah I know.  To tell the truth, the rule of thumb in Semantic HTML is, if the image is decorational, set it as a CSS background... and we'll do this[/b]
				<div id="logo">
					<a href="http://howmanymilesinakilometer.com"><img src="images/logo.png" alt="How many miles in a kilometer"/></a>
				</div>
			
[b] We'll show you to use an unordered list for your list of links (what a menu is) without the wrapping div (only needed if a background image has to be wider than the menu itself, otherwise it'll just be a ul[/b]
				<div id="topNav" class="floatRight">

					<p>
						<a href="index.php">Home</a> | <a href="#">Blog</a>| <a href="contact.php">Contact</a>
					</p>
				</div>
			</div>
			<!--Header ends here--> [b]we'll tell you about the IE duplicate content bug that can happen when you have comments coming between divs (although this usually only shows when those divs are floated, but so for security we'll stick your comments INSIDE the div instead of inbetween...[/b]
			<div id="innerContent">

				<div id="kilometers">(Kilometers)</div>
[b]in both FF and IE64Linux, I get this word not sitting above the box, but almost inside it... also, this is called "divitis" (obviously medical people didn't coin the term, it should be divosis...), as you don't want to wrap divs around every word here and there... there are better HTML elements to use[/b]
				<font size="6">Convert:</font>[b]font tag... a no-no... use CSS[/b]
				<input type="text" style="padding: 5px 0px;margin: 0px 12px;">
			</div>[b]now this whole thing, with the input, is a FORM so we will use form tags, using a submit button as the trigger for your scripts...[/b]
		</div>
	</div>
</center>[b]ack! center![/b]
</body>
</html>

Code (markup):

So, with what little I see on your current page, I'd write this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>How many miles are in a kilometer?</title>
  <meta name="Description" content="If you want to convert how many miles in a kilometer use this conversion tool." />
  <meta name="Keywords" content="car, travel, miles, kilometer" />
  <meta http-equiv="Content-language" content="en-us">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link href="style.css" rel="stylesheet" type="text/css" />
[b]I don't know how much of this is a rule, but teh Crusties have always told me it's best to state title first, normal meta tags next, then link meta tags, and scripts last... dunno if it really matters though but I follow it[/b]
</head>

<body>[b]will have 100% height in CSS and white background[/b]
  <div id="container>[b]will have min-height: 100% and the repeating png (without alpha) and centered[/b]
    <div id="header">[b]I temporarily removed the class until I can see what it's doing... I didn't look at your CSS yet : ) [/b]
      <ul id="topNav">
        <li><a href="index.php#logo">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="contact.php">Contact</a></li>
      </ul>
[b]I put this first so we can float it and keep it at the top... you can do it the other way around too, but I've set the Home link to go to the name of the page anyway[/b]
      <p id="logo">How many miles in a kilometer?<a href="index.php"> </a></p>[b]this will have image replacement.. the p will hold the text, and the a, which will be clickable like you had it, will hold an image over the text, hiding it... those with CSS on, but images off, like dial-uppers, will see some nice text cause we'll style it nicely[/b]
    <!--header--></div>  [b]we're not floating the header, so this comment could come afterwards, but until you're used to sticking it on the inside when you do have floats, we can have the comments inside for now[/b]  
    <div id="content">
      <form action="thenameoifyourscript.php" method="post">
        <fieldset>
        <legend><span>(Kilometers)</span></legend>
          <label for="convert">Convert: </label>
            <input type="text" name="convert" id="convert" />
	 </fieldset>
      </form>
      <p>other content, still in the white?  more content more content more content...</p>
    <!--content--></div>
  <!--container--></div>
</body>
</html>

Code (markup):

I'll agree with using examples for particular techniques, and I agree that if you are going to look at templates, the ones from alistapart and something like layoutgala are good ones to go on. I just worry about newbies learning bad habits from something pretty picked out at like template monster or wherever.

If someone like you (who knows how to code) picks out a good one for a particular style layout for this guy to learn on, it should go fine.

You should have all your browsers open at once, and check in all of them as you go. This way, when one browser acts funny, you can nip it in the bud rather than going back later to redo a whole crapload of code... that IS difficult, and we're trying to be lazy (make as little work as possible for us) : )

If you have a Windows machine, these are the MINIMUM number of browser to have:
IE7 (I hope you don't have Vista)
IE6 (and if you want 5.5 and below, Tredosoft.com Multiple IE's)
Opera
Firefox
Safari-for-Windows... I think it's Saffy4 now? This is the Macintosh browser, although many Mac users prefer FF too
Lynx (a text browser for testing how your site works on linear browsers and with keyboarders)
JAWS and MAGic (these cost boatloads, instead get the free 40-min trial version for USB at Freedom Scientific .com )

 

Ack! Double post!!

Okay, my code above has two errors, so I'd ask you to copy it, save as a file, and then submit it to the S3C validator (the reason we use Doctypes, really... the browsers actually don't care):
http://validator.w3.org/ (REMOVE the comments inside [ b's] first!)

The first error is easy... the second one a bit harder if you are not used to how it talks. It can be kinda cryptic sometimes.

In the meantime I have my own copy (in my charset, utf-8) and will follow up with CSS. But first you should look at the bare HTML in a browser and see how well it works as an untyled page. You should have a decent, working page, then style with CSS, then enhance with Javascript (and in this case, were this a real website, the script for the converter might want to be back-end like PHP or something, so that it works on everyone's browser, not only those with JS).

 

This is a bit out of topic - Are there any good free screen readers you know about? And any screen reader that would work on a mac? I've been trying to find one for testing sites.