Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hi there,
    I have designed a site on my Mac usng HTML/CSS in text edit and it is perfect in Safari and I thought it was ready to go live. I however just tried it in Internet Explorer on a PC and it appears the CSS isn't being read as none of the styling is implemented.
    Highly frustrating, though I'd give you a bit of info on the structure to see if it highlights my mistake.

    The site is in one folder, so all the html pages and CSS sheet are in that and then images are in seperate a folder in that one (images seem to be fine though).

    Here is the header of the site which includes my meta tags.

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>BREAK COMMUNICATIONS</title>
    <meta name="keywords" content="Break, break communications, Break Communications Home Page, Home page, Brands, communication, Public relations, PR, music, consultancy, youth, engagement, outreach, digital, events, partnerships, international, amplification, development, integrated, agency, online, print, press, bespoke, campaigns, strategic, creative, positioning, niche, specialist, marketing, messaging"> </meta>
    <link rel="stylesheet" type="text/class" href="BREAKstylesheet.css">
    </head>

    I'm not sure if this is an issue of Text/Edit files not being read properly by Notepad or I have missed off something essential for Internet Explorer.

    One thing I have noticed is that if I open up the files in Notepad the code is not split up in rows and it in one long code... however as the text apears in the right order in html at least that this isn't an factor.

    Any help or insight here would be really appreciated, as I mentioned earlier this is really frustrating me!

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Seems to me that
    <link rel="stylesheet" type="text/class" href="BREAKstylesheet.css">
    should be

    <link rel="stylesheet" type="text/css" href="BREAKstylesheet.css">
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You can Word Wrap your code in Notepad, but I wouldn't recommend it. I've seen certain browsers (mostly older versions of Chrome) misinterpret the line breaks Word Wrap creates.

    If you want a Notepad clone that does word wrapping without this problem, try Notepad++ or Visual Web Developer Express (they're both free).

    Oh yeah, and listen to AlphaMare, because she's smart and just told you what it is you should do.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Thanks guys and Alpha Mare, you were right, it's sorted the styling out now so eveything is in place which is great so thanks for that. There are however still 2 issues though.

    The majority of my images are not showing up. Do you guys have any experience of why this would happen in ie and not Safari?

    All my images are from Photoshop and have been saved for web as Gif/png files, they're in a folder called 'Images' withing the folder and are either loaded in CSS like this;


    #contentbackground {
    background-image:url(Images/Home-background-image.gif); width:970px; height:400px;
    }

    or in HTML like this

    <img src="Images/Twitter-logo.png"/>

    Also, the site is not sitting centre on the page in ie which it does in Sarafi... is there anything I have to do specifically to centre it here?

    Any help again would be hugely appreciated.

    Thanks again for everything so far,
    John

  6. #5
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    The image and centering stuff is a bit harder to do without seeing the page - can you get it online and send a link?

    I always test my sites live on my own server, inside a folder called "development" so I can test it in all the browsers and on a bunch of different computers, etc.
    Maybe you could do something similar? I know you say you're not ready to take it live yet - but maybe set up a folder to put it in for now so you (and we) can see what needs to be fixed, and how to go about it.

    But just as a possibility - is it possible your image folder is actually called images instead of Images? Case-sensitivity is very important to the browsers.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  7. #6
    Junior Member
    Join Date
    Apr 2010
    Location
    Queensland, Australia
    Posts
    25
    Member #
    21819
    Hey JONNYB.

    Keep in the practice of making everything lower-case when designing for the web. Some old browsers and servers can have problems with Upper-case letters and using only lower-case will eliminate any rare problems, but also you wont have to keep guessing if you used Upper-case of lower-case with names of files etc.

    I've noticed on your code pasted about, background-image css property, you don't specify a height and width is CSS. That is only relavent in HTML.

    For centering images, CSS:

    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto
    }

    Then in HTML on the <img> tag, add class="centered" eg.:

    <img src="images/example.png" class="centered" alt="" width="" height="" />

  8. #7
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    HTML Code:
    img.centered {
      display: block;
      margin-left: auto;
      margin-right: auto
    }
    i don't know that just tossing that out there is going to work in this guys layout. i think that assumption is premature.

    if it works in safari but not ie, chances are all you need to do is work with the rendering mode of ie via a meta tag provided by microsoft.
    <meta http-equiv='X-UA-Compatible' content='IE=8' /> after implementing this, you will need to delete your IE browser cache, close, and reopen the browser to see the effects of the meta to see if this has fixed it or not. without reseting the browser, it will continue to load from the cached mode declaration.

    while($get_it !== true){ continue; }

  9. #8
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hey All,

    Thanks for all the advice so far, hopefully I'll be able to get this sorted.

    I've just checked and my images folder is indeed Images with an uppercase I.
    I'm going to change it around this evening and see if it fixes the problem. Just done checks on some other browsers and Chrome and Firefox are all fine, it is just Internet Explorer.
    Do I need to change names of the images so everything is lowercase also?

    With regards to the placement in the page, I'll try the Meta tags first and then if that doesn't work call the placement in CSS and HTML.

    Thanks again,
    John

  10. #9
    Junior Member
    Join Date
    Apr 2010
    Location
    Queensland, Australia
    Posts
    25
    Member #
    21819
    Hey JONNYB.

    You don't need to change the names of your images to lower-case, it just helps keep things simpler. If you know all file names and folders are lower-case, you can eliminate the chance for errors caused by paths that are case-sensitive.

    Its hard to know how you have centered you page, or how you have coded it to do so. But a general practice to center all elements on a web page is through wrapping all you content into a container. The container DIV (class="container") is then set to be centered through the use of margin: auto.

    /* centered DIV on a fixed width layout */
    .container {
    width: 960px;
    margin: 0 auto;
    }

    /* centered DIV on a liquid layout */
    .container {
    width: 80%;
    margin: 0 auto;
    }

    Width values can be changed to suit.

    If there still is a problem, you really need to get in on your server and posting a link for all to see.

  11. #10
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hey all,
    So thansk for all your help but I'm afraid there problem with the images has still persisted.

    This is not in a server yet, I'll sort this out asap and upload the file for you.

    Do any of you have any idea why it won't be picking up the images?

    I've looked at the code replicated in notepad and there appears to be a number of strange characters in there, little sqares etc... do you think this could be affecting it? I'm not so sure myself as it the positioning etc is all fine, but do you know whey these might be appearing? if so I could possibly go through all the code and try and clean it up...


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:23 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com