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

There was something for the Mac called VoiceOver but I dunno if it's still around...

there was also something called FireVox, a reader for the FF browser alone... but that's not a real screen reader, as they are a computer program that run on the OS and read everything on the Desktop...

I only use JAWS over WindowEyes because the trial for JAWS is free. The things cost like 500 us dollars and I'm not shelling out that kind of money until I'm blind.

 

In response to: Stomme poes

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

I fixed the page to validate it. The header div was missing an </div>. Of course the page looks pretty messed up right now, and I think the legend command may not create the effect I intended, but I think I may get where you are going with this. Creating a linear representation of the site and then arrange it in correct visual order?

By the way, thank you so much in advance for taking the time to write what you did, it is teaching me a lot, and I hope that this little test page can be useful in demonstrations to other CSS newbies like myself in learning how to write proper cross browser friendly CSS. I am taking all the advice you say to heart, honestly. It makes more sense then what I was doing before. In fact I am taking the advice that everyone gives here.

http://howmanymilesinakilometer.com
http://howmanymilesinakilometer.com/style_revised.css
http://howmanymilesinakilometer.com/HowManyMilesInAKilometer.png

The style sheet is just minimal right now, just so there is something there. I'll be waiting for the next suggestion you got for me. I also put a link to how I'm trying to make it look when I'm done just so it's convenient to get to again.

 

Just wanted to let you know I'm reading the book, Bulletproof Web Design, it's pretty good so far and I think what I was looking for. Has a lot of info on cross browser bugs, i've already applied it's 'text' techniques using percentages and a 'base' for the body for text font size, and to keep in increments of 10 for percentages. Anyhow, please read my post before this, I need some ideas for what to do next to complete the design.

 

What do you think of how I designed my html and css now?

 

Just a couple of tips:

1. Try and learn css shorthand. Example:

html{
	background-image: url(images/ieDropShadow.jpg);
	background-position: center;
	background-repeat:repeat-y;
	/*background-color: #EFEFEF;*/
}

Code (markup):

can be

html{
 background: url(images/ieDropShadow.jpg) repeat-y center top;}

Code (markup):

2. Next, I suggest you apply the background image to #container. Because if you would notice, once you resize the browser (make it really small until a horizontal scroll bar appears), the background will move with it. So that's not really good.

3. Also, it's much better to make your logo linkable rather than making it a background header.

 

If I apply the background to #container the problem is that it loses the effect, so not sure what to do there hmmm...

Also how do I make my background linkable? (using css?)

How do I get the logo to go over the paragraph? I have been trying forever and can't figure it out, never heard of this technique before.

 

What do you mean by it loses the effects? The background doesn't show or the background doesn't extend? If your site would have more content, then you won't have problems with the background not reaching the end. If you don't mind the background going out of place when the browser is resized to smaller width, then just go with what you have now.

It's better to use <a> for the logo.

 

What I mean by effect, is the shadow effect, If you look at the png of how I want the site to look (linked above), I want to keep that shadow effect, but because of how it's made if I put that image in the container, the 'shadow' that is supposed to go around it doesn't show (that is the effect I refer to).

 

Man, sorry, I was just not allowed any internet access this weekend : ( That's supposed to be a good thing I guess. I had this going on Friday right before I left:
http://stommepoes.nl/Joe/converter.html

But I was stoopid and forgot to look at your PNG-- so I should change the form 'cause my current one doesn't have a Submit like it should... I see where you want it now.

I understand what glorie means but if this really is a 100% height page and if the container is a fixed width and the body holds the background image, they do seem to stay in sinc. You could move the png background to the #container, meaning you'd have to make #container wider and add the white to the image itself. I changed your PNG from alpha to just grey on white. I changed your header image to a gif-- smaller, still looked okay. I changed your | between list menu items to an image because if I were to float the a's instead of the li's it wouldn't match up (and I usually float the a's and not the li's).

The first chapter of Bulletproof web design I strongly disagree with, as do others. Here's the problem: the idea that 62.5% font size makes 1em=16px or whatever it is only works on some machines. It doesn't work on mine (Linux machine, don't use default WIndows dpi), Macs (if still using the 72dpi that they all used to be set at) or Windows with Large Fonts dpi set (120). You can never EVER count on 1em = any particular px size. I have a small screen but 1400px width-- I very nice resolution for a small screen-- makes text very very tiny though, so I'm always CTRL++ing in FF.

Some people set font size to 100% in the body because it seems to make IE not act so strange with text enlarge. I dunno, maybe I'm just lazy (no that's a fact), I never set fonts in the body (sometimes for other people's pages because they seem to need a particular font size). I only set font sizes where I need them to be different than their default. I let the user's machine do its thing at whatever resolution, default or browser setting it's going to do it at-- and just keep everyone proportional to that setting, so it's cool.

You can look at how I made your logo clickable-- the technique is called Gilder-Levin and you might want to read this:
http://www.mezzoblue.com/tests/revised-image-replacement/

I used a 100% height model-- I don't really know a page to link to, cause I learned it first from deathshadow (he did it for Blue Parukia... maybe I have it in Bookmarks...)

That keep the white part of the page (#container) always to the bottom of the screen. This only seems to work with direct children of the body. Html and body elements set to 100% height (so, no margins or padding set top-bottom on those elements), and min-height 100% for #container so that in mode).rn browsers it can grow (but also no margins or padding allowed on top or bottom of #container either). Height: 100% is set on #container for IE6 because it doesn't understand min-height, yet lets height grow (other browsers don't). To add a footer, another inner element would need to have bottom padding to keep the footer from covering content up after visitors have scrolled all the way down the page.

*edit nevermind it wasn't BlueParukia it was someone else... http://forums.digitalpoint.com/showthread.php?t=620374

 

Ah, also just looked at the CSS.

I don't usually use the html element for anything other than making sure Internut Exploder obeys things like 100% height. Sometimes you'll see code for that element, but we should not treat it as a normal element. It has special rules applied to it. 99.9999% of anything to go in the background needs to be on the body, not the html element. This means background images. Most of the time, html element should not even be a thought in the head. Not mentioned, not styled, except when getting around a bug (IE7 zoom issues) or doing a neat-o trick (100% height). We're maybe doing 100% height (I did on my version of your page, but that was a guess, I might be wrong), so then html gets the height, and if you're setting a backgorund colour you might as well stick it in that declaration too... but otherwise, it all goes on the body.

Anything which is floated, or set to position: absolute, does not need the declaration display: block. Floats become blocks, and cannot stop being blocks until you un-float them (float: none). Absolute positioning seems to do the same. When things are made into blocks, you can do blocky things with them like setting heights, widths, vertical margins, etc. However, these are all display properties, so you will still never be able to use an inline to hold a block:
<span><div id="header>Header stuff</div></span>
Even if span is set to display: block, it's still invalid (in case this ever comes up; you haven't done this : )

As glorie said, combine your properties when there is a shorthand available. I don't actually know of a list of them anywhere, but I'm sure they're all over teh interwebs (CSS shortcuts). I use the back end of my HTML Utopia book for reference if I forget what I can put together and what I can't.
Some, like background, are real forgiving. You can say background: color or you can say background-color: color... you can list as many or as few values with this one I guess. Font on the other hand needs a particular order and at LEAST a font size and font family. They're all a little different. Why I love the back of my HTML Utopia book, as it says what these rules are so I can be lazy and not memorise them : )

#topNav
{
	[b]margin: 0;
	padding: 0;[/b]
	font: 80% Verdana, Arial, Helvetica, sans-serif;
	float:right;
	list-style: none;
}

Code (markup):

The great thing about having the universal selector setting margins and padding to zero sitting at the top of your CSS sheet
* {
margin: 0;
padding: 0;
}
is that it means you don't have to ever say it again, unless you are undoing a margin or padding on something where you've previously set it. Web coders are lazy-- someone came up with this declaration because s/he was really tired of adding margin: 0 padding: 0 to every friggin element. The rest of us rejoice (unless we're doing forms... the padding: 0 declaration can cause some problem with forms).

ul#topNav{
	float:right;
}

Code (markup):

Sometimes you'll see just an id in other people's code, and other times the name of the element with it. They mean the same thing. One is just used by some people either by habit, or to remind them what element that id is referring to.
So the ul#topNav declaration is exactly the same as all the declarations you already stated in #topNav. ul#topNav = #topNav.

#topNav a:hover, body#home #t-home a
{
	color: #000000;
	text-decoration: none;
}
#topNav a:hover, body#blog #t-blog a
{
	color: #000000;
	text-decoration: none;
}
#topNav a:hover, body#contact #t-contact a
{
	color: #000000;
	text-decoration: none;
}
#topNav a:link, a:visited {
	color: #335A6B;
	text-decoration: underline;
}
#topNav a:hover, a:active {
	color: #808080;
	text-decoration: underline;
}

Code (markup):

The nice thing about the "a" is that it overrides everyone else-- saving you code! I see you have id's on each of your li's, and I'm assuming this is for some highlighted-while-on-that-page setup? Which is fine. But as far as CSS is concerned, you can ignore the fact that those elements have their own id's. Unless you mention an id, simply mentioning the name of the element will cover them. So, taking into account that I find a:link completely useless (because unlike "a" alone, it does NOT override everyone. "A" is like a parent, and the children take on its features most of the time, until you say otherwise), I do this:

#topNav a {
	color: #335A6B;
[b]text-decoration: underline is a default in all browsers, so don't mention it[/b]
}
#topNav a:hover, #topNav a:active {
	color: #808080;
}

Code (markup):

Now you've said here that you want all links that are hovered to go 808080 colour. Fine, but looking at the rest of your code, it seems you want them all to go black!
#topNav a:hover, body#home #t-home a
{
color: #000000;
text-decoration: none;
}
With the comma (,) you are listing all the things which should take on the properties you are listing. So, first you are saying ALL hovers turn black and lose the underline. Then you say that specifically the first a while the user is on the home page is also black. So then why do you later say a:hover {color: #808080;}?

Instead I think you want this (not sure though) and don't forget :focus! It's great for keyboarders to see where they are:

#topNav a {
	color: #335A6B; [b]all links inside #topNav, at first[/b]
}
#topNav a:focus, #topNav a:hover, #topNav a:active {
	color: #808080;[b]an exception is made for all hovered and all active links inside #topNav[/b]
}
#home #t-home a, #blog #t-blog a, #contact #t-contact a {
  color: #000; [b]the more specifically named links are now overriding our basic #topNav declarations above[/b]
  text-decoration: none;
}

Code (markup):

This sets all those on-page stylings as black and not underlines, showing the visitor which page their on, and keeping that state even on :hover for that particular page. Now to tell the truth, I prolly would've put the id's on the a's, cause I'm lazy and it would mean my CSS would be less (#home #t-home:hover) but that's me. I'm lazy and like to write the least amount of code as possible, most of the time. Sometimes i get a bug up my butt and write extra for some reason though.

What you want to watch out for is I saw in your code this: #topNav a:hover, a:active! The a:active in here will mean ALL active links, not only those in #topNav. If you only want that active style on #topNav's links, you need #topNav a:hover, #topNav a:active instead. This is why your black hover seemed to work at overriding the #808080 colour on your home page. You set the black on #topNav a:hover, and body#home #t-home a to black. Remember, "a" by itself will always override a:hover or any other specific a:whatever. The two id's (#home #t-home) overrided the single id listed later (#topNav).

In CSS the number of id's vs the number of classes or simply elements is counted! And they get a score. The score determines who wins out and renders. I've seen some differences between browsers rarely, so the system us usually correct. Findind why something isn't working that should is always an exercise in finding the Overrider and why. It can be a hair-loss program.

Everyone writes code differently, so while there are right ways and wrong ways, there are lots of right ways. Take everything I say with a grain of salt too. Sometimes I just talk out of my ass. : )

 

For the most part I have now adjusted my theme to fit what you have suggested, using some of the html and css that you suggested to me. Those are some really useful tips, and I am very very grateful for the time that you have put into helping me explain these details. I've learned a lot in these past couple of days. More then I would have thought.

It seems in I.E 7.0 and 6.0 however the absolute positioning technique you used seems to break, and I'm not sure why yet, but I suspect it has something to do with margins or some I.E bug that needs a hack.

As far as the 'font trick' in bullet proof web design, I didn't realize his font trick wasn't bulletproof, good to know. I suppose I'll just make the design fit to whatever the default is, a good design would fit that anyways, right =)?

Gilder-Levin Method: I tried applying this to my page, http://howmanymilesinakilometer.com/index.php , but I coudn't seem to get it to work, I even copied your code, but I must be missing something. The logo is clickable, but when I refresh I don't see the text behind it, like I see on your site when I refresh. Which is the idea of the method right? So it would appear to any software and device (like JAWS). Maybe u can point out where I went wrong?

*side note*

Also I may be interested in that book still despite my purchasing of the book as my friend could use it ^_~, if you are still willing to give it to someone that could really use it.

 

Lemme give some nice styles to that P since I didn't. You shouldn't see the text except possibly while you're loading that image. Afterwards, that image should be cashed and load as fast as the page, never showing the text. Set your browser to images off and take a look. The text is there, even on your page : ) But we should make it sit better. Of course, we want to move the text around and not the element, since if the element moves, so will it's child... so if I ended up needing to move the p, it's possible to bring the <a> back up with negative coordinates (you can do that) or negative margins (you can do that too).

*Edit, done. Also decided to bloat up our markup with some spans in the p... but it looks neat-o with images off! Same colours, text all stuck together.

I explained in a PM about legend, but I'll do it here too. Every browser has issues with legends. We have to get downright hacky if we care that much about the exact place for it (and 99% of the time, there's no point in trying to make it look like there's zero difference between browsers... they all render stuff a bit differently and some like Safari have their own goofy fonts etc... good-enough is good enough most of the time. There's differences between machines on top of that. It's only worth getting panties in a twist if there are images involved and then pixel-perfect really matters.
http://www.tyssendesign.com.au/articles/css/legends-of-style/
(revised)
http://www.tyssendesign.com.au/articles/css/legends-of-style-revised/

Nice article.

 

HI

I am new here, please help me with the earning potentials and feel free to post me

thanks

 

Interesting, maybe I should just give up using the legend command altogether, and just use divs...I've tried making legend work with the span thing but no luck. Not sure what to do. Only if I use a legend correctly it would probably make my data more meaningful to search engine spiders I think, which is part of my side goal for this little experiment.

 

See other thread.

 

In the meantime, you could also start coding the rest of your page... I think it's a bit unfortunate that you ran into forms and their problems so early. You'll find some other things that look a few pixels off when you compare between browsers, but the main thing is whether the design remains the same between browsers.