SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    web design beginner hits snag

    Hello,

    I am new to this site. I'll try not to make any newbie gaffes.

    I'm just learning web design. I am using the Sitepoint book, "Build Your Own Web Site The Right Way Using HTML & CSS, 1st Edition" as a guide, and it has been excellent.

    I use a Mac. The sample site I built looks exactly like it's supposed to -- provided I view it through Safari. But when I view it through Foxfire (on my same Mac) most of the styling is gone; the site looks awful, completely unacceptable. I uploaded the files to my web site and viewed it remotely -- I think through Mozilla -- with the same poor results as Foxfire.

    I cannot figure out why, and the "Build Your Own Web Site" book does not address this variable.

    Anyone have any insights to this?

    Thanks,

    John Kelin

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Welcome to Sitepoint.

    Can you post a link to your site so we can take a look at the code? If it will not let you post links, please enter like so: mysite dot com.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Whoops! I guess that was an obvious oversight.

    Here's the link:

    [deleted]

    [I tried to post the link, but got a message informing me that in an effort to stamp out spam, only members with ten or more posts can include URLs. Fair enough, but I don't yet rate. I'll try to get around it, omitting dots and backslashes:

    1. home dot comcast dot net

    2. ~johnkelin

    3. index dot html ]

    The site consists of five pages, all of which look fine through Safari. Through Firefox, the "home" (main/index) is all wrong, as does "Club Events". The others look okay.

    All the pages looked bad through Mozilla. I haven't seen it through IE or any other browsers.

    I used these pages as a template for another site I'm fiddling with, and they ALL look wrong through Firefox. So this appears to be an obvious cross-browser issue.

    As a beginner I'm assuming I'm making some obvious error!

    Thanks,

    John Kelin

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,250
    Mentioned
    240 Post(s)
    Tagged
    1 Thread(s)
    Chances are that you forgot some quoting here

    This is the code that links to your style sheet. This is your version:
    Code:
    <link href="style1.css" rel=stylesheet" type="text/css">
    But this is my version of it:
    Code:
    <link href="style1.css" rel="stylesheet" type="text/css">
    The difference is subtle and yet an important one.

    Try that and let us know how it goes.

    PS: thank you for your understanding regarding our anti-spam rules

    And don't worry. We do it all the time (I mean forgetting the quotes or to close an element and things like that)

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked!

    Thanks so much!

    As soon as I saw that dropped quotation mark you pointed out, I figured that was it...

    Not that anyone would be that curious about so trivial a matter, but I uploaded the fixed files to the same site for remote viewing. I'll look at them later from some distant machine, but am quite confident now it'll be fine.

    There's only one thing I don't get: how come it viewed okay through Safari, albeit only on my computer? Well, I shan't worry -- one of life's mysteries.

    Thanks again,

    John

  6. #6
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,250
    Mentioned
    240 Post(s)
    Tagged
    1 Thread(s)
    I think that you were seeing a cached version and therefore it was not the real thing.

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2009
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure about the mac world, but some enhanced text editors will help avoid this.

    One windoze free editor that works for me is called "notepad++"

    TextWrangler may do some similar things.

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all,

    Thank you for the various replies that got me over this particular bump in the road.

    I imagine I'll have additional questions in the future...

    John Kelin

  9. #9
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm having the exact same problem except that it doesn't seem to be coming from the wrong use of quotes.



    <!DOCTYPE html PUBLIC "-W3DTD XHTML 1.0 StrictEN" "http:wwww3orgTRxhtml1DTDxhtml1-strict.dtd">
    <html xmlns="http:wwww3.org1999xhtml">
    <head>
    <title>Baybard</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    link href="cssstyle1.css" rel="stylesheet" type="textcss"
    </head>


    Any ideas? I had to remove all the dots and backslashes because I can't post links.

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    charset=utf-8"

    should be

    charset="utf-8"

    Also, type="textcss"

    should be

    type="text/css"

    You should be able to post that material using the CODE button, though maybe not a link yet.

  11. #11
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,250
    Mentioned
    240 Post(s)
    Tagged
    1 Thread(s)
    Actually, the charset part is OK. But yes, the CSS MIME type should read "text/css"

  12. #12
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply's guys. I have fixed the problem.

    I have one more question that has been bugging me for the longest. I've done what I can to remedy the situation but I can't figure anything out .

    I've attached a picture to use as an example. I can't figure out how to get text to be constrained to the area below the top navigation, to the right of the left sidebar and above the footer.

    If I position it absolutely. The text will eventually overflow into the footer. I've tried floating the left navigation bar and that seemed to work while there was text in the main region but as soon as text is removed the footer ignored the left sidebar and is displayed right under the top navigation as if though the sidebar isn't there.

    Is there anyway for me to constrain the text to that area and have it so that the more content there is the further the footer spaces down to accommodate it?

    Any help would be appreciated.
    Attached Images Attached Images

  13. #13
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,250
    Mentioned
    240 Post(s)
    Tagged
    1 Thread(s)
    When you position something you take it from the normal overflow, that is, you take the element away from its normal position, and tell it where it should be.

    This also happens when you float an element, only that you simply move it as far as it can go either to the left or the right.

    If the element is floated and there's enough room for the next element to fit, the next element will move to one side of the floated element. In your case, there is enough room when there's no text in the main area because the content width and height will be 0 then.

    When you don't want this to happen, you need to clear the next element so it will stay below the floated element.

    float the nav bar and clear the footer (clear:left or clear:both) should do

  14. #14
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by molona View Post
    When you position something you take it from the normal overflow, that is, you take the element away from its normal position, and tell it where it should be.

    This also happens when you float an element, only that you simply move it as far as it can go either to the left or the right.

    If the element is floated and there's enough room for the next element to fit, the next element will move to one side of the floated element. In your case, there is enough room when there's no text in the main area because the content width and height will be 0 then.

    When you don't want this to happen, you need to clear the next element so it will stay below the floated element.

    float the nav bar and clear the footer (clear:left or clear:both) should do
    Thank you so much for your help. Your solution worked great. I appreciate it.

  15. #15
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all,

    Fist of all, I am probably making a newbie blunder by posting there here. I can't seem to find the "new thread" button mentioned in the Sitepoint FAQ. But I found it once before, because I started this thread ("Web Design Beginner Hits Snag") a few weeks ago.

    I have a new question, and I apologize in advance for resorting to appending it here.

    I'm at the point where I'm trying to validate some markup. I'm using the W3C Validation Markup Service. It's quite daunting. At first, it said there were only eleven errors in the page I submitted. This included something in the doctype. I fixed what I thought might be the problem, tried again...and it was up to 103 errors!

    My question, really, is: can anyone offer a few words of advice about validating? How it works, what it all means -- in a general way. I'm not asking for feedback about my particular errors. I'm just hoping to benefit from the experience of those who might read this.

    And if someone could direct me to that "New Thread" button...

    Thanks,

    John Kelin

  16. #16
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,250
    Mentioned
    240 Post(s)
    Tagged
    1 Thread(s)
    It takes practice. Some errors may not be errors at all... just a little something that you forgot to put in the right place and that caused the rest of the document to be wrongly parsed.

    It is hard to give you a guide, but most of the time the parser will give you a hint what's wrong (even if sometimes doesn't get it right itself).

    You simply submit your web page to the parser, by filling the address in the right field (or, if the file has not been published yet, you upload it). The parser reads the document and tries to make any sense of it. If he finds something that he doesn't understand, it will log an error. When it is finished, it will list the errors found and what it thinks it is the possible cause of the error. Then you start to look at your code in the same order the errors where listed.

    Even if it doesn't get it right, the parser does give you a hint of the area where the error is.

    PS: The new thread button is under "forum tools" at the top of the page, under the ad, and to the right (you need to be out of any thread)

  17. #17
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thank you for the insights! I'll try again.

    And thanks for helping me navigate my way to the new thread button.

    John Kelin

  18. #18
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Sitepoint! I`m new in webdesign.... i work on a new project.. but i don`t know much about gd library. Can someone send me a good tutorial? thanks

  19. #19
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by yulyan View Post
    Hello Sitepoint! I`m new in webdesign.... i work on a new project.. but i don`t know much about gd library. Can someone send me a good tutorial? thanks
    Two things. One, you're doing what we call "hijacking a thread." You should ask this in a separate, standalone thread. I know you didn't know, so something to remember for next time. Two, I found a stack of tutorials simply by Googling "gd library" tutorial . How good they are, I don't know.


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
  •