SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Member AGPIX's Avatar
    Join Date
    Nov 2003
    Location
    scotland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS is making me twitch - guru assistance needed!

    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

  2. #2
    1-800-JMULDER JMulder's Avatar
    Join Date
    May 2001
    Location
    The Netherlands
    Posts
    1,745
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is it exactly that is wrong? I just viewed the site in IE6 Firebird 0.7 and everything seems to work fine.
    Jeroen Mulder

    w: www.jeroenmulder.com

  3. #3
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adrian

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

    I particularly like the stuff on http://www.agpix.plus.com/adriangould/notyet.html
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  4. #4
    SitePoint Member AGPIX's Avatar
    Join Date
    Nov 2003
    Location
    scotland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Member AGPIX's Avatar
    Join Date
    Nov 2003
    Location
    scotland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    SitePoint Member AGPIX's Avatar
    Join Date
    Nov 2003
    Location
    scotland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)?

  8. #8
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The layout is completely broken in ie5 and ie 5.5. The main culprit is this definition:
    Code:
    #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.
    Code:
     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

  10. #10
    SitePoint Member AGPIX's Avatar
    Join Date
    Nov 2003
    Location
    scotland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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.
    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"

  12. #12
    SitePoint Member AGPIX's Avatar
    Join Date
    Nov 2003
    Location
    scotland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    SitePoint Member AGPIX's Avatar
    Join Date
    Nov 2003
    Location
    scotland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AGPIX
    Oh dear. Anyway, my eyes are getting buggy (too!)
    Been there, done that. CSS seems to have that effect! Onward and upward!!

  15. #15
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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.
    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?

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  17. #17
    SitePoint Member AGPIX's Avatar
    Join Date
    Nov 2003
    Location
    scotland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile One step forward...

    ...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

  18. #18
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  19. #19
    SitePoint Zealot
    Join Date
    Nov 2003
    Location
    Houghton, Michigan
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by earther
    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.

  20. #20
    SitePoint Member AGPIX's Avatar
    Join Date
    Nov 2003
    Location
    scotland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy ...and I'm spent!

    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...

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  22. #22
    SitePoint Member AGPIX's Avatar
    Join Date
    Nov 2003
    Location
    scotland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    twitch twitch

    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

  23. #23
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,294
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    The HTML Utopia book is supposed to be really good: http://www.sitepoint.com/books/css1/
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  24. #24
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    matter of fact, is there a link that talks about each browser specifically and what its quirks are with CSS and positioning?

  25. #25
    SitePoint Member AGPIX's Avatar
    Join Date
    Nov 2003
    Location
    scotland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Tears of joy!!

    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •