CSS is making me twitch - guru assistance needed!

[AGPIX]

Hi boardies. I've posted this on 'Total Impact' too, so apologies if anyone is bored already! I'm a newbie to both, so hello from Scotland!

Is there anyone out there who speaks fluent CSS (habla estyle esheets de cascading)? I have spent the past who knows how long trying to build me a home page using CSS, and I've made some progress. In fact, good enough to consider going live. But I have fallen at the final fence - I _CANNOT_ figure out what I'm doing wrong, but the page is just not looking right online - it works fine in IE offline , but when I upload it it gets thrown out slightly in IE - sometimes. The 'footer' seems to take ages to pop up too, so there must be conflicts somewhere.

Anyone who can shed some light on things and save my sanity will be automatically given "Heaven vouchers" (redeemable at all good afterlife destinations).

I'm sure there's a lot of the CSS that could be leaner and meaner, but as long as it works I'll be happy. I'm a photographer not a web designer, so I'm starting to crack under the strain!!

the page is up for inspection at www.agpix.plus.com/adriangould/index.html

Hope someone out there can do the Samaritan thing ,

Thanks in advance.

Adrian

[JMulder]

What is it exactly that is wrong? I just viewed the site in IE6 Firebird 0.7 and everything seems to work fine.

[John Colby]

Adrian

What's wrong? Looks good to me on Firebird.

I particularly like the stuff on http://www.agpix.plus.com/adriangould/notyet.html

[AGPIX]

Hmm. Thanks for input people - I think my rickety Win98 and nasty-slow dialup may be causing trouble for me. Also my ISP is having FTP hassle today, so sadly those little penguins have disappeared for a while (changed some links and then lost FTP before I could update!).

I'll push on with the rest of the site and maybe get more feedback when it's live. Thanks again.

Adrian

[earther]

Once the page loaded (it took over a minute on dialup), it looked pretty much OK. However, the fonts in the links, footer and login footer are so small they are unreadable And the text under the RH photo runs over the footer a bit (because the footer is pinned to the middle column and it is not the longest). Also two of the index page images are broken - check your paths. I'm on IE 6 - 800 x 600 - small font.

[AGPIX]

Hi earther and others - apologies for download size - images haven't been optimised cos I'm so caught up in the CSS! You've highlighted the footer problem which is something that I can't figure out, despite reading around. How do I get the little blighter to just stick to the bottom of the window (even when it's resized after loading). The only 'solution' I found (and am using) was to set a height % for the main content which is the longest (usually, unless you change your text to small!) and forces the footer down to a reasonable position. There must be a better way?

Also, I need the RH column content to stay in/on its own background, rather than overlap with the central text. If you view at 800 x 600, or resize the window, in theory the central column should narrow and get longer - but the RH pic intrudes.

The layout started life based on stuff I read at ALA, but it's now been tweaked about and had so much style added that I don't know what is causing the trouble.

Any further insights welcomed.

Adrian

[AGPIX]

btw, I realise that restricting the central columns height to a screen % conflicts with it getting longer - so how do I get the footer to behave independently (so I can ditch this restraint)?

[earther]

Adding a <br / > or two at the end of the middle column should take care of the footer problem. Also make sure to check at higher resolutions because it will be more pronounced then and you may have to add more <br /> (which will maybe add more blank space than you really want - it's a compromise) to compensate.

The RH column pics (and login box) do not overlap until the window is resized quite a bit. This is just the nature of CSS if you are doing fluid designs. At least I haven't found a way around it yet.

[Paul O'B]

Hi,

The layout is completely broken in ie5 and ie 5.5. The main culprit is this definition:

#centercontent {
  margin: 0 5px 0 5px;
  padding:10px 2px 2px 6px;  
  top:167px;
  height:67%;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
  font-size: .8em;
  color:#333;
  background:#f6f6f6;
  voice-family: "\"}\"";
  voice-family: inherit;
  margin-left: 187px;
  margin-right:187px;
  }
 html>body #centercontent {
	 margin-left: 187px;
	 margin-right:187px;
  }

You have placed the margin-left and margin right to 187px for all browsers except ie5 and 5.5 which you have only given margins of 5px;
e.g.

 margin: 0 5px 0 5px;

Therefore your whole navigation is on top of the content in these two browsers. Change the margin to something sutable to avoid this situation.

Also as your navigation is absolutely placed then the footer will not know anything about it. The only way to keep the footer lower is to ensure that the centre content is longer than the left navigation.

Alternatively you could simply float the left navigation instead of placing it and then all that would be needed would be <br style="clear:both /> just before the footer in order for it to stay clear.

Also your banner is not high enough for the content in ie5 and 5.5. and the images poke below the banner. You will need to take the broken box model into account on this element also.

Hope that helps.

Paul

[AGPIX]

Earther, you got it on the <br /> front - I want my footer to actually be on the screen when the viewer's using a decent-sized monitor and resolution, which is why I was steering clear of the return key to stretch the middle column. But maybe I'll just need to live with it.

OK, Paul - my brain hurts. I think I had tried a weird mixture of some of what you suggest and gave up - probably had the left nav positioned rather than floated when I tried the "clear" option.

As I say, I'm a photographer not a web designer, so I've been cutting and pasting and then tinkering with the results. Not sure I understand how I _should_ specify margins so <IE6 doesn't break.

I'll have another go and see how I get on!

Cheers,

Adrian

[earther]

Earther, you got it on the <br /> front - I want my footer to actually be on the screen when the viewer's using a decent-sized monitor and resolution, which is why I was steering clear of the return key to stretch the middle column. But maybe I'll just need to live with it.

Another option would be to reduce the height of the photo in the RH column. BTW do you really want to do this? <title>hire photographer scottish borders freelance photographer scotland edinburgh photography</title>

Edit:

Just noticed that this illegible text is appearing above your logo: "hire photographer scottish borders innerleithen photography scottish freelance photographer scotland edinburgh"

[AGPIX]

Right, I've tried implementing a couple of changes, but it's still not quite right (by the way John, the penguins are back now ).

I've used float:left and float:right on the two outer columns, added a couple of < /br> s and the clear:both style at th end of the central one, all of which seems fine under IE6. But... the thing that still keeps happening on my 21" 1024x768 display is that the page seems 10px too wide (ie the width of the scroll bar), which immediately adds the horizontal scrollbar to the bottom of the screen. It's also 'forcing' the righthand column's pictures left by 10px, so once again they jut into the centre column.

Paul, I don't have a way of checking IE 5/5.5 yet, but I've changed the values in the 'banner' box - am I on the right track?

I've also ditched the voice:inherit rules where I don't think I need them, but I'm sort of guessing...

Oh dear. Anyway, my eyes are getting buggy (too!) so I'm off for a cup of Earl Grey.

Fingers crossed more progress can be made...

Adrian

[AGPIX]

Hi Earther - the illegible text is not from the <title> - it's from the keywords <div> and seems to help with SEO : ) - pretty much first thing the engines will read from the body.

[earther]

Oh dear. Anyway, my eyes are getting buggy (too!)

Been there, done that. CSS seems to have that effect! Onward and upward!!

[earther]

Hi Earther - the illegible text is not from the <title> - it's from the keywords <div> and seems to help with SEO : ) - pretty much first thing the engines will read from the body.

Yeah, I saw that they were two different things. But why compromise your design? Maybe you could make the font color the same as the BG color so the text would be 'invisible' to the eye but not the search engines?

[Paul O'B]

Hi,

The center content is displaying in ie5 and 5.5. ok now.

However the footer is still under the nav in mozilla 1.2+. You need to add clear:both to your footer style in order for mozilla to clear.

There will still be a problem with the right hand side absolutely placed element as this also overides the footer in Mozilla. You would be better off floating it as you have done with the left nav and moving the html code up above the html for the centre content. This will allow it to display properly and for the footer to clear in other browsers.

Alternatively ensure the centrecontent is longer than the side column.

The images (alamya agea) in the left nav are underneath each other in Mozilla because you have iserted a <div> inside a <li> element which is not allowed and is causing a line break. You need to find a way to achieve this using valid code. (e.g. put the images inside a list element and not a div.)

There are a lot of errors on your page that really need fixing otherwise you will keep running in to problems. Running your page through the w3c validator shows that there are 260 errors. Most of these are javascript and can be commented out quite easily but there are a number of structural errors such as incorrect nesting of block elements inside inline elements etc.

You have also used the same id more than once. If you need it more than once then it should be a class.

It would be worthwhile downl;oading mozilla or firebird to test your work on as they will show up any errors straight away. You can also download ie5 , 5.5 from here : http://www.skyzyx.com/archives/000094.php which will help with testing.

Hope that isn't all too much information

Paul

[AGPIX]

...several little shimmies back. Ah, I knew I would rue the day I decided to build the site in CSS. The purist in me should have listened to the realist - learning a whole new set of rules (when I don't even claim to know the old ones!) is probably not the best thing to try when you need it done yesterday! Ah well. I used to love playing with Lego when I was a kid, but Lego you can see and feel - I think it's this whole inheritance thing that takes time to get your head around.

Paul, really appreciate the info and I had guessed there would be more bad code - but part of me knows that a big (and apparently growing) percentage of site visitors will be using IE6 (because either they don't know any better, or like me they haven't gotton round to doing anything about it!). Obviously I need to make sure the pages don't break in at least IE6... and then I can refine things from there (when my head has stopped reeling )

Your float:right suggestion, once I had twigged the html order is as important as the stylesheet order works for me - how was it for Mozilla ?

I have that horrible feeling you get when you pull what you thought was a loose thread and your whole sweater starts to unravel - might be time to buy a book...

By the way, here's another query:
Earther says "Maybe you could make the font color the same as the BG color so the text would be 'invisible' to the eye but not the search engines?"

Well, all my SEO reading on the web tells me this is a Naughty Thing in html - not surprisingly, it's frowned on by the engines. I know it must be trickier (but I imagine not impossible) to detect such behaviour when using an external style sheet, so how good an idea is it in CSS? I know people do all sorts of unspeakable things with javascript and layers and oh my but I'm just not up to that sort of audacity. Hence my (barely) visible approach.

Well, that's the weekend over (again) and time for me to leave my bugs alone for now. I'll pop back during the week and see if I got an F- in class

Thanks again for the input.

May all your stylesheets validate.

Adrian

[jag5311]

Off Topic:


I am not sure how many websites you have done, but I bet you write some incredible articles/content for websites. You have this great method of using interesting phrases and words. It brings a smile to my face reading your posts, because they are filled with jargons, laughs, sarcasm's, and more

Good luck

[adamjaskie]

Yeah, I saw that they were two different things. But why compromise your design? Maybe you could make the font color the same as the BG color so the text would be 'invisible' to the eye but not the search engines?

Or apply display: none to it. Search engines ignore css, so it would be visible to them.

[AGPIX]

Well, first of all thanks to jag5311 for your kind words - you'll make me go all shy ! And adamjaskie - if you use display:none presumably you can dispense with any other formatting?

I've been wincing at the apparently endless list of errors my supposedly 'nearly ready' layout spewed out of the various validator tools at W3C and elsewhere. Nevertheless, I am pressing on in a sort of pale imitation of Jean-Luc Picard, and my upper lip is barely quivering. The rest of me however, now resembles jelly.

(Paul) I've managed to get the errors down into double figures (rather than triple!!), and when I test the site for HTML4.01 validation it's not too bad - it just doesn't validate! As XHTML1.0 most of the errors are in the metatags - haven't found a good place for "plain English" guidance yet. I'll have to start trawling the other forums here for answers...

...but back to the CSS...

Having downloaded the quite impressive Firebird, most of my changes now seem to satisfy there, but now IE6 doesn't like my classes for the left navigation - the .sub, .section and .prints variations don't get applied. I haven't dared try IE5.5 yet in case I cry


I have spent A G E S trying to figure how on earth to get my two 'rollover' links (to the stock agencies) to work for everyone and be positioned correctly. As soon as I make them <li> elements, they inherit the same width as the rest of the list - I'm trying to make them simply sit side by side (which will stop the rest of the column being thrown out of sync) and then vary the opacity on mouseover - surely not too much to ask, but I'm still bamboozled.

Anyway, the latest attempt can be seen at http://www.agpix.plus.com/adriangould/index-rev.html for any of you able to shed fresh light on the situation. Much obliged.

Now, as a break from CSS I'm off to learn about XHTML - oo, I can hardly wait...

[Paul O'B]

most of the errors are in the metatags - haven't found a good place for "plain English" guidance yet

You are using a html doctype but you have used xhtml closing tags in your meta tags />. Apart form that the page nearly validates.

sub, .section and .prints variations don't get applied

As far as I can see they seem to get applied ok in IE6. However you have defined .prints a{} and overridden most of the declarations in the .prints a:link (hover and active states) so don't get confused there.

You also have the alink etc still defined in your body tag which you should remove to the stylesheet unless you have a reason for it (some old browsers or something).

Do you really need all the /*/*/ I assume that they're their to hide things from IE5 mac. (As I don't test on a mac I can't say whether they're needed or not.)

Paul

[AGPIX]

Hi Paul et al - thanks for extra guidance - I'm still thrashing about like a beached porpoise, only having less fun!! Sheesh, I'm taking a break for a while to recover. It's like spinning plates.

You know how snails suck their eyes back inside their heads? Ever thought that must feel good? Right now I want to be a snail...

(must be weird seeing the inside of your own head though!)

Can anyone recommend a paper-based book that takes worked examples of all this and includes documentation of bugs/hacks/workarounds for the evil browsers? (and includes a free damp cloth for brow-mopping). I have time to learn this but not always in front of a screen.

I'll stick version 97681 of the page up when there's some hint of progress!

Thanks

Adrian

[DaveMaxwell]

The HTML Utopia book is supposed to be really good: http://www.sitepoint.com/books/css1/

[jag5311]

matter of fact, is there a link that talks about each browser specifically and what its quirks are with CSS and positioning?

[AGPIX]

It MUST be too good to be true, but so far it looks OK in IE6, Mozilla/Netscape/Firebird and Opera 6 - I still haven't got 5.5 (I downloaded the standalone but don't know how to install it so I can run it parallel to 6...?).

Yes, the nirvana of CSS and 4.01 validation is mine!! Sadly, it's too late to go to the off-license and celebrate with a can of well-earned cider . Instead, I simply share my bliss with the good people of this board. I feel like a proud new Dad!

Anyway, the longest journey starts with a single step and all that, so many thanks to those of you who helped me get going.

I've had to drop my fancy-schmancy rollovers because I just couldn't figure a way to get them to work, IE6 still seems to occasionally load the page about 10 pixels too wide, and my footer still doesn't do EXACTLY what I'd like, but hey, I'm wearing my little yellow badges with pride and I'm telling myself it's good enough!

Next stop... vurld domination!

Hasta luego

Adrian